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' } ] }
==指定将创建的规则应用到form 表单, 注意名称要对应=
<!-- 添加家居的弹窗
说明:
1.el-dialog ：v-model=“dialogVisible” 表示对话框, 和dialogVisible 变量双向绑定,控制是否显示对话框
2.el-form :model=“form” 表示表单,数据和form 数据变量双向绑定
3.el-input v-model=“form.name” 表示表单的input 空间， 名字为name 需要和后台Javabean 属性一致
–>
- 测试，就可以看到验证规则生效了【是光标离开输出框时，出现校验效果，因为是trigger:‘blur’ 事件】, 但是用户提交还是能成.
