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.
Sp
rin
g
Bo
ot
Mv
c
Wo
rking Flow
First Create the Controller
StudentController
package [Link];
import [Link];
import [Link];
import [Link];
import [Link].*;
@RestController
@CrossOrigin(origins = "*")
@RequestMapping("api/v1/student")
public class StudentController {
@Autowired
private StudentServices studentServices;
@PostMapping(value = "/save")
private String saveStudent(@RequestBody Student students) {
[Link](students);
return students.get_id();
}
@GetMapping(value = "/getall")
public Iterable<Student> getStudents() {
return [Link]();
}
@PutMapping(value = "/edit/{id}")
private Student update(@RequestBody Student student, @PathVariable(name =
"id") String _id) {
student.set_id(_id);
[Link](student);
return student;
}
@DeleteMapping("/delete/{id}")
private void deleteStudent(@PathVariable("id") String _id) {
[Link](_id);
}
@RequestMapping("/search/{id}")
private Student getStudents(@PathVariable(name = "id") String studentid) {
return [Link](studentid);
}
Create the Entity
Student
package [Link];
import [Link];
import [Link];
@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;
[Link] = studentname;
[Link] = studentaddress;
[Link] = 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) {
[Link] = studentname;
}
public String getStudentaddress() {
return studentaddress;
}
public void setStudentaddress(String studentaddress) {
[Link] = studentaddress;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
[Link] = mobile;
}
@Override
public String toString() {
return "Student{" +
"_id='" + _id + '\'' +
", studentname='" + studentname + '\'' +
", studentaddress='" + studentaddress + '\'' +
", mobile='" + mobile + '\'' +
'}';
}
}
Create repository
StudentRepo
package [Link];
import [Link];
import [Link];
import [Link];
@Repository
public interface StudentRepo extends MongoRepository<Student,String> {
}
Create Service
StudentServices
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
@Service
public class StudentServices {
@Autowired
private StudentRepo repo;
public void saveorUpdate(Student students) {
[Link](students);
}
public Iterable<Student> listAll() {
return [Link]();
}
public void deleteStudent(String id) {
[Link](id);
}
public Student getStudentByID(String studentid) {
return [Link](studentid).get();
}
}
React
Installing React
npx create-react-app front-end
After complete the installation and run the project using following command.
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
npm i axios
Creating a new Component [Link] Paste the following code
import axios from 'axios';
import {useEffect, useState } from "react";
function Student()
{
//Logic
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 [Link](
"[Link]
setUsers([Link]);
[Link]([Link]);
}
async function save(event)
{
[Link]();
try
{
await [Link]("[Link]
{
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([Link]);
setAddress([Link]);
setMobile([Link]);
setId(students._id);
}
async function DeleteStudent(studentid)
{
await [Link]("[Link] +
studentid);
alert("Student deleted Successfully");
Load();
}
async function update(event)
{
[Link]();
try
{
await [Link]("[Link] + studentid
,
{
studentname: studentname,
studentaddress: studentaddress,
mobile: mobile
});
alert("Registation Updateddddd");
setId("");
setName("");
setAddress("");
setMobile("");
Load();
}
catch(err)
{
alert("Student Updateddd Failed");
}
}
//Design
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([Link]);
}}
/>
</div>
<div class="form-group">
<label>Student Address</label>
<input type="text" class="form-control" id="studentaddress"
value={studentaddress}
onChange={(event) =>
{
setAddress([Link]);
}}
/>
</div>
<div class="form-group">
<label>Mobile</label>
<input type="text" class="form-control" id="mobile"
value={mobile}
onChange={(event) =>
{
setMobile([Link]);
}}
/>
</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>
{[Link](function fn(student)
{
return(
<tbody>
<tr>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</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;
[Link]=SpringMongoProject
[Link] = 8089
[Link] = localhost
[Link] = 27017
[Link]=LindaDb
[Link]-property-inclusion=NON_NULL
