Vue.js + Node.js + Express + MySQL example: Build a full-stack CRUD Application
本文转载自博主bezkoder的博客Vue.js + Node.js + Express + MySQL example: Build a full-stack CRUD Application
直接拿过来的，方便以后阅读，由于比较简单，就不做翻译了。
In this tutorial, I will show you how to build full-stack (Vue.js + Node.js + Express + MySQL) example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is a Vue client with Vue Router and axios.
More Practice: Node.js Express + Vue.js: JWT Authentication & Authorization example
Contents
- Vue.js + Node.js + Express + MySQL example Overview
- Full-stack CRUD App Architecture
- Node.js Express Back-end
- Overview
- Project Structure
- Implementation
- Vue.js Front-end
- Overview
- Technology
- Project Structure
- Implementation
- Conclusion
Vue.js + Node.js + Express + 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
Overview
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’ |
Project Structure
– db.config.js exports configuring parameters for MySQL connection & Sequelize.
– Express web server in server.js where we configure CORS, initialize & run Express REST APIs.
– Next, we add configuration for MySQL database in models/index.js, create Sequelize data model in models/tutorial.model.js.
– Tutorial controller in controllers.
– Routes for handling all CRUD operations (including custom finder) in tutorial.routes.js.
Implementation
You can find step by step to implement this Node.js Express App in the post:
Node.js Rest APIs example with Express, Sequelize & MySQL
Vue.js Front-end
Overview
– 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.
Technology
- vue: 2.6.10
- vue-router: 3.1.3
- axios: 0.19.0
Project Structure
– package.json contains 3 main modules: vue, vue-router, axios.
– There are 3 components: TutorialsList, Tutorial, AddTutorial.
– router.js defines routes for each component.
– http-common.js initializes axios with HTTP base Url and headers.
– TutorialDataService has methods for sending HTTP requests to the Apis.
– vue.config.js configures port for this Vue Client.
Implementation
You can find step by step to implement this Vue App in the post:
Vue.js CRUD App with Vue Router & Axios
Conclusion
Now we have an overview of Vue.js + Node.js Express + MySQL example when building a full-stack CRUD App.
We also take a look at client-server architecture for REST API using Express & Sequelize ORM, as well as Vue.js project structure for building a front-end app to make HTTP requests and consume responses.
Next tutorials show you more details about how to implement the system:
If you want a Typescript version for the Vue App, it is here:
Vue Typescript CRUD Application to consume Web API example
Happy learning, see you again!