devops-8-django平台开发

webssh参考

• 安装 pip install paramiko==2.4.1
• vue webssh 参考
• vue全家桶指引
• vue cli 官方文档
  orm模型

安装 element报错

下载镜像
docker pull vuejs/ci
启动镜像
docker run  -itd -p 8889:8080 -v /root/src:/root/src vuejs/ci
配置npm源
npm config set registry https://registry.npm.taobao.org
安装cli
npm install -g @vue/cli
创建项目
cd src
vue create webssh
vue ui
启动
npm run serve

npm i element-ui -S

改mac 本地安装

mkdir demo
yarn init  -y
cnpm  i @vue/cli -D
npx vue create  project

安装vue ant design

• npm install ant-design-vue@next --save

安装 ant design pro

安装yarn

sudo npm install --global yarn
yarn config set registry https://registry.npm.taobao.org

git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git my-project
cd my-project
yarn install
yarn run serve

取消eslint语法检查
vue/my-project/vue.config.js
  // lintOnSave: undefined,
  lintOnSave: false,

清空缓存
yarn cache dir
yarn cache clean

• 参考教程
  vue django webssh
  xterm websocket实现 测试ok

Webssh.vue

<template>
  <div >
      <div ref="terminal" />
  </div>
</template>
<script>
import 'xterm/css/xterm.css'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { AttachAddon } from 'xterm-addon-attach'

export default {
  name: 'terminal',
  data() {
    return {
      term: null,
      socketUri: `ws://14.29.251.27:8888/room/`,
      socket: '',
      accessToken: 'token',
    }
  },
  mounted() {
    this.initTerm();
  },
  beforeDestroy() {
    this.socket && this.socket.close();
    this.term && this.term.dispose();
  },
  methods: {
    initTerm() {
      // 1.xterm终端初始化
      const term = new Terminal({
        rendererType: "canvas", //渲染类型
        rows: 40, //行数
        cols: 100, // 不指定行数，自动回车后光标从下一行开始
        convertEol: true, //启用时，光标将设置为下一行的开头
        // scrollback: 50, //终端中的回滚量
        disableStdin: false, //是否应禁用输入
        windowsMode: true, // 根据窗口换行
        cursorStyle: "underline", //光标样式
        cursorBlink: true, //光标闪烁
        theme: {
          foreground: "#ECECEC", //字体
          background: "#000000", //背景色
          cursor: "help", //设置光标
          lineHeight: 20,
        },
      });
      // 2.webSocket初始化
      if (this.socketUri === '') return;
      // this.socket = new WebSocket(this.socketUri, this.accessToken);    // 带 token 发起连接
      this.socket = new WebSocket(this.socketUri)
      // 3.websocket集成的插件,这里要注意,网上写了很多websocket相关代码.xterm4版本没必要.
      const attachAddon = new AttachAddon(this.socket);
      const fitAddon = new FitAddon() // 全屏插件
      term.loadAddon(attachAddon);
      term.loadAddon(fitAddon);
      term.open(this.$refs.terminal);
      fitAddon.fit();
      term.focus();
      this.term = term;
    }
  }
}
</script>

consumers.py

from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer
from webssh.tools.ssh_host import ssh_host
import traceback
#from asgiref.sync import async_to_sync


class ChatConsumer(WebsocketConsumer):
    def __init__(self):
        print(11111)
    def websocket_connect(self,message):
        print('开始连接',message)
        print(message)
        self.accept()
    def websocket_receive(self,message):
        try:
            print('收到消息',message)
            cmd = message['text']
            res = ssh_host(cmd)
            print('回复消息',res)
            self.send(res)
        except Exception:
            print(traceback.format_exc())
            self.send(1)
    def websocket_desconnect(self,message):
        print('断开',message)
        raise StopConsumer()

ssh_host.py

# coding=utf-8

import paramiko
def ssh_host(cmd):
    hostname = '14.29.251.271'
    # hostname = '127.0.0.1'
    username = 'root'
    password = '****'
    paramiko.util.log_to_file('syslogin.log')     #发送paramiko日志到syslogin.log文件
    ssh = paramiko.SSHClient()          #创建一个SSH客户端client对象
    ssh.load_system_host_keys()         #获取客户端host_keys,默认~/.ssh/known_hosts,非默认路径需指定ssh.load_system_host_keys(/xxx/xxx) 
    ssh.connect(hostname=hostname,username=username,password=password)    #创建SSH连接
    stdin,stdout,stderr = ssh.exec_command(cmd)      #调用远程执行命令方法exec_command()
    res = stdout.read().decode('utf-8')
    print(res)        #打印命令执行结果，得到Python列表形式，可以使用stdout_readlines()
    ssh.close()
    return res

• 启动命令

cd /Users/chenhaohao/code/vue/my-project && yarn run serve