本文翻譯自Vue.js + Node.js + Express + MySQL example: Build a full-stack CRUD Application
Vue.js + Node.js + Express + MySQL example: Build a full-stack CRUD Application
上次修改時(shí)間：2020年10月16日 bezkoder Full Stack潜的，Node.js，Vue.js
在本教程中拔稳，我將向您展示如何構(gòu)建一個(gè)全棧（Vue.js + Node.js + Express + MySQL）的CRUD應(yīng)用程序示例扭粱。 后端服務(wù)器將Node.js + Express用于REST API扶歪，前端是帶有Vue Router和axios的Vue客戶端狞谱。
更過實(shí)踐：Node.js Express + Vue.js: JWT Authentication & Authorization example
Serverless with Firebase:
Vue.js + Node.js + Express + MySQL示例概述
我們將構(gòu)建一個(gè)全棧教程的應(yīng)用程序包括如下幾點(diǎn)：
教程具有ID掸刊，標(biāo)題免糕，描述，發(fā)布狀態(tài)忧侧。
用戶可以創(chuàng)建石窑，檢索，更新蚓炬，刪除教程松逊。
有一個(gè)搜索框，用于按標(biāo)題查找教程肯夏。
下面是示例的截圖：-
添加一個(gè)對象：
Add an object -
顯示所有的對象：
Show all objects -
點(diǎn)擊
Edit按鈕更新對象：
update an object
在這個(gè)頁面中经宏，你可以：- 使用
Publish/UnPublished按鈕將狀態(tài)更改成Published/Pending - 使用
Delete按鈕從MySQL數(shù)據(jù)庫中刪除對象 - 使用
Update按鈕更新數(shù)據(jù)庫中對象的詳細(xì)信息
- 使用
-
根據(jù)
title字段查找對象
Search objects by field ‘title’
全棧CRUD應(yīng)用程序架構(gòu)
我們將構(gòu)建一個(gè)如下體系結(jié)構(gòu)的應(yīng)用程序:
- Node.js Express導(dǎo)出REST API，并使用Sequelize ORM與MySQL數(shù)據(jù)庫進(jìn)行交互驯击。
- Vue客戶端使用axios發(fā)送HTTP請求并獲取HTTP響應(yīng)烁兰，在組件中使用數(shù)據(jù)。 Vue路由器用于頁面間的導(dǎo)航余耽。
Node.js Express后端
總覽
下面是Nodejs Express應(yīng)用導(dǎo)出的一些APIs：
| 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' |
項(xiàng)目結(jié)構(gòu)
[圖片上傳失敗...(image-4ae86f-1604851901712)]
- db.config.js導(dǎo)出MySQL連接和Sequelize的配置參數(shù)缚柏。
- 在server.js的
ExpressWeb服務(wù)器中，我們配置CORS碟贾，初始化并運(yùn)行Express REST API币喧。 - 接下來轨域，我們在
models/index.js中添加MySQL數(shù)據(jù)庫的配置，在models/tutorial.model.js中創(chuàng)建Sequelize數(shù)據(jù)模型杀餐。 -
controller中的教程控制器干发。 - 在tutorial.routes.js中處理所有CRUD操作（包括自定義查找器）的路由。
實(shí)現(xiàn)
您可以在文章中逐步找到實(shí)現(xiàn)此Node.js Express應(yīng)用程序的步驟：
Node.js Rest APIs example with Express, Sequelize & MySQL
Vue.js前端
總覽
[圖片上傳失敗...(image-3ec37e-1604851901712)]
-
App組件是具有route_view的容器史翘。 它具有鏈接到routes路徑的導(dǎo)航欄枉长。 -
TutorialsList組件獲取并顯示Tutorials。 -
Tutorial組件具有用于根據(jù)`:id'編輯教程詳細(xì)信息的表單琼讽。 -
AddTutorial組件具有用于提交新教程的表單必峰。 - 這些組件調(diào)用
TutorialDataService方法，這些方法使用axios發(fā)出HTTP請求并接收響應(yīng)钻蹬。
技術(shù)
- vue: 2.6.10
- vue-router: 3.1.3
- axios: 0.19.0
項(xiàng)目結(jié)構(gòu)
[圖片上傳失敗...(image-2de8c8-1604851901712)]
-
package.json包含3個(gè)主要的模塊:vue,vue-router,axios吼蚁。 - 有三個(gè)組件:
TutorialsList,Tutorial,AddTutorial。 -
router.js為每個(gè)組件定義了路由问欠。 -
http-common.js使用HTTP基準(zhǔn)Url和請求頭初始化axios. -
TutorialDataService中有用于發(fā)送HTTP請求的Apis的方法肝匆。 -
vue.config.js為Vue客戶端配置端口。
實(shí)現(xiàn)
您可以在文章中逐步找到實(shí)現(xiàn)此Vue App的步驟：
Vue.js CRUD App with Vue Router & Axios
或者使用Vuetify：Vuetify data-table example with a CRUD App
結(jié)論
現(xiàn)在顺献，我們在構(gòu)建全棧CRUD應(yīng)用程序時(shí)概述了Vue.js + Node.js Express + MySQL示例旗国。
我們還介紹使用Express＆Sequelize ORM的REST API的客戶端-服務(wù)器體系結(jié)構(gòu)，以及用于構(gòu)建前端應(yīng)用程序以發(fā)出HTTP請求和使用響應(yīng)的Vue.js項(xiàng)目結(jié)構(gòu)注整。
接下來的教程向您展示有關(guān)如何實(shí)現(xiàn)系統(tǒng)的更多詳細(xì)信息：
如果你想要一個(gè)TypeScript版本的Vue App能曾，可以參考如下文章:
Vue Typescript CRUD Application to consume Web API example
分頁:
- Server side Pagination in Node.js with Sequelize & MySQL
- Vue Pagination with Axios and API (Server Side pagination) example
Serverless with Firebase:
祝您學(xué)習(xí)愉快，再見设捐！
