DEV Community

loading...

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

loizenai profile image loizenai ・3 min read

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:

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:

vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-architecture

Demo

1. Spring Boot Server

vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-spring-server-architecture

2. Vue.js Client

vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-vue-client-ui

Practice

1. Spring Boot Server

vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-spring-server-structure

  • 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

Discussion (0)

Forem Open with the Forem app