前言：本篇文章以 Express.js 4.x 为主体，并结合 Mongoose 和 Vue.js 实现数据的真实时间 CRUD，需要对 Node.js 和 MongoDB 有一定的了解。
一、Express.js 的基础
1.1 安装和创建项目
先在本地安装 Node.js 和 MongoDB，然后在命令行中执行以下命令：
npm install -g express-generator express --view=pug myapp
其中 -g 代表全局安装 express-generator，myapp 是项目名称。
1.2 配置路由
在 app.js 中，可以看到已经有一些路由的示例，不过我们需要自己定义一些路由：
-- -------------------- ---- ------- -- --------- --- ----------- - -------------------------- --- ----------- - -------------------------- --- -------------- - ----------------------------- -- --------- -- ------- ------------ ------------- ----------------- ------------- ------------------------ ----------------展开代码
对于 productsRouter，我们需要自己定义它。在 routes 文件夹下新建 products.js：
-- -------------------- ---- ------- --- ------- - ------------------- --- ------ - ----------------- -- ------ --------------- ------------- ---- ----- - -- ----- ----------- --- -- ------ ------------------ ------------- ---- ----- - -- ----- ----------- --- -- ---- ---------------- ------------- ---- ----- - -- ----- --------- --- -- ---- ------------------ ------------- ---- ----- - -- ----- --------- --- -- ---- --------------------- ------------- ---- ----- - -- ----- --------- --- -------------- - -------展开代码
1.3 安装和使用 MongoDB
在命令行中执行以下命令安装 Mongoose：
npm install mongoose --save
使用以下代码连接 MongoDB 数据库（也可以从 process.env.MONGODB_URI 取得 MONGODB_URI 环境变量）：
var mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/myapp');
1.4 编写数据模型
在 models 文件夹下新建 product.js，定义商品的数据模型：
-- -------------------- ---- ------- --- -------- - -------------------- --- ------------- - --- ----------------- ----- - ----- ------- --------- ---- -- ------ - ----- ------- --------- ---- -- --------- - ----- ------ - -- - ----------- ---- --- -------------- - ------------------------- ---------------展开代码
其中 timestamps 表示会自动在 Product 模型中添加 createdAt 和 updatedAt 字段。
1.5 在路由中使用模型
在 routes/products.js 中使用模型：
-- -------------------- ---- ------- --- ------- - ----------------------------- --------------- ------------- ---- ----- - -------------------------- --------- - -- ----- - ------ ---------- - ------------------- --- --- ------------------ ------------- ---- ----- - ------------------------------- ------------- -------- - -- ----- - ------ ---------- - ------------------ --- --- ---------------- ------------- ---- ----- - --- ------- - --- ------------------ -------------------------- -------- - -- ----- - ------ ---------- - ------------------ --- --- ------------------ ------------- ---- ----- - ------------------------------- ------------- -------- - -- ----- - ------ ---------- - ------------ - -------------- ------------- - --------------- ---------------- - ------------------ -------------------------- -------- - -- ----- - ------ ---------- - ------------------ --- --- --- --------------------- ------------- ---- ----- - ---------------------------------------- ------------- - -- ----- - ------ ---------- - ---------- -------- ------- --- --- ---展开代码
现在我们可以在 Postman 等工具中测试接口是否正常工作。
二、Vue.js 的基础
2.1 安装和创建项目
在命令行中执行以下命令安装 Vue：
npm install vue --save
新建 index.html 文件，并在其中添加以下代码：
-- -------------------- ---- ------- ---- --------- ------------- ------- ------- ---- ----------- ----------- ----------- ----------- ----- -------- ------- --- -------------- -- --------- ------------------- ------ ------------ ------- ------ ------------- ------- -------- ----------------------- ------------- ---- ---- ---- --- ------- ----------------------------------------- ---- ---- --- ------- ------------------------------------------- ----- ----- -------- -------- ---- ------------- ---------------- ----- ------------------------------ --- ------ ---------------------- ------ --------- ----------- ----------------------- -------- ----------------------- ---- --- ------ ----------------------- ------ ---------- ------------ ------------------------------- -------- ----------------------- ---- --- ------ -------------------------- ------ ------------- --------------- --------------------------- ------------------------- ---- ------- ---------------- ---------- ----------- ------- ------ ------ ------- ------------------------------------------------ -------- --- ----- --- ------- ----- ---------- - ------ - ----------- ----- --------- --- --------- - ---- --- ----- --- ------ --- --------- -- - -- -- -------- ---------- - --------------------- -- -------- - -- ------ -------------- ---------- - --- -- - ----- ---------------------- ------------------- - ------ ----------- -- ------------------------ - ----------- - --------- -- -------------------- - ------------------- --- -- -- --------- ----------- ------------------- - --- -- - ----- ----------------------------------- ------------------- - ------ ----------- -- ----------------------- - ----------- - - ---- ------------ ----- ------------- ------ -------------- --------- ---------------- -- -- -------------------- - ------------------- --- -- -- ------- ------------ ---------- - --- -- - ----- -- ------------------ - -- ---- ---------------------- - ------- ------- -------- - --------------- ------------------ -- ----- --------------------------- -- ------------------- - ------ ----------- -- ----------------------- - -------------------------- ----------- - - ---- --- ----- --- ------ --- --------- -- -- ------------- - ----- -- -------------------- - ------------------- --- - ---- - -- ---- ----------------------------------------- - ------- ------ -------- - --------------- ------------------ -- ----- --------------------------- -- ------------------- - ------ ----------- -- ----------------------- - --- ----------- - --------------------------------- - ------ ----- --- ------------ --- ------------------------------- -- --------- ----------- - - ---- --- ----- --- ------ --- --------- -- -- ------------- - ----- -- -------------------- - ------------------- --- - -- -- ------ ------------ ----------------- - ------------- - - ---- ------------ ----- ------------- ------ -------------- --------- ---------------- -- --------------- - ----- -- -- ---- -------------- ----------------- - --- -- - ----- ------------------------------------- - ------- -------- -- ------------------- - ------ ----------- -- ----------------------- - --- ----------- - --------------------------------- - ------ ----- --- ------------ --- ------------------------------- --- -- -------------------- - ------------------- --- - - --- ---------展开代码
在浏览器中打开 index.html，我们会看到一个空的商品列表。
三、实现真实时间 CRUD
3.1 在 Express.js 中启用跨域
因为 Vue.js 是在浏览器中使用的，而 Express.js 是在服务器端运行的，所以需要启用跨域。
在 app.js 文件中添加以下代码（安装 cors 包）：
npm install cors --save
var express = require('express'); var cors = require('cors'); var app = express(); app.use(cors()); // 启用跨域
3.2 在 Vue.js 中启用真实时间 CRUD
在 index.html 中添加以下代码：
-- -------------------- ---- ------- -------- -- ----- --------- --- --- ------ - ----- --- ----- -- - ---- --- ------ - ----------- ----- ---------- - ------ - ------- ------- ------------ ------ ----------- ----- --------- --- --------- - ---- --- ----- --- ------ --- --------- -- - -- -- -- - ------- ------- -------- ---------- - --- -- - ----- ----------------------- ---------- - -------------- - ----- --- -------------------------- ---------- - -------------- - ------ --- --------------------- --------- ----------------- - -------------------------- --- --------------------- --------- ----------------------- - --- ----------- - --------------------------------------- - ------ ----------- --- ------------------ --- ------------------------------- -- --------------- --- --------------------- --------- ----------------------- - --- ----------- - --------------------------------------- - ------ ----------- --- ------------------ --- ------------------------------- --- --- ------------------- -- -- - ------- ------- ------------ ---------- - --- -- - ----- -- ------------------ - -- ---- ----------------------- -------- ------------- - ---- - -- ---- ----------------------- -------- ------------- - -- -------------- ----------------- - --- -- - ----- ----------------------- -------- --------- - --- ---------展开代码
在 public 目录下新建 index.js 文件，添加以下代码（连接 Socket.io 并将其作为 socket 变量返回）：
-- -------------------- ---- ------- --- ------ - ----- -------------------- ---------- - ------------------------ --- ----------------------- ---------- - --------------------------- --- ------------------ --------- ----------------- - ------------------------------------ --- ------------------ --------- ----------------------- - ------------------------------------------ --- ------------------ --------- ----------------------- - ------------------------------------------ --- -------------- - ------- -- - ------ ------展开代码
然后在 app.js 文件中，为 productsRouter 添加下列代码：
-- -------------------- ---- ------- --- ------ - -------------------------- -- -- --------- ---------------- ------------- ---- ----- - --- ------- - --- ------------------ -------------------------- -------- - -- ----- - ------ ---------- - -- ------ -------------------- --------- --------- ------------------ --- --- ------------------ ------------- ---- ----- - ------------------------------- ------------- -------- - -- ----- - ------ ---------- - ------------ - -------------- ------------- - --------------- ---------------- - ------------------ -------------------------- -------- - -- ----- - ------ ---------- - -- ------ -------------------- --------- --------- ------------------ --- --- --- --------------------- ------------- ---- ----- - ---------------------------------------- ------------- -------- - -- ----- - ------ ---------- - -- ------ -------------------- --------- --------- ---------- -------- ------- --- --- ---展开代码
现在在浏览器中编辑和删除商品时，我们会看到 index.js 中打印出相应的消息。
四、总结
本文讲解了如何使用 Express.js+Mongoose+Vue.js 实现真实时间的数据 CRUD。具体包括：Express.js 的基础、Vue.js 的基础、实现真实时间 CRUD 等。
文章展示了使用最普遍的前端语言 JS 和最流行的库/框架来完成实时数据的演示及操作，可用于初学者快速了解前端开发的相关知识。
完整示例代码可以在 Github 中获取。
五、参考文献
[1] Express.js 入门教程
[2] Mongoose 官方文档
[3] Vue.js 官方文档
[4] Socket.io 官方文档
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6545be7a7d4982a6ebf5d0bd
