Vue.js + Spring Boot + H2 Database [embedded mode] example | Spring Data JPA + RestAPIs CRUD example

https://grokonez.com/frontend/vue-js/vue-js-spring-boot-h2-database-example-embedded-mode-spring-data-jpa-restapis-crud-example

Vue.js + Spring Boot + H2 Database [embedded mode] example | Spring Data JPA + RestAPIs CRUD example

H2 database is an open source that provides JDBC API to connect to Java applications. It also provides browser based console for convenient use. In this Vue.js Spring Boot tutorial, we show you Vue.js Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with H2 Database and Vue.js as a front-end technology to make request and receive response.

Related Posts:

• Integrate H2 database with SpringBoot & Spring JPA in Embedded mode
• Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 2.0.5.RELEASE

• Vue 2.5.17
• Vue Router 3
• Axios 0.18.0

  Overview

  This is full-stack Architecture:

Demo

1. Spring Boot Server

2. Vue.js Client

Practice

1. Spring Boot Server

• Customer class corresponds to entity and table customer.
• CustomerRepository is an interface extends CrudRepository, will be autowired in CustomerController for implementing repository methods and custom finder methods.
• CustomerController is a REST Controller which has request mapping methods for RESTful requests such as: getAllCustomers, postCustomer, deleteCustomer, findByAge, updateCustomer.
• Configuration for Spring Datasource and Spring JPA properties in application.properties
• Dependencies for Spring Boot and H2 Database in pom.xml

More at:

https://grokonez.com/frontend/vue-js/vue-js-spring-boot-h2-database-example-embedded-mode-spring-data-jpa-restapis-crud-example

Vue.js + Spring Boot + H2 Database [embedded mode] example | Spring Data JPA + RestAPIs CRUD example