Успешно отправьте данные формы POST в Express App, используйте sequelize для вставки в базу данных MySQL - PullRequest
Новая
       5

Успешно отправьте данные формы POST в Express App, используйте sequelize для вставки в базу данных MySQL

0 голосов
/ 04 февраля 2020

В настоящее время я пытаюсь опубликовать данные формы (ax ios) из интерфейса пользователя в моем приложении express в базе данных mysql с помощью sequelize. Пока что я могу успешно выполнить запрос GET и отобразить его в интерфейсе пользователя. при настройке моего почтового запроса, я получаю ошибку 404 в консоли. Я довольно много читал, учитывая, что я очень новичок, и некоторые идеи, возможно, просто приходят мне в голову, но я не могу понять, почему я могу успешно сделать запрос GET, но не почтовый запрос, даже к консоли. Мне также интересно узнать, как лучше настроить конечную точку POST.

Вот мой код:

форма клиента 

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

export default class AddVisitorForm extends Component {

  constructor(props) {
    super(props)

    this.state = {
       lastName: '',
       firstName: ''
    }
  }


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

  handleSubmit = (e) => {
    event.preventDefault();
    console.log(this.state)
    axios.post('http://localhost:8000/', this.state)
    .then(response => {
      console.log(response)
    })
    .catch(error => {
      console.log(error)
    })
  }


  render() {
    const { lastName, firstName } = this.state
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Last Name:
            <input type="text" name="lastName" onChange={this.onChange } value={lastName} />
          </label>
          <label>
            First Name:
            <input type="text" name="firstName" onChange={this.onChange } value={firstName} />
          </label>
          <button type="submit">Add Guest</button>
        </form>
      </div>
    )
  }
};

продолжение модели 

const sequelize = require('../database/sequelize');
const Sequelize = require("sequelize");

module.exports = sequelize.define('actor', {
  lastName: {
    field: 'last_name',
    type: Sequelize.STRING
  },
  firstName: {
    field: 'first_name',
    type: Sequelize.STRING
  },
  }, {
  timestamps: false
});

express app 

const express = require("express");
const Actor = require('./models/Actor');
const cors = require('cors');

const app = express();

app.use(cors());


app.get('/actor', function(request, response) {
  Actor.findAll().then((actor) => {
    response.json(actor);
  });
});

app.get('/actor/:id', function(request, response) {
  let id = request.params.id;

  Actor.findByPk(id).then((actor) => {
    if (actor) {
      response.json(actor);
    } else {
      response.status(404).send();
    }
  });
});

app.post('/addactor', function(request, response) {
  Actor.create()
}



app.listen(8000);

вы заметите, что функция app.post является неполной, так как я не слишком уверен, как установить это с данными формы. я знаю, что это не самая сложная вещь в мире, чтобы понять, но я просто не могу получить запрос на публикацию для отображения в консоли, или как правильно настроить запрос на публикацию в приложении express для вставки данных в таблицу mysql. если бы кто-нибудь мог пролить свет, чтобы помочь мне вернуться на правильный путь, я был бы очень признателен.

1 Ответ

0 голосов
/ 04 февраля 2020

Вы должны ответить на POST. Ниже правильный код. response.json написать ответ на запрос. Если вы явно не пишете ответ, express зависание сервера ничего не делает. 

app.post('/addactor', function(request, response) {
  Actor.create().then(createdInstance => {
     response.json(createdInstance)
  })
}

Если вы не хотите отвечать в этой функции, напишите так. 

app.post('/addactor', function(request, response, next) {
  Actor.create()
  next()
}

next функция перехода к следующему подходящему маршруту.

Если вы просто хотите ответить ОК в случае успеха, и 404 в случае неудачи, напишите 

app.post('/addactor', function(request, response, next) {
  Actor.create().then(() => {
     response.end()
  }).catch(error => {
     response.status(404).end()
  })
}

next функция перемещается к следующему маршруту сопряжения.

тело запроса, и параметры запроса доступны следующим образом: 

app.post('/addactor', function(request, response, next) {
  const body = request.body // json body parsed to javascript object {lastName: '', firstName: ''}
  const params = request.params // query parameters parsed to javascript object
  Actor.create(body).then(() => {
     response.end()
  }).catch(error => {
     response.status(404).end()
  })
}

Этот код небезопасен, поэтому вам следует написать несколько фильтров и проверок.

Express Do c

...