关于javascript:实战vue仿dos命令界面

欢送关注前端小讴的 github，浏览更多原创技术文章

业务需要

vue 我的项目中弹出窗口，在窗口中执行 dos 命令

技术栈

• vue + nodejs（child_process+koa）
• child_process 是 nodejs 的子过程模块，child_process.exec 可创立 shell，而后在 shell 里执行命令。然而，child_process 并不在 webpack 打包中，页面中打印 child_process 是一个不蕴含任何办法的空对象 {}，因而须要用 nodejs 做服务端

实现成果

服务端：cmd.js

const Koa = require("koa"); // 引入 koa
const Router = require("koa-router"); // 引入 koa-router

const app = new Koa(); // 创立 koa 利用
const router = new Router(); // 创立路由，反对传递参数

const bodyParser = require("koa-bodyparser"); // 解决 post 申请
app.use(bodyParser()); // 配置 post bodyparser 的中间件

const cors = require("koa-cors"); // 设置跨域
app.use(cors()); // 全副容许跨域

const iconv = require("iconv-lite"); // iconv 进行转码
iconv.skipDecodeWarning = true;

const child_process = require("child_process");

// 对 exec 进行封装，返回一个 Promise 对象，便于解决
function doShellCmd(cmd) {
  let str = cmd;
  let result = {};
  return new Promise(function(resolve, reject) {child_process.exec(str, { encoding: "binary"}, function(
      err,
      stdout,
      stderr
    ) {// console.log(iconv.decode(stdout, "cp936"));
      if (err) { // 失败时也返回失败的回文
        result.errCode = 200;
        result.data = {data: iconv.decode(stdout, "cp936"),
          success: "200",
          message: "失败"
        };
        if (result.data.data === "") {
          result.data.data = `’${str.split("")["0"]
          }’不是外部或外部命令，也不是可运行的程序或批处理文件 `;
        }
        resolve(result);
      } else { // 胜利时返回回文
        result.errCode = 200;
        result.data = {data: iconv.decode(stdout, "cp936"),
          success: "200",
          message: "胜利"
        };
        resolve(result);
      }
    });
  });
}

// api
router.post("/koa/action/doShellCmd", async ctx => {// console.log(ctx.request.body.cmd);
  let result = await doShellCmd(ctx.request.body.cmd); // 调用 exec
  ctx.response.status = result.errCode;
  ctx.response.body = result.data;
});

app.use(router.routes());
app.listen(3000);
console.log("app started at port 3000...");

接着本地启动这个服务~

接口：cmd.js

import axios from "@/libs/api.request"; // 这里是封装好的 axios，若未封装可独自引入并应用

// 执行命令语句
export const doShellCmd = data => {
  return axios.request({
    url: "/koa/action/doShellCmd",
    data,
    method: "post"
  });
};

记得在前端配置跨域，配置好后重启我的项目

客户端：cmd.vue

<template>
  <el-dialog class="cmd-dialog"
             title="常用工具"
             :visible.sync="dialogVisibleCmd"
             top="10vh"
             @close="closeCmd">

    输出命令：<el-input v-model="command"
              @keyup.enter.native="optionCmd"
              :disabled="contentLoading"
              style="width:300px">
    </el-input>
    <el-button type="warning"
               size="medium"
               @click="resContent='';command=''":disabled="contentLoading"style="float:right"> 清空 </el-button>
    <el-button type="success"
               size="medium"
               @click="optionCmd"
               :disabled="contentLoading"
               style="float:right;margin-right:10px"> 执行 </el-button>

    <p v-html="resContent"
       v-loading="contentLoading"
       element-loading-text="连贯中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
       style="margin:20px 0 10px 0;white-space:pre-wrap;background:#000;color:#fff;padding:10px;height:400px;overflow:auto"></p>

  </el-dialog>
</template>

<script>
import {doShellCmd} from "@/api/cmd";

export default {data () {
    return {
      dialogVisibleCmd: false, // dialog 是否可见
      command: "", // cmd 命令
      resContent: "", // cmd 后果
      contentLoading: false
    };
  },
  methods: {
    // 关上 dialog
    openCmd () {this.dialogVisibleCmd = true;},
    // 执行 ssh
    async optionCmd () {
      this.resContent = "";
      this.contentLoading = true;
      this.resContent = (await doShellCmd({ cmd: this.command})).data.data;
      this.contentLoading = false;
    },
    // 敞开 dialog
    closeCmd () {
      this.command = "";
      this.resContent = "";
      this.contentLoading = false;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>