Contoh Spring Boot Backend + Vuejs [Tutorial Java] - Bagian 1

Pada tutorial kali ini, Nexa Genius akan memperlihatkan contoh penggunaan Vue.js HTTP client dan Spring Boot Server yang menggunakan Spring JPA untuk melakukan CRUD dengan database H2, serta Vue.js sebagai teknologi frontend untuk melakukan permintaan dan menerima respons. Namun, sebelum beralih ke contoh Spring Boot dan VueJs, mari kita bahas apa itu Vuejs dan kasus penggunaannya.

Apa itu Vuejs?

VueJS adalah kerangka kerja JavaScript yang memungkinkan Anda untuk membuat antarmuka web yang dinamis. Bagian depan, atau visi, lebih diperhatikan. VueJS mudah dimasukkan ke dalam aplikasi dan perpustakaan lainnya. VueJS mudah diinstal, dan pemula dapat dengan cepat belajar cara menggunakannya dan mulai membuat antarmuka pengguna mereka sendiri.

Keuntungan Vue.js

Ada beberapa keuntungan dalam menggunakan Vue.js, yang harus mendorong para pengembang untuk menggunakannya dalam proyek mereka. Misalnya, Vue.js mirip dengan Angular dan React dalam banyak aspek, dan terus menikmati popularitas yang semakin meningkat dibandingkan dengan kerangka kerja lainnya.

Kesederhanaan - Vue.js juga sempurna untuk bekerja dengan komponen karena komponen berkas tunggal dapat menyimpan semua kode yang diperlukan, termasuk HTML, CSS, dan JavaScript, dalam satu berkas.

Penyesuaian - Vue.js adalah alat pengembangan yang sangat baik karena semua fiturnya mudah diakses. Para pengembang dapat menamai fungsi apa saja sesuai keinginan mereka untuk memudahkan penggunaan. Setiap bagian dapat memiliki set fungsi sendiri, sehingga mudah untuk menyesuaikan aplikasi sesuai kebutuhan pengguna.

User-Friendly - Vue.js, menurut para ahli, tidak memiliki kurva belajar yang curam, yang menguntungkan bagi programmer yang tidak berpengalaman. Dalam hal belajar, patut dicatat bahwa Vue.js hanya memerlukan pemrogram untuk memahami dasar-dasar JavaScript, HTML, dan CSS, tidak seperti Angular atau React, yang memerlukan bahasa pemrograman tambahan untuk pengembangan lanjutan.

Dokumentasi yang baik - Dokumentasi yang baik adalah salah satu aspek yang paling penting. Dokumentasi Vue.js menampilkan semua pilihan kerangka kerja serta contoh praktik terbaik.

Dan masih banyak keuntungan lainnya yang bisa Anda dapatkan. Jadi mari kembali ke contoh kami.

Alat dan teknologi yang digunakan dalam aplikasi ini adalah sebagai berikut.

• Anda dapat menggunakan IDE apa pun untuk mengembangkan backend (spring boot) dan frontend dari aplikasi.
• Server: Apache Tomcat
• Spring Boot 2
• VueJs
• H2 Database
• Jadi mari kita buat backend sistem dengan Spring Boot terlebih dahulu.

Aplikasi Spring Boot

Di sini, REST API digunakan untuk berkomunikasi dengan frontend (angular) dari aplikasi. Sebelum mulai memprogram, Anda perlu memiliki struktur proyek yang lebih baik. Berikut adalah struktur proyek yang digunakan dalam aplikasi ini.

Aplikasi ini digunakan untuk menyimpan data pada database in-memory H2 dan mengambil data tersebut. Berikut adalah dependensi maven yang digunakan pada file pom.xml dalam contoh ini.

<?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
File application.properties digunakan oleh SpringApplication untuk memuat konfigurasi yang diperlukan oleh aplikasi. File ini dapat ditempatkan di beberapa lokasi dan secara otomatis dimuat oleh Spring. 
Berikut adalah lokasi yang digunakan oleh SpringApplication untuk mencari file application.properties:
Subdirektori config pada direktori saat ini.
Direktori saat ini.
Paket /config pada classpath.
Root classpath.
Di bawah ini adalah contoh file application.properties yang digunakan dalam aplikasi Student Crud ini.
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
Berikut adalah kelas JPA entitas yang digunakan dalam aplikasi ini. Kelas ini bertanggung jawab untuk memodelkan data mahasiswa.
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

Karena kita perlu tetap menggunakan fungsi crud dari sistem kita, kita perlu mengonfigurasi interface StudentRepository sebagai repository Crud seperti berikut.

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

Berikut adalah kelas StudentController yang digunakan dalam aplikasi ini. Di dalamnya, kami mengimplementasikan metode addStudent, findStudent, getAllStudents, updateStudent, dan deleteStudent yang berkomunikasi dengan basis data H2 untuk menyimpan data di dalam basis data memori.

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);
}
}

Pada kontroler di atas, kita menggunakan anotasi @CrossOrigin, agar dapat mengaktifkan Cross-Origin Resource Sharing (CORS) pada server.
Mungkin terlihat tidak perlu, tetapi hal ini diperlukan karena kita akan mendeploy frontend Angular kita pada http://localhost:4200, sedangkan backend Boot kita pada http://localhost:8090. Jika tidak menggunakan CORS, maka browser akan menolak permintaan dari satu sisi ke sisi yang lain.

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

Berikut adalah tangkapan layar dari basis data H2 yang telah kami buat.

Sekarang bagian backend aplikasi telah selesai, kita perlu fokus pada bagian frontend yang akan dibangun menggunakan Vue.js. Mari kita mulai bekerja dengan Vue.js.

Aplikasi Vue.js

Mari kita buat aplikasi crud pertama kita menggunakan Vue.js. Membuat aplikasi Vue.js adalah lingkungan yang nyaman untuk belajar Vue.js dan merupakan cara terbaik untuk memulai membangun aplikasi baru. Mengingat artikel ini sudah cukup besar, saya akan membuat artikel kedua tentang bagian Vue.js, sampai saat itu teruslah membaca dan semoga sukses dalam belajar Spring dan Spring Boot. Spring 6 dan Spring Boot 3 sudah tersedia dan saya juga akan menulis tentang mereka segera. Beri tahu saya jika Anda ingin saya membahas topik tertentu.