在上一次作业里面，我们已经学会使用element-ul来修饰我们的表格数据了，但是作为表格数据，我们做的还是有所不足，如果我们的数据足够多，或者我们想一页少展示几条数据，可以自己选择展示多少条数据，查看一共有多少条数据，那么我们就需要来使用 分页 的组件来实现这一功能
准备
首先，我们打开上一次的项目并在浏览器上找到element组件官方网站，然后找到自己想要的分页组件，并进行复制到我们项目的前端项目中的合适位置，这里我是复制在了表格的下面，方便查看和操作
这时候，我们的页面上就已经有分页栏了，然后我们可以对它的样式进行修改，比如居中大小，自己满意就可以。
然后此时我们点击分页，但是我们的数据却没有变动，因为我们的分页栏还没有和数据绑定到一起
接下来我们讲讲如何将数据和分页绑定到一起
首先我们要准备好提前工作，在pox.xml文件中的<dependencies>下添加以下代码下载Pagehelper依赖
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.4.2</version>
</dependency>
然后我们就可以开始修改我们的项目代码了
后端
我们首先找到我们的mapper文件，看到我们操作数据库的方法，我们需要对查询出来的数据进行分页展示，就是要在查询时对数据进行分页，这里我们引用Pagehelper依赖，我们就可以在下面的service层进行操作
如果没有引入该依赖，就需要在查询语句里面添加相关的限制，我们分页一般分为第几页和每页几条数据集，我们将这两个数据作为参数加入到该查询语句中 注：如果要使用pagehelper依赖就不用改
@Select("SELECT * FROM character_message LIMIT #{offset}, #{limit}")
List<CharacterMessage> findAll(@Param("offset") int offset, @Param("limit") int limit);
我们打开service文件夹，找到接口文件，将获取展示所有数据的接口的返回类型更改为我们依赖项里面的PageInfo类型，并传入两个参数，分别表示当前所在的页数和每页所展示的数据量(数据数)
PageInfo类它提供了分页后的相关数据和便捷的方法来处理分页逻辑，用来封装分页信息和查询结果
然后我们就需要在实现接口类中实现该接口，同样也是先改变返回类型，然后传入两个参数表示当前页面和每页数据数量，
然后我们需要引用到PageHelper.startPage()方法进行对mapper方法查询出来的数据进行分页操作，该方法为依赖项所提供的分页操作的函数，该函数传入两个参数，就是我们传入到该接口的两个参数，然后我们创建一个数组储存mapper方法查询出来的数据，我们在调用该接口时就会默认进行分页然后将数据进行储存，最后，我们返回该类型的数据数组，用于展示
最后，我们最终需要回到我们执行接口的controller层，更改我们的接口调用的方法，我们也是将返回类型改为PageInfo<>类型，然后传入和上述一样两个参数，这里我们可以手动设置一下默认值，然后返回调用接口所获取的数据给前端展示
前端
然后我们可以来看前端的代码逻辑
首先，由于我们的分页涉及到多个参数，所以我们除了在vue中的data数据中返回用于存储数据库中的tableData数组，我们还需要返回几个参数，分别表示页码，每页数据量和总数据
然后在mounted中，我们通过fetchData方法来加载数据，fetchData方法我们在下面的methods中进行定义，这里我们也还是传入两个参数，表示页码和每页数据量
在methods中，我们定义fetchData方法，这里，我们需要对我们的显示数据的页面传入两个参数，分别为页码也就是当前所在页，和每页数据量，注意，这里传入的参数名应该和controller中定义方法传入的参数名称一样，然后对data中的数据进行赋值
之后，我们就分页完成，之后我们需要点击分页，就需要对点击的地方进行绑定函数方法，所以我们定位到我们设置分页栏的地方，在这里，我们给点击下一页设置一个方法，然后给更改当页数据量设置一个方法，然后将页面设置为当前的页面，数据量设置为当前页面的数据量，总量设置为当前数据总量
然后我们接着在methods里面编写我们的两个方法函数，第一个函数传入更改页面的数据量，然后调用fetchData方法，将更改的页面数据量变更为当前的数据量
同理第二个方法就是传入当前的页码，通过调用fetchData方法，将更改的页码变更为当前的页码
总结
综上，这一次就是通过前端传入的页码和每页数据量首先传递给后端的controller层，然后该层调用接口函数，并将这两个参数传递给接口类对mapper类查询出来的数据进行分类，最后将分类后的数据展示出来，完成分页的操作
最后看看我的结果
第一页
第二页
