This tutorial will teach you how to do the full stack development application using Spring boot with React and mongoDB you how to do basic database functions that are CREATE RETIEVE, UPDATE and DELETE using mongoDB Database.
Crud function how to perform the RESTful Web Service let discuss with following annotations.
@PostMapping: annotation which used to create new record.
@GetMapping: annotation which used to reads a record.
@RequestMapping: annotation which used to search the record.
@PutMapping: annotation which used to update the existing record.
@DeleteMapping: annotation which used to delete the record.
First Create the Controller
StudentController
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 | package com.example.SpringMongoProject.Controller; import com.example.SpringMongoProject.Entity.Student; import com.example.SpringMongoProject.Service.StudentServices; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; @RestController @CrossOrigin(origins = "*") @RequestMapping("api/v1/student") public class StudentController { @Autowired private StudentServices studentServices; @PostMapping(value = "/save") private String saveStudent(@RequestBody Student students) { studentServices.saveorUpdate(students); return students.get_id(); } @GetMapping(value = "/getall") public Iterable<Student> getStudents() { return studentServices.listAll(); } @PutMapping(value = "/edit/{id}") private Student update(@RequestBody Student student, @PathVariable(name = "id") String _id) { student.set_id(_id); studentServices.saveorUpdate(student); return student; } @DeleteMapping("/delete/{id}") private void deleteStudent(@PathVariable("id") String _id) { studentServices.deleteStudent(_id); } @RequestMapping("/search/{id}") private Student getStudents(@PathVariable(name = "id") String studentid) { return studentServices.getStudentByID(studentid); } } |
Create the Entity
Student
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 | package com.example.SpringMongoProject.Entity; import org.springframework.data.annotation.Id; import org.springframework.data.mongodb.core.mapping.Document; @Document(collection ="students") public class Student { @Id private String _id; private String studentname; private String studentaddress; private String mobile; public Student(String _id, String studentname, String studentaddress, String mobile) { this._id = _id; this.studentname = studentname; this.studentaddress = studentaddress; this.mobile = mobile; } public Student() { } public String get_id() { return _id; } public void set_id(String _id) { this._id = _id; } public String getStudentname() { return studentname; } public void setStudentname(String studentname) { this.studentname = studentname; } public String getStudentaddress() { return studentaddress; } public void setStudentaddress(String studentaddress) { this.studentaddress = studentaddress; } public String getMobile() { return mobile; } public void setMobile(String mobile) { this.mobile = mobile; } @Override public String toString() { return "Student{" + "_id='" + _id + '\'' + ", studentname='" + studentname + '\'' + ", studentaddress='" + studentaddress + '\'' + ", mobile='" + mobile + '\'' + '}'; } } |
Create repository
StudentRepo
1 2 3 4 5 6 7 8 9 | package com.example.SpringMongoProject.Repo; import com.example.SpringMongoProject.Entity.Student; import org.springframework.data.mongodb.repository.MongoRepository; import org.springframework.stereotype.Repository; @Repository public interface StudentRepo extends MongoRepository<Student,String> { } |
Create Service
StudentServices
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 | package com.example.SpringMongoProject.Service; import com.example.SpringMongoProject.Entity.Student; import com.example.SpringMongoProject.Repo.StudentRepo; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; @Service public class StudentServices { @Autowired private StudentRepo repo; public void saveorUpdate(Student students) { repo.save(students); } public Iterable<Student> listAll() { return this.repo.findAll(); } public void deleteStudent(String id) { repo.deleteById(id); } public Student getStudentByID(String studentid) { return repo.findById(studentid).get(); } } |
React
Installing React
1 | npx create-react-app front-end |
After complete the installation and run the project using following command.
1 | npm start |
Now you see the React Welcome Page.
After that open the React project into VS code editor.
First Step go to the bootstrap respect website and copy the bootstrap style paste inside the head tag.
After that install the axios by typing the following command
1 | npm i axios |
Creating a new Component student.jsx Paste the following code
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 | import axios from 'axios'; import {useEffect, useState } from "react"; function Student() { <strong>//Logic </strong> const [studentid, setId] = useState(''); const [studentname, setName] = useState(""); const [studentaddress, setAddress] = useState(""); const [mobile, setMobile] = useState(""); const [students, setUsers] = useState([]); useEffect(() => { (async () => await Load())(); }, []); async function Load() { const result = await axios.get( "http://localhost:8081/api/v1/student/getall"); setUsers(result.data); console.log(result.data); } async function save(event) { event.preventDefault(); try { await axios.post("http://localhost:8081/api/v1/student/save", { studentname: studentname, studentaddress: studentaddress, mobile: mobile }); alert("Student Registation Successfully"); setId(""); setName(""); setAddress(""); setMobile(""); Load(); } catch(err) { alert("User Registation Failed"); } } async function editStudent(students) { setName(students.studentname); setAddress(students.studentaddress); setMobile(students.mobile); setId(students._id); } async function DeleteStudent(studentid) { await axios.delete("http://localhost:8081/api/v1/student/delete/" + studentid); alert("Student deleted Successfully"); Load(); } async function update(event) { event.preventDefault(); try { await axios.put("http://localhost:8081/api/v1/student/edit/" + studentid , { studentname: studentname, studentaddress: studentaddress, mobile: mobile }); alert("Registation Updateddddd"); setId(""); setName(""); setAddress(""); setMobile(""); Load(); } catch(err) { alert("Student Updateddd Failed"); } } <strong>//Design </strong> return ( <div> <h1>Student Details</h1> <div class="container mt-4" > <form> <div class="form-group"> <label>Student Name</label> <input type="text" class="form-control" id="studentname" value={studentname} onChange={(event) => { setName(event.target.value); }} /> </div> <div class="form-group"> <label>Student Address</label> <input type="text" class="form-control" id="studentaddress" value={studentaddress} onChange={(event) => { setAddress(event.target.value); }} /> </div> <div class="form-group"> <label>Mobile</label> <input type="text" class="form-control" id="mobile" value={mobile} onChange={(event) => { setMobile(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> <br/> <table class="table table-dark" align="center"> <thead> <tr> <th scope="col">Student Name</th> <th scope="col">Student Address</th> <th scope="col">Student Mobile</th> <th scope="col">Option</th> </tr> </thead> {students.map(function fn(student) { return( <tbody> <tr> <td>{student.studentname}</td> <td>{student.studentaddress}</td> <td>{student.mobile}</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; |
i have attached the video link below. which will do this tutorials step by step.