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("添加失败");
}
最终效果
