ReactJS 与数据库的连接

Question

我想从前端 react js 表单获取数据并使用后端 express 插入到 mysql 数据库中。你能告诉我从前端到后端的流程吗？使用 react js 的简单字段表单，然后插入数据库。

原文由 Himanshu Pandey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

让我们举一个简单的库应用程序的例子，它有表（ books ），字段 book_name 和 author 。

让我们先看看后端代码（在 Node Js 中）

 const express = require('express');
const bodyParser = require('body-parser');
var connection  = require('express-myconnection');
var mysql = require('mysql');

const app = express();
app.use(bodyParser.json());

app.use(

        connection(mysql,{

            host: 'localhost', //'localhost',
            user: 'userEHX',
            password : 'hMmx56FN4GHpMXOl',
            port : 3306, //port mysql
            database:'sampledb'

        },'pool')); //or single

       app.post('/add_book',(req,res)=>{

        let {book_name,author,} = req.body;

        if(!book_name) return res.status(400).json('Book Name cant be blank');
        if(!author) return res.status(400).json('Author cant be blank');

        var data={book_name:book_name,
                  author:author};

         var query = connection.query("INSERT INTO books set ? ",data,
        function(err, rows)
        {

          if (err){
            //If error
              res.status(400).json('Sorry!!Unable To Add'));
              console.log("Error inserting : %s ",err );
             }
         else
          //If success
          res.status(200).json('Book Added Successfully!!')

        });

        });

         app.listen(3000, ()=> {
      console.log(`app is running on port 3000`);
});

现在让我们看看 React Js 上的前端代码：

 import React from 'react';
export default class AddBook extends React.Component {

constructor(){
        super();
        this.state = {
            bookname:'',
            author:'',

        };

    }

updateInfo = (event) =>{
        let fieldName = event.target.name;
        let fieldValue = event.target.value;
        if(fieldName === 'bookname') {
            this.setState({bookname: fieldValue});
        }
        else if(fieldName === 'author'){
            this.setState({author:fieldValue});
        }
};

addBook=(e)=>{

 let {bookname,author}=this.state;
 fetch('localhost:3000/add_book', {
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        bookname:bookname,
        author:author,

      })
    }).then(response=>response.json()).then(data=>{
         window.alert(data)
         //Do anything else like Toast etc.
})

}

render(){

return(

<div className="add_book">

 <div>
    <label>Book Name</label>
    <input onChange={this.updateInfo} name="bookname" value{this.state.bookname}/>
 </div>
 <div>
  <label >Author</label>
  <input onChange={this.updateInfo} name="author" value={this.state.author}/>
</div>

<button onClick={this.addBook}>Add</button>

</div>

    )

}

 }

原文由 Fahad Israr 发布，翻译遵循 CC BY-SA 4.0 许可协议