SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--功能实现[五](下)

简介: SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--功能实现[五](下)
  1. 修改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/

329afc4f0a92681492f2339e11718a7a.png

4ee0cc0c2c6707f767fc49931068d6d4.png


实现功能11-添加家居表单后端校验


需求分析/图解


  1. 为什么前端校验了,后端还需要校验?-使用Postman 添加数据, 破前端校验机制

47e95590428e57751dab6aba95aaf101.png



807798f161abbad64ab11e276799cde7.png

  1. 后端校验-需求分析, 当后端校验没有通过,会出现灰色框提示, 后台不真正入库数据

1589540d75849f651685de40196e974e.png


思路分析


  1. 后台使用JSR303 数据校验,引入hibernate-validator.jar ,学SpringMVC 讲过
  2. 前台使用ElementPlus 进行数据绑定,并显示错误信息


代码实现


  1. 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>


  1. 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);
        }
    }


  1. 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 发出添加请求

7d918ebb4cabf9940ba8573f213a08f4.png

2、这时, 后台返回添加失败的提示信息

95b16d9c8fe50bee619b1d64b419bb62.png

启动项目前台ssm_vue

浏览器: http://localhost:9875/

测试页面效果

● 添加家居表单后端校验, 浏览器: http://localhost:9875/

17176ae8f9ec1ee510a2c53a7d17f0b1.png


03f3626d0f23d9487a6dbe9c6ade6cda.png

测试完毕后, 记得恢复valid 的正确写法。

相关文章
|
1月前
|
JSON 前端开发 JavaScript
Vue3 Ajax(axios)
Vue3 Ajax(axios)
|
1月前
|
JavaScript 小程序 API
【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
131 0
|
9天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
8 0
|
29天前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
1月前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
18 1
|
1月前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
65 0
|
1月前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
1月前
|
Java
SSM框架实现分页功能,没有用thymeleaf
SSM框架实现分页功能,没有用thymeleaf
|
1月前
|
JSON 前端开发 JavaScript
《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用
《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用
|
1月前
Vue3集成axios
Vue3集成axios
42 0