Scholar Administration System Undertaking – FullStack Java + Spring Boot + React.js Instance Tutorial

• You should use any IDE to develop the backend(spring boot) and the frontend
  of the appliance.
• Server: Apache Tomcat
• Spring Boot 2
• Reactjs
• H2 Database

So let’s create the spring boot backend of the system first. 

2. The Spring Boot Software

Right here, the REST API is used to speak with the frontend(angular) of
the appliance. Earlier than you begin programming, it’s essential have a greater
construction of the mission. So beneath is the mission construction which is
used on this software.

This software is used to retailer some knowledge within the in-memory database of
H2 and fetch these knowledge. So beneath are the maven dependencies within the
pom.xml file which is used on this instance.

<?xml model="1.0" encoding="UTF-8"?>
<mission xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
   https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<mother or father>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<model>2.6.0</model>
<relativePath/> <!-- lookup mother or father from repository -->
   </mother or father>
<groupId>com.pupil</groupId>
<artifactId>crudapp</artifactId>
<model>0.0.1-SNAPSHOT</model>
<title>crudapp</title>
<description>Demo mission for Spring Boot</description>
<properties>
<java.model>1.8</java.model>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<non-compulsory>true</non-compulsory>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>take a look at</scope>
<exclusions>
<exclusion>
<groupId>org.junit.classic</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<construct>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</construct>
</mission>

3. The Software.properties file
SpringApplication will load properties from software.properties recordsdata within the following areas and add them to the Spring Atmosphere: 
        1. config subdirectory of the present listing. 
        2. The present listing 
        3. A classpath /config bundle 
        4. The classpath root
Under is the used applicaiton.properties file in this Scholar Crud software.
server.port=8090
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console
spring.datasource.url=jdbc:h2:mem:cmpe172
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

 
JPA Entity Class
Under is the used JPA entity class on this software. That is liable for modeling College students.
bundle com.pupil.crudapp.mannequin;
import javax.persistence.*;
@Entity
@Desk(title = "STUDENT")
public class Scholar {
@Column(title = "id")
@Id
    @GeneratedValue(technique=GenerationType.AUTO)
personal int id;
@Column(title = "title")
personal String title;
@Column(title = "electronic mail")
personal String electronic mail;
@Column(title = "grade")
personal String grade;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return title;
}
public void setName(String title) {
this.title = title;
}
public String getEmail() {
return electronic mail;
}
public void setEmail(String electronic mail) {
this.electronic mail = electronic mail;
}
public String getGrade() {
return grade;
}
public void setGrade(String grade) {
this.grade = grade;
}
@Override
    public String toString() {
return "Scholar{" +
"id=" + id +
", title="" + title + "'' +
", electronic mail="" + electronic mail + "'' +
", grade="" + grade + "'' +
'}';
}
}




4. The StudentRepository Interface

bundle com.pupil.crudapp.repository;
import com.pupil.crudapp.mannequin.Scholar;
import org.springframework.knowledge.jpa.repository.JpaRepository;
import java.util.Listing;
public interface StudentRepository extends JpaRepository<Scholar, Integer> {
Listing<Scholar> findAll();
Scholar findById(int id);
}

5. The StudentController Class

Under is the StudentController class which is used within the software.
There, we implement the addStudent, findStudent, getAllStudents,
updateStudent and deleteStudent strategies that are speaking with the
H2 database as a way to retailer them within the in-memory database.

bundle com.pupil.crudapp.controller;
import com.pupil.crudapp.mannequin.Scholar;
import com.pupil.crudapp.repository.StudentRepository;
import org.springframework.beans.manufacturing facility.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.net.bind.annotation.*;
import java.util.Listing;
@Controller
@CrossOrigin(origins = "http://localhost:8090")
public class StudentController {
@Autowired
    StudentRepository studentRepository;
//verify the api's working appropriately api
    @RequestMapping(worth="/ping", technique=RequestMethod.GET)
@ResponseBody
    public String healthCheck() {
return "That is working nicely";
}
@RequestMapping(worth="/college students", technique=RequestMethod.GET)
@ResponseBody
    public Listing<Scholar> getAllStudents() {
return studentRepository.findAll();
}
@RequestMapping(worth="/pupil", technique=RequestMethod.POST)
@ResponseBody
    public Scholar addStudent(Scholar pupil) {
return studentRepository.save(pupil);
}
@RequestMapping(worth="/findstudent", technique = RequestMethod.GET)
@ResponseBody
    public Scholar findStudent(@RequestParam("studentId") int studentId) {
return studentRepository.findById(studentId);
}
@RequestMapping(worth= "/updatestudent", technique = RequestMethod.GET)
@ResponseBody
    public Scholar updateStudent(@RequestBody Scholar pupil){
return studentRepository.save(pupil);
}
@RequestMapping(worth="/deletestudent", technique = RequestMethod.GET)
@ResponseBody
    public int deleteStudent(@RequestParam("studentId") int studentId) {
return studentRepository.deleteById(studentId);
}
}

