学习记录-mybatis+vue+elementUi实现分页条件查询

最新推荐文章于 2023-10-02 18:33:24 发布

Record growth...

最新推荐文章于 2023-10-02 18:33:24 发布

阅读量980

点赞数

分类专栏： javaweb学习文章标签： mybatis 学习 vue.js

本文链接：https://blog.csdn.net/weixin_44239550/article/details/128429312

版权

javaweb学习专栏收录该内容

31 篇文章 1 订阅

订阅专栏

因为前端并不难，这里前后端就一起实现。一共分为四个步骤

步骤一 ① SQL部分

分页条件查询其实就是在分页的基础上增加条件，这里有两个主要的函数需要去实现，一个是根据分页以及条件去查询数据，另一个是根据条件去统计数据。
明显第二个更为简单，先从第二个开始分析。

根据条件统计满足条件的数量。
原本统计的SQL只需要一句：select count(*) form 表名。完事儿了，这就可以统计所有的条目数。现在的需求是什么，假设用户添加了条件：我想看品牌名称是华为的。那么只需要在SQL后面添加条件就可以了。因此这个的SQL还是很好实现的。只消注意的是，这里需要使用动态SQL，因为用户非常大的可能不会一次全部都输入。

实现该统计的SQL如下：
mapper部分

/**
     * 根据条件查询总记录数
     * @return
     */

    int selectTotalCountByCondition(Brand brand);

xml中实现部分

<select id="selectTotalCountByCondition" resultType="java.lang.Integer">
        select count(*) from tb_brand
        <where>
            <if test=" brandName != null and  brandName != '' ">
                and brand_name like #{ brandName}
            </if>
            <if test=" companyName != null and  companyName != '' ">
                and company_name like #{ companyName}
            </if>
            <if test=" status != null">
                and status like #{ status}
            </if>

        </where>
    </select>

根据条件以及分页来查询数据。这里要的是什么数据，打个比方说：用户想要品牌名称为华为的所有结果，而且，我还要进行分页展示。那分页我们之前写了吧，只需要传入当前页以及页面大小就可以了，那只需要添加条件就可以了。这里的代码比较复杂，没有使用注解开发。

mapper部分

/**
     * 分页条件查询
     * @param begin
     * @param size
     * @return
     */

    List<Brand> selectByPageAndCondition(@Param("begin") int begin, @Param("size")int size, @Param("brand")Brand brand);

这里我就要讲两句了，看下图，可以对照前面查询总记录数传入的参数来看，人家怎么没写注解呢？因为人家只有一个参数，不需要注解。但是咱们这里有三个参数，不仅是需要注解，还需要使用注解里面的值。

在这里插入图片描述
xml实现部分

<select id="selectByPageAndCondition" resultMap="brandResultMap">
        select * from  tb_brand
        <where>
            <if test="brand.brandName != null and brand.brandName != '' ">
                and brand_name like #{brand.brandName}
            </if>
            <if test="brand.companyName != null and brand.companyName != '' ">
                and company_name like #{brand.companyName}
            </if>
            <if test="brand.status != null">
                and status like #{brand.status}
            </if>

        </where>
        limit #{begin}, #{size}

    </select>

因此呢这里可以小结一下

如果我们只有一个参数，比如只需要传入brand对象，那里面可以直接使用它里面的属性， <if test=" brandName != null and brandName != '' ">，像这一条，brandName是它里面的属性吧，没事直接用。

但是如果有多个参数需要传递就必须要使用注解了，一旦要使用注解，那对象里面的属性就不能直接使用了，比如说你要这么用：brand.brandName != null。

步骤二 ② service层部分

老规矩，接口这一块。

接口这里和之前写的分页查询查不到哪里去，唯二的区别就是方法名改变了、传入的参数多了一个brand对象。下面是代码：

 /**
     * 分页条件查询
     * @param currentPage 当前页码
     * @param pageSize  每页展示条数
     * @return
     */
    PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand);

serviceImpl这一块

这一块的话总体其实也有什么变化的，主要就是需要换一下方法名，还有比较重要的工作就是，处理brand的查询条件，这里搞成模糊查询，其实就是把比如说的华为，从对象里拿出来，左右两边拼接一下百分号，再存到对象里面。主要进行模糊查询代码：

//处理brand条件 模糊表达式
        String brandName = brand.getBrandName();
        if(brandName != null && brandName.length() > 0){
            brand.setBrandName("%" +brandName +  "%");
        }

        String CompanyName = brand.getCompanyName();
        if(CompanyName != null && CompanyName.length() > 0){
            brand.setCompanyName("%" +CompanyName +  "%");
        }

总体的代码：

