Tien Nguyen

Posted on Jan 2, 2021 • Edited on Jan 8, 2021 • Originally published at bezkoder.com

Spring Boot + Vue.js + PostgreSQL: CRUD example

#vue #springboot #java #webdev

In this tutorial, we will learn how to build a full stack Spring Boot + Vue.js + PostgreSQL example with a CRUD App. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data JPA for interacting with PostgreSQL database. Front-end side is made with Vue & Vue Router.

Full Article: https://bezkoder.com/spring-boot-vue-js-postgresql/

Spring Boot Vue.js PostgreSQL CRUD example

We will build a full-stack Tutorial Application in that:

Each Tutorial has id, title, description, published status.
We can create, retrieve, update, delete Tutorials.
We can also find Tutorials by title.

The images below shows screenshots of our System.

- Add Tutorial:

- Show all Tutorials:

- Click on Edit button to update a Tutorial:

On this Page, you can:

change status to Published using Publish button
remove the Tutorial from Database using Delete button
update the Tutorial details on Database with Update button

- Search Tutorials by title:

Spring Boot Vue.js PostgreSQL Architecture

Now look at the application architecture we will build:

Spring Boot exports REST Apis using Spring Web MVC & interacts with PostgreSQL Database using Spring JPA
Vue Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use Vue Router for navigating to pages.

You can also find the Spring REST Apis that works with MongoDB here:
Spring Boot with MongoDB CRUD example using Spring Data

Spring Boot Rest Apis Back-end

These are APIs that Spring Boot App will export:

Methods	Urls	Actions
POST	/api/tutorials	create new Tutorial
GET	/api/tutorials	retrieve all Tutorials
GET	/api/tutorials/:id	retrieve a Tutorial by `:id`
PUT	/api/tutorials/:id	update a Tutorial by `:id`
DELETE	/api/tutorials/:id	delete a Tutorial by `:id`
DELETE	/api/tutorials	delete all Tutorials
GET	/api/tutorials?title=[keyword]	find all Tutorials which title contains `keyword`

We make CRUD operations & finder methods with Spring Data JPA's JpaRepository.
The database will be PostgreSQL by configuring project dependency & datasource.

Vue.js Front-end

– The App component is a container with router-view. It has navbar that links to routes paths.

– TutorialsList component gets and displays Tutorials.
– Tutorial component has form for editing Tutorial's details based on :id.
– AddTutorial component has form for submission new Tutorial.

– These Components call TutorialDataService methods which use axios to make HTTP requests and receive responses.

For more details, implementation and Github, please visit:
https://bezkoder.com/spring-boot-vue-js-postgresql/