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

Tags: vue, springboot, springjpa, restapi
Published: 2021-04-16 14:11:46

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:
- <a href="https://grokonez.com/spring-framework/spring-boot/integrate-h2-database-springboot-spring-jpa-embedded-mode">Integrate H2 database with SpringBoot & Spring JPA in Embedded mode</a>
- <a href="https://grokonez.com/frontend/vue-js/vue-router-example-with-nav-bar-dynamic-route-nested-routes">Vue Router example – with Nav Bar, Dynamic Route & Nested Routes</a>

<!--more-->
<h2>Technologies</h2>
– 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
<h2>Overview</h2>
This is full-stack Architecture:

<img src="https://grokonez.com/wp-content/uploads/2018/09/vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-architecture.png" alt="vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-architecture" width="648" height="231" class="alignnone size-full wp-image-14991" />
<h3>Demo</h3>
<iframe width="853" height="480" src="https://www.youtube.com/embed/ZGpFZk5tlKc?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<h3>1. Spring Boot Server</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/09/vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-spring-server-architecture.png" alt="vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-spring-server-architecture" width="646" height="290" class="alignnone size-full wp-image-14986" />
<h3>2. Vue.js Client</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/09/vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-vue-client-ui.png" alt="vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-vue-client-ui" width="700" height="334" class="alignnone size-full wp-image-14987" />
<h2>Practice</h2>
<h3>1. Spring Boot Server</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/09/vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-spring-server-structure.png" alt="vue-spring-boot-h2-database-example-spring-data-h2-database-rest-api-spring-server-structure" width="335" height="371" class="alignnone size-full wp-image-14993" />

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

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