Javascript 单击按钮后执行Node.js子进程

Javascript 单击按钮后执行Node.js子进程,javascript,node.js,reactjs,webpack,energyplus,Javascript,Node.js,Reactjs,Webpack,Energyplus,目前我在Node.js中有一段代码,它调用程序“EnergyPlus”。不幸的是,我必须启动一个外部控制台并“手动”执行Node.js文件。但是,我希望能够按下应用程序前端的按钮,启动“EnergyPlus”程序 这是我的Node.js文件: var spawn = require('child_process').spawn, child = spawn('C:\\EnergyPlusV9-0-1\\EP-Launch.exe', ["C:/Windows/System32/Drivers/e

目前我在Node.js中有一段代码,它调用程序“EnergyPlus”。不幸的是,我必须启动一个外部控制台并“手动”执行Node.js文件。但是,我希望能够按下应用程序前端的按钮,启动“EnergyPlus”程序

这是我的Node.js文件:

var spawn = require('child_process').spawn,
child = spawn('C:\\EnergyPlusV9-0-1\\EP-Launch.exe', ["C:/Windows/System32/Drivers/etc/hosts"]);

child.stdout.on('data', function (data) {
    console.log('stdout: ' + data);
});

child.stderr.on('data', function (data) {
    console.log('stderr: ' + data);
});

child.on('close', function (code) {
    console.log('child process exited with code ' + code);
});
有没有办法将此代码集成到按钮中,或者在单击按钮后执行此代码?
提前非常感谢

以下是您可以做到这一点的方法:

  • 在客户端按钮上单击,向express API中的特定路径发出请求
  • 您的express API通过启动程序来处理请求
  • 编写如下所示的代码:

    class App extends Component { 
    
    constructor(props){
    super(props)
    this.state = {filename: null}
    };
    
    componentDidMount() {
      ...
    };
    
    callBackendAPI = async () => {
      ...
    };
    
    //trigger the spawn child function within server.js
    startEnergyPlus = (e) =>{
    fetch (`http://localhost:5000/express_backend/${this.state.filename}`, {
    method: "GET"
    });
    
    render(){
     return( 
      <div className="App">
       <button onClick={this.startEnergyPlus}>start app</button>
      </div>
    };
    
    client.html:

    <button onclick="func()">start app</button>
    <script>
      const func = () => fetch('http://your.api.url/some/path');
    </script>
    

    非常感谢你的帮助! 我已经找到了解决我问题的办法。 从一开始,在我的应用程序中,我使用React和Webpack。为了解决我的问题,我以以下方式构建了我的Server.js文件(我在其中设置了Express behavior):

    const express = require('express');
    const app = express();
    const port = process.env.PORT || 5000;
    const fs = require("fs")
    const spawn = require('child_process').spawn;
    
    // console.log that your server is up and running
    app.listen(port, () => console.log(`Listening on port ${port}`));
    app.use(cors())
    
    // create a GET route
    app.get('/express_backend/:filename', (body, res) => {
    const f = body.params.filename;
    
    // open EnergyPlus Programm with a specific file which is stored localy
    let child = spawn(
    'C:\\EnergyPlusV9-0-1\\EP-Launch.exe',
     [process.cwd()+"src/"+ f + ".idf"]
     );
    
    child.stdout.on('data', function (data) {
    console.log('stdout: ' + data);
    });
    
    child.stderr.on('data', function (data) {
    console.log('stderr: ' + data);
    });
    
    child.on('close', function (code) {
    console.log('child process exited with code ' + code);
    });
    
    res.send('EnergyPlus is running');
    });
    
    // default options
    app.use(fileUpload());
    
    //post the uploaded file into the local storage
    app.post('/upload', function(req, res) {
      ...
    }
    
    // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
    let sampleFile = req.files.file;
    
    // Use the mv() method to place the file localy
     fs.writeFile(__dirname + `/upload/${sampleFile.name}`, sampleFile.data,
    (err) => {
       ....
      })
    });
    
    就像Nino Filiu在他的文章中提到的那样,我将child spawn函数集成到server.js中。首先,我使用特定的文件调用EP launch.ex,我存储了localy(这个函数不是这个答案的一部分)。“C:\EnergyPlusV9-0-1\EP Launch.exe”是指向EnergyPlus的路径。“[process.cwd()+”src/“+f+”.idf”]”帮助EnergyPlus打开本地存储的fiel directl。 因此,关于我的问题,最重要的是app.get,我在app.js中触发它。 在App.js中,我这样调用spawn子进程:

    class App extends Component { 
    
    constructor(props){
    super(props)
    this.state = {filename: null}
    };
    
    componentDidMount() {
      ...
    };
    
    callBackendAPI = async () => {
      ...
    };
    
    //trigger the spawn child function within server.js
    startEnergyPlus = (e) =>{
    fetch (`http://localhost:5000/express_backend/${this.state.filename}`, {
    method: "GET"
    });
    
    render(){
     return( 
      <div className="App">
       <button onClick={this.startEnergyPlus}>start app</button>
      </div>
    };
    
    类应用程序扩展组件{
    建造师(道具){
    超级(道具)
    this.state={filename:null}
    };
    componentDidMount(){
    ...
    };
    callBackendAPI=async()=>{
    ...
    };
    //在server.js中触发spawn子函数
    startEnergyPlus=(e)=>{
    取回(`http://localhost:5000/express_backend/${this.state.filename}`{
    方法:“获取”
    });
    render(){
    报税表(
    启动应用程序
    };
    

    就是这样。希望它是清晰和有用的。如果不是,请留下评论!

    这与reactjs或webpack有什么关系?只是想在上面添加一些额外的标签以引起注意?你做了什么尝试?你做了什么研究?我集成了reactjs和webpack,因为我在应用程序中使用了它们。我坚持我的研究,我不知道如何在我的react应用程序中集成子进程。您需要一个服务器端部件来执行此代码。您无法从前端直接运行此类代码。express server正在后台运行。但是我如何可以或应该集成no将子进程分解到其中,如何将express服务器与前端连接起来,从而运行EnergyPlus软件?