Question

我正在尝试创建一个书本应用程序，我在前端做出了反应，而在后端则做出了节点js。当我尝试在后端创建它时说Cannot POST / create。我必须做什么，该文件夹分为前端和后端。我正在使用axios。我是来反应js的新手，请帮忙。如何在反应中传递表单中的数据以表达以保存。

this is the react component create

import React, {Component} from 'react';

class Create extends Component{
    render(){
        return(
            <div>
                <br/>
                <div class="container">
                    <form action="http://127.0.0.1:3000/create" method="post">
                        <div style={{width: '30%'}} class="form-group">
                            <input  type="text" class="form-control" name="BookID" placeholder="Book ID"/>
                        </div>
                        <br/>
                        <div style={{width: '30%'}} class="form-group">
                                <input  type="text" class="form-control" name="Title" placeholder="Book Title"/>
                        </div>
                        <br/>
                        <div style={{width: '30%'}} class="form-group">
                                <input  type="text" class="form-control" name="Author" placeholder="Book Author"/>
                        </div>
                        <br/>
                        <div style={{width: '30%'}}>
                            <button class="btn btn-success" type="submit">Create</button>
                        </div> 
                    </form>
                </div>
            </div>
        )
    }
}

export default Create;

后端的index.js

    var express = require('express');
    var app = express();
    var bodyParser = require('body-parser');
    var session = require('express-session');
    var cookieParser = require('cookie-parser');
    var cors = require('cors');
    app.set('view engine', 'ejs');

    //use cors to allow cross origin resource sharing
    app.use(cors({
        origin: 'http://localhost:3000',
        credentials: true
    }));




var books = [{
        "BookID": "1",
        "Title": "Book 1",
        "Author": "Author 1"
    },
    {
        "BookID": "2",
        "Title": "Book 2",
        "Author": "Author 2"
    },
    {
        "BookID": "3",
        "Title": "Book 3",
        "Author": "Author 3"
    }
]




app.get('/home', function (req, res) {
    console.log("Inside Home Login");
    res.writeHead(200, {
        'Content-Type': 'application/json'
    });
    console.log("Books : ", JSON.stringify(books));
    res.end(JSON.stringify(books));

})

app.post('/create', function (req, res) {
    var newBook = {
        "BookID": req.body.BookID,
        "Title": req.body.Title,
        "Author": req.body.Author
    }
    books.push(newBook)
    console.log(books);



})
//start your server on port 3001
app.listen(3001);
console.log("Server Listening on port 3001");

Answer 1

我不使用快递，所以细节可能不适用。

从本质上讲，您将必须向服务器发送网络请求。如何执行此操作取决于您，最常见的方法是使用axios（一个库）或使用带有提取API的香草js。

我只使用提取API。它带有两个参数：URL和选项。所以应该像这样fetch（url，options）

因此您的情况将是fetch（'localhost：3001 / create，options）

选项中应该包含什么。我只建议您在https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

上查看完整的MDN文档

但是您的情况是，您需要传递一个方法属性设置为post的对象，并将您要数据的新书属性设置为您要创建的书的JSON序列化对象。

例如

let book ={
    BookId:1,
    Title: "coolBook",
    Author: "Me"
}

fetch("localhost:3001/create",
{
     method: "post",
     data: JSON.stringify(book)
}

在传递书籍时，使用字符串而不是对象，您可能必须采用该字符串并将其解析为服务器上的对象，以便表达/ create handler看起来更像：

app.post('/create', function (req, res) {
    var newBook = JSON.parse(req.body.data)
    books.push(newBook)
    console.log(books);
})

在React端，您需要创建一个事件处理程序，以调用上述fetch函数。我建议您尽我所能观看一下react / express教程；我真的不能涵盖堆栈溢出问题中此处所需的所有内容，例如：在react，错误处理，异步/等待等中使用和验证表单。

万事如意！希望这会有所帮助

Answer 2

您应该在/create端点上做出某种回应
例如：

app.post('/create', function (req, res) {
    var newBook = {
        "BookID": req.body.BookID,
        "Title": req.body.Title,
        "Author": req.body.Author
    }
    books.push(newBook)
    console.log(books);

   res.status(201).json({"some":"response"})


})

Answer 3

有一些错误。这是一些更新的代码以及发生了什么的描述：

反应App.js：

import React, { Component } from 'react';
import axios from 'axios';

class Create extends Component {
  constructor(props) {
    super(props);

    this.state = {
      bookID: '',
      bookTitle: '',
      bookAuthor: '',
    };
  }

  handleInputChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  handleSubmit = e => {
    e.preventDefault();

    const { bookID, bookTitle, bookAuthor } = this.state;

    const book = {
      bookID,
      bookTitle,
      bookAuthor,
    };

    axios
      .post('http://localhost:3001/create', book)
      .then(() => console.log('Book Created'))
      .catch(err => {
        console.error(err);
      });
  };

  render() {
    return (
      <div>
        <br />
        <div className="container">
          <form onSubmit={this.handleSubmit}>
            <div style={{ width: '30%' }} className="form-group">
              <input
                type="text"
                className="form-control"
                name="bookID"
                placeholder="Book ID"
                onChange={this.handleInputChange}
              />
            </div>
            <br />
            <div style={{ width: '30%' }} className="form-group">
              <input
                type="text"
                className="form-control"
                name="bookTitle"
                placeholder="Book Title"
                onChange={this.handleInputChange}
              />
            </div>
            <br />
            <div style={{ width: '30%' }} className="form-group">
              <input
                type="text"
                className="form-control"
                name="bookAuthor"
                placeholder="Book Author"
                onChange={this.handleInputChange}
              />
            </div>
            <br />
            <div style={{ width: '30%' }}>
              <button className="btn btn-success" type="submit">
                Create
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Create;

您在使用class而不是className时遇到错误。 class是react.js中的保留字，不应该使用。
您使用的是我不建议使用的默认发布方法。我将帖子分为自己的操作，并使用公共库axios进行了CORS帖子调用。我还创建了一个函数，用于使用react.js处理每次按键时输入的更改。
我已将state添加到您的组件中。当有表单输入将其存储在state中时，这很常见。我还将变量名改为大写，这是编写代码变量的常用方法。

Node.js index.js：

const express = require('express');
const logger = require('morgan');
const cors = require('cors');

const app = express();

//use cors to allow cross origin resource sharing
app.use(
  cors({
    origin: 'http://localhost:3000',
    credentials: true,
  })
);

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

let books = [];

app.get('/home', function(req, res) {
  console.log('Inside Home Login');
  res.writeHead(200, {
    'Content-Type': 'application/json',
  });
  console.log('Books : ', JSON.stringify(books));
  res.end(JSON.stringify(books));
});

app.post('/create', function(req, res) {
  const newBook = {
    BookID: req.body.bookID,
    Title: req.body.bookTitle,
    Author: req.body.bookAuthor,
  };

  books.push(newBook);
  console.log(books);
});

//start your server on port 3001
app.listen(3001, () => {
  console.log('Server Listening on port 3001');
});

您没有解析请求的主体，因此它以以下形式返回未定义。我添加了app.use(express.json());并 app.use(express.urlencoded({ extended: false }));应该解决大多数问题。
我更新了req.body变量以匹配来自反应。
我添加了模块morgen，您可以在此处app.use(logger('dev'));看到该模块，它可以显示出于开发目的的所有请求和状态，这对您很有帮助。在这种情况下，这表明您收到500（内部服务器错误），因为express无法读取bookID的{{1}}（因为正文没有被解析）。

现在应该可以了，如果您有任何问题，请告诉我。

如何发布数据从反应到表达

3 个答案: