我正在学习React的第三天,尝试将我的注册表单发布到Express(以便我可以将值添加到MySQL数据库中)。我能够获取一些静态信息并在React端显示它,所以我知道Express和React已连接。
以下内容来自文件users.js,我想收集新的注册信息,然后将其添加到MySQL中,以便用户登录时稍后检索它。
const express = require('express');
const mysql = require('mysql');
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.post('/users', function(request, response){
var email = request.body.email;
var first = request.body.first;
var last= request.body.last;
var skills = request.body.skills;
console.log(email, first, last, skills);
res.send(email, first, last, skills);
})
以下内容来自 register.jsx。我已将尝试将表单值推送到Express的部分注释掉。
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Col, Button, Checkbox, Form, ControlLabel, FormGroup, FormControl } from 'react-bootstrap';
import './register.css';
export default class Register extends Component {
// constructor(){
// super();
// this.state = {
// email: '',
// first: '',
// last: '',
// skills: ''
// };
// }
// onChange = (event) => {
// const state = this.state;
// state[event.target.name] = event.target.value;
// this.setState(state);
// }
// onSubmit = (event) => {
// event.preventDefault();
// const { email, first, last, skills } = this.state;
// // componentDidMount(){
// // console.log('state mounted')
// // // fetch('/users')
// // // .then(res => res.json())
// // }
// // console.log(this.state)
// }
render() {
return (
<Form horizontal method="post" action="/users">
<FormGroup controlId="formHorizontalEmail">
<Col componentClass={ControlLabel} sm={4}>
Email
</Col>
<Col sm={5}>
<FormControl type="email" placeholder="Email" name="email" />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalFirstName">
<Col componentClass={ControlLabel} sm={4}>
First Name
</Col>
<Col sm={5}>
<FormControl type="text" placeholder="First Name" name="first"/>
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalLastName">
<Col componentClass={ControlLabel} sm={4}>
Last Name
</Col>
<Col sm={5}>
<FormControl type="text" placeholder="Last Name" name="last" />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalSkills">
<Col componentClass={ControlLabel} sm={4}>
List your skills, each of them separated by a comma.
</Col>
<Col sm={5}>
<FormControl componentClass="textarea" placeholder="Skills" name="skills" />
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={4} sm={10}>
<Checkbox>I agree to the Terms and Conditions of USUME.</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={4} sm={10}>
<Button bsStyle='primary' type="submit">Register</Button>
</Col>
</FormGroup>
</Form>
)
}
}
我已经研究了大约十个小时,发现关于在Express上发布文章的信息很少,至少对于我的情况来说是如此。主要我发现了如何从Express获取数据。我尝试了几种方法来尝试发布信息,并在每次尝试后都得到消息Cannot POST /users。
我至少想将数据传递到console.log,以便我可以看到它正确地获取了信息。我需要在Express中使用componentDidMount来配合post请求吗?如果是这样,如何实现?有哪些好的资源可用于将表单数据发布到Express(以被推送到MySQL数据库)?我需要使用ajax吗?您知道任何可以概述此过程的好资源吗?
如果您想查看更多代码或获得更多上下文信息,您可以访问我的repo: https://github.com/falondarville/usume
所选资源:
Traversy Media YouTube视频 关于将Express与React链接
谢谢!