Vue.js + Node.js + MySQL 示例：CRUD 应用程序
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
本教程将向您展示如何构建一个全栈 CRUD 应用：Vue.js + Node.js + MySQL 示例。后端服务器使用 Node.js + Express 实现 REST API，前端是 Vue 客户端，搭配 Vue Router 和 axios。
完整文章：https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/
Vue.js + Node.js + MySQL 示例概述
我们将构建一个全栈教程应用程序，具体如下：
- 教程包含 id、标题、描述、发布状态。
- 用户可以创建、检索、更新、删除教程。
- 您可以使用搜索框按标题查找教程。
以下是示例的屏幕截图。
- 添加对象：
– 显示所有对象：
– 点击“编辑”按钮更新对象：
在本页面，您可以：
- 使用“发布/取消发布”按钮将状态更改为“已发布/待发布”。
- 使用Delete按钮从 MySQL 数据库中删除对象
- 使用“更新”按钮更新数据库中此对象的详细信息
- 按“title”字段搜索对象：
全栈式 CRUD 应用架构
我们将采用以下架构构建应用程序：
Node.js Express 导出 REST API，并使用 Sequelize ORM 与 MySQL 数据库交互。Vue Client 使用axios
发送 HTTP 请求并接收 HTTP 响应，并在组件中使用数据。Vue Router 用于页面导航。
Node.js Express 后端
以下是Node.js Express应用程序将导出的API：
| 方法 | 网址 | 行动 |
|---|---|---|
| 得到 | api/教程 | 获取所有教程 |
| 得到 | api/tutorials/:id | 获取教程id |
| 邮政 | api/教程 | 添加新教程 |
| 放 | api/tutorials/:id | 更新教程id |
| 删除 | api/tutorials/:id | 移除教程id |
| 删除 | api/教程 | 删除所有教程 |
| 得到 | api/tutorials?title=[kw] | 查找标题包含以下内容的所有教程'kw' |
Vue.js 前端
– 该App组件是一个容器router-view，其中包含一个导航栏，该导航栏链接到路由路径。
-TutorialsList该组件获取并显示教程。-
该Tutorial组件包含一个表单，用于根据设置编辑教程的详细信息:id。-
该AddTutorial组件包含一个表单，用于提交新的教程。
– 这些组件调用用于发出 HTTP 请求和接收响应的TutorialDataService方法。axios
更多详情、实现方法和 GitHub 代码，请访问：
https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/
延伸阅读
在一个地方运行后端和前端项目：
如何将 Vue 应用与 Express 结合使用
如果您需要 Vue 应用的 TypeScript 版本，请点击此处：
Vue Typescript CRUD 应用示例，用于调用 Web API
分页：
使用 Firebase 实现无服务器架构：
文章来源：https://dev.to/tienbku/vue-js-node-js-mysql-example-crud-application-4i8l