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

In this tutorial, we will show you the Vue.js HTTP client and Spring Boot Server example that uses Spring JPA to do the CRUD with the H2 database and Vue.js as frontend technology to make requests and receive responses. But before moving to the Spring Boot and VueJs Example, Let's discuss what is Vuejs and its use cases.

 What is Vuejs?

VueJS is a JavaScript framework that allows you to create dynamic web interfaces. The front end, or vision, receives more attention. It's simple to include into other applications and libraries. VueJS is easy to install, and beginners may quickly learn how to use it and begin creating their own user interfaces.

Advantages of Vue.js

There are certain advantages of using Vue.js, which should encourage developers to use it in their projects. For instance, Vue.js is similar to Angular and React in many aspects, and it continues to enjoy growing popularity compared to other frameworks.

Simplicity - Vue.js is also perfect for working with components because single-file components may store all of the necessary code, including HTML, CSS, and JavaScript, in a single file.

Customization - Vue.js is an excellent development tool because all of its features are easily accessible. Developers can name the function whatever they like for ease of use. Every section can have its own set of functions, making it easy to tailor the application to the user's specific needs.

User-Friendly - Vue.js, according to experts, does not have a steep learning curve, which is advantageous for inexperienced programmers. In terms of learning, it's worth noting that Vue.js just requires programmers to understand the fundamentals of JavaScript, HTML, and CSS, as opposed to Angular or React, which require extra programming languages for advanced development.

Good Documentation - Good documentation is one of the most critical aspects. Vue.js documentation displays all of the framework's choices as well as best practice examples.

And many more advantages you can get. So let's back to our example.

Tools and technologies which is used in this application.

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

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

The Spring Boot Application

Here, the REST API is used to communicate with the frontend(angular) of the application. Before you start programming, you need to have a better structure of the project. So below is the project structure which is used in this application.

This application is used to store some data in the in-memory database of H2 and fetch those data. So below are the maven dependencies in the pom.xml file which is used in this example.

<?xml version="1.0" encoding="UTF-8"?>
<project 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>
   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>2.6.0</version>
      <relativePath/> <!-- lookup parent from repository -->
   </parent>
   <groupId>com.student</groupId>
   <artifactId>crudapp</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>crudapp</name>
   <description>Demo project for Spring Boot</description>
   <properties>
      <java.version>1.8</java.version>
   </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>
         <optional>true</optional>
      </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>test</scope>
         <exclusions>
            <exclusion>
               <groupId>org.junit.vintage</groupId>
               <artifactId>junit-vintage-engine</artifactId>
            </exclusion>
         </exclusions>
      </dependency>
   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
         </plugin>
      </plugins>
   </build>

</project>

The Application.properties file
SpringApplication will load properties from application.properties files in the following locations and add them to the Spring Environment: 
        1. config subdirectory of the current directory. 
        2. The current directory 
        3. A classpath /config package 
        4. The classpath root


Below is the used applicaiton.properties file in this Student Crud application.

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
Below is the used JPA entity class in this application. This is responsible for modeling Students.

package com.student.crudapp.model;

import javax.persistence.*;

@Entity
@Table(name = "STUDENT")
public class Student {

    @Column(name = "id")
    @Id
    @GeneratedValue(strategy=GenerationType.AUTO)
    private int id;

    @Column(name = "name")
    private String name;

    @Column(name = "email")
    private String email;

    @Column(name = "grade")
    private String grade;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getGrade() {
        return grade;
    }

    public void setGrade(String grade) {
        this.grade = grade;
    }

    @Override
    public String toString() {
        return "Student{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", email='" + email + '\'' +
                ", grade='" + grade + '\'' +
                '}';
    }
}

The StudentRepository Interface

As we need to stick with the crud functionality of our system, we need to configure our StudentRepository interface as a Crud repository as below.

package com.student.crudapp.repository;

import com.student.crudapp.model.Student;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

public interface StudentRepository extends JpaRepository<Student, Integer> {

    List<Student> findAll();
    Student findById(int id);

}

The StudentController Class

Below is the StudentController class which is used in the application. There, we implement the addStudent, findStudent, getAllStudents, updateStudent and deleteStudent methods which are communicating with the H2 database in order to store them in the in-memory database.

package com.student.crudapp.controller;

import com.student.crudapp.model.Student;
import com.student.crudapp.repository.StudentRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

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

    @Autowired
    StudentRepository studentRepository;

    //check the api's working correctly api
    @RequestMapping(value="/ping", method=RequestMethod.GET)
    @ResponseBody
    public String healthCheck() {
        return "This is working well";
    }


    @RequestMapping(value="/students", method=RequestMethod.GET)
    @ResponseBody
    public List<Student> getAllStudents() {
        return studentRepository.findAll();
    }

    @RequestMapping(value="/student", method=RequestMethod.POST)
    @ResponseBody
    public Student addStudent(Student student) {
        return studentRepository.save(student);
    }

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

    @RequestMapping(value= "/updatestudent", method = RequestMethod.GET)
    @ResponseBody
    public Student updateStudent(@RequestBody Student student){
        return studentRepository.save(student);
    }

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

In the above controller, we used the @CrossOrigin annotation, in order to enable Cross-Origin Resource Sharing (CORS) on the server.

You think this is unnecessary, but the thing is we're deploying our Angular frontend to http://localhost:4200, and our Boot backend to http://localhost:8090, the browser would otherwise deny requests from one to the other. the server.

So below are the created API's in order to deal with frontend of the application.

1. Add a new Student (POST request)

http://localhost:8090/student

{
    "name": "Test",
    "email": "test@gmail.com",
    "grade": "05"
}

2. Get all students (GET request)

http://localhost:8090/students
3. Find specific student(GET request)
http://localhost:8090/findstudent?studentId=1
4. Update student(GET Request)
http://localhost:8090/updatestudent
{
    "id": 1,
    "name": "Testupdated",
    "email": "testupdated@gmail.com",
    "grade": "05"
}

5. Delete student(GET request)

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

Here is the screenshot of the H2 database that we have created.

So now the backend of the application is completed, We need to focus on the frontend of the application which is supposed to build using Vue.js. So let's start working with Vue.js. 

The Vuejs Application

Let's create our first crud application using Vue js. Creating a Vue js app is a comfortable environment for learning Vuejs and it's the best way to start building new applications. Considering this article is already big enough, I am going to create a second part of this article, where I will share Vue.js part, till then keep reading and all the best with your Spring and Spring Boot learning.  Spring 6 and Spring Boot 3 is already here and I also going to write about them soon. Let me know if you want me to cover any specific topic.