Как разместить данные из реагировать на экспресс

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

У вас должен быть какой-то ответ на вашей /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 2

Было несколько ошибок.Вот обновленный код и описание того, что происходило:

React 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;

1. Вы получаете ошибки при использовании class, а не className.class является зарезервированным словом в response.js и не должно использоваться.
2. Вы использовали метод записи по умолчанию, который я бы не рекомендовал.Я разделил пост на собственное действие и использовал общую библиотеку axios, чтобы сделать пост-вызов CORS.Я также создал функцию обработки ввода при каждом нажатии клавиши с помощью response.js.
3. Я добавил 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');
});

1. Вы не анализировали тело запроса, поэтому он возвращался как неопределенный.Я добавил app.use(express.json()); и app.use(express.urlencoded({ extended: false }));, которые должны были решить большинство проблем.
2. Я обновил переменные req.body, чтобы они соответствовали тем, которые приходят из React.
3. Я добавил модульmorgen который вы видите здесь app.use(logger('dev')); это полезно, показывая все ваши запросы и статусы для целей разработки.В этом случае показывалось, что вы получаете 500 (внутренняя ошибка сервера), потому что Express не может прочитать bookID из undefined (потому что тело не анализируется).

Это должно работать сейчас, дайте мне знать, если у вас есть какие-либо проблемы.

Answer 3

Я не использую экспресс некоторых, поэтому детали могут не применяться.

По сути, вам придется отправить сетевой запрос на ваш сервер.Как это сделать, зависит от вас. Наиболее распространенные способы - с помощью axios (библиотеки) или с vanilla js с API выборки.

Я бы просто использовал API загрузки.он принимает два параметра URL и параметры.поэтому он должен называться следующим образом (url, options)

, поэтому в вашем случае это будет fetch ('localhost: 3001 / create, options)

Что должно быть в настройках.Я просто предлагаю вам взглянуть на документацию MDN здесь https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

, но в вашем случае вам нужно будет передать объект со свойством метода, установленным для публикации, и новую книгу, для которой вы хотите установить свойство данных, для JSON.сериализованный объект книги, которую вы хотите создать.

, например

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

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

При передаче книг строке вместо объекта вам, вероятно, придется взять эту строку и проанализировать ее какОбъект на сервере, так что вы выражаете / создаете обработчик, выглядит так:

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

На стороне реакции вам нужно создать обработчик событий, который вызывает вышеупомянутую функцию извлечения.Я рекомендую вам посмотреть учебник по реагированию / экспрессу, хотя я не могу охватить все, что требуется здесь, в вопросе переполнения стека, например: использование и проверка форм в реагировании, обработка ошибок, асинхронизация / ожидание и т. Д.

Всего наилучшего!надеюсь, что это было немного полезно