Tien NguyenIn 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/
Vue.js + Node.js + MySQL example Overview
We will build a full-stack Tutorial Application in that:
- Tutorial has id, title, description, published status.
- User can create, retrieve, update, delete Tutorials.
- There is a search box for finding Tutorials by title.
Here are screenshots of the example.
- Add an object:
– Show all objects:
– Click on Edit button to update an object:
On this Page, you can:
- change status to Published/Pending using Publish/UnPublished button
- remove the object from MySQL Database using Delete button
- update this object's details on Database with Update button
- Search objects by field 'title':
Full-stack CRUD App Architecture
We're gonna build the application with following architecture:
– Node.js Express exports REST APIs & interacts with MySQL Database using Sequelize ORM.
– Vue Client sends HTTP Requests and retrieves HTTP Responses using axios, consume data on the components. Vue Router is used for navigating to pages.
Node.js Express Back-end
These are APIs that Node.js Express App will export:
| Methods | Urls | Actions |
|---|---|---|
| GET | api/tutorials | get all Tutorials |
| GET | api/tutorials/:id | get Tutorial by id
|
| POST | api/tutorials | add new Tutorial |
| PUT | api/tutorials/:id | update Tutorial by id
|
| DELETE | api/tutorials/:id | remove Tutorial by id
|
| DELETE | api/tutorials | remove all Tutorials |
| GET | api/tutorials?title=[kw] | find all Tutorials which title contains 'kw'
|
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/vue-js-node-js-express-mysql-crud-example/
Further Reading
Run both projects (back-end & front-end) in one place:
How to serve/combine Vue App with Express
If you want a Typescript version for the Vue App, it is here:
Vue Typescript CRUD Application to consume Web API example
Pagination:
- Server side Pagination in Node.js with Sequelize & MySQL
- Vue Pagination with Axios and API (Server Side pagination) example
Serverless with Firebase:
