如何在 React JS 中获取 API 并将数据保存到 MongoDB

Question

我尝试获取 API 并将数据保存到 MongoDB，但我认为我的 POST 方法有问题.. 我想存储从 API 获取的数据，然后如果我在前面更改数据，我希望它在数据库中更改 这是我的代码 sn-p：

App.js 文件

class App extends React.Component {
  state = {
    name: "",
    movie: [],
  };

  componentDidMount = () => {
    this.getMovie();
    this.displayMovie();
  };

  getMovie = () => {
    axios.get("http://api.tvmaze.com/shows?page=1").then((response) => {
      const data = response.data;
      this.setState({
        movie: data,
      });
      console.log("Data has been received");
      console.log(this.state.movie);
    });
  };
  displayMovie = () => {
    axios({
      url: "/",
      method: "POST",
      data: this.state.movie,
    })
      .then(() => {
        console.log("Data has been sent to the server");
        this.getMovie();
      })
      .catch((err) => {
        console.log(err);
        console.log("Internal server error");
      });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.displayMovie}>
          <button type="submit">Send</button>
          <h2>Movie List</h2>
          <div>
            {this.state.movie.map((t) => {
              return <p>{t.name}</p>;
            })}
          </div>
        </form>
      </div>
    );
  }
}

export default App;

server.js 文件

const express = require("express");
const mongoose = require("mongoose");

const bodyParser = require("body-parser");

const app = express();
const movieRouter = require("./routes/movie.routes");

const connect = () => {
  return mongoose
    .connect("mongodb://localhost:27017/movie", {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    })
    .then(() => console.log("db connected"))
    .catch((err) => console.log(err));
};

connect();

app.use(express.json());
app.use("/", movieRouter);

app.use(bodyParser.json({ limit: "50mb", extended: true }));
app.use(bodyParser.urlencoded({ limit: "50mb", extended: true }));

app.listen(5000, () => {
  console.log("app is running on 5000");
});

模型架构

const mongoose = require("mongoose");

const movieSchema = new mongoose.Schema({
  name: {
    type: String,
  },
});

const MovieSchema = mongoose.model("movieSchema", movieSchema);
module.exports = MovieSchema;

服务js文件

const MovieSchema = require("../models/movie.models");

const getMovie = async () => {
  const movie = await MovieSchema.find();
  return movie;
};

module.exports = {
  getMovie,
};

控制器文件

const getMovie = async (req, res, next) => {
  try {
    const movie = await movieService.getMovie();
    res.status(200).json({ result: movie });
  } catch (err) {
    next(err);
  }
};

module.exports = {
  getMovie,
};

路由器文件

const express = require("express");
const router = express.Router();
const movieController = require("../controllers/movie.controllers");

router.get("/", movieController.getMovie);

module.exports = router;

我做错了什么？我有 POST http://localhost:3000/ 404 (Not Found) 错误消息。

感谢您的帮助！

Answer 1

首先，您的 POST 路由处理程序丢失（参考：Andrew Nolan）。 其次，您的反应代码App.js componentDidMount 方法正在调用 getMovie，并且在调用 displayMovie 之后直接调用。它必须等到 getMovie 方法返回结果。所以我承诺解决它。

class App extends React.Component {
  state = {
    name: "",
    movie: [],
  };

  async componentDidMount() {
    try {
      await this.getMovie();
      this.displayMovie();
    } catch (e) {
      console.log(e);
    }
  };

  getMovie = async () => {
    return new Promise((resolve, reject) => {
      axios.get("http://api.tvmaze.com/shows?page=1").then(({ data }) => {
        this.setState({
          movie: data,
        });
        resolve();
      }).catch(e => reject(e));
    });
  };

  displayMovie = async () => {
    axios({
      url: "/",
      method: "POST",
      data: this.state.movie,
    })
    .then(() => this.fetchMovie())
    .catch((err) => console.log(err));
  };

  render() {
    return (
      <div>
        <form onSubmit={this.displayMovie}>
          <button type="submit">Send</button>
          <h2>Movie List</h2>
          <div>
            {this.state.movie.map((t) => {
              return <p>{t.name}</p>;
            })}
          </div>
        </form>
      </div>
    );
  }
}

export default App;

您无需发送状态码200。 json 方法会将 json 对象字符串化，并默认附加 200 个状态码。

res.status(200).json({ result: movie });   // too long

res.json({ result: movie });   // better practice

res.json({ movie });   // even better

当你创建猫鼬模式时，你不需要在对象字面量中显式声明数据的类型，除非你想添加其他配置。

const movieSchema = new mongoose.Schema({
  name: {
    type: String,
  },
});

const movieSchema = new mongoose.Schema({
  name: String     // better
});

Answer 2

在您的代码中，您只为/ 指定了一个GET 路由。您还需要指定一个 POST 路由。

const express = require("express");
const router = express.Router();
const movieController = require("../controllers/movie.controllers");

router.get("/", movieController.getMovie);
router.post("/", movieController.saveMovie);

module.exports = router;

我将 movieController.saveMovie 作为占位符放入此路由中调用的任何内容。那部分取决于你。我在你的代码 sn-ps 中没有看到保存它的方法。

Answer 3

您还缺少后期控制器 就像 get 一样，在控制器文件中也添加 post 控制器。

const postMovie = async (req, res, next) => {
const {name} = req.body;
  try {

  const newMovie = new Movie({
    name,
  });
   const movie = await newMovie.save();

    res.status(200).json({ result: movie });
  } catch (err) {
    next(err);
  }
};

module.exports = {
  postMovie,
};