Vue表单提交与数据存储

学习内容来源：视频p5
书接

对页面重新命名

将之前的 Page1 Page2 进行重新命名，使其具有实际意义
Page1 → BookManage ； Page2 → AddBook
并且 /router/index.js 中配置页面信息

选择组件

一般填写内容都采用 Form 表单组件，选择一个复制粘贴即可
精简组件，留下需要的即可

表单通过 :model 绑定创建对象的属性，:ref 属性相当于表单名称

通过 :rule 属性规定填写格式
以预设的 name 规则为例

rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],}

属性	含义
required	是否为必填
message	空缺时提示信息
trigger	何时触发校验，blur意为鼠标没有聚焦时
min/max	字段最小/最大长度
在表单的标签栏通过 prop 绑定具体规则

可以通过新增一个按钮来显示是否成功接收到了填写的数据

配置一下点击事件
即可在控制台查看

后端对接

测试接口

bookRepository 所继承的JPA自带了一个 save() 方法，可以直接传入对象存入数据库，并且返回一个从数据库读出的数据，此处可以打印以测试是否存入成功

但要注意，如果数据库中 id 是自增属性，而且后端没有手动赋值，则需要在实体类上标注此属性自增，否则会报错

需要在实体类添加一个自增注解

证明存入成功

设置接口

在Handler目录下创建存储数据接口

将传递来的对象映射为java对象，调用之前测试的 save() 方法进行存储

前端调用

在提交对应的函数下调用 axios 封装好的函数

axios.post("http://localhost:8181/book/save",this.ruleForm).then(function (resp) {if (resp.data == "success"){alert("上传成功");}else{alert("上传失败");}
})

到数据库查看，确实已经上传成功

可以选择一个合适的组件来显示报告信息

注意使用外层 this 指针就行，其余仿照官方文档即可

也可以选择添加成功后跳转至查询页面，进一步验证是否添加成功

if (resp.data == "success"){_this.$alert("《"+_this.ruleForm.name+"》添加成功", '成功', {confirmButtonText: '确定',callback: action => {_this.$router.push("/BookMange");}});
}else{_this.$message.error("添加失败");
}

最终效果