工具
vue2.x + xterm.js
问题描述:
系统中有要显示linux端日志的功能,后台去抓取,并用接口反回即可,但是它会有一些无符号字符串(\u001b),需要转换,可是又有一些类似"[1A"(linux平台下,用于控制颜色,格式等字符)特殊的字符,结果,我的输出内容就如下图所示,有些乱码
下图是应用了xterm.js后的对比,好在是没有乱码了。
1 安装
注意:我是用cnpm方法安装的,有时候,Npm方法安装可能会报错,其实就是依赖中的某些版本问题,但还是根据自己的项目走即可
npm install xterm -s
插件:
fit:格式化插件,xterm.js本身是依赖于【列,行】的设置来控制宽度与高度且是固定死的,fit插件可以根据父元素来自适应你的界面
npm install xterm-addon-fit -s
初始化代码,仅提取关键代码,后面组件里有完整代码
1 HTML部分
<div class="vi-console">
<!-- terminal -->
<div class="console" id="terminal"></div>
</div>
....
==============================================================
2 加载默认资源
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit';
import 'Xterm/css/xterm.css'
....
==============================================================
3 terminal窗体初始化,及自适应插件,初始化文字提示
const term = new Terminal() //初始化
const fitAddon = new FitAddon();//加载fit插件,仅用于窗口自适应
term.loadAddon(fitAddon);
const myTerminal = document.getElementById('terminal') // DOM
term.open(myTerminal);
fitAddon.fit();//自适应界面
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')//初始化显示字符串
term.focus();
==============================================================
以上代码搞定后,你会得到如下界面,文字是write(”“)方法内的文字,有些字符你得去官网看是什么含义,但基本就是转义字符
======================猥琐发育,别浪================================
2 组件代码
<template>
<div class="vi-console">
<!-- terminal窗体 -->
<div class="console" id="terminal"></div>
</div>
</template>
<script>
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit';
import 'Xterm/css/xterm.css'
export default {
name: 'ViConsole',
props: {
terminalOptions: {
type: Object,
default () {
return {
pid: 1,
name: 'terminal',
//cols: 140,//总列宽度,会影响到整体宽度
logLevel: 'error',
windowsMode: true,
fontWeight: '300',
//lineHeight: 2,//行高
cursorStyle: 'underline',
wordSeparator: '……',
theme: {
//terminal窗体样式设置
background: '#0c0c0c',//背景
foreground:'#c2c2c2',//所有文字颜色
cursor: '#fff',//光标颜色
selection: '#868686'//选择后背景颜色
}
}
}
},
log: {
type: String,
default: ""//传入的日志字符串,linux日志
},
},
data () {
let _this = this
return {
term: new Terminal(_this.terminalOptions)
}
},
mounted () {
let _this = this
// 我的项目排版有点小问题,如果不加settimeout,样式会跑偏,默认情况下,_this.initTerm()即可
setTimeout(() => {
_this.initTerm()
}, 200);
},
watch: {
log (newVal, oldVal) {
let _this = this
if (newVal && newVal.length != 0) {
//写入内容
_this.writeTerm(newVal)
}
}
},
methods: {
writeTerm (str) {
//写入内容
let _this = this
_this.term.write(str)
},
initTerm () {
let _this = this
const fitAddon = new FitAddon();
_this.term.loadAddon(fitAddon);
const myTerminal = document.getElementById('terminal')
_this.term.open(myTerminal);
fitAddon.fit();
_this.writeTerm('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
_this.term.focus();
// window.addEventListener('resize', _this.initTerm );
},
},
beforeDestroy () {
let _this = this
//this.terminalSocket.close()
_this.term.dispose()
}
}
</script>
<style scoped>
.vi-console {
width: 100%;
min-height: 240px;
}
</style>
3 应用组件
log:是你的linux日志字符串,接入你自己的API
<vi-consoleVue :log="你的日志代码"></vi-consoleVue>
//示例字符串,自己改下即可
log: "\n\u001b[1A\r\r正在节点 peer0.jgr.llkj.com 查询已安装链码...................................../成功.\r\u001b[1B\u001b[1A\r\r正在节点 peer0.jgr.llkj.com 查询已安装链码..................................... 成功.\r\u001b[1B\n\u001b[1A\rLabel: cclabel0.6.4 PackageID: cclabel0.6.4:8836beb355d04f846b2ccad8c5c2788a79f1e99a5523abab67cb22a37c31960d\r\u001b[1B\n\u001b[1A\r\r正在节点 peer0.qy1.llkj.com 查询已安装链码...................................../成功.\r\u001b[1B\u001b[1A\r\r正在节点 peer0.qy1.llkj.com 查询已安装链码..................................... 成功.\r\u001b[1B\n\u001b[1A\rLabel: cclabel0.6.4 PackageID: cclabel0.6.4:8836beb355d04f846b2ccad8c5c2788a79f1e99a5523abab67cb22a37c31960d\r\u001b[1B\n\u001b[1A\r\r正在节点 peer0.qy2.llkj.com 查询已安装链码...................................../成功.\r\u001b[1B\u001b[1A\r\r正在节点 peer0.qy2.llkj.com 查询已安装链码..................................... 成功.\r\u001b[1B\n\u001b[1A\rLabel: cclabel0.6.4 PackageID: cclabel0.6.4:8836beb355d04f846b2ccad8c5c2788a79f1e99a5523abab67cb22a37c31960d\r\u001b[1B\n\u001b[1A\r\r正在节点 peer0.qy3.llkj.com 查询已安装链码...................................../成功.\r\u001b[1B\u001b[1A\r\r正在节点 peer0.qy3.llkj.com 查询已安装链码..................................... 成功.\r\u001b[1B\n\u001b[1A\rLabel: cclabel0.6.4 PackageID: cclabel0.6.4:8836beb355d04f846b2ccad8c5c2788a79f1e99a5523abab67cb22a37c31960d\r\u001b[1B"
结论:
我这个组件仅是显示一些Linux日志字符串功能,其实它还有很多方法,我暂时没应用上,如果你要开发web-shell组件,你就去官网好好看看其它API,开发完了记得共享哈!