Saturday, February 4, 2023
HomeJavaSpring Boot Backend + Vuejs Instance - Half 1

Spring Boot Backend + Vuejs Instance [Java tutorial] – Half 1


On this tutorial, we’ll present you the Vue.js HTTP consumer and
Spring Boot Server instance that makes use of Spring JPA to do the CRUD with the
H2 database and Vue.js as frontend expertise to make requests and
obtain responses. However earlier than shifting to the Spring Boot and VueJs
Instance, Let’s talk about what’s Vuejs and its use circumstances.

 What’s Vuejs?

VueJS
is a JavaScript framework that lets you create dynamic internet
interfaces. The entrance finish, or imaginative and prescient, receives extra consideration. It is
easy to incorporate into different purposes and libraries. VueJS is straightforward
to put in, and novices might rapidly learn to use it and start
creating their very own person interfaces.

Benefits of Vue.js

There
are sure benefits of utilizing Vue.js, which ought to encourage
builders to make use of it of their initiatives. As an example, Vue.js is comparable
to Angular and React in lots of elements, and it continues to take pleasure in rising
recognition in comparison with different frameworks.

Simplicity – Vue.js is
additionally good for working with elements as a result of single-file elements
might retailer all the essential code, together with HTML, CSS, and
JavaScript, in a single file.

Customization – Vue.js is an
wonderful growth instrument as a result of all of its options are simply
accessible. Builders can title the perform no matter they like for ease
of use. Each part can have its personal set of capabilities, making it straightforward
to tailor the appliance to the person’s particular wants.

Person-Pleasant
– Vue.js, in keeping with consultants, doesn’t have a steep studying curve,
which is advantageous for inexperienced programmers. When it comes to
studying, it is price noting that Vue.js simply requires programmers to
perceive the basics of JavaScript, HTML, and CSS, versus
Angular or React, which require further programming languages for superior
growth.

Good Documentation – Good documentation is one in every of
probably the most important elements. Vue.js documentation shows all the
framework’s selections in addition to greatest observe examples.

And plenty of extra benefits you may get. So let’s again to our instance.

Instruments and applied sciences which is used on this software.

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

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

The Spring Boot Software

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

Spring Boot Backend + Vuejs Example [Java tutorial] - Part 1

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"?>
<venture 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.scholar</groupId>
<artifactId>crudapp</artifactId>
<model>0.0.1-SNAPSHOT</model>
<title>crudapp</title>
<description>Demo venture 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-obligatory>true</non-obligatory>
</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>check</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>

</venture>



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 on this Pupil 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 answerable for modeling College students.

bundle com.scholar.crudapp.mannequin;

import javax.persistence.*;

@Entity
@Desk(title = "STUDENT")
public class Pupil {

@Column(title = "id")
@Id
@GeneratedValue(technique=GenerationType.AUTO)
non-public int id;

@Column(title = "title")
non-public String title;

@Column(title = "electronic mail")
non-public String electronic mail;

@Column(title = "grade")
non-public 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 "Pupil{" +
"id=" + id +
", title="" + title + "'' +
", electronic mail="" + electronic mail + "'' +
", grade="" + grade + "'' +
'}';
}
}


The StudentRepository Interface

As
we have to keep on with the crud performance of our system, we have to
configure our StudentRepository interface as a Crud repository as beneath.

bundle com.scholar.crudapp.repository;

import com.scholar.crudapp.mannequin.Pupil;
import org.springframework.knowledge.jpa.repository.JpaRepository;

import java.util.Listing;

public interface StudentRepository extends JpaRepository<Pupil, Integer> {

Listing<Pupil> findAll();
Pupil findById(int id);

}

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
with a view to retailer them within the in-memory database.

bundle com.scholar.crudapp.controller;

import com.scholar.crudapp.mannequin.Pupil;
import com.scholar.crudapp.repository.StudentRepository;
import org.springframework.beans.manufacturing unit.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.internet.bind.annotation.*;

import java.util.Listing;

@Controller
@CrossOrigin(origins = "http://localhost:8090")
public class StudentController {

@Autowired
StudentRepository studentRepository;

//examine the api's working appropriately api
@RequestMapping(worth="/ping", methodology=RequestMethod.GET)
@ResponseBody
public String healthCheck() {
return "That is working properly";
}

@RequestMapping(worth="/college students", methodology=RequestMethod.GET)
@ResponseBody
public Listing<Pupil> getAllStudents() {
return studentRepository.findAll();
}

@RequestMapping(worth="/scholar", methodology=RequestMethod.POST)
@ResponseBody
public Pupil addStudent(Pupil scholar) {
return studentRepository.save(scholar);
}

@RequestMapping(worth="/findstudent", methodology = RequestMethod.GET)
@ResponseBody
public Pupil findStudent(@RequestParam("studentId") int studentId) {
return studentRepository.findById(studentId);
}

@RequestMapping(worth= "/updatestudent", methodology = RequestMethod.GET)
@ResponseBody
public Pupil updateStudent(@RequestBody Pupil scholar){
return studentRepository.save(scholar);
}

@RequestMapping(worth="/deletestudent", methodology = RequestMethod.GET)
@ResponseBody
public int deleteStudent(@RequestParam("studentId") int studentId) {
return studentRepository.deleteById(studentId);
}
}


Within the above controller, we used the @CrossOrigin annotation, with a view to allow Cross-Origin Useful resource Sharing (CORS) on the server.
You suppose that is pointless, however the factor is we're deploying our Angular 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 with a view to take care of frontend of the appliance.
1. Add a brand new Pupil (POST request)
http://localhost:8090/scholar

{

    "title""Take a look at",

    "electronic mail""check@gmail.com",

    "grade""05"

}

2. Get all college students (GET request)

http://localhost:8090/college students
3. Discover particular scholar(GET request)
http://localhost:8090/findstudent?studentId=1
4. Replace scholar(GET Request)
http://localhost:8090/updatestudent

{

    "id"1,

    "title""Testupdated",

    "electronic mail""testupdated@gmail.com",

    "grade""05"

}

5. Delete scholar(GET request)

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

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

So
now the backend of the appliance is accomplished, We have to give attention to
the frontend of the appliance which is meant to construct utilizing Vue.js.
So let’s begin working with Vue.js. 

The Vuejs Software

Let’s
create our first crud software utilizing Vue js. Making a Vue js app
is a snug atmosphere for studying Vuejs and it is the easiest way to
begin constructing new purposes. Contemplating this text is already large enough, I’m going to create a second a part of this text, the place I’ll share Vue.js half, until then preserve studying and all the most effective together with your Spring and Spring Boot studying.  Spring 6 and Spring Boot 3 is already right here and I additionally going to jot down about them quickly. Let me know if you’d like me to cowl any particular subject. 

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments