Source:  Twitter logo

I want to get the data from front end react js form and insert in to mysql database using backend express. Can you tell me the flow from front end to backend with simple one field form using react js and then insert into database.

Lets take an example of a simple library application having table(books) with fields book_name and author .

Lets see the Backend Code First(in 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`);
});

Now Let's see the Front End code on 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>

    )

}




 }
11 users liked answer #0dislike answer #011
Fahad Israr profile pic
Fahad Israr

Here's a simple example that establishes a connection to mysql.

var mysql = require('mysql')
var connection = mysql.createConnection({
host     : 'localhost',
user     : 'dbuser',
password : 's3kreee7',
database : 'my_db'
});

connection.connect()

connection.query('SELECT 1 + 1 AS solution', function (err, rows, fields) {
if (err) throw err

console.log('The solution is: ', rows[0].solution)
})

connection.end()

Helpful guide to integrate popular Node.js modules for DBs

-1 users liked answer #1dislike answer #1-1
DJ2 profile pic
DJ2
**On REACT**

import React, { Component } from 'react';
import axios from "axios";
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from "react-router-dom";

import createHistory from "history/createBrowserHistory"

//import isLoggedIn from '../../helpers/is_logged_in';
class Login extends Component {


   constructor(props) {
    const history = createHistory();
      super(props);

     // this.islogin = this.islogin.bind(this);
      this.signIn = this.signIn.bind(this);
      this.handleEmailChange = this.handleEmailChange.bind(this);
      this.handlePasswordChange = this.handlePasswordChange.bind(this);
      this.state = {
        email:'',
        password:'',
        redirectToReferrer: false

      };
    }
    signIn(){

      const history = createHistory()
      const location = history.location;
              console.log(location);


    //  alert(this.state.email);
      axios.post('http://192.168.1.35:3012/users', {
        email: this.state.email,
        password: this.state.password
      })
      .then(function (response) {
       // console.log(response.data[0].id);
       // console.log(response.data.email);
        var das =  localStorage.setItem('sessionid', response.data[0].id);
        var das =  localStorage.setItem('myData', response.data[0].name);
       var da =  localStorage.getItem('myData');
      var myid =  sessionStorage.setItem('myid', response.data[0].id);
      //alert(da);
       //history.go('/dash');
       
      })

      .catch(function (error) {
        console.log(error);
      });

       this.setState({ redirectToReferrer: true });
    }


    handleEmailChange(e){
      this.setState({email:e.target.value})
    }
    handlePasswordChange(e){
      this.setState({password:e.target.value})
}

  render() {
    console.log('11111');
          const myid =  sessionStorage.getItem('myid');
      const { from } = this.props.location.state || { from: { pathname: "/dash" } };
    const { redirectToReferrer } = this.state;

    if (redirectToReferrer || myid !=null) {
          console.log('22222');

      return <Redirect to={from} />;
    }

else{

    return (
            <form className="form-signin" history={this.props.history}>
                <h2 className="form-signin-heading"> Please sign in </h2>
                <label className="sr-only"> Email address
                </label>
}
<input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required />              
  <label htmlFor="inputPassword" className="sr-only"> Password</label>

<input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required />  

<button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button">Sign in</button>            
            </form> 
    );
  }
}
}
export default withRouter(Login); 



**On Express**


var express = require('express');
var bodyParser   = require('body-parser');
var app = express();
 var fs = require('fs');
var formidable = require('formidable');
var busboy = require('connect-busboy');
var cors = require('cors')
var router = express.Router();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

var mysql = require('mysql')
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'test',
  database : 'example'
});

connection.connect(function(err) {
  if (err) throw err
 // console.log('You are now connected...')
})

/* POST users listing. */
router.post('/', function(req, res, next) {

  console.log(req.body.email);
      user_sql = "INSERT INTO table_name VALUES (req.body.name, req.body.password);

     console.log(user_sql)
  connection.query(user_sql, function (err, rows, fields) {
  if (err) throw err

console.log(rows)
res.end(JSON.stringify(rows));

   // res.json(rows);
});

   
       
 
});


module.exports = router;
-1 users liked answer #2dislike answer #2-1
Nilesh Badgi profile pic
Nilesh Badgi

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).