next.js 单击按钮时执行服务器端shell脚本

kgsdhlau  于 2022-11-05  发布在  Shell
关注(0)|答案(1)|浏览(189)

我正在尝试执行一个位于服务器上的shell脚本。我需要在执行后得到这个shell脚本的(字符串)结果。但是,这个脚本应该只有在我的ReactJS应用程序中的某个按钮被按下时才会被触发。
我花了大量的时间寻找答案。到目前为止,所有的答案都指向一个想法,即创建一个Web服务,然后让应用程序在单击按钮时调用该服务。但没有一个答案指出这是如何实现的,也没有任何答案指向任何讨论这种方法的文章。(如果这是一个基本方法,请抱歉,我上个月刚刚从Udemy学习了ReactJS。)
您是否介意创建一个简单的代码来演示“shell脚本web服务”和按钮(onClick)之间的通信?或者至少提供一个讨论这种方法的文章链接?
谢谢你的帮助。
编辑:到目前为止,我尝试的是How to execute shell command in Javascript。但是评论说这在浏览器上不起作用。我猜这就是我需要在我的Web服务中编写的代码?

bihw5rsg

bihw5rsg1#

最后,我得到了它。下面是我所做的。
步骤1:创建一个页面/api/execute. js(适当地命名文件)
第2步:将这个示例shell脚本(ls命令)放入execute.js

export default function handler(req, res) {
  const execSync = require('child_process').execSync;
  // import { execSync } from 'child_process';  // replace ^ if using ES modules

  const output = execSync('ls', { encoding: 'utf-8' });  // the default is 'buffer'
  const splitted = output.split(/\r?\n/);  
  const filtered = splitted.filter( e => {
    return e !== '';
  });

  res.status(200).json(JSON.stringify(filtered))
}

步骤3:在react组件中,添加一个带有onClick处理函数的按钮,如下所示:

<Button primary onClick={this.execCommand}>Execute Shell Command</Button>

步骤4:创建execCommand函数:

async execCommand() {
    const req = await fetch("/api/execute");
    const data = await req.json();
    console.log(data);
}

步骤5:单击按钮,然后在浏览器控制台上查看输出。
干杯干杯干杯

相关问题