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

2023-08-09 187

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--功能实现[五]（上）

SSM–功能实现

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

需求分析/图解

思路分析

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

代码实现

修改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);
    }

修改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<Furn> furnList = furnService.findByCondition(search);
        PageInfo pageInfo = new PageInfo(furnList, pageSize);
        //将pageInfo封装到Msg对象，返回
        return Msg.success().add("pageInfo", pageInfo);
    }

使用Postman 测试，是否通过

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

< !--功能区域-->
    <div style="margin: 10px 0">
        <i class="el-icon-add-location"></i>
        <el-button type="primary" @click="add">新增</el-button>
</div>
< !--搜索区域-->
    <div style="margin: 10px 0">
        <el-input v-model="search" placeholder=" 请输入关键字" style="width: 20%"
            clearable></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="list">检索</el-button>
</div>

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

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

测试分页条件查询

启动项目后台服务furns_ssm

启动项目前台ssm_vue

带条件分页查询显示效果

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

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

需求分析/图解

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

思路分析

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

代码实现

修改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' }
                    ]
}