Vue+Element+PageHelper实现分页

「爱情、让人受尽委屈。」 2022-10-08 05:47 296阅读 0赞

因为之前一直是用Layui来显示数据和对表格进行分页，最近刚学了Vue和Element组件，那就把它们结合起来实现分页以及数据的显示吧。Element和Vue可到官网详细了解。  
我们先来看一下我们完成的效果，如下：  
![在这里插入图片描述][20210620144155571.GIF_pic_center]  
首先我们创建一个SpringBoot或者Maven工程，要使用PageHelper的话需要在我们项目的pom文件中引入依赖，至于mybatis和mysql的相关依赖就不一一细说了，这些都是查询操作数据库必须的依赖，其中还有一个lombok的插件也需要引入依赖，在实体类中会用到

<dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.2.5</version>
    </dependency>
    
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
    </dependency>

1、创建实体类，用来映射我们的数据库表数据

@Data//使用这个注解，就不用再去手写Getter,Setter,equals,canEqual,hasCode,toString等方法了，注解后在编译时会自动加进去
    @NoArgsConstructor//顾名思义，@NoArgsConstructor 注解是针对无参数的构造函数，它会生成一个无参数的构造方法。使用后创建一个无参构造函数
    @AllArgsConstructor//@AllArgsConstructor 顾名思义会生成一个包含所有变量的构造方法。使用后添加一个构造函数，该构造函数含有所有已声明字段属性参数
    public class User { 
        private Integer id;//id
        private String name;//名字
        private String idnum;//身份证号
        private String iphone;//手机号
        private Boolean sex;//性别
        private String adress;//地址
        private Integer age;//年龄
        //入参格式化
        @DateTimeFormat(pattern = "yyyy-MM-dd")
        //出参格式化
        @JsonFormat(pattern = "yyyy-MM-dd" ,timezone = "GMT+8")
        private Date birthday;//生日
    }

2、DAO层、Service层、ServiceImpl实现层以及Sql语句，最后通过控制器返回数据

//分页查询
     Page<User> selectUsers(@Param("name")String name, @Param("pageNum")int pageNum, @Param("pageSize")int pageSize);

@Override
     public Page<User> selectUsers(String name, int pageNum, int pageSize) { 
          Page<User> page = PageHelper.startPage(pageNum, pageSize);
          userDao.selectUsers(name,pageNum,pageSize);
          return page;
      }

<select id="selectUsers" resultType="com.xgb.pojo.User">
         select * from tb_usertwo
         <where>
             <if test="name != null and name != ''">
                 and tb_usertwo.name like CONCAT('%',#{name},'%')
             </if>
         </where>
     </select>

//分页查询
    @ResponseBody
    @RequestMapping("/list")
    public Map<String, Object> list(@RequestParam(value="name")String name,
                                    @RequestParam(value="pageNum")int pageNum,
                                    @RequestParam(value="pageSize")int pageSize) { 
        Page<User> page = userService.selectUsers(name,pageNum,pageSize);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("pagedata", page);
        map.put("number", page.getTotal());
        //System.out.println(map);
        return map;
    }

在Dao层和Service层编写分页查询方法，在Impl实现层使用PageHelper进行分页，不需要去管PageHelpers是如何实现的，它是人家已经封装好的接口，只需要这一句就可以实现物理分页。它会对跟在它后面的一个sql查询语句起作用。这里name是根据名字模糊查询的条件，最后通过控制器调用数据库返回数据到页面。以上就是后端，下面我们看一下前端。

前端页面首先我们需要引入相应的css和js，这里是本地文件引入，axios是发送请求后台数据需要用到的，axios下载地址：[https://github.com/axios/axios\#axios][https_github.com_axios_axios_axios]  
![在这里插入图片描述][20210620144714316.GIF_pic_center]  
这些css和js都可以通过cdn的方式在官网上直接引入，或者下载到本地再引入，element的话如果在本地引入的话它里面自带的图标你是用不了的，还需要下载一个fonts里面的两个文件，地址：[https://unpkg.com/browse/element-ui@2.13.2/lib/theme-chalk/fonts/][https_unpkg.com_browse_element-ui_2.13.2_lib_theme-chalk_fonts]  
![在这里插入图片描述][20210620144809720.GIF_pic_center]  
![在这里插入图片描述][20210620144818143.GIF_pic_center]  
然后就是我们的html页面了，div样式以及用到的vue跟element组件的内容

<!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Vue+Element+PageHelper实现分页</title>
    
        <link rel="stylesheet" href="/assets/element/index.css">
        <script type="text/javascript" src="/vuejs/vue-2.6.12.js"></script>
        <script type="text/javascript" src="/vuejs/axios-0.21.1.js"></script>
        <script src="/assets/element/index.js"></script>
    
    </head>
    <body>
    <div class="container-fluid" id="app">
        <el-input style="width:150px" size="small" placeholder="请输入姓名" prefix-icon="el-icon-search" v-model="search">
        </el-input>
        <el-button type="primary" size="small" icon="el-icon-search" @click="selSearch">搜索</el-button>
        <el-button type="primary" size="small" icon="el-icon-plus">新增</el-button>
        <template>
            <el-table :data="tableData" border style="width: 100%;margin-top: 10px">
                <el-table-column label="序号" width="100" type="index"></el-table-column>
                <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                <el-table-column prop="birthday" label="生日" width="100"></el-table-column>
                <el-table-column prop="iphone" label="电话" width="150"></el-table-column>
                <el-table-column prop="age" label="年龄" width="80"></el-table-column>
                <el-table-column prop="sex" label="性别" width="80"></el-table-column>
                <el-table-column prop="idnum" label="身份证号" width="180"></el-table-column>
                <el-table-column prop="adress" label="地址"></el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button size="small" type="primary">编辑</el-button>
                        <el-button size="small" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="block" style="margin-top: 5px;margin-bottom: 10px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>

我们在最外层的div给它定义一个id，用于我们实例化Vue，template里的就是我们的element里的表格组件，不知道如何使用可以到官网查看，prop属性对应实体类里的数据段，  
el-pagination就是我们分页的样式了，里面的基本是固定的写法，page-sizes【每页显示个数选择器】我们可以根据自身需求修改

接着就是重要的js代码vue了，我们需要在这里实例化一个Vue，配置我们需要的数据参数，方法函数等

以上就是对Vue的基本使用，在data中定义变量（默认数据），使用vue的语法指令渲染到html页面上，在methods中定义方法函数（事件），在函数中使用axios向我们的后台发送请求，在请求成功的回调函数里  
.then(function(response)\{  
执行我们想要的操作  
\}）  
.catch(function(err)\{  
异常时想要执行的操作  
\}）  
在Vue的生命周期函数中created（当我们页面加载的时候）自动调用分页查询的方法。  
到这里，我们的分页就已经可以实现了。

[20210620144155571.GIF_pic_center]: /images/20221005/328bfb47b46e4bccacc21ecb3bad3d88.png
[https_github.com_axios_axios_axios]: https://github.com/axios/axios#axios
[20210620144714316.GIF_pic_center]: /images/20221005/593e6d51082c4c5bb3f636c45244c137.png
[https_unpkg.com_browse_element-ui_2.13.2_lib_theme-chalk_fonts]: https://unpkg.com/browse/element-ui@2.13.2/lib/theme-chalk/fonts/
[20210620144809720.GIF_pic_center]: /images/20221005/8c5b712898fc48daa65ec89d9d33378e.png
[20210620144818143.GIF_pic_center]: /images/20221005/e2c735576549489a92615d3ec6af1132.png