1 新增数据
提交数据的基本步骤：
-
前端
-
在data()中定义model
data(){ return{ model:{} } } -
表单数据绑定model，model中的属性要和定义的该模型的字段相匹配
//输入框 <el-input v-model="model.name"></el-input> //下拉选框 <el-select v-model="model.parent">... </el-select> //图片上传 <el-form-item label="图标" > <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="afterUpload" :headers="getAuthHeaders()"> <img v-if="model.icon" :src="model.icon" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> //星级 <el-rate :max="10" show-score v-model="model.scores.difficult"style="margin-top:0.6rem"> </el-rate> -
通过save()函数同步提交数据
async save(){ let res; res=await this.$http.post('rest/categories',this.model) this.$router.push('/categories/list') //提交成功后跳转到list页面 this.$message({ type:'success', message:'保存成功' }) },
-
-
路由接口
//创建资源 router.post('/',async(req,res)=>{ const model=await xxxx(模型名).create(req.body) res.send(model) })
2 数据展示
展示数据的基本步骤：
-
前端
-
绑定数据item到data
<el-table :data="items"> <el-table-column prop="_id" label="ID" width="240"></el-table-column> <el-table-column prop="title" label="标题"></el-table-column> </el-table>data(){ return { items:[] } } -
通过fetch()函数获取数据并赋值给绑定的item
async fetch(){ const res= await this.$http.get('rest/articles') this.items=res.data } -
调用fetch()函数
created(){ this.fetch() }
-
-
路由接口
//资源列表 router.get('/',async(req,res)=>{ const queryOptions={} if(req.Model.modelName==='xxxxx'){ queryOptions.populate='parent' } const items=await req.Model.find().setOptions(queryOptions).limit(100) res.send(items) })
3 删除数据
删除数据的基本步骤：
-
前端
-
添加一个删除按钮，且点击按钮后定位到当前欲删除的数据
<template slot-scope="scope"> <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button> </template> -
通过 remove()函数删除该行数据并且更新页面
async remove(row){ this.$confirm(`是否确定要删除分类?"${row.name}"`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async() => { await this.$http.delete(`rest/categories/${row._id}`) this.$message({ type: 'success', message: '删除成功!' }); this.fetch() //更新列表 }); }
-
-
路由接口
//删除资源 router.delete('/:id',async(req,res)=>{ await req.Model.findByIdAndDelete(req.params.id,req.body) res.send({ success:true }) })
4 修改数据
修改数据的基本步骤：
-
前端
-
添加一个编辑按钮，且点击按钮后跳转到该行数据的详情页，后续和新建数据类似
<template slot-scope="scope"> <el-button type="text" size="small" @click="$router.push(`/categories/edit/${scope.row._id}`)">编辑</el-button> </template>
-
-
路由接口
详情页展示接口：
//资源详情 router.get('/:id',async(req,res)=>{ const model=await req.Model.findById(req.params.id) res.send(model) })更新数据：
//更新资源 router.put('/:id',async(req,res)=>{ const model=await req.Model.findByIdAndUpdate(req.params.id,req.body) res.send(model) })
5 其他细节问题
-
上传图片实时显示且不被压缩显示
设置min-width
min-width: 5rem; height: 5rem; 复杂的模型字段使用
-
以Hero模型为例，模型字段内部还可以有子属性
//英雄属性 scores:{ difficult:{type:Number}, skills:{type:Number}, attack:{type:Number}, survive:{type:Number}, }, //英雄技能 skills:[{ icon:{type:String}, name:{type:String}, description:{type:String}, tips:{type:String}, delay:{type:String}, cost:{type:String}, }], -
模型字段中含关联模型
categories:[{type:mongoose.SchemaTypes.ObjectId,ref:'关联模型名称'}], //类型 -
以给英雄添加技能为例添加多个属性 model.skills.push({})
<el-button @click="model.skills.push({})"><i class="el-icon-plus"></i>添加技能</el-button>删除一个英雄属性：splice(i,1)
<el-col :md="12" v-for="(item,i) in model.partners" :key="i"> <el-form-item> <el-button size="small" type="danger" @click="model.partners.splice(i,1)">删除 </el-button> </el-form-item> </el-col>
