【发布时间】：2021-02-27 16:20:13
【问题描述】：
我有一个 NodeJs 后端和一个 React 前端。我面临的主要问题是从 React 前端获取数据并将其发送到后端并等待 Node js express 后端执行。我可以使用一个简单的 html 页面来做到这一点，但不能使用 React 来做到这一点。欢迎提出反应建议。我在 4500 端口上运行 NodeJs，在 3000 端口上运行 React。
下面我附上了 HTML 代码和 NodeJS 代码，它们在托管在端口 4500 上时运行良好并给出了结果。但我的 React 需要类似的东西。我对 React 完全陌生，所以我很挣扎。任何帮助都将在 React 前端页面上得到赞赏！
我要做的是->
- 带有提交按钮的简单文本框
- 提交后，Node js express 后端使用提交的数据执行。
- 输出将是一个 html 表格，我想在搜索框下方的 iframe 中显示该表格。
我可以在 html、js 和 Nodejs 中做到这一点。但是我想在react js中做前端！下面我已经编写了 React js 代码但无法使其工作。
输入 HTML 页面
<body>
<div>
<header>
<h1>Project</h1>
</header>
<div class="container">
<div class="table-responsive">
<form id="inputData" action="/search" method="POST" align="center">
<input
type="text"
name="newItem"
id="newItem"
placeholder="What are you looking for?"
width="50%"
class="form-control"
/>
<br/>
<div align="center">
<button type="submit" name="button" id="button" class="btn btn-info" ">Search</button>
</div>
</div>
</form>
<br/>
</div>
<footer>
<p>Copyright ⓒ <span id="year"></span> Project</p>
</footer>
</div>
<script>
document.getElementById("year").innerHTML = new Date().getFullYear();
</script>
</body>
后端 NodeJs 页面(server.js)
const express = require("express");
const bodyParser = require("body-parser");
const shelljs = require("shelljs");
var cors = require("cors");
const app = express();
const { exec } = require("child_process");
app.use(cors());
app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.get("/", function (req, res) {
res.sendFile(__dirname + "/public/index.html");
});
app.post("/search", async function (req, res) {
console.log("--------- Dirname -----" + __dirname);
console.log("Entered the shell section");
const data = req.body.newItem;
exec(
`cd /home/user/Desktop/Project/test; sh run.sh "${data}"`, async (err, stdout, stderr) => {
if (err) console.error(err);
console.log(stdout);
exec("python3 csv_to_html.py", (err, stdout, stderr) => {
console.log(stdout);
res.sendFile(__dirname + "/public/search.html");
console.log(":: End game ::");
});
}
);
});
app.get("/output", function (req, res) {
res.sendFile(__dirname + "/output.html");
});
app.listen(4500, function () {
console.log("Server starting at port 4500...");
});
执行后端(search.html)后的结果显示HTML页面
<body>
<div>
<header>
<h1>Project</h1>
</header>
<div class="container">
<div class="table-responsive">
<form id="inputData" action="/search" method="POST" align="center">
<input
type="text"
name="newItem"
id="newItem"
placeholder="What are you looking for?"
width="50%"
class="form-control"
/>
<br/>
<div align="center">
<button type="submit" name="button" id="button" class="btn btn-info" ">Search</button>
</div>
</div>
</form>
<br/>
<div id="table">
<iframe src="http://localhost:4500/output" frameborder="0" width="100%" class="myIframe">
</iframe>
</div>
</div>
<footer>
<p>Copyright ⓒ <span id="year"></span> Project</p>
</footer>
</div>
<script>
document.getElementById("year").innerHTML = new Date().getFullYear();
</script>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#table').show();
});
</script>
<script type="text/javascript" language="javascript">
$(".myIframe").css("height", $(window).height() + "px");
</script>
当我在端口 4500 上运行它时，我的代码工作得非常好，我能够得到结果。 我想用 React Js 作为我的前端，用同样的 Node js express 作为我的后端来做同样的事情。我无法编写完美的 React 代码。在这里，我发布了我为上述 HTML 编写的代码，但无法达到预期的结果。有人可以帮忙吗？
React Js 代码
import React from "react";
import Button from "react-bootstrap/Button";
import axios from "axios";
function App() {
const year = new Date().getFullYear();
return (
<div>
<header>
<h1>Project</h1>
</header>
<div className="container">
<form onSubmit={e => clickButton(e)}>
<div className="form-group">
<input
type="text"
className="form-control"
id="searchData"
/>
</div>
<button type="submit" className="btn btn-primary">
Search
</button>
</form>
<br />
</div>
<footer>
<p>Copyright ⓒ {year} Project</p>
</footer>
</div>
);
}
function clickButton(e) {
//alert("Works fine");
//console.log("Works fine");
e.preventdefault();
let body = {
newItem: document.getElementById("searchData").value
};
const postRequest = async () => {
let res = await axios
.post("http://localhost:4500/search", body)
.then(response => {
alert(response);
})
.catch(function (error) {
console.log(error);
});
};
postRequest();
export default App;
【问题讨论】：
-
同意上述。这里有很多东西要解开。你在这里并没有真正使用 react。
-
问题是我无法创建到后端的链接并获得响应。我编写此代码是为了方便创建链接。在完成创建链接并获得结果后，我会将其分成单独的组件。现在，如果你们能提供帮助，那就太好了，因为我不熟悉使用两个单独的服务器并获得结果。提前谢谢！
-
基本上我不知道如何使用反应，因为我对此完全陌生。如果有人可以帮助我，这将有助于澄清我对反应的理解。
标签： javascript html node.js reactjs