在讲解之前，我们先来看看效果如下所示：
1）整个页面的效果如下：
2) 新增数据效果如下：
3) 新增成功如下：
4) 编辑数据效果如下：
5) 编辑成功效果如下：
6) 删除数据效果如下：
7) 删除成功效果如下：
8) 查询效果如下：
如上的效果，下面我们还是和之前一样，先看看我们整个项目的架构如下所示：
复制代码
### 目录结构如下：
demo1 # 工程名
| |--- dist # 打包后生成的目录文件
| |--- node_modules # 所有的依赖包
| |----database # 数据库相关的文件目录
| | |---db.js # mongoose类库的数据库连接操作
| | |---user.js # Schema 创建模型
| | |---addAndDelete.js # 增删改查操作
| |--- app
| | |---index
| | | |-- views # 存放所有vue页面文件
| | | | |-- list.vue # 列表数据
| | | | |-- index.vue
| | | |-- components # 存放vue公用的组件
| | | |-- js # 存放js文件的
| | | |-- css # 存放css文件
| | | |-- store # store仓库
| | | | |--- actions.js
| | | | |--- mutations.js
| | | | |--- state.js
| | | | |--- mutations-types.js
| | | | |--- index.js
| | | | |
| | | |-- app.js # vue入口配置文件
| | | |-- router.js # 路由配置文件
| |--- views
| | |-- index.html # html文件
| |--- webpack.config.js # webpack配置文件
| |--- .gitignore
| |--- README.md
| |--- package.json
| |--- .babelrc # babel转码文件
| |--- app.js # express入口文件
复制代码
如上目录架构是我现在整个项目的架构图，其中database目录下存放 db.js ，该文件最主要是使用 mongoose 数据库连接操作，user.js 文件是创建一个Schema模型，也可以理解为表结构，addAndDelete.js 文件内部实现增删改查操作。
如果对mongodb数据库相关的知识点不是很熟悉的话，可以先看下我之前写的一些关于mongodb文章(https://www.cnblogs.com/tugenhua0707/category/1240772.html), 先在本地把数据库搭建起来后，再慢慢学习哦，我这边文章实现 vue+mongodb 实现增删改查也是基于上面这些文章的基础之上来进行的，特别是居于这篇 使用Mongoose类库实现简单的增删改查
(https://www.cnblogs.com/tugenhua0707/p/9256605.html) 来进行的，增删改查操作及使用Schema 创建模型 都是居于这篇文章的基础之上再进行使用vue来重构下的。本篇文章也是依赖于饿了么vue组件进行开发的。
先来分别讲下代码结构吧：
1）使用express创建服务器
首先我们在项目的根目录新建app.js, 该app.js 主要实现的功能是 启动 3001端口的服务器，并且使用 bodyParser进行解析数据，如下代码：
复制代码
// 引入express模块
const express = require('express');
// 创建app对象
const app = express();
const addAndDelete = require('./database/addAndDelete');
const bodyParser = require("body-parser")
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// 使用
app.use('/api', addAndDelete);
// 定义服务器启动端口
app.listen(3001, () => {
console.log('app listening on port 3001');
});
复制代码
进入我们项目的根目录后，运行 node app.js 即可创建一个 http://127.0.0.1:3001 的服务器页面了。
2）数据库连接
在database/db.js 链接 mongodb://localhost:27017/dataDb 数据库。使用mongoose类库，如果不理解mongoose类库的话，可以返回来看我这篇文章（https://www.cnblogs.com/tugenhua0707/p/9256605.html）如下代码：
复制代码
var mongoose = require('mongoose');
var DB_URL = 'mongodb://localhost:27017/dataDb';
/* 链接 */
mongoose.connect(DB_URL);
/* 链接成功 */
mongoose.connection.on('connected', function() {
console.log('Mongoose connection open to ' + DB_URL);
});
// 链接异常
mongoose.connection.on('error', function(err) {
console.log('Mongoose connection error:' + err);
});
// 链接断开
mongoose.connection.on('disconnected', function() {
console.log('Mongoose connection disconnected');
});
module.exports = mongoose;
复制代码
3）创建数据模型
在database/user.js 中使用 Schema创建一个模型，也就是说上面的 dataDb是数据库名称，这边使用schema创建的模型就是表结构的字段，有如下 name, age, sex 三个字段，代码如下所示：
复制代码
/*
定义一个user的Schema
*/
const mongoose = require('./db.js');
const Schema = mongoose.Schema;
// 创建一个模型
const UserSchema = new Schema({
name: { type: String }, // 属性name，类型为String
age: { type: Number, default: 30 }, // 属性age，类型为Number，默认值为30
sex: { type: String }
});
// 导出model模块
const User = module.exports = mongoose.model('User', UserSchema);
复制代码
4）实现增删改查路由接口
如下所有的增删改查的代码如下(如果代码看不懂的话，还是返回看这篇文章即可：https://www.cnblogs.com/tugenhua0707/p/9256605.html):
复制代码
// 引入express 模块
const express = require('express');
const router = express.Router();
// 引入user.js
const User = require('./user');
// 新增一条数据 接口为add
router.post('/add', (req, res) => {
const user = new User({
name: req.body.name,
age: req.body.age,
sex: req.body.sex
});
user.save((err, docs) => {
if (err) {
res.send({ 'code': 1, 'errorMsg': '新增失败' });
} else {
res.send({ "code": 0, 'message': '新增成功' });
}
});
});
// 查询数据
router.post('/query', (req, res) => {
const name = req.body.name,
age = req.body.age,
sex = req.body.sex;
const obj = {};
if (name !== '') {
obj['name'] = name;
}
if (age !== '') {
obj['age'] = age;
}
if (sex !== '') {
obj['sex'] = sex;
}
User.find(obj, (err, docs) => {
if (err) {
res.send({ 'code': 1, 'errorMsg': '查询失败' });
} else {
res.send(docs);
}
});
});
// 根据 _id 删除数据
router.post('/del', (req, res) => {
const id = req.body.id;
// 根据自动分配的 _id 进行删除
const whereid = { '_id': id };
User.remove(whereid, (err, docs) => {
if (err) {
res.send({ 'code': 1, 'errorMsg': '删除失败' });
} else {
res.send(docs);
}
})
});
// 更新数据
router.post('/update', (req, res) => {
console.log(req.body)
// 需要更新的数据
const id = req.body.id,
name = req.body.name,
age = req.body.age,
sex = req.body.sex;
const updateStr = {
name: name,
age: age,
sex: sex
};
const ids = {
_id: id
};
console.log(ids);
User.findByIdAndUpdate(ids, updateStr, (err, docs) => {
if (err) {
res.send({ 'code': 1, 'errorMsg': '更新失败' });
} else {
res.send(docs);
}
});
});
module.exports = router;
复制代码
5）搭建vue页面，如何通过页面的接口请求？
在app/index/views/list.vue 基本代码如下(所有的html代码是基于饿了么vue组件的，最主要一些form表单组件的用法及表格的插件及弹窗的插件)，代码如下：
复制代码