介绍
Express-Vue-CRUD 是一个基于 Express 和 Vue.js 的全栈 Web 开发框架，它提供了快捷创建 CRUD（Create，Read，Update，Delete）操作的功能。它使用了 MVC（Model-View-Controller）的架构方式，使前端和后台开发更加高效和简洁。该框架借助于 npm 包管理工具使得该框架的创建和管理更加方便。下面我们就来具体介绍一下它的使用。
准备工作
由于 Express-Vue-CRUD 是一个基于 Node.js 平台的框架，因此在使用本框架之前，你需要安装以下工具（如已安装可以忽略这一节）：
- Node.js（请至少安装版本 10.x 及以上），可前往以下链接官网下载并安装： https://nodejs.org/en/
- npm（Node.js 包管理工具，随 Node.js 安装即可使用）
安装
安装过程非常简单，只需在终端/命令行中输入以下命令即可：
npm install express-vue-crud --save
以上命令会自动下载并安装 express-vue-crud 这个 npm 包到您的项目中。
使用
安装完成之后，下一步就是开始使用了！
创建一个项目
- 首先在你喜欢的目录下创建一个目录作为你的项目目录，如：
mkdir my_project
- 进入该项目目录并初始化 npm：
cd my_project npm init
- 接下来安装 express-vue-crud 并创建项目骨架：
npm install express-vue-crud --save express-vue-crud ./
以上命令中的 "./" 表示将新建的项目骨架文件存放在当前目录下，你也可以自定义它存放的目录。
- 完成以上所有步骤后，你会看到一个基础的 CRUD 应用程序已经架设好了。您可以通过以下命令，启动该应用程序：
npm start
- 打开浏览器浏览器，在地址栏输入 "http://localhost:3000/"，即可访问该应用程序了。
配置路由
Express-Vue-CRUD 使用路由配置文件来定义应用中的所有路由。这个配置文件位于 "routes/index.js" 文件中。下面我们就以一个简单的例子来介绍如何创建一个新的路由：
- 首先，在 "routes/index.js" 文件中加入以下代码：
const express = require('express');
const router = express.Router();
router.get('/hello', (req, res, next) => {
res.send('Hello World!');
});
module.exports = router;以上代码中通过 express.Router() 创建了一个新的路由实例，并通过路由实例创建一个 /hello GET 路由。
- 接下来，在 "app.js" 文件中加入以下代码，将刚刚创建的路由和应用程序进行关联：
const indexRouter = require('./routes/index');
app.use('/', indexRouter);以上代码中，通过 require 引入了我们创建的路由文件，并使用 app.use() 将它和应用程序关联起来。
创建一个新的模型
Express-Vue-CRUD 使用 Mongoose ORM（Object Relational Mapping）来管理与 MongoDB 的交互。下面我们就以一个简单的例子来介绍如何创建一个新的模型：
- 首先，在 "models/" 目录下，新建一个模型文件 "user.js"，并加入以下代码：
-- -------------------- ---- -------
----- -------- - --------------------
----- ------ - ----------------
----- ---------- - --- --------
--------- -------
------ -------
--------- ------
---
----- ---- - ---------------------- ------------
-------------- - -----以上代码中，我们定义了一个名为 User 的表结构，并通过 mongoose.model() 将它转化为一个数据库中的集合，并导出它。
- 接下来，在 "routes/index.js" 文件中加入以下代码，引入我们刚刚创建的 User 模型：
const User = require('../models/user');- 接下来我们需要创建一些增删改查的操作，我们以 /user 路由为例：
-- -------------------- ---- -------
------------------------------- ---- ----- -- --
-------
------------ ----- ---- ----- -- -
----- -------- - ----- --------------
-------------------------------
------------- ----- ---- ----- -- -
----- ------- - --- ------
--------- ------------------
------ ---------------
--------- -----------------
---
----- --------- - ----- ---------------
--------------------------------
------------ ----- ---- ----- -- -
----- -- - -------------
----- --------------------------- ---- ---------------
-------------------------- -----
--------------- ----- ---- ----- -- -
----- -- - -------------
----- --------------------------- -----
-------------------------- -----
---以上代码中，我们定义了一个 /user 路由，并提供了增删改查的操作。其中 "all" 表示所有 HTTP 请求方法，我们在该方法里可以实现一些中间件， 如权限控制等。
创建前端页面
Express-Vue-CRUD 使用 Vue.js 的单文件组件来创建前端页面。下面我们就以一个简单的例子来介绍如何创建一个新的前端页面：
- 首先，在 "public/" 目录下，新建一个 vue 组件文件 "UserList.vue"，并加入以下代码：
-- -------------------- ---- -------
----------
-----
-------
-------
------------
-----------
-----------
--------
-------
--- ----------- -- -------
------ ------------- -------
------ ---------- -------
----
------- -----------------------------------
------- -------------------------------------
-----
-----
--------
--------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
--
--
----- --------- -
----- --- - ----- ---------------
---------- - ----- -----------
--
-------- -
----- ---------------- -
----- --- - ----- -------------- -
------- ---------
-------- -
--------------- ------------------
--
----- -------------------- ----------
---
-- -------- -
----- ----- - -------------------------
------------------------ ---
-
-
-
--
---------以上代码中，我们定义了一个名为 UserList 的组件，通过 fetch 方法向后端获取到一个用户列表，然后使用 v-for 指令，遍历这个列表并渲染每个用户的信息。当用户点击“删除”按钮时，我们会向后台发送一个 DELETE 请求，将该用户从数据库中删除，并更新前端的用户列表。
- 接下来，在 "views/" 目录下，新建一个 ejs 文件 "users.ejs"，并加入以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------- ----- ---------------- ----- --------------- ---------------------------- ------------------- ------- ------ ----------------------- ------- ------- -------------------------- -------
以上代码中，我们使用了 Vue 的自定义标签 <user-list> 来引入我们定义的 UserList 组件，并在 body 标签中加入该自定义标签即可。
至此，我们已经完成了应用的基础部分。你可以扩展该应用，来实现一些更加强大的功能，例如：
- 权限控制
- 数据校验
- 实现前端 CRUD 操作等
总结
相信通过上面的介绍，您已经了解了 Express-Vue-CRUD 框架的基础使用方法和一些扩展操作。在实际使用过程中，需要不断地优化和完善，提高程序的质量和性能。希望本篇文章能给您带来一些启示和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005585481e8991b448d58a0