实战:vue仿dos命令界面

欢迎关注前端小讴的github,阅读更多原创技术文章

业务需求

vue项目中弹出窗口,在窗口中执行dos命令

技术栈

  • vue + nodejs(child_process+koa)
  • child_process是nodejs的子进程模块,child_process.exec可创建shell,然后在shell里执行命令。然而,child_process并不在webpack打包中,页面中打印child_process是一个不包含任何方法的空对象{},因此需要用nodejs做服务端

完成效果

image

服务端: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>
208 声望
16 粉丝
0 条评论
推荐阅读
Promise源码渐进式解读(五)
Promise源码解读系列的最后 1 篇,详解Promise构造函数的最后几个方法及.finally,封装isArray判断对象是否为数组:

小讴阅读 688

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木172阅读 13.8k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 6.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.5k评论 6

208 声望
16 粉丝
宣传栏