第一步排查后端:
发现后端没有有打印任何信息,可以推测前端点击发送按钮以后,数据并没有进行发送,可以推测错误的原因大概率在前端。重点排查前端。
第二步排查前端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增页面</title>
<script src="/user_sys/js/axios.min.js"></script>
<script src="/user_sys/js/vue.min.js"></script>
</head>
<body>
<input type="text" v-model="user.username" placeholder="请输入用户名"><br>
<input type="text" v-model="user.password" placeholder="请输入密码"><br>
<button @click="addUser()">新增</button>
<script>
let app=new Vue({
el:"#app",
data:{
user:{
username:"",
password:"",
}
},
methods: {
addUser() {
axios({
url: "http://localhost:8080/user_sys/user/",
method: "POST",
data: app.user
}).then(function (resp) {
console.log(resp.data);
location.href = "user.html";
})
}
}
})
</script>
</body>
</html>
发现错误来源:
我没有定义id为app的组件,因此无法发送
修改后的前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增页面</title>
<script src="/user_sys/js/axios.min.js"></script>
<script src="/user_sys/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="user.username" placeholder="请输入用户名"><br>
<input type="text" v-model="user.password" placeholder="请输入密码"><br>
<button @click="addUser()">新增</button>
</div>
<script>
let app=new Vue({
el:"#app",
data:{
user:{
username:"",
password:"",
}
},
methods: {
addUser() {
axios({
url: "http://localhost:8080/user_sys/user/",
method: "POST",
data: app.user
}).then(function (resp) {
console.log(resp.data);
location.href = "user.html";
})
}
}
})
</script>
</body>
</html>