Vue.js + Node.js + MySQL example: CRUD Application
Tags: vue, node, express, webdev
Published: 2021-01-03 11:12:28

In this tutorial, I will show you how to build full-stack CRUD Application: Vue.js + Node.js + MySQL example. The back-end server uses Node.js + Express for REST APIs, front-end side is a Vue client with Vue Router and axios.

Full Article: [https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)

<h2>Vue.js + Node.js + MySQL example Overview</h2>
We will build a full-stack Tutorial Application in that:
<ul>
	<li>Tutorial has id, title, description, published status.</li>
	<li>User can create, retrieve, update, delete Tutorials.</li>
	<li>There is a search box for finding Tutorials by title.</li>
</ul>

Here are screenshots of the example.

- Add an object:

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

– Show all objects:

![vue-js-node-js-mysql-example-crud-retrieve](https://dev-to-uploads.s3.amazonaws.com/i/83rlry4vnliuzuhbva55.png)

– Click on <strong>Edit</strong> button to update an object:

![vue-js-node-js-mysql-example-crud-update](https://dev-to-uploads.s3.amazonaws.com/i/gr6nlw9c44cismq3e8sx.png)

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

- Search objects by field 'title':

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

<h2>Full-stack CRUD App Architecture</h2>

We're gonna build the application with following architecture:

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

– Node.js Express exports REST APIs & interacts with MySQL Database using Sequelize ORM.
– Vue Client sends HTTP Requests and retrieves HTTP Responses using <em>axios</em>, consume data on the components. Vue Router is used for navigating to pages.

<h2>Node.js Express Back-end</h2>

These are APIs that Node.js Express 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>GET</td>
<td>api/tutorials</td>
<td>get all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>api/tutorials/:id</td>
<td>get Tutorial by <code>id</code></td>
</tr>
<tr>
<td>POST</td>
<td>api/tutorials</td>
<td>add new Tutorial</td>
</tr>
<tr>
<td>PUT</td>
<td>api/tutorials/:id</td>
<td>update Tutorial by <code>id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>api/tutorials/:id</td>
<td>remove Tutorial by <code>id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>api/tutorials</td>
<td>remove all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>api/tutorials?title=[kw]</td>
<td>find all Tutorials which title contains <code>'kw'</code></td>
</tr>
</tbody>
</table>
</div>

<h2>Vue.js Front-end</h2>

![vue-js-node-js-mysql-example-crud-client-components](https://dev-to-uploads.s3.amazonaws.com/i/mkzlqg58gvxdavsvoldq.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/vue-js-node-js-express-mysql-crud-example/](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)

## Further Reading
Run both projects (back-end & front-end) in one place:
<a href="https://bezkoder.com/serve-vue-app-express/">How to serve/combine Vue App with Express</a>

If you want a Typescript version for the Vue App, it is here:
<a href="https://bezkoder.com/vue-typescript-crud/">Vue Typescript CRUD Application to consume Web API example</a>

Pagination:
- <a href="https://bezkoder.com/node-js-sequelize-pagination-mysql/">Server side Pagination in Node.js with Sequelize & MySQL</a>
- <a href="https://bezkoder.com/vue-pagination-axios/">Vue Pagination with Axios and API (Server Side pagination) example</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>