Within the above controller, we used the @CrossOrigin annotation, as a way to allow Cross-Origin Useful resource Sharing (CORS) on the server.

You suppose that is pointless, however the factor is we're deploying our React frontend to http://localhost:4200, and our Boot backend to http://localhost:8090, the browser would in any other case deny requests from one to the opposite. the server.

So beneath are the created API's as a way to take care of frontend of the appliance.

1. Add a brand new Scholar (POST request)

http://localhost:8090/pupil

{
    "title": "Check",
    "electronic mail": "take a look at@gmail.com",
    "grade": "05"
}
2. Get all college students (GET request)

http://localhost:8090/college students
3. Discover particular pupil(GET request)
http://localhost:8090/findstudent?studentId=1
4. Replace pupil(GET Request)
http://localhost:8090/updatestudent
{
    "id": 1,
    "title": "Testupdated",
    "electronic mail": "testupdated@gmail.com",
    "grade": "05"
}
5. Delete pupil(GET request)

http://localhost:8090/deletestudent?studentId=1

Right here is the screenshot of the H2 database that we now have created.

import React, { Part } from "react";

import StudentService from "../companies/StudentService";

class ListStudentComponent extends Part {
  constructor(props) {
    tremendous(props);

    this.state = {
      college students: [],
    };

    this.addStudent = this.addStudent.bind(this);

    this.editStudent = this.editStudent.bind(this);

    this.deleteStudent = this.deleteStudent.bind(this);
  }

  deleteStudent(id) {
    StudentService.deleteStudent(id).then((res) => {
      this.setState({
        college students: this.state.college students.filter((pupil) => pupil.id !== id),
      });
    });
  }

  viewStudent(id) {
    this.props.historical past.push(`/view-pupil/${id}`);
  }

  editStudent(id) {
    this.props.historical past.push(`/add-pupil/${id}`);
  }

  componentDidMount() {
    StudentService.getStudent().then((res) => {
      this.setState({ college students: res.knowledge });
    });
  }

  addStudent() {
    this.props.historical past.push("/add-student/_add");
  }

