This tutorial will teach you how to make Crud Application using Node JS with React Frontend application with Mysql Database using Api access Crudapplication.
Create the Node Js Project Type on type command prompt
1 | npm init |
and press enter key.after that you have the fill configation of project.after done stuff you
will get the package.json file.
after that you have to install the following dependencies
Express
body-parser
Mysql
you have to create the database and tables in mysql database.
After done the stuff you have to create the file server.js
Server.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | const express = require('express') const bodyParser = require('body-parser') const mysql = require("mysql"); const server = express(); server.use(bodyParser.json()); //Establish the database connection const db = mysql.createConnection({ host: "localhost", user: "root", password: "", database: "dbsmschool", }); db.connect(function (error) { if (error) { console.log("Error Connecting to DB"); } else { console.log("successfully Connected to DB"); } }); //Establish the Port server.listen(8085,function check(error) { if (error) { console.log("Error....dddd!!!!"); } else { console.log("Started....!!!! 8085"); } }); //Create the Records server.post("/api/student/add", (req, res) => { let details = { stname: req.body.stname, course: req.body.course, fee: req.body.fee, }; let sql = "INSERT INTO student SET ?"; db.query(sql, details, (error) => { if (error) { res.send({ status: false, message: "Student created Failed" }); } else { res.send({ status: true, message: "Student created successfully" }); } }); }); //view the Records server.get("/api/student", (req, res) => { var sql = "SELECT * FROM student"; db.query(sql, function (error, result) { if (error) { console.log("Error Connecting to DB"); } else { res.send({ status: true, data: result }); } }); }); //Search the Records server.get("/api/student/:id", (req, res) => { var studentid = req.params.id; var sql = "SELECT * FROM student WHERE id=" + studentid; db.query(sql, function (error, result) { if (error) { console.log("Error Connecting to DB"); } else { res.send({ status: true, data: result }); } }); }); //Update the Records server.put("/api/student/update/:id", (req, res) => { let sql = "UPDATE student SET stname='" + req.body.stname + "', course='" + req.body.course + "',fee='" + req.body.fee + "' WHERE id=" + req.params.id; let a = db.query(sql, (error, result) => { if (error) { res.send({ status: false, message: "Student Updated Failed" }); } else { res.send({ status: true, message: "Student Updated successfully" }); } }); }); //Delete the Records server.delete("/api/student/delete/:id", (req, res) => { let sql = "DELETE FROM student WHERE id=" + req.params.id + ""; let query = db.query(sql, (error) => { if (error) { res.send({ status: false, message: "Student Deleted Failed" }); } else { res.send({ status: true, message: "Student Deleted successfully" }); } }); }); |
React
Installing React
1 | npx create-react-app frontend-app |
1 | npm start run |
After that open the React project into VS code editor.
After that install the Bootstrap by typing the following command
1 | npm i bootstrap |
1 | npm i axios |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | import axios from 'axios'; import {useEffect, useState } from "react"; function Student() { const [id, setId] = useState(''); const [stname, setName] = useState(""); const [course, setCourse] = useState(""); const [fee, setFee] = useState(""); const [students, setUsers] = useState([]); useEffect(() => { (async () => await Load())(); }, []); async function Load() { const result = await axios.get( "http://localhost:9002/api/student/"); setUsers(result.data.data); console.log(result.data); } async function save(event) { event.preventDefault(); try { await axios.post("http://localhost:9002/api/student/add", { stname: stname, course: course, fee: fee }); alert("Student Registation Successfully"); Load(); } catch(err) { alert("User Registation Failed"); } } async function editStudent(students) { setName(students.stname); setCourse(students.course); setFee(students.fee); setId(students.id); } async function DeleteStudent(id) { await axios.delete("http://localhost:9002/api/student/delete/" + id); alert("Student deleted Successfully"); Load(); } async function update(event) { event.preventDefault(); try { await axios.put("http://localhost:9002/api/student/update/"+ students.find(u => u.id === id).id || id, { id: id, stname: stname, course: course, fee: fee }); alert("Registation Updateddddd"); } catch(err) { alert(" Registation Failed"); } } return ( <div> <h1>Student Details</h1> <div class="container mt-4" > <form> <div class="form-group"> <input type="text" class="form-control" id="student_id" hidden value={id} onChange={(event) => { setId(event.target.value); }} /> <label>Student Name</label> <input type="text" class="form-control" id="name" value={stname} onChange={(event) => { setName(event.target.value); }} /> </div> <div class="form-group"> <label>Course</label> <input type="text" class="form-control" id="course" value={course} onChange={(event) => { setCourse(event.target.value); }} /> </div> <div class="form-group"> <label>Fee</label> <input type="text" class="form-control" id="fee" value={fee} onChange={(event) => { setFee(event.target.value); }} /> </div> <div> <button class="btn btn-primary mt-4" onClick={save}>Register</button> <button class="btn btn-warning mt-4" onClick={update}>Update</button> </div> </form> </div> <table class="table table-dark" align="center"> <thead> <tr> <th scope="col">Student Id</th> <th scope="col">Student Name</th> <th scope="col">Course</th> <th scope="col">Fee</th> <th scope="col">Option</th> </tr> </thead> {students.map(function fn(student) { return( <tbody> <tr> <th scope="row">{student.id} </th> <td>{student.stname}</td> <td>{student.course}</td> <td>{student.fee}</td> <td> <button type="button" class="btn btn-warning" onClick={() => editStudent(student)} >Edit</button> <button type="button" class="btn btn-danger" onClick={() => DeleteStudent(student.id)}>Delete</button> </td> </tr> </tbody> ); })} </table> </div> ); } export default Student; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import Student from './Student/Student'; function App() { return ( <div className="App"> <Student/> </div> ); } export default App; |
