DEV Community

Cover image for Spring Boot + Vue.js + PostgreSQL: CRUD example
Tien Nguyen
Tien Nguyen

Posted on • Updated on • Originally published at bezkoder.com

Spring Boot + Vue.js + PostgreSQL: CRUD example

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:

Alt Text

- Show all Tutorials:

Alt Text

- Click on Edit button to update a Tutorial:

Alt Text

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:

Alt Text

Spring Boot Vue.js PostgreSQL Architecture

Now look at the application architecture we will build:

Alt Text

  • 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

Alt Text

– 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/

Further Reading

Related Posts:

More Practice: Vue + Spring Boot: File Upload example

Run both Project on same server/port:
How to integrate Vue.js with Spring Boot

Serverless with Firebase:

Top comments (2)

Collapse
 
mikee profile image
Miguel Palacios

Man great post... this is an interesting stack that people could pay attention

Collapse
 
mithraperera profile image
Mithra Perera

Hey nice post! I'm a beginner to Java and Spring...how did you learn it and any tips?