  render() {
    return (
      <div>
        <h2 className="text-center">College students Listing</h2>

        <div className="row">
          <button className="btn btn-primary" onClick={this.addStudent}>
            {" "}
            Add Scholar
          </button>
        </div>

        <br></br>

        <div className="row">
          <desk className="desk table-striped table-bordered">
            <thead>
              <tr>
                <th> Scholar Identify</th>

                <th> Scholar E-mail</th>

                <th> Scholar Grade</th>

                <th> Actions</th>
              </tr>
            </thead>

            <tbody>
              {this.state.college students.map((pupil) => (
                <tr key={pupil.id}>
                  <td>{pupil.firstName}</td>

                  <td>{pupil.lastName}</td>

                  <td>{pupil.emailId}</td>

                  <td>
                    <button
                      onClick={() => this.editStudent(pupil.id)}
                      className="btn btn-info"
                    >
                      Replace
                    </button>

                    <button
                      model={{ marginLeft: "10px" }}
                      onClick={() => this.deleteStudent(pupil.id)}
                      className="btn btn-danger"
                    >
                      Delete
                    </button>

                    <button
                      model={{ marginLeft: "10px" }}
                      onClick={() => this.viewStudent(pupil.id)}
                      className="btn btn-info"
                    >
                      View
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </desk>
        </div>
      </div>
    );
  }
}

export default ListStudentComponent;

import React, { Part } from "react";

import StudentService from "../companies/StudentService";

class UpdateStudentComponent extends Part {
  constructor(props) {
    tremendous(props);

    this.state = {
      id: this.props.match.params.id,

      title: "",

      electronic mail: "",

      grade: "",
    };

    this.changeNameHandler = this.changeFirstNameHandler.bind(this);

    this.changeEmailHandler = this.changeEmailHandler.bind(this);

    this.changeGradeHandler = this.changeGradeHandler.bind(this);

    this.updateStudent = this.updateStudent.bind(this);
  }

  componentDidMount() {
    StudentService.getStudentById(this.state.id).then((res) => {
      let pupil = res.knowledge;

      this.setState({
        title: pupil.title,

        electronic mail: pupil.electronic mail,

        grade: pupil.grade,
      });
    });
  }

  updateStudent = (e) => {
    e.preventDefault();

    let pupil = {
      title: this.state.title,
      electronic mail: this.state.electronic mail,
      grade: this.state.grade,
    };

    console.log("pupil => " + JSON.stringify(pupil));

    console.log("id => " + JSON.stringify(this.state.id));

    StudentService.updateStudent(pupil, this.state.id).then((res) => {
      this.props.historical past.push("/college students");
    });
  };

  changeNameHandler = (occasion) => {
    this.setState({ title: occasion.goal.worth });
  };

  changeGradeHandler = (occasion) => {
    this.setState({ grade: occasion.goal.worth });
  };

  changeEmailHandler = (occasion) => {
    this.setState({ emailId: occasion.goal.worth });
  };

  cancel() {
    this.props.historical past.push("/college students");
  }

  render() {
    return (
      <div>
        <br></br>

        <div className="container">
          <div className="row">
            <div className="card col-md-6 offset-md-3 offset-md-3">
              <h3 className="text-center">Replace Worker</h3>

              <div className="card-body">
                <kind>
                  <div className="form-group">
                    <label> Identify:</label>

                    <enter
                      placeholder="First Identify"
                      title="firstName"
                      className="form-control"
                      worth={this.state.firstName}
                      onChange={this.changeNameHandler}
                    />
                  </div>

                  <div className="form-group">
                    <label> E-mail Id:</label>

                    <enter
                      placeholder="E-mail Tackle"
                      title="emailId"
                      className="form-control"
                      worth={this.state.emailId}
                      onChange={this.changeEmailHandler}
                    />
                  </div>

                  <div className="form-group">
                    <label> Grade:</label>

                    <enter
                      placeholder="Final Identify"
                      title="lastName"
                      className="form-control"
                      worth={this.state.lastName}
                      onChange={this.changeLastNameHandler}
                    />
                  </div>

                  <button
                    className="btn btn-success"
                    onClick={this.updateStudent}
                  >
                    Save
                  </button>

                  <button
                    className="btn btn-danger"
                    onClick={this.cancel.bind(this)}
                    model={{ marginLeft: "10px" }}
                  >
                    Cancel
                  </button>
                </kind>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default UpdateStudentComponent;

import React, { Part } from "react";

import StudentService from "../companies/StudentService";

class ViewStudentComponent extends Part {
  constructor(props) {
    tremendous(props);

    this.state = {
      id: this.props.match.params.id,

      college students: {},
    };
  }

  componentDidMount() {
    StudentService.getStudentById(this.state.id).then((res) => {
      this.setState({ college students: res.knowledge });
    });
  }

  render() {
    return (
      <div>
        <br></br>

        <div className="card col-md-6 offset-md-3">
          <h3 className="text-center"> View Scholar Particulars</h3>

          <div className="card-body">
            <div className="row">
              <label> Scholar Identify:</label>

              <div>{this.state.college students.title}</div>
            </div>

            <div className="row">
              <label> Scholar E-mail :</label>

              <div>{this.state.college students.electronic mail}</div>
            </div>

            <div className="row">
              <label> Scholar Grade:</label>

              <div>{this.state.college students.grade}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default ViewStudentComponent;

import axios from "axios";

const STUDENT_API_BASE_URL = "http://localhost:8090";

class StudentService {
  getStudent() {
    return;
    axios.get(STUDENT_API_BASE_URL);
  }

  createStudent(pupil) {
    return;
    axios.put up(STUDENT_API_BASE_URL + "/pupil", pupil);
  }

  getStudentById(studentId) {
    return;
    axios.get(STUDENT_API_BASE_URL + "/findstudent" + studentId);
  }

  updateStudent(pupil, studentId) {
    return;
    axios.put(STUDENT_API_BASE_URL + "/updatestudent" + studentId, pupil);
  }

  deleteStudent(studentId) {
    return;
    axios.delete(STUDENT_API_BASE_URL + "/deletestudent" + studentId);
  }
}

export default new StudentService();

Thanks for studying this text thus far. Should you discover this full-stack Spring Boot and Reactjs tutorial and instance,
then please share it with your pals and colleagues. You probably have any
questions or suggestions, then please drop a word.

P. S. – In case you are a Spring Boot newbie and need to be taught the
Spring Boot framework from scratch and search for a number of the finest on-line
assets, you too can take a look at these
finest Spring Boot programs for Java builders. This listing comprises free Udemy and Pluralsight programs to be taught Spring Boot
from scratch.