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

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

SSM–功能实现


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


需求分析/图解


0d34fa177784ec4563da865c52824788.png


思路分析


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


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


  1. 使用Postman 测试,是否通过


04c0e55001f9eb3e89313c3131d34789.png

  1. 修改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 变量=

22f47055d1555fe476c91dc9773afca0.png

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


1c56873cc0b03d65a6e6a38a2420467c.png


测试分页条件查询


启动项目后台服务furns_ssm

启动项目前台ssm_vue


带条件分页查询显示效果


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


45df333a0e34ba76f0434f793ee9268b.png


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


需求分析/图解


d389aaaa695b8d94b10e0555ec57a635.png

89381fa75a69a1dd323797d61462bcc5.png

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

1f445e981bd88b82401c2e4ac15f3281.png


思路分析


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


代码实现


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

  2. ==增加对表单各个字段的校验规则=
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 属性一致


–>


image.png

  1. 测试,就可以看到验证规则生效了【是光标离开输出框时,出现校验效果,因为是trigger:‘blur’ 事件】, 但是用户提交还是能成.

51c2df9bcd4ccf52c4b6c395554bc158.png

相关文章
|
1月前
|
JSON 前端开发 JavaScript
Vue3 Ajax(axios)
Vue3 Ajax(axios)
|
1月前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
22 0
|
1月前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
223 0
|
1月前
|
JavaScript 小程序 API
【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
151 0
|
1月前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
1月前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
22 1
|
28天前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
|
1月前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
1月前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
1月前
|
JavaScript 数据格式
Vue axios请求拦截和相应拦截
Vue axios请求拦截和相应拦截
37 2