1 The framework and library used

front end : bootstrap3+vue.js+axios, among bootstrap3 Used to beautify the interface ,vue.js For logic processing ,axios Used for back-end implementation AJAX signal communication
Back end : node.js+express, among node.js Used to run server-side javaScript Code ,express Used for building web The server
Functional objectives : Click the button on the front end , Send a request back . The backend runs after receiving the request exe Program . After the program runs , Give the front end a corresponding , The front end will be displayed next to the button accordingly .

2 The front-end code

2.1 Reference Library

Need to be in HTML Reference library in

  <!-- CSS  file  -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- javaScript  file  -->
  <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/[email protected]"></script>

among jquery,axios,vue The dependent files have been stored locally , Of course, you can also find their online references on the official website , Avoid storing files locally

2.2 HTML Code

index.html The code of the file is as follows

<div id="app">
	<button @click="getInfo" type="button" :class="color">
	<span class="glyphicon glyphicon-refresh"></span>  start-up  
	<span v-text="info" class="badge"></span>
	</button>
</div>

id="app" For easy mounting vue
@click=“getInfo” yes vue grammar , If this button is clicked , The trigger getInfo function
type="button" yes bootstrap grammar , Indicates that the label is a button
:class="color" yes vue grammar , It means class Properties with color Field substitution （ And color Field binding ）,color The definition of fields will be described later
<span class="glyphicon glyphicon-refresh"></span> yes bootstrap grammar , Used to insert an icon
v-text="info" yes vue grammar , It means that the text in the label will be info Field substitution ,info The definition of fields will also be described later
class="badge" yes bootstrap grammar , It means that the label has a badge style , For beautification only

2.3 javaScript Code

To complete the button event , still need sth. javaScript Code to implement color,info Fields and getInfo function

<script>
    var app = new Vue({
    
      el: '#app',	//vue Mount point 
      data: {
    
        color:"btn btn-primary",//color Field 
        info: ""				//info Field 
      },
      methods: {
    
        getInfo: function () {
    //getInfo function 
          var that = this;
          axios.get('/startPlatform').then(// Send the access path to the server 
            function (res) {
    // If the response is successful 
              that.color=res.data.color// Will return jason in color The field is assigned to color Field 
              that.info = res.data.info// Will return jason in info The field is assigned to info Field 
            },
            function (err) {
    // If the response fails 
              that.color='btn btn-danger'
              that.info = err
            }
          )
        }
      }
    })
  </script>

thus , If we directly use the browser to open html file , Then we get the following result

Once you click the button , Because the server does not exist , Sent get('/startPlatform') The request is bound to fail , Then we get the following result

3 Back end code

First, create a new one server.js file
And then create a new one public Folder , I'm going to write index.html File put in public In the folder
server.js The code in the file is as follows

/* build express The server */
var express = require('express');               //express frame 
var app = express();                            // Generate express frame 

// Set up public Is a static web page 
app.use('/public', express.static('public'));

// After visiting the home page, jump to index.html
app.get('/', function (req, res) {
    
    console.log(" Jump to home ");
    res.redirect("/public/index.html");
})

// Response request '/startPlatform'
app.get('/startPlatform', function (req, res) {
    
    console.log(" Start the program ");
    var err=executor(res);
})

// Listening port 8050
var server = app.listen(8050, function () {
    
    var host = server.address().address
    var port = server.address().port
    console.log(" Server setup , The visiting address is  http://%s:%s", host, port)
})

In this paper executor(res) The function is used to start exe programmatic , It is realized as follows

function executor(res) {
    
    var exec = require('child_process').exec, child;
    // exec_path  Write what needs to be executed exe command , Here is "AlgorithmIntegrationPlatform.exe"
    var exec_path = "AlgorithmIntegrationPlatform.exe";
    
    //  Execute function 
    child = exec(exec_path, function (error, stdout, stderr) {
    
        if(error) return res.send({
    color:'btn btn-danger',info:' Boot failure , Please check the integration platform '});
        res.send({
    color:'btn btn-primary',info:' Successfully started '});
    });
}

If exe The program started successfully , So go back to one Json

{
    color:'btn btn-primary',info:' Successfully started '}

If exe Program start failed , So go back to one Json

{
    color:'btn btn-danger',info:' Boot failure '}

4 Running effect

stay server.js Start the command line in the directory of , And then use node Start the server

node server.js

What needs to be noted here is , If the directory has not been installed express frame , So it's running server.js You should also install express frame , Otherwise, an error will be reported . The order is as follows

npm install express

If the server starts successfully , You can use the website http://localhost:8050/ visit index.html
After clicking the button , If exe start-up success , You will get the following results

If exe start-up Failure （ For example, the name is wrong ）, You will get the following results