MERN Stack：使用Express / React将数据发布到数据库

Question

我是MERN堆栈和后端编程的新手。 我有一个React表单，我想使用Express提交到MLab数据库。 我无法成功将表单数据发布到数据库。 我不确定我是否采用正确的方法。 我的表单正在运行，并且能够记录字段，尝试执行POST请求提交表单数据时遇到问题。

这是我的表格：

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input } from 'reactstrap';

class AddBookModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      bookTitle: '',
      author: '',
      genre: ''
    };

    this.toggle = this.toggle.bind(this);
    this.onSubmit = this.handleSubmit.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const data = this.state;
    //console.log("Data from form :" + data.bookTitle, data.author, data.genre);
  }

  handleInputChange = (event) => {
    event.preventDefault();

    this.setState({
      [event.target.name]:
      event.target.value
    });
  }

  render() {
    const {bookTitle} = this.state;
    const {author} = this.state;
    const {genre} = this.state;
    return (
      <div>
        <Button id="add-book-button" onClick={this.toggle}>Add Book</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Add Book</ModalHeader>
          <ModalBody>
            <Form method="POST" action="/profile" id="add-book-form" onSubmit={this.handleSubmit} >
              <FormGroup>
                <Label for="book-title-label">Book Title</Label>
                <Input
                  value={bookTitle}
                  name="bookTitle"
                  onChange={this.handleInputChange}
                  placeholder="Enter name of book" />
              </FormGroup>
              <FormGroup>
                <Label for="book-author-label">Author</Label>
                <Input
                  value={author}
                  name="author"
                  onChange={this.handleInputChange}
                  placeholder="Enter author of book" />
              </FormGroup>
              <FormGroup>
                <Label for="exampleSelect">Genre</Label>
                <Input
                  onChange={this.handleInputChange}
                  value={genre}
                  type="select"
                  name="genre"
                  id="exampleSelect">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </Input>
              </FormGroup>
              <ModalFooter>
                <Button color="primary" type="submit" onClick={this.toggle}>Submit</Button>{' '}
                <Button color="secondary" onClick={this.toggle}>Cancel</Button>
              </ModalFooter>
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

export default AddBookModal;

这是我的Express路线：

const router = require('express').Router();
const bodyParser = require('body-parser');

var urlencodedParser = bodyParser.urlencoded({ extended: false });

// localhost:3000/profile

// User Model
const User = require('../../models/user-model');
const Book = require('../../models/book-model');

// Checks if user is not logged in
const authCheck = (req, res, next) => {
    if(!req.user) {
      // If user is not logged in, redirect them to login page
      res.redirect('/auth/login');
    }
    else {
      // If user is logged in call next in router.get
      next();
    }
};

router.get('/', authCheck, (req, res) => {
  res.send('you are logged in, this is your profile : ' + req.user);
});


router.post('/', urlencodedParser, (req, res) => {
  console.log(req.body);

  const newUser = new User({
    name: req.body.name,
    username: req.body.username,
    githubID: req.body.githubID,
    profileUrl: req.body.profileUrl,
    avatar: req.body.avatar,
    books: {
      bookTitle: req.body.bookTitle,
      author: req.body.author,
      genre: req.body.genre
    }
  });

  newUser.save()
    .then(data => {
      res.json(data)
    })
    .catch(err => {
      res.send("Error posting to DB")
    });

});



module.exports = router;

这是我的Express服务器：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const authRoutes = require('./routes/api/auth');
const passportSetup = require('./config/passport-setup');
const cookieSession = require('cookie-session');
const keys = require('./config/keys');
const passport = require('passport');
const profileRoutes = require('./routes/api/profile-routes');
const bookRoutes = require('./routes/api/book-routes');

// Hooks up routes/api/items file
const items = require('./routes/api/items');

const app = express();

// Boderparser Middleware
app.use(bodyParser.json());

// sets up session cookies
app.use(cookieSession({
  // Max age set to 1 day
  maxAge: 24 * 60 * 60 * 1000,
  // Uses cookieKey from keys file to encrypt
  keys: [keys.session.cookieKey]
}));

// initialize passport
app.use(passport.initialize());
app.use(passport.session());

// DB Config
const db = require('./config/keys').mongoURI;

// Connect to mongodb
mongoose
  .connect(db, { useNewUrlParser: true })
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

// Use Routes, sets up routes/api/items to be used
app.use('/api/items', items);

app.use('/book', bookRoutes);

// Use auth.js's routes
app.use('/auth', authRoutes);
// Use profile-routes routes for profile page
app.use('/profile', profileRoutes);

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server started on port ${port}`))

我无法发出POST请求，也不确定原因。 Express路由处理一些OAuth内容并显示已登录用户的个人资料。 在同一页面上，我具有允许用户添加数据并提交数据的表格。 authCheck的逻辑authCheck干扰表单数据的发布？ 我的Express路由中的router.post无法成功console.log任何内容。

我见过人们在React表单组件本身中使用Axios来执行POST请求。 使用Axios进行POST请求是更好的方法还是应该在Express路由中处理它？

Answer 1

您应该使用axios进行api调用。

在您的handleSubmit函数中，您使用的是“ event.preventDefault（）”，它将阻止表单的默认行为。