In this tutorial, we will learn how to build a full stack example with Spring Boot + Vue.js + MongoDB CRUD Application. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data for interacting with MongoDB database. Front-end side is made with Vue, Vue Router & Bootstrap.
More Practice: Vue + Spring Boot: File Upload example
Spring Boot, Vue.js, MongoDB 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 an object:
– Show all objects:
– Click on Edit button to update the object:
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:
– Check MongoDB tutorials collection:
Spring Boot, Vue.js, MongoDB Architecture
This is the application architecture that we’re gonna build:
– Spring Boot exports REST Apis using Spring Web MVC & interacts with MongoDB Database using Spring Data MongoDB.
– 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.
Spring Boot MongoDB Back-end
These are APIs that Spring Boot App will export:
|POST||/api/tutorials||create new Tutorial|
|GET||/api/tutorials||retrieve all Tutorials|
|GET||/api/tutorials/:id||retrieve a Tutorial by |
|PUT||/api/tutorials/:id||update a Tutorial by |
|DELETE||/api/tutorials/:id||delete a Tutorial by |
|DELETE||/api/tutorials||delete all Tutorials|
|GET||/api/tutorials?title=[keyword]||find all Tutorials which title contains |
We make CRUD operations & finder methods with Spring Data’s
- Java 8
- Spring Boot 2.2.4 (with Spring Web MVC, Spring Data MongoDB)
- Maven 3.6.1
Tutorialdata model class corresponds to entity and table tutorials.
TutorialRepositoryis an interface that extends MongoRepository for CRUD methods and custom finder methods. It will be autowired in
TutorialControlleris a RestController which has request mapping methods for RESTful requests such as: getAllTutorials, createTutorial, updateTutorial, deleteTutorial, findByPublished…
- Configuration for Spring Data MongoDB is in application.properties.
- pom.xml contains dependencies for Spring Boot Web MVC and Spring Data MongoDB.
You can find step by step to implement this Spring Boot MongoDB Server Application in the post:
Spring Boot MongoDB CRUD example
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
AddTutorial component has form for submission new Tutorial.
– These Components call
TutorialDataService methods which use
axios to make HTTP requests and receive responses.
- vue: 2.6.10
- vue-router: 3.1.3
- axios: 0.19.0
– package.json contains 3 main modules:
– There are 3 components:
– 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.
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
Now we have an overview of Spring Boot Vue.js MongoDB CRUD example when building a CRUD App that connects with MongoDB database.
We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data MongoDB, 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
Happy learning, see you again!
- Spring Boot, MongoDB: JWT Authentication with Spring Security
- Spring Data MongoDB Reference Documentation