In this tutorial, we will learn how to build a full stack Spring Boot + Vue.js + MySQL 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 database. Front-end side is made with Vue & Vue Router.
Full Article: https://bezkoder.com/spring-boot-vue-js-mysql/
Spring Boot Vue.js MySQL 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 MySQL Architecture
Now look at the application architecture we will build:
- Spring Boot exports REST Apis using Spring Web MVC & interacts with MySQL 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 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 MySQL 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-mysql/
Further Reading
- 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
Run both Project on same server/port:
How to integrate Vue.js with Spring Boot
Serverless with Firebase:
Top comments (0)