Vue.js + Node.js + MySQL example: CRUD Application

Tien Nguyen - Jan 3 '21 - - Dev Community

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/

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:

vue-js-node-js-mysql-example-crud-create

– Show all objects:

vue-js-node-js-mysql-example-crud-retrieve

– Click on Edit button to update an object:

vue-js-node-js-mysql-example-crud-update

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':

vue-js-node-js-mysql-example-crud-search

Full-stack CRUD App Architecture

We're gonna build the application with following architecture:

vue-js-node-js-mysql-example-crud-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

vue-js-node-js-mysql-example-crud-client-components

– 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:

Serverless with Firebase:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .