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

1 新增数据

提交数据的基本步骤：

• 前端

  • 在data()中定义model

    data(){
            return{
                model:{}
            }
        }
    

  • 表单数据绑定model，model中的属性要和定义的该模型的字段相匹配

     //输入框
    
    //下拉选框
     ... 
    //图片上传
     
                 
                    
                      
                    
      
    //星级
     
     
    

  • 通过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

     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 删除数据

删除数据的基本步骤：

• 前端

  • 添加一个删除按钮，且点击按钮后定位到当前欲删除的数据

  • 通过 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 修改数据

修改数据的基本步骤：

• 前端

  • 添加一个编辑按钮，且点击按钮后跳转到该行数据的详情页，后续和新建数据类似

• 路由接口

  详情页展示接口：

  //资源详情
      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({})

   添加技能
  

  删除一个英雄属性：splice(i,1)

  
     
            删除