@Override
    public PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
        SqlSession sqlSession = sqlSessionFactory.openSession();
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //计算开始索引
        int begin = (currentPage -1) * pageSize;
        //查询的条目数（总数）
        int size = pageSize;

        //处理brand条件 模糊表达式
        String brandName = brand.getBrandName();
        if(brandName != null && brandName.length() > 0){
            brand.setBrandName("%" +brandName +  "%");
        }

        String CompanyName = brand.getCompanyName();
        if(CompanyName != null && CompanyName.length() > 0){
            brand.setCompanyName("%" +CompanyName +  "%");
        }

        //查询当前页数据
        List<Brand> rows = mapper.selectByPageAndCondition(begin, size, brand);

        //查询总记录数
        int totalCount = mapper.selectTotalCountByCondition(brand);

        //封装成PageBean对象
        PageBean<Brand> PageBean = new PageBean<>();
        PageBean.setRows(rows);
        PageBean.setTotalCount(totalCount);

        //释放资源
        sqlSession.close();

        return PageBean;
    }

步骤三 ③servlet这一块

这里比之前分页查询就多加了一步。想一想多加了什么。条件嘛。什么条件？其实就是一个brand对象，我们要从前端把这个brand对象接收过来，至于当前页和页面大小之前不是写过嘛，直接使用就可以了。那这里的工作主要就是：复制、粘贴、改一下函数名、接收一下传过来json版本的brand对象，转成我们能用的Java对象。下面是总体的代码：


/**
     * 分页条件查询
     * @param request
     * @param response
     * @throws IOException
     */
    public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //1.接收参数： 当前页码 和 每页分的条目数  url?currentPage=1&pageSize=5
        String _currentPage = request.getParameter("currentPage");
        String _pageSize = request.getParameter("pageSize");

        //转换成int类型的
        int currentPage = Integer.parseInt(_currentPage);
        int pageSize = Integer.parseInt(_pageSize);

        //获取查询条件对象
        BufferedReader br = request.getReader();
        String params = br.readLine();//这个就是接收到的参数字符串
        //转为brand类型
        Brand brand = JSON.parseObject(params, Brand.class);

        //调用service进行查询
        PageBean<Brand> pageBean = brandService.selectByPageAndCondition(currentPage,pageSize,brand);

        //2. 转为json
        String jsonString = JSON.toJSONString(pageBean);

        //3. 防止乱码以及写数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

步骤四④前端这一块

前端需要传值嘛。传什么值？之前element已经给我们定义好了，输入条件之后自然会给我们封装好一个brand对象，只要把这个brand对象传过去就可以了。那就设置一下，点击下面的查询按钮，我们重新进行查询，刷新一下界面呗。就一句代码，调用查询的方法就可以。
在这里插入图片描述

那查询这个方法怎么把数据传到后台去呢？这里将之前的get方法改成了post方法，我们再传个参数–brand对象。下面是实现部分代码：

var that  = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand/selectByPageAndCondition?currentPage="+that.currentPage +"&pageSize=" + that.pageSize,
                    data:that.brand
                }).then(function (resp){
                    //设置表格数据
                    that.tableData =  resp.data.rows;
                    //设置总记录数
                    that.totalCount = resp.data.totalCount;
                })

也就是说，这里级使用了在url中发送数据的方式，又使用了post传送brand对象的方式。

多学一个 resp=>的使用：
可以看到，在axios里面的then中，不能直接使用this，必须先用一个that或者其他来代替。那将function直接替换成resp=>{}。上面的代码可以写成这样：

                axios({
                    method:"post",
                    url:"http://localhost:8080/brand/selectByPageAndCondition?currentPage="+this.currentPage +"&pageSize=" + this.pageSize,
                    data:this.brand
                }).then(resp=>{
                    //设置表格数据
                    this.tableData =  resp.data.rows;
                    //设置总记录数
                    this.totalCount = resp.data.totalCount;
                })

这样就不需要给this换成其他的值了。
可以看到，效果还是一样的。
在这里插入图片描述

总结一下。

和分页查询相比，其实就是多了一个条件，我们需要做的其实就是将对象传回去。那改动比较大的就是SQL部分，因为这一部分添加了动态SQL，但是大部分也可以根据之前的内容进行粘贴复制。其次就是service层的改动，这里需要我们做一个小处理：模糊查询。后面的servlet和前端部分只需要传值和接收，改动不大。

Record growth...

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
学习记录-mybatis+vue+elementUi实现分页条件查询

和分页查询相比，其实就是多了一个条件，我们需要做的其实就是将对象传回去。那改动比较大的就是SQL部分，因为这一部分添加了动态SQL，但是大部分也可以根据之前的内容进行粘贴复制。其次就是service层的改动，这里需要我们做一个小处理：模糊查询。后面的servlet和前端部分只需要传值和接收，改动不大。
复制链接

扫一扫