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

#vue #node #express #webdev

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:

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