我对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;
}
}
}