spring-boot-vue-js-crud-example-feature-image

[Full-stack] Spring Boot + Vue.js: CRUD example

In this tutorial, we will learn how to build a full stack Spring Boot + Vue.js 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 MySQL/PostgreSQL database. Front-end side is made with Vue & Vue Router.

Related Posts:
Spring Boot + Vue.js: Authentication with JWT & Spring Security Example
Spring Boot + Vue.js + MongoDB: CRUD example

More Practice: Vue + Spring Boot: File Upload example

Serverless with Firebase:
Vue Firebase Realtime Database: CRUD example
Vue Firestore: Build a CRUD App example


Spring Boot Vue.js 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:

spring-boot-vue-js-crud-example-demo-0

– Show all Tutorials:

spring-boot-vue-js-crud-example-demo-1

– Click on Edit button to update a Tutorial:

spring-boot-vue-js-crud-example-demo-2

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-crud-example-demo-3

Spring Boot Vue.js Architecture

Now look at the application architecture we will build:

spring-boot-vue-js-crud-example-architecture

– Spring Boot exports REST Apis using Spring Web MVC & interacts with 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.
– Database could be MySQL or PostgreSQL.

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

Spring Boot Back-end

Overview

These are APIs that Spring Boot App will export:

MethodsUrlsActions
POST/api/tutorialscreate new Tutorial
GET/api/tutorialsretrieve all Tutorials
GET/api/tutorials/:idretrieve a Tutorial by :id
PUT/api/tutorials/:idupdate a Tutorial by :id
DELETE/api/tutorials/:iddelete a Tutorial by :id
DELETE/api/tutorialsdelete 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 could be PostgreSQL or MySQL depending on the way we configure project dependency & datasource.

Technology

  • Java 8
  • Spring Boot 2.2.1 (with Spring Web MVC, Spring Data JPA)
  • PostgreSQL/MySQL
  • Maven 3.6.1

Project Structure

spring-boot-vue-js-crud-example-spring-server-project-structure

Tutorial data model class corresponds to entity and table tutorials.
TutorialRepository is an interface that extends JpaRepository for CRUD methods and custom finder methods. It will be autowired in TutorialController.
TutorialController is a RestController which has request mapping methods for RESTful requests such as: getAllTutorials, createTutorial, updateTutorial, deleteTutorial, findByPublished
– Configuration for Spring Datasource, JPA & Hibernate in application.properties.
pom.xml contains dependencies for Spring Boot and MySQL/PostgreSQL.

Implementation

You can find step by step to implement this Spring Boot Server Application in the post:
Spring Boot, Spring Data JPA – Building Rest CRUD API example

Vue.js Front-end

Overview

spring-boot-vue-js-crud-example-vue-client-overview

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

Technology

  • vue: 2.6.10
  • vue-router: 3.1.3
  • axios: 0.19.0

Project Structure

spring-boot-vue-js-crud-example-vue-client-project-structure

package.json contains 3 main modules: vue, vue-router, axios.
– There are 3 components: TutorialsList, Tutorial, AddTutorial.
router.js defines routes for each component.
http-common.js initializes axios with HTTP base Url and headers.
TutorialDataService has methods for sending HTTP requests to the Apis.
vue.config.js configures port for this Vue Client.

Implementation

You can find step by step to implement this Vue App in the post:
Vue.js CRUD App with Vue Router & Axios

Or using Vuetify: Vuetify data-table example with a CRUD App

vuetify-data-table-example-crud-app-retrieve-all

Conclusion

Now we have an overview of Spring Boot Vue.js CRUD example when building a CRUD App with MySQL/PostgreSQL database.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, as well as Vue.js project structure for building a front-end app to make HTTP requests and consume responses.

Next tutorials show you more details about how to implement the system:

If you want a Typescript version for the Vue App, it is here:
Vue Typescript CRUD Application to consume Web API example

Serverless with Firebase:
Vue Firebase Realtime Database: CRUD example
Vue Firestore: Build a CRUD App example

Happy learning, see you again!

Further Reading

11 thoughts to “[Full-stack] Spring Boot + Vue.js: CRUD example”

  1. Best sample code and tutorial on the web. Very practical.
    Could you make some samples on how to deploy the springboot with vue to same web server, for example tomcat?

      1. Your tutorial is great. Kudos for job well done.
        Please why did you skip service layer in the tutorial. Is it that the service layer can be skipped without any problem on the application or that you left it for brevity?

  2. Hello,
    How do you build them, how is the connection made? Hello,
    the explanations are good, but only separated projects, but why don’t you explain how you make the connection backend and frontend?

  3. Thank you very much – Vue is just the best ❤️ Do you know bootify.io already? You get the Spring Boot MySQL + CRUD database in a minute. Cheers, Winf.

Leave a Reply

Your email address will not be published. Required fields are marked *