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

SSM–功能实现

实现功能09-带条件查询分页显示列表

需求分析/图解

思路分析

1. 完成后台代码从dao -> serivce -> controller , 并对每层代码进行测试
2. 完成前台代码，使用axios 发送http 请求，完成带条件查询分页显示

代码实现

1. 修改FurnService.java 和FurnServiceImpl.java , 增加条件查询

修改FurnService.java

public List<Furn> findByCondition(String name);

修改FurnServiceImpl.java

@Override
    public List<Furn> findByCondition(String name) {

        FurnExample furnExample = new FurnExample();
        //通过Criteria 对象可以设置查询条件
        FurnExample.Criteria criteria = furnExample.createCriteria();

        //判断name是有具体的内容
        if (StringUtils.hasText(name)) {
            criteria.andNameLike("%" + name + "%");
        }
        //说明:如果name没有传值null ,"", "   ", 依然是查询所有的记录
        return furnMapper.selectByExample(furnExample);
    }

2. 修改FurnController.java , 处理带条件分页查询

/**
     * 根据家居名进行分页查询-条件
     *
     * @param pageNum
     * @param pageSize
     * @return
     */
    @ResponseBody
    @RequestMapping("/furnsByConditionPage")
    public Msg listFurnsByConditionPage(@RequestParam(defaultValue = "1") Integer pageNum,
                                        @RequestParam(defaultValue = "5") Integer pageSize,
                                        @RequestParam(defaultValue = "") String search) {

        PageHelper.startPage(pageNum, pageSize);
        List furnList = furnService.findByCondition(search);

        PageInfo pageInfo = new PageInfo(furnList, pageSize);

        //将pageInfo封装到Msg对象，返回
        return Msg.success().add("pageInfo", pageInfo);
    }

3. 使用Postman 测试，是否通过

4. 修改HomeView.vue , 完成带条件分页查询

< !--功能区域-->
    

        
        新增

 
< !--搜索区域-->
    

        
        检索

=======在数据池，增加search 变量=

========修改list 方法，请求带条件分页的API 接口=

测试分页条件查询

启动项目后台服务furns_ssm
启动项目前台ssm_vue

带条件分页查询显示效果

测试带条件分页查询显示效果, 浏览器: http://localhost:9875/

实现功能10-添加家居表单前端校验

需求分析/图解

说明: 参考element-plus 表单验证

思路分析

1. 完成前台代码，使用ElementPlus 的表单rules 验证即可
2. 参考ElementPlus 的表单验证文档

代码实现

1. 修改HomeView.vue , 增加表单验证处理代码

   ==增加对表单各个字段的校验规则=

tableData: [],
    rules: {
    name: [
        { required: true, message: '请输入称家居名', trigger: 'blur' }
    ],
        maker: [
            { required: true, message: '请输入称制造商', trigger: 'blur' }
        ],
            price: [
                { required: true, message: '请输入价格', trigger: 'blur' },
                { pattern: /^(([1-9]\d*)|(0))(\.\d+)?$/, message: '请输入数字', trigger: 'blur' }
            ],
                sales: [
                    { required: true, message: '请输入销量', trigger: 'blur' },
                    { pattern: /^(([1-9]\d*)|(0))$/, message: '请输入数字', trigger: 'blur' }
                ],
                    stock: [
                        { required: true, message: '请输入库存', trigger: 'blur' },
                { pattern: /^(([1-9]\d*)|(0))$/, message: '请输入数字', trigger: 'blur' }
                    ]
}

==指定将创建的规则应用到form 表单, 注意名称要对应=
<dependency> <groupId>org.hibernategroupId> <artifactId>hibernate-validatorartifactId> <version>6.1.0.Finalversion> 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 = {}
    },

修改对话框，显示后台返回的校验错误信息

    
        
            
            {{ serverValidErrors.name }}
        
        
            
            {{ serverValidErrors.maker }}
        
        
            
            {{ serverValidErrors.price }}
        
        
            
            {{ serverValidErrors.sales }}
        
        
            
            {{ serverValidErrors.stock }}
        
    
    

完成测试: 添加家居表单后端校验

启动项目后台服务furns_ssm
使用Postman 进行测试
1、通过Postman 发出添加请求

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

启动项目前台ssm_vue
浏览器： http://localhost:9875/
测试页面效果
● 添加家居表单后端校验, 浏览器: http://localhost:9875/

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