歡迎關注前端小謳的github，原創技術文章

業務需求

vue項目中彈出窗口，在窗口中執行dos命令

技術棧vue + nodejs(child_process+koa)

child_process是nodejs的子進程模塊，child_process.exec可創建shell，然后在shell里執行命令。然而，child_process并不在webpack打包中，頁面中打印child_process是一個不包含任何方法的空對象{}，因此需要用nodejs做服務端

完成效果

服務端：cmd.jsconst 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.jsimport axios from "@/libs/api.request"; // 這里是封裝好的axios，若未封裝可單獨引入并使用

// 執行命令語句

export const doShellCmd = data => {

return axios.request({

url: "/koa/action/doShellCmd",

data,

method: "post"

});

};

記得在前端配置跨域，配置好后重啟項目

客戶端：cmd.vue

title="常用工具"

:visible.sync="dialogVisibleCmd"

top="10vh"

@close="closeCmd">

輸入命令：

@keyup.enter.native="optionCmd"

:disabled="contentLoading"

style="width:300px">

size="medium"

@click="resContent='';command=''"

:disabled="contentLoading"

style="float:right">清空

size="medium"

@click="optionCmd"

:disabled="contentLoading"

style="float:right;margin-right:10px">執行

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">

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;

}

}

};

總結

以上是生活随笔為你收集整理的html仿命令行界面,实战：vue仿dos命令界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。