webpack4+express+mongodb+vue实现增删改查的示例

2020-06-14 06:27:07易采站长站整理

// 新增一条数据 接口为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表单组件的用法及表格的插件及弹窗的插件),代码如下:


<style lang="stylus">
#list-container
width 100%
</style>
<template>
<div id="list-container" style="margin:20px auto">
<div style="width:100%;overflow:hidden;">
<el-form ref="form" label-width="80px">
<div style="float:left;width:20%">
<el-form-item label="姓名">
<el-input v-model="name"></el-input>
</el-form-item>
</div>
<div style="float:left;width:20%">
<el-form-item label="年龄">
<el-input v-model="age"></el-input>
</el-form-item>
</div>
<div style="float:left;width:20%">
<el-form-item label="性别">
<el-select v-model="sex">