我正在编写一个VueJS CRUD来 Package 一个REST服务器端点。我设法让它工作updateUser/deleteUser,但createUser不工作:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
name: '',
surname: '',
users: []
}
},
methods: {
updateUser: function(id) {
axios.put("/customers?id=" + id + "&name=" + this.name + "&surname=" + this.surname)
.then(response => {
this.listUsers()
})
this.name = '';
this.surname = '';
},
deleteUser: function(id) {
axios.delete("/customers?id=" + id)
.then(response => {
this.listUsers()
})
},
createUser: function() {
var user = {
name: this.name,
surname: this.surname
};
axios.post("/customers", JSON.stringify(user), {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
this.listUsers();
})
.catch(error => {
console.log(error);
});
},
listUsers: function() {
axios.get("/customers")
.then(response => {
this.users = response.data
})
}
},
mounted: function() {
this.listUsers()
}
})
</script>
当我尝试从submit:
<input type="submit" value="Save" @click="createUser"/>
JS控制台中报告以下错误:
Error: Request aborted
exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
onabort https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
promise callback*r.prototype.request https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
e https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:2
createUser http://localhost:8080/?:145
VueJS 23
invoker
_withTask
add$1
updateListeners
updateDOMListeners
invokeCreateHooks
createElm
createChildren
createElm
createChildren
createElm
createChildren
createElm
patch
_update
updateComponent
get
Watcher
mountComponent
$mount
$mount
_init
Vue
<anonymous>
我已经验证了Rest端点可以正确使用curl:
curl -X POST http://localhost:8080/customers -H 'Content-Type: application/json' -d '{"name":"john","surname":"smith"}'
知道如何修复它吗?只是要注意,当我调用createUser函数时,根本没有到达服务器端点。
1条答案
按热度按时间w8f9ii691#
我记得我遇到过同样的问题尝试改变你的
input
类型:我真的无法解释为什么
type="submit"
导致此请求中止Error