1 新增數(shù)據(jù)
提交數(shù)據(jù)的基本步驟：
-
前端
-
在data()中定義model
data(){ return{ model:{} } } -
表單數(shù)據(jù)綁定model，model中的屬性要和定義的該模型的字段相匹配
//輸入框 <el-input v-model="model.name"></el-input> //下拉選框 <el-select v-model="model.parent">... </el-select> //圖片上傳 <el-form-item label="圖標(biāo)" > <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> //星級(jí) <el-rate :max="10" show-score v-model="model.scores.difficult"style="margin-top:0.6rem"> </el-rate> -
通過save()函數(shù)同步提交數(shù)據(jù)
async save(){ let res; res=await this.$http.post('rest/categories',this.model) this.$router.push('/categories/list') //提交成功后跳轉(zhuǎn)到list頁(yè)面 this.$message({ type:'success', message:'保存成功' }) },
-
-
路由接口
//創(chuàng)建資源 router.post('/',async(req,res)=>{ const model=await xxxx(模型名).create(req.body) res.send(model) })
2 數(shù)據(jù)展示
展示數(shù)據(jù)的基本步驟：
-
前端
-
綁定數(shù)據(jù)item到data
<el-table :data="items"> <el-table-column prop="_id" label="ID" width="240"></el-table-column> <el-table-column prop="title" label="標(biāo)題"></el-table-column> </el-table>data(){ return { items:[] } } -
通過fetch()函數(shù)獲取數(shù)據(jù)并賦值給綁定的item
async fetch(){ const res= await this.$http.get('rest/articles') this.items=res.data } -
調(diào)用fetch()函數(shù)
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 刪除數(shù)據(jù)
刪除數(shù)據(jù)的基本步驟：
-
前端
-
添加一個(gè)刪除按鈕，且點(diǎn)擊按鈕后定位到當(dāng)前欲刪除的數(shù)據(jù)
<template slot-scope="scope"> <el-button type="text" size="small" @click="remove(scope.row)">刪除</el-button> </template> -
通過 remove()函數(shù)刪除該行數(shù)據(jù)并且更新頁(yè)面
async remove(row){ this.$confirm(`是否確定要?jiǎng)h除分類?"${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 修改數(shù)據(jù)
修改數(shù)據(jù)的基本步驟：
-
前端
-
添加一個(gè)編輯按鈕，且點(diǎn)擊按鈕后跳轉(zhuǎn)到該行數(shù)據(jù)的詳情頁(yè)，后續(xù)和新建數(shù)據(jù)類似
<template slot-scope="scope"> <el-button type="text" size="small" @click="$router.push(`/categories/edit/${scope.row._id}`)">編輯</el-button> </template>
-
-
路由接口
詳情頁(yè)展示接口：
//資源詳情 router.get('/:id',async(req,res)=>{ const model=await req.Model.findById(req.params.id) res.send(model) })更新數(shù)據(jù)：
//更新資源 router.put('/:id',async(req,res)=>{ const model=await req.Model.findByIdAndUpdate(req.params.id,req.body) res.send(model) })
5 其他細(xì)節(jié)問題
-
上傳圖片實(shí)時(shí)顯示且不被壓縮顯示
設(shè)置min-width
min-width: 5rem; height: 5rem; 復(fù)雜的模型字段使用
-
以Hero模型為例，模型字段內(nèi)部還可以有子屬性
//英雄屬性 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}, }], -
模型字段中含關(guān)聯(lián)模型
categories:[{type:mongoose.SchemaTypes.ObjectId,ref:'關(guān)聯(lián)模型名稱'}], //類型 -
以給英雄添加技能為例添加多個(gè)屬性 model.skills.push({})
<el-button @click="model.skills.push({})"><i class="el-icon-plus"></i>添加技能</el-button>刪除一個(gè)英雄屬性：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>
