实战：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