- 修改Homeview.vue 当表单验证不通过时，不提交表单
修改save()===
save() { //增加处理修改逻辑 if (this.form.id) { request.put("/api/update", this.form).then(res => { if (res.code === 200) {//如果code 为200 this.$message({ //弹出更新成功的消息框 type: "success", message: "更新成功" }) } else { this.$message({//弹出更新失败信息 type: "error", message: res.msg }) } this.list() //刷新列表 this.dialogVisible = false }) } else {//添加 //表单数据校验是否 this.$refs['form'].validate((valid) => { if (valid) { //=======说明====== //1. 将form 表单提交给/api/save 的接口 //2. /api/save 等价http://localhost:10001/save //3. 如果成功，就进入then 方法 //4. res 就是返回的信息 //5. 查看Mysql 看看数据是否保存 request.post("/api/save", this.form).then(res => { this.dialogVisible = false this.list() }) } else { this.$message({//弹出更新失败信息 type: "error", message: "验证失败，不提交" }) return false } }) } }
=修改add()==
add() { this.dialogVisible = true this.form = {} this.$refs['form'].resetFields()//将添加验证提示消息，清空 }
完成测试
启动项目后台服务furns_ssm
启动项目前台ssm_vue
测试页面效果
测试当表单验证不通过，不提交表单. 浏览器: http://localhost:9875/
实现功能11-添加家居表单后端校验
需求分析/图解
- 为什么前端校验了，后端还需要校验?-使用Postman 添加数据, 破前端校验机制
- 后端校验-需求分析, 当后端校验没有通过，会出现灰色框提示, 后台不真正入库数据
思路分析
- 后台使用JSR303 数据校验，引入hibernate-validator.jar ,学SpringMVC 讲过
- 前台使用ElementPlus 进行数据绑定,并显示错误信息
代码实现
- 1.修改pom.xml 引入hibernate-validator jar 文件
<!-- JSR303 数据校验支持 引入hibernate-validator --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-validator</artifactId> <version>6.1.0.Final</version> </dependency>
- 2.修改Furn.java , 使用hibernate-validator
public class Furn { private Integer id; @NotEmpty(message = "请输入家居名") private String name; @NotEmpty(message = "请输入制造厂商") private String maker; @NotNull(message = "请输入数字") @Range(min = 0, message = "价格不能小于0") private BigDecimal price; @NotNull(message = "请输入数字") @Range(min = 0, message = "销量不能小于0") private Integer sales; @NotNull(message = "请输入数字") @Range(min = 0, message = "库存不能小于0") private Integer stock; }
3.修改FurnController.java , 对save 方法进行完善
@PostMapping("/save") @ResponseBody public Msg save(@Validated @RequestBody Furn furn, Errors errors) { Map<String, Object> map = new HashMap<>(); List<FieldError> fieldErrors = errors.getFieldErrors(); for (FieldError fieldError : fieldErrors) { map.put(fieldError.getField(), fieldError.getDefaultMessage()); } if (map.isEmpty()) {//说明后端校验通过,因为没有发现校验错误 furnService.save(furn); //返回成功msg return Msg.success(); } else { //校验失败，把校验错误信息封装到Msg对象，并返回 return Msg.fail().add("errorMsg", map); } }
- 4.修改HomeView.vue , 显示服务器校验返回的提示信息
===在数据池，增加显示错误信息变量
data() { return { //存放错误信息 serverValidErrors: {},
====修改save()方法，显示错误提示
save() { //增加处理修改逻辑 if (this.form.id) { request.put("/api/update", this.form).then(res => { if (res.code === 200) {//如果code 为200 this.$message({ //弹出更新成功的消息框 type: "success", message: "更新成功" }) } else { this.$message({//弹出更新失败信息 type: "error", message: res.msg }) } this.list() //刷新列表 this.dialogVisible = false }) } else {//添加 //表单数据校验是否 this.$refs['form'].validate((valid) => { if (valid) { //=======说明====== //1. 将form 表单提交给/api/save 的接口 //2. /api/save 等价http://localhost:10001/save //3. 如果成功，就进入then 方法 //4. res 就是返回的信息 //5. 查看Mysql 看看数据是否保存 request.post("/api/save", this.form).then(res => { if (res.code === 200) { this.dialogVisible = false this.list() } else if (res.code === 400) { this.serverValidErrors.name = res.extend.errorMsg.name; this.serverValidErrors.sales = res.extend.errorMsg.sales; this.serverValidErrors.price = res.extend.errorMsg.price; this.serverValidErrors.maker = res.extend.errorMsg.maker; this.serverValidErrors.stock = res.extend.errorMsg.stock; } }) } else { this.$message({//弹出更新失败信息 type: "error", message: "验证失败，不提交" }) return false } }) } }
==修改add()方法，清空错误信息=
add() { this.dialogVisible = true this.form = {} this.$refs['form'].resetFields()//将上传验证消息，清空 this.serverValidErrors = {} },
修改对话框，显示后台返回的校验错误信息
<!--添加家居的弹窗 说明: 1. el-dialog ：v-model="dialogVisible" 表示对话框, 和dialogVisible 变量双向绑定,控制是否 显示对话框 2. el-form :model="form" 表示表单,数据和form 数据变量双向绑定 3. el-input v-model="form.name" 表示表单的input 空间，名字为name 需要和后台Javabean 属性一致 --> <el-dialog title="提示" v-model="dialogVisible" width="30%"> <el-form :model="form" :rules="rules" ref="form" label-width="120px"> <el-form-item label="家居名" prop="name"> <el-input v-model="form.name" style="width: 60%"></el-input> {{ serverValidErrors.name }} </el-form-item> <el-form-item label="厂商" prop="maker"> <el-input v-model="form.maker" style="width: 60%"></el-input> {{ serverValidErrors.maker }} </el-form-item> <el-form-item label="价格" prop="price"> <el-input v-model="form.price" style="width: 60%"></el-input> {{ serverValidErrors.price }} </el-form-item> <el-form-item label="销量" prop="sales"> <el-input v-model="form.sales" style="width: 60%"></el-input> {{ serverValidErrors.sales }} </el-form-item> <el-form-item label="库存" prop="stock"> <el-input v-model="form.stock" style="width: 60%"></el-input> {{ serverValidErrors.stock }} </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="save">确定</el-button> </span> </template> </el-dialog>
完成测试: 添加家居表单后端校验
启动项目后台服务furns_ssm
使用Postman 进行测试
1、通过Postman 发出添加请求
2、这时, 后台返回添加失败的提示信息
启动项目前台ssm_vue
浏览器： http://localhost:9875/
测试页面效果
● 添加家居表单后端校验, 浏览器: http://localhost:9875/
测试完毕后, 记得恢复valid 的正确写法。
