1 所使用的框架和库
前端: bootstrap3 +vue.js +axios ,其中bootstrap3 用于美化界面,vue.js 用于逻辑处理,axios 用于与后端实现AJAX通信 后端: node.js +express ,其中node.js 用于运行服务器端的javaScript代码,express 用于搭建web服务器 功能目标: 前端点击按钮后,向后端发送请求。后端收到请求后运行exe程序。待程序运行完毕后,给前端一个相应,前端将相应显示在按钮旁边。
2 前端代码
2.1 引用库
需要在HTML中引用库
<!-- CSS 文件 -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- javaScript 文件 -->
<script src="js/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
其中jquery ,axios ,vue 所依赖的文件已经存放在了本地,当然也可以在官网上查找它们的在线引用方式,避免将文件存放在本地
2.2 HTML代码
index.html文件的代码如下
<div id="app">
<button @click="getInfo" type="button" :class="color">
<span class="glyphicon glyphicon-refresh"></span> 启动
<span v-text="info" class="badge"></span>
</button>
</div>
id="app" 是为了方便挂载vue @click=“getInfo” 是vue语法,意思为如果这个按钮被点击,那么触发getInfo函数 type="button" 是bootstrap语法,表明该标签是一个按钮 :class="color" 是vue语法,意思为该标签的class属性用color字段替代(与color字段绑定),color字段的定义将在后文阐述 <span class="glyphicon glyphicon-refresh"></span> 是bootstrap语法,用于插入一个图标 v-text="info" 是vue语法,意思是该标签内的文本将用info字段替代,info字段的定义也将在后文阐述 class="badge" 是bootstrap语法,意思是该标签是具有徽章样式,仅用于美化
2.3 javaScript代码
为了完成按钮事件,还需javaScript代码以实现color,info字段和getInfo函数
<script>
var app = new Vue({
el: '#app',
data: {
color:"btn btn-primary",
info: ""
},
methods: {
getInfo: function () {
var that = this;
axios.get('/startPlatform').then(
function (res) {
that.color=res.data.color
that.info = res.data.info
},
function (err) {
that.color='btn btn-danger'
that.info = err
}
)
}
}
})
</script>
至此,如果我们直接使用浏览器打开html文件,那么会得到如下结果 一旦点击按钮,由于服务器并不存在,发送的get('/startPlatform') 请求必然会失败,那么会得到如下结果
3 后端代码
首先新建一个server.js文件 然后新建一个public文件夹,将之前编写的index.html文件放入public文件夹中 server.js文件中的代码如下
var express = require('express');
var app = express();
app.use('/public', express.static('public'));
app.get('/', function (req, res) {
console.log("跳转到主页");
res.redirect("/public/index.html");
})
app.get('/startPlatform', function (req, res) {
console.log("启动程序");
var err=executor(res);
})
var server = app.listen(8050, function () {
var host = server.address().address
var port = server.address().port
console.log("服务器建立,访问地址为 http://%s:%s", host, port)
})
上文中executor(res) 函数是用于启动exe程序的,其实现如下
function executor(res) {
var exec = require('child_process').exec, child;
var exec_path = "AlgorithmIntegrationPlatform.exe";
child = exec(exec_path, function (error, stdout, stderr) {
if(error) return res.send({color:'btn btn-danger',info:'启动失败,请检查集成平台'});
res.send({color:'btn btn-primary',info:'已成功启动'});
});
}
如果exe程序成功启动,那么返回一个Json
{color:'btn btn-primary',info:'已成功启动'}
如果exe程序启动失败,那么返回一个Json
{color:'btn btn-danger',info:'启动失败'}
4 运行效果
在server.js的目录下启动命令行,然后使用node启动服务器
node server.js
这里需要注意的是,如果目录下还未安装express框架,那么在运行server.js之前还应该安装express框架,否则会报错。命令如下
npm install express
如果服务器成功启动,则可以通过网址http://localhost:8050/ 访问index.html 点击按钮之后,如果exe启动成功,则会得到如下结果 如果exe启动失败(比如名称错误),则会得到如下结果
|