Spring Boot + Vue.js + MySQL: CRUD example
Tags: vue, springboot, webdev, java
Published: 2021-01-02 02:22:12

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/](https://bezkoder.com/spring-boot-vue-js-mysql/)

<h2>Spring Boot Vue.js MySQL CRUD example</h2>
We will build a full-stack Tutorial Application in that:
<ul>
	<li>Each Tutorial has id, title, description, published status.</li>
	<li>We can create, retrieve, update, delete Tutorials.</li>
	<li>We can also find Tutorials by title.</li>
</ul>

The images below shows screenshots of our System.

\- Add Tutorial:

![spring-boot-vue-js-mysql-example-crud-create-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/phrrfxcwy15hlpf07yw6.png)

\- Show all Tutorials:

![spring-boot-vue-js-mysql-example-crud-retrieve-all-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/64y2d30up9drdyms8rg4.png)

\- Click on <strong>Edit</strong> button to update a Tutorial:

![spring-boot-vue-js-mysql-example-crud-update-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/6x57arzw9cl1kzkf8eso.png)

On this Page, you can:
<ul>
	<li>change status to <strong>Published</strong> using <strong>Publish</strong> button</li>
	<li>remove the Tutorial from Database using <strong>Delete</strong> button</li>
	<li>update the Tutorial details on Database with <strong>Update</strong> button</li>
</ul>

\- Search Tutorials by title:

![spring-boot-vue-js-mysql-example-crud-search-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/tk4au5gp98jxctx2xbyt.png)

<h2>Spring Boot Vue.js MySQL Architecture</h2>
Now look at the application architecture we will build:

![spring-boot-vue-js-mysql-example-crud-architecture](https://dev-to-uploads.s3.amazonaws.com/i/g1iyl5400qj3xoiatdst.png)

- 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 <strong>axios</strong>, shows data on the components. We also use Vue Router for navigating to pages.

<div class="alert alert-success">You can also find the Spring REST Apis that works with MongoDB here:
<a href="https://bezkoder.com/spring-boot-mongodb-crud/">Spring Boot with MongoDB CRUD example using Spring Data</a></div>

<h2>Spring Boot Back-end</h2>
These are APIs that Spring Boot App will export:
<div class="table-responsive">
<table class="table table-hover  table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>POST</td>
<td>/api/tutorials</td>
<td>create new Tutorial</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials</td>
<td>retrieve all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials/:id</td>
<td>retrieve a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>PUT</td>
<td>/api/tutorials/:id</td>
<td>update a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials/:id</td>
<td>delete a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials</td>
<td>delete all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials?title=[keyword]</td>
<td>find all Tutorials which title contains <code>keyword</code></td>
</tr>
</tbody>
</table>
</div>
- We make CRUD operations & finder methods with Spring Data JPA's <code>JpaRepository</code>.
- The database will be MySQL by configuring project dependency & datasource.

<h2>Vue.js Front-end</h2>
![spring-boot-vue-js-mysql-example-crud-client-components](https://dev-to-uploads.s3.amazonaws.com/i/hflfcz0an2g2zdoz2pzw.png)

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

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

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

For more details, implementation and Github, please visit:
[https://bezkoder.com/spring-boot-vue-js-mysql/](https://bezkoder.com/spring-boot-vue-js-mysql/)

## Further Reading
- <a href="https://bezkoder.com/spring-boot-vue-js-authentication-jwt-spring-security/">Spring Boot + Vue.js: Authentication with JWT & Spring Security Example</a>
- <a href="https://bezkoder.com/spring-boot-vue-mongodb/">Spring Boot + Vue.js + MongoDB: CRUD example</a>

More Practice: <a href="https://bezkoder.com/vue-axios-file-upload/">Vue + Spring Boot: File Upload example</a>

Run both Project on same server/port:
<a href="https://bezkoder.com/integrate-vue-spring-boot/">How to integrate Vue.js with Spring Boot</a>

Serverless with Firebase:
- <a href="https://bezkoder.com/vue-firebase-realtime-database/">Vue Firebase Realtime Database: CRUD example</a>
- <a href="https://bezkoder.com/vue-firestore-crud/">Vue Firestore: Build a CRUD App example</a>