Vue.js + Node.js + Express + MySQL示例：构建全栈CRUD应用程序
Vue.js + Node.js + Express + MySQL示例：构建全栈CRUD应用程序
本文翻译自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
上次修改时间：2020年10月16日 bezkoder Full Stack，Node.js，Vue.js
在本教程中，我将向您展示如何构建一个全栈（Vue.js + Node.js + Express + MySQL）的CRUD应用程序示例。 后端服务器将Node.js + Express用于REST API，前端是带有Vue Router和axios的Vue客户端。
更过实践：Node.js Express + Vue.js: JWT Authentication & Authorization example
Serverless with Firebase:
Vue.js + Node.js + Express + MySQL示例概述
我们将构建一个全栈教程的应用程序包括如下几点：
- 教程具有ID，标题，描述，发布状态。
- 用户可以创建，检索，更新，删除教程。
- 有一个搜索框，用于按标题查找教程。 下面是示例的截图：
- 添加一个对象：
- 显示所有的对象：
- 点击
Edit按钮更新对象：
在这个页面中，你可以：
- 使用
Publish/UnPublished按钮将状态更改成Published/Pending - 使用
Delete按钮从MySQL数据库中删除对象 - 使用
Update按钮更新数据库中对象的详细信息
- 根据
title字段查找对象
全栈CRUD应用程序架构
我们将构建一个如下体系结构的应用程序:
- Node.js Express导出REST API，并使用Sequelize ORM与MySQL数据库进行交互。
- Vue客户端使用axios发送HTTP请求并获取HTTP响应，在组件中使用数据。 Vue路由器用于页面间的导航。
Node.js Express后端
总览
下面是Nodejs Express应用导出的一些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’ |
项目结构
- db.config.js导出MySQL连接和Sequelize的配置参数。
- 在server.js的
ExpressWeb服务器中，我们配置CORS，初始化并运行Express REST API。 - 接下来，我们在
models/index.js中添加MySQL数据库的配置，在models/tutorial.model.js中创建Sequelize数据模型。 controller中的教程控制器。- 在tutorial.routes.js中处理所有CRUD操作（包括自定义查找器）的路由。
实现
您可以在文章中逐步找到实现此Node.js Express应用程序的步骤： Node.js Rest APIs example with Express, Sequelize & MySQL
Vue.js前端
总览
App组件是具有route_view的容器。 它具有链接到routes路径的导航栏。TutorialsList组件获取并显示Tutorials。Tutorial组件具有用于根据`:id’编辑教程详细信息的表单。AddTutorial组件具有用于提交新教程的表单。- 这些组件调用
TutorialDataService方法，这些方法使用axios发出HTTP请求并接收响应。
技术
- vue: 2.6.10
- vue-router: 3.1.3
- axios: 0.19.0
项目结构
package.json包含3个主要的模块:vue,vue-router,axios。- 有三个组件:
TutorialsList,Tutorial,AddTutorial。 router.js为每个组件定义了路由。http-common.js使用HTTP基准Url和请求头初始化axios.TutorialDataService中有用于发送HTTP请求的Apis的方法。vue.config.js为Vue客户端配置端口。
实现
您可以在文章中逐步找到实现此Vue App的步骤： Vue.js CRUD App with Vue Router & Axios 或者使用Vuetify：Vuetify data-table example with a CRUD App
结论
现在，我们在构建全栈CRUD应用程序时概述了Vue.js + Node.js Express + MySQL示例。
我们还介绍使用Express＆Sequelize ORM的REST API的客户端-服务器体系结构，以及用于构建前端应用程序以发出HTTP请求和使用响应的Vue.js项目结构。
接下来的教程向您展示有关如何实现系统的更多详细信息：
如果你想要一个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:
祝您学习愉快，再见！