实战: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>
208 声望
16 粉丝
推荐阅读
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位数字验证码 {代码...} ...
jenemy赞 48阅读 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...
libinfs赞 42阅读 6.8k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...
乌柏木赞 45阅读 8.5k评论 6
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。