珠海集团网站建设外包,如何做网站?,中国企业建设协会网站,青州网站搭建学习内容来源#xff1a;视频p5 书接目录对页面重新命名选择组件后端对接测试接口设置接口前端调用对页面重新命名
将之前的 Page1 Page2 进行重新命名#xff0c;使其具有实际意义 Page1 → BookManage #xff1b; Page2 → AddBook 并且 /router/index.js 中配置页面信息…学习内容来源视频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(添加失败);
}最终效果
