在前端单击按钮时在后端运行函数

Question

我是新的web开发，我需要一些帮助的家伙:我有这个分类函数它以文件路径为参数然后保存JSON文件

talk2flask.classification(file_path);

我有这个按钮"parse"打开另一个页面'/questions'，该页面将从Jason文件中加载文本并显示它

Parsing = () => {
localStorage.setItem('token', null);
this.props.history.push('/questions');
}

<TableCell align="center">
<Button
className="button_style"
variant="outlined"
color="primary"
size="small"
onClick={this.Parsing}
>
parse 
</Button>

</TableCell>

[输入图片描述][1]如图所示，我有很多项，每次点击parse按钮时我都希望分类函数运行，并以该项路径作为参数生成相应的json文件

我明白我必须使用axios来做这件事，但我没有做到
[1]: https://i.stack.imgur.com/6S74V.png

Answer 1

你的问题(据我所知)是你有一些JS代码的Node.JS，但没有一种方式来"服务";它提供给客户端应用程序的功能。

为了向你的客户端应用程序(你的网页)公开功能，你需要托管一个API供你的客户端调用。

<标题>

例子有很多方法可以做到这一点，但这里有一个例子。

Express.js

使用express框架，您可以提供您的功能。通过在项目目录中运行npm i express --save来安装它。

使用

现在要使用它，可以在代码中执行以下操作:

const express = require('express');
const app = express();
const port = 3000;
app.get('/classification', (req, res) => {
// Get the file path from the client's request
const filePath = req.query.path;
// Run the classifier here
const result = talk2flask.classification(filePath);
// Respond to the client here
res.send(result);
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
});

请记住，接受来自用户的文件路径是相当危险的，因为他们可能会提供他们想要的任何文件路径(这很糟糕)，而不是您期望的文件路径。你应该在那里设置一些保护措施，以确保只有你想要的文件才能被访问。

客户端使用客户端需要向你的新端点发出一个web请求，给出所需的文件路径:http://<your_host>/classification?path=filepath.json

查找如何使用Axios，这是一个简单的GET请求。在您的页面中包含Axios后，它应该像这样简单:

axios.get(url).then(response => {
// Use the response here
console.log(response)
}).catch(error => {
// Handle errors here
console.log(error)
})