javascript - 使用 node.js 将数据输入 mongodb 后重定向到 JS 文件

问题描述

我正在创建一个投资组合网站，其中有一个contact.js包含三个输入字段的文件。在输入字段中输入数据并单击提交按钮后，数据将存储在后端位于文件中的 mongodb 中db.js。单击提交按钮后，它会被重定向到显示输入详细信息的页面。我想被重定向到我的主页 ( landingPage.js)。

联系.js

import React, { Component } from "react";

class Contact extends Component {
  state = {};

  render() {
    return (
      <div className="container">
      <div className="row bg-contact justify-content-center">
          <div className="col-6">
            <form
              className="form-style"
              method="POST"
              action="http://localhost:2000/post-feedback"
            >
                  <h1>Hola!</h1>
                  <h4>
            {" "}
            I am based out of Delhi and will be happy to assist you with
            your request
          </h4>
          <div className="form-group">
            <label htmlFor="exampleInputEmail1">Email address</label>
            <input
              type="email"
              name="email"
              className="form-control"
              id="exampleInputEmail1"
              aria-describedby="emailHelp"
              placeholder="Enter email"
            ></input>
            <small id="emailHelp" className="form-text text-muted">
              We'll never share your email with anyone else.
            </small>
          </div>
          <div className="form-group">
            <label htmlFor="exampleInputName1">Name</label>
            <input
              type="Name"
              name="Name"
              className="form-control"
              id="exampleInputName1"
              placeholder="Name"
            ></input>
          </div>
          <div className="form-group">
            <label htmlFor="exampleFormControlMessage1">Message</label>
            <textarea
              type="message"
              name="message"
              className="form-control"
              id="exampleFormControlMessage1"
              rows="3"
            ></textarea>
          </div>

          <input type="submit" className="btn btn-dark" value="Submit" />
        </form>
      </div>
      <div className="row col-12 justify-content-center padding-custom">
        <div>
          <h2>Connect</h2>
          <div className="social pa-icon">
            <a
              href="https://www.facebook.com/gokul.rajan.140"
              target="_blank"
            >
              {" "}
              <i className="fa fa-facebook"></i>
            </a>
            <a
              href="https://www.linkedin.com/in/gokul-rajan-90a368169/"
              target="_blank"
            >
              {" "}
              <i className="fa fa-linkedin"></i>
            </a>
            <a href="#">
              {" "}
              <i className="fa fa-github"></i>
            </a>
            <a href="#">
              {" "}
              <i className="fa fa-youtube"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
    );
  }
}

export default Contact;

db.js（写后端的地方）

import LandingPage from "./landingPage";
var express = require("express");
var path = require("path");
var bodyParser = require("body-parser");
var mongodb = require("mongodb");

var dbConn = 
mongodb.MongoClient.connect("mongodb://localhost:27017/resume");

var app = express();
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.resolve(__dirname, 
"src/components/contact.js")));

app.post("/post-feedback", function(req, res) {
  dbConn.then(function(db) {
    delete req.body._id; // for safety reasons
    db.collection("feedbacks").insertOne(req.body);
  });
  // res.send("Data received:\n" + JSON.stringify(req.body));
  res.redirect("/landingPage"); 
});
app.get("/landingPage", function(req, res) {
  res.sendFile(__dirname + { LandingPage });
});

 app.listen(process.env.PORT || 2000, process.env.IP || "0.0.0.0");

我已经看过如何在 Node.js 中提供发布请求后重定向到另一个页面？

React Router v4 在表单提交时重定向

如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？

如何重定向到另一个网页？

我几乎尝试了所有方法，但landingPage.js单击提交按钮后仍然没有被重定向到。

标签： javascriptnode.jsreactjs

javascript - 使用 node.js 将数据输入 mongodb 后重定向到 JS 文件

问题描述

解决方案

推荐阅读