elementui+vue分页查询和模糊查询

        讲之前，这里有一个如下的整个工程文件，数据库的表也在里面，数据库名为mybatis。需要的自提：

ssm整合案例登录注册增删改查-Java文档类资源-CSDN下载ssm整合+vue+elementui实现登录，注册；主页面的增删改查，分页查询和模糊查询,以及退出更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/lrs998563/85703733

一、分页查询

在官网的组件中找到分页组件的代码。推荐用这个完整的，里面包含更多的属性帮助我们理解练习。

 <%-- 分页插件 --%>
        <div class="block" id="pageHelper">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

 vue的data中要加入这几个变量，一般只要属性前带冒号的都要在data中赋值：

 需要触发的方法：

（1）current-change:页码改变时触发的事件

handleCurrentChange(val) {
                    this.currentPage = val; //val可以获取当前用户选择的页码数
                    app.initTable();//页面加载触发的查询所有的事件
                },

（2）size-page: 当前页面显示的条数发生改变时触发的事件

//每页显示的条数大小改变时触发的方法
                handleSizeChange(val) {
                    this.pageSize = val;//获取用户想要每页显示的条数
                    app.initTable();
                },

（3）修改页面加载事件，发送异步请求时，需要携带两个参数：pageSize(显示条数)和currentPage(当前页码数)

//页面加载事件
initTable(){
       axios.post("student/select?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(function (result){
       console.log(result.data)
       if (result.data.code===2000){
            app.tableData = result.data.data.list;
            app.total = result.data.data.total;
          }else if (result.data.code===5001){
            app.$message.error(result.data.msg);
            location.href="login.jsp"
        }
   }) 
},

 后端业务层需要修改的代码：

public CommenResult select(Integer currentPage,Integer pageSize){
        try {
            PageInfo<Student> pageInfo = studentservice.selectAll(currentPage, pageSize);
            return new CommenResult(2000,"查询成功",pageInfo);
        } catch (Exception exception) {
            exception.printStackTrace();
        }
        return new CommenResult(5000,"查询失败",null);
    }

想要实现分页功能，记得导入分页的jar包并且在配置文件中配置分页:

 二、模糊查询

我们只需要在官网上找个表单输入框加一个按钮就行，最后的效果差不多这样就可以：

（1） 首先要在vue的data中为:model里的searchForm赋一个初始值

 （2）为查询按钮绑定一个触发模糊查询的点击事件：

//模糊查询方法
onSearch(){
    this.currentPage=1//查询之前，要先确保分页查询的当前页面在第一页
    this.initTable();
},

        这里触发页面加载事件之前一定要让当前页为第一页，不然会和分页查询产生不必要的冲突。如果不理解，可以把这一行代码删掉，然后在前端分页查询之前将页面点到除了第一页的页面再查询，看看效果，然后你就明白了

        最重要的是修改页面加载事件：在前面我们传了分页查询需要的参数，这里再加上我们模糊查询的表单数据。

//页面加载事件
                initTable(){
                    axios.post("student/select?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.searchForm).then(function (result){
                        console.log(result.data)
                        if (result.data.code===2000){
                            app.tableData = result.data.data.list;
                            app.total = result.data.data.total;
                        }else if (result.data.code===5001){
                            app.$message.error(result.data.msg);
                            location.href="login.jsp"
                        }
                    })
                },

        修改业务层传的参数：就比之前分页时多加了一个map，用来封装我们的表单数据。

public CommenResult select(Integer currentPage,Integer pageSize,@RequestBody Map map){
        log.info(currentPage+"------"+pageSize);
        try {
            PageInfo<Student> pageInfo = studentservice.selectAll(currentPage, pageSize,map);
            return new CommenResult(2000,"查询成功",pageInfo);
        } catch (Exception exception) {
            exception.printStackTrace();
        }
        return new CommenResult(5000,"查询失败",null);
    }

        修改查询所有的dao方法:

  <select id="selectAll" resultMap="BaseResultMap">
    select * from tbl_student
    <where>
      <if test="stuName!=null and stuName!=''"><!--模糊查询根据学生姓名-->
        and stu_name like concat('%',#{stuName},'%')
      </if>
      <if test="stuSex!=null"><!--根据学生性别-->
        and stu_sex = #{stuSex}
      </if>
      <if test="stuMajor!=null"><!--根据学生的专业-->
        and stu_major = #{stuMajor}
      </if>
    </where>
  </select>

        这里运用了动态sql，如果这三个变量穿过来了参数，就会根据这些参数来查询，如果没有传参，就是普通的查询所有的方法。

        如果这部分知识不太了解的话，可以看下面的文章：

二、Mybatis第二节_岚杉的博客-CSDN博客在我们在上一章中，使用了 SqlSession封装的一些方法完成了crud操作，但是SqlSession封装的方法，传递占位符的参数只能传递一个。而且他的方法名称都是固定。 真实在开发环境下我们不使用SqlSession封装的方法，而是习惯自己定义方法，自己调用自己的方法。也就是通过dao和映射文件的关联来完成操作 （1）创建一个dao接口（interface）并自定义需要的方法 （2）创建映射文件 （和上一章创建映射文件相同，如果你最后也添加了模板，我们直接https://blog.csdn.net/lrs998563/article/details/125088867?spm=1001.2014.3001.5501