postman测试 后端的响应能够通过 ，但是前端点击添加按钮的时候发现没变化，好像并没请求后端，网络事件没变化
<template>
<body>
<div id="poster" style="height:670px " >
<el-container style="margin=0px">
<el-header style="text-align:left">图书管理平台</el-header>
</el-container>
<el-container class="addContainer" style="width:100%" >
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
style="height:580px"
>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<el-button type="info">新增图书</el-button>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-menu" ></i>
<el-button type="info" @click="select">查询图书</el-button>
</el-menu-item>
</el-menu>
<el-form
:model="bookForm"
:rules="rules"
ref="bookForm"
label-width="100px"
class="bookForm-container"
style="width:880px"
>
<el-form-item label="书名" prop="bookName">
<el-input v-model="bookForm.bookName"></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="bookForm.author"></el-input>
</el-form-item>
<el-form-item label="出版社" prop="publish">
<el-input v-model="bookForm.publish"></el-input>
</el-form-item>
<el-form-item label="序号" prop="bookId">
<el-input v-model="bookForm.bookId" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="价格" prop="price">
<el-input v-model="bookForm.price" placeholder='包含小数点后两位'></el-input>
</el-form-item>
<el-form-item label="入库日期" required >
<el-col >
<el-form-item prop="inputDate">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="bookForm.inputDate"
style="width: 100%"
></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm"
>确认入库</el-button>
</el-form-item>
</el-form>
</el-container>
</div>
</body>
</template>
<script>
export default {
name: "book",
data() {
return {
bookForm: {
bookName: '',
author: '',
publish: '',
price:'',
bookId: '',
inputDate: ''
},
rules: {
bookName: [
{ required: true, message: "请输入书名", trigger: "blur" },
{ min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
],
author: [
{ required: true, message: "请输入作者", trigger: "blur" },
{ min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
],
publish: [
{ required: true, message: "请输入出版社", trigger: "blur" },
{ min: 4, max: 30, message: "长度在 4 到 30个字符", trigger: "blur" },
],
price: [
{ required: true, message: "请输入价格，包含小数点后两位", trigger: "blur", validator:(rule,value,callback)=>{
if(value===''||(!/^[1-9]{2,3}\.{1}\d{2}$/.test(value))){
callback.$message.error('请输入正确的价格')
}
} },
{ min: 4, max: 6, message: "长度在 4 到 6 个字符", trigger: "blur" },
],
bookId: [
{ required: true, message: "请输入序号", trigger: "blur" },
{ min: 10, max: 10, message: "长度为10个字符", trigger: "blur" },
],
inputDate: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change",
},
],
},
};
},
methods: {
submitForm() {
this.$refs.bookForm.validate((valid) => {
if (valid) {
this.axios.post("http://localhost:8080/book/add",this.bookForm).then((res=>{
if(res.data.code===1){
this.$message.success("入库成功")
}else{
this.$message.error("入库失败")
}
}))
} else {
this.$message.error("未通过，入库失败")
}
});
},
select(){
this.$router.push({path:"/bookSelect",name:"select"})
}
}
};
</script>
<style>
.poster{
border: 0px;
}
header{
width: 100%;
font-size: 30px;
color: rgb(60, 95, 210);
border: 5px;
margin: 0px;
text-align: center;
line-height: 40px;
}
h6{
float: left;
text-align: left;
}
.addContainer{
height: 600px;
background-position: center;
}
</style>
