如何将此动态 index.html 页面转换为 React 页面并将其连接到同一个 Nodejs express 页面？

Question

我有一个 NodeJs 后端和一个 React 前端。 我面临的主要问题是从 React 前端获取数据并将其发送到后端并等待 Node js express 后端执行。 我可以使用一个简单的 html 页面来做到这一点，但不能使用 React 来做到这一点。 欢迎提出反应建议。 我在端口 4500 上运行 NodeJs，在端口 3000 上运行 React。

下面我附上 HTML 代码和 NodeJS 代码，它们在托管在端口 4500 上时运行良好并给出结果。 但我的 React 需要类似的东西。 我对 React 完全陌生，所以我很挣扎。 任何帮助都将在 React 前端页面上得到赞赏！

我要做的是->

带有提交按钮的简单文本框
提交后，Node js express 后端使用提交的数据执行。
output 将是一个 html 表，我想在搜索框下方的 iframe 中显示该表。

我可以在 html、js 和 Nodejs 中做到这一点。 但我想在 react js 中做前端。 下面我编写了 React js 代码，但无法使其工作。

输入 HTML 页面<index.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...");
    });

结果显示 HTML 执行后端后的页面(search.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 编写的代码，但无法达到预期的结果。 任何人都可以帮忙吗？

反应 Js 代码<App.jsx>

    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;

Answer 1

您可以尝试使用 HashRouter 或 BrowserRouter。 首先有 2 个页面用于您的 react 应用程序，1 个用于索引，另一个用于您的搜索页面。 在您的服务器端，只需返回成功状态。 react 应用在收到成功状态后可以切换到带有 window.location.href 或 window.location.hash 的搜索页面

如何将此动态 index.html 页面转换为 React 页面并将其连接到同一个 Nodejs express 页面？

问题描述

1 个解决方案

解决方案1
0 2021-02-27 08:20:13

如何将此动态 index.html 页面转换为 React 页面并将其连接到同一个 Nodejs express 页面？

问题描述

1 个解决方案

解决方案1 0 2021-02-27 08:20:13

解决方案1
0 2021-02-27 08:20:13