网页服务器/客户端搭建（nodejs启动exe程序）

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启动失败（比如名称错误），则会得到如下结果