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', //vue挂载点
data: {
color:"btn btn-primary",//color字段
info: "" //info字段
},
methods: {
getInfo: function () {//getInfo函数
var that = this;
axios.get('/startPlatform').then(//给服务器发送需要访问的路径
function (res) {//如果响应成功
that.color=res.data.color//将返回的jason中color字段赋值给color字段
that.info = res.data.info//将返回jason中info字段赋值给info字段
},
function (err) {//如果响应失败
that.color='btn btn-danger'
that.info = err
}
)
}
}
})
</script>
至此，如果我们直接使用浏览器打开html文件，那么会得到如下结果
一旦点击按钮，由于服务器并不存在，发送的get('/startPlatform')请求必然会失败，那么会得到如下结果
3 后端代码
首先新建一个server.js文件
然后新建一个public文件夹，将之前编写的index.html文件放入public文件夹中
server.js文件中的代码如下
/*搭建express服务器*/
var express = require('express'); //express框架
var app = express(); //生成express框架
//设置public为静态的网页
app.use('/public', express.static('public'));
//访问主页后跳转到index.html
app.get('/', function (req, res) {
console.log("跳转到主页");
res.redirect("/public/index.html");
})
//响应请求'/startPlatform'
app.get('/startPlatform', function (req, res) {
console.log("启动程序");
var err=executor(res);
})
//监听端口8050
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;
// exec_path 写入需要执行的exe命令，这里是"AlgorithmIntegrationPlatform.exe"
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启动失败（比如名称错误），则会得到如下结果
