全栈开发学习(Node+Vue+Mongodb)(四)——后台数据的CRUD操作

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},
      }],

• 以给英雄添加技能为例添加多个属性 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>

• 获取父级分类

  data()中定义parents[]

  async fetchParents(){
         const res=await this.$http.get(`rest/categories`)
         this.parents=res.data
  }

  在下拉框中设置：

  <el-select v-model="model.parent">
       <el-option v-for="item in parents" 
             :key="item._id" 
             :label="item.name"
             :value="item._id">  //注意：这里传的值是父级的_id
      </el-option>
  </el-select>

  模型字段中含关联父级字段

   categories:[{type:mongoose.SchemaTypes.ObjectId,ref:'关联模型名称'}],  //类型

  相对应的，在接口写法上也需要稍作修改，将parent转化为parent对象，这样直接就可以用parent.name获取父级分类名

  router.get('/',async(req,res)=>{
         const queryOptions={}
         if(req.Model.modelName==='Category'){
             queryOptions.populate='parent'
         }
          const items=await req.Model.find().setOptions(queryOptions).limit(100)
          res.send(items)
      })