欢送关注前端小讴的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"); // 引入koaconst Router = require("koa-router"); // 引入koa-routerconst 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); } }); });}// apirouter.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>