PUT Request UPDATE方法(axios)(MongoDb)(Vue.js)

时间:2018-03-07 14:07:33

标签: node.js mongodb express vue.js axios

我对Vue.js / Node.js / Express.js / Axios / MongoDb / Mongoose相当新,我正在尝试创建一个更新函数,我使用PUT请求通过v-修改/替换现有数据输入输入后,用户点击更新按钮。

到目前为止,PUT请求行为似乎在Postman应用程序中有效,但是我对如何将这些数据实际发送到数据库感到有些困惑。

我的想法是返回一个新列表。

我偶然发现了一些似乎与我的问题类似的帖子: Put request with Axios | React, Redux

GetList.vue:

data () {
     return {
       List: {_id:'', name:'', items:
        [ {
            title: '',
            category: ''            

          }
        ]

      }, 
   clicked:false, 
   newList: {_id:'', listname:'newlist', newitems:
        [ {
            itemtitle: 'aaaaa',
            itemcategory: 'bbbbb'            

          }
        ]

     } 

   }

 }

updateList : function(_id, List, newList){

    var listIndex = this.newList.length;

    var newitems = this.newList.newitems;
    var inputName = this.newList.listname;
    var inputTitle = this.newList.newitems[0].itemtitle;
    var inputCategory = this.newList.newitems[0].itemcategory;

    if((inputName!=='') && (inputTitle!=='') && (inputCategory!=='')){
      this.List = this.newList;
    }
    axios.put('http://localhost:3000/lists/'+_id, this.newList)
    .then((response) => {
        response.data = newList;
        })
      .catch((error) => {
        console.log(error);
      });

listController.js:

exports.update_a_list = function(req, res, next){
   List.findByIdAndUpdate({_id: req.params._id}, req.body).then(function(){
    List.findOne({_id: req.params._id}).then(function(list){
      res.send(list);
    })  
   });   
};

exports.modify_a_list = function(req,res){
    List.findById({_id: req.params._id}).then(function(list){
        if(err)
            res.send(err);
        res.json(list);
    });
};

listRoutes.js:

app.route('/lists/:_id')
    .get(lists.modify_a_list)
    .put(lists.update_a_list);

更新:

我找到了Axios PUT request to server,它似乎与我在代码中更改的内容一致,但是只有名称似乎更新,类别和标题不会更新。我知道我的if / elseif语句必须重构,但是现在我按照它的方式尝试它,如下所示。

data () {
      return {
        List: {_id:'', name:'', items:
            [ {
                title: '',
                category: ''            

              }
            ]

    }, 
    clicked:false, 
    newList: {_id:'', listname:'', newitems:
            [ {
                itemtitle: '',
                itemcategory: ''            

              }
            ]

    } 

}

},

created: function(){
  this.fetchLists();
},

methods: {
  editList : function(_id){
      if(this.clicked === false)
      this.clicked = true;

  },
  updateList : function(_id, List, newList){

    var newitems = this.newList.newitems;

    var inputName = this.newList.listname;
    var inputTitle = this.newList.newitems[0].itemtitle;
    var inputCategory = this.newList.newitems[0].itemcategory;

    // ALL CASES
    if((inputName!=='') && (inputTitle!=='') && (inputCategory!=='')){
       axios.put('http://localhost:3000/lists/'+_id, {name:inputName, title:inputTitle, category:inputCategory})
      .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    }

    //TITLE + CATEGORY
    else if((inputTitle!=='') && (inputCategory!=='')){
       axios.put('http://localhost:3000/lists/'+_id, {title:inputTitle, category:inputCategory})
      .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

  }
  // NAME + CATEGORY
   else if((inputName!=='') && (inputCategory!=='')){
       axios.put('http://localhost:3000/lists/'+_id, {name:inputName,category:inputCategory})
      .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

  }
  //NAME + TITLE
  else if((inputName!=='') && (inputTitle!=='')){
       axios.put('http://localhost:3000/lists/'+_id, {name:inputName, title:inputTitle})
      .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

  }

   else if((inputTitle!=='') && (inputCategory!=='')){
       axios.put('http://localhost:3000/lists/'+_id, {title:inputTitle, category:inputCategory})
      .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

  }

  else if((inputName!=='')){
       axios.put('http://localhost:3000/lists/'+_id, {name:inputName})
      .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
  }

  else if((inputTitle!=='')){
         axios.put('http://localhost:3000/lists/'+_id, {title:inputTitle})
        .then(response => {
            console.log(response);
          })
          .catch(error => {
            console.log(error);
          });
  }

  else if((inputCategory!=='')){
       axios.put('http://localhost:3000/lists/'+_id, {category:inputCategory})
      .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
  }
  else{
    return;
  }

  } 

} 

0 个答案:

没有答案