/* 定义一个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.jb51.net/article/150381.htm):
// 引入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表单组件的用法及表格的插件及弹窗的插件)，代码如下：
<style lang="stylus"> #list-container width 100% </style> <template> <div> <div> <el-form ref="form" label-width="80px"> <div> <el-form-item label="姓名"> <el-input v-model="name"></el-input> </el-form-item> </div> <div> <el-form-item label="年龄"> <el-input v-model="age"></el-input> </el-form-item> </div> <div> <el-form-item label="性别"> <el-select v-model="sex"> <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </div> <el-button type="primary" @click="query(true)">查 询</el-button> <el-button type="success" @click="newAdd">新 增</el-button> </el-form> </div> <div> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="age" label="年龄"> </el-table-column> <el-table-column prop="sex" label="性别"> </el-table-column> <el-table-column fixed="right" label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="editFunc(scope.row)">编辑</el-button> <el-button type="text" size="small" @click="delFunc(scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> <el-dialog title="新增" :visible.sync="dialogVisible"> <el-form label-width="40px"> <div> <el-form-item label="姓名"> <el-input v-model="add.name"></el-input> </el-form-item> </div> <div> <el-form-item label="年龄"> <el-input v-model="add.age"></el-input> </el-form-item> </div> <div> <el-form-item label="性别"> <el-select v-model="add.sex"> <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </div> </el-form> <span slot="footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="addConfirm">确 定</el-button> </span> </el-dialog> <el-dialog title="编辑" :visible.sync="dialogVisible2"> <el-form label-width="40px"> <div> <el-form-item label="姓名"> <el-input v-model="update.name"></el-input> </el-form-item> </div> <div> <el-form-item label="年龄"> <el-input v-model="update.age"></el-input> </el-form-item> </div> <div> <el-form-item label="性别"> <el-select v-model="update.sex"> <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </div> </el-form> <span slot="footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="editConfirm">确 定</el-button> </span> </el-dialog> <el-dialog title="提示" :visible.sync="dialogVisible3"> <div>是否确认删除?</div> <span slot="footer"> <el-button @click="dialogVisible3 = false">取 消</el-button> <el-button type="primary" @click="delConfirm">确 定</el-button> </span> </el-dialog> </div> </template> <script type="text/javascript"> export default { data() { return { formLabelWidth: '120px', name: '', age: '', sex: '', options2: [ { value: '1', label: '男' }, { value: '2', label: '女' } ], tableData: [], // 新增页面 add: { name: '', age: '', sex: '' }, // 修改页面 update: { name: '', age: '', sex: '' }, dialogVisible: false, dialogVisible2: false, dialogVisible3: false, row: null, _id: '' } }, created() { this.query(); }, methods: { setData(datas) { if (datas.length > 0) { for (let i = 0; i < datas.length; i++) { if (datas[i].sex * 1 === 1) { this.$set(datas[i], 'sex', '男'); } else if (datas[i].sex * 1 === 2) { this.$set(datas[i], 'sex', '女'); } } } return datas; }, // 查询数据 query(isquery) { const obj = { name: this.name, age: this.age, sex: this.sex }; this.$http.post('/api/query', obj).then((res) => { if (res.ok) { this.tableData = res.body ? this.setData(res.body) : []; if (isquery) { this.$message({ message: '查询成功', type: 'success' }); } } else { if (isquery) { this.$message({ message: '查询失败', type: 'warning' }); } this.tableData = []; } }); }, newAdd() { this.dialogVisible = true; }, editFunc(row) { this.dialogVisible2 = true; this._id = row._id; this.$set(this.$data.update, 'name', row.name); this.$set(this.$data.update, 'age', row.age); this.$set(this.$data.update, 'sex', row.sex); this.row = row; }, delFunc(row) { this.dialogVisible3 = true; console.log(row); this.row = row; }, // 编辑页面提交 editConfirm() { const id = this._id, name = this.update.name, age = this.update.age, sex = this.update.sex; const obj = { id: id, name: name, age: age, sex: sex }; this.$http.post('/api/update', obj).then((res) => { if (res.ok) { // 删除成功 this.$message({ message: '更新成功', type: 'success' }); // 重新请求下查询 this.query(false); } else { // 删除成功 this.$message({ message: '更新失败', type: 'success' }); } this.dialogVisible2 = false; }); }, // 删除提交 delConfirm() { const obj = { 'id': this.row._id }; this.$http.post('/api/del', obj).then((res) => { console.log(res.body) if (res.body.ok) { // 删除成功 this.$message({ message: '删除成功', type: 'success' }); // 成功后，触发重新查询下数据 this.query(); } else { // 删除失败 this.$message({ message: res.body.errorMsg, type: 'warning' }); } this.dialogVisible3 = false; }); }, // 新增提交 addConfirm() { // 新增的时候，姓名，年龄，性别 不能为空，这里就不判断了。。。 const obj = { name: this.add.name, age: this.add.age, sex: this.add.sex }; this.$http.post('/api/add', obj).then((res) => { console.log(111); console.log(res); if (res.body.code === 0) { this.$message({ message: '新增成功', type: 'success' }); // 成功后，触发重新查询下数据 this.query(); } else { this.$message({ message: res.body.errorMsg, type: 'warning' }); } this.dialogVisible = false; }); } } } </script>
6. 解决跨域问题，及接口如何访问的？