type
status
date
slug
summary
tags
category
icon
password
现在开始正式在前端展示各个用户的文章。
分页查询
什么是“分页查询”？
想象一下你正在看一本非常厚非常厚的书，比如一本字典。
- 没有分页查询： 就像你一次性要把整本字典从头到尾都读完，或者一次性把整本字典都搬到桌子上。这显然非常慢，非常累，而且你的桌子（电脑内存）也可能放不下。
- 有了分页查询： 就像你只看字典的“第 1 页到第 10 页”，或者“第 101 页到第 110 页”。你每次只看一小部分内容，看完这部分，觉得不够再翻到下一页。
在计算机和网络的世界里，这个“书”就是数据库里的大量数据（比如几万、几十万、几百万篇文章），而“看书”就是你的程序去数据库里拿这些数据。
它的核心思想就是：
- 按需加载： 我不需要一次性把所有数据都拿出来，我只想要当前用户在屏幕上能看到的那一小部分数据。
- 分批展示： 我把所有数据分成一页一页的，用户想看哪一页，我就去拿哪一页的数据。
为什么需要分页查询？
想象一下你的网站上有 100 万篇文章：
- 慢！ 如果你一次性把这 100 万篇文章全部从数据库拿出来，再全部传到你的网页上，再全部显示出来，你的网站会慢到爆炸，用户等得花都谢了。
- 卡！ 就算传到了网页，你的电脑内存也可能瞬间爆满，网页直接卡死或崩溃。
- 浪费！ 用户通常只关心当前屏幕上显示的那几篇文章，后面几十万篇他可能根本没看，白白传输了那么多数据，浪费了网络流量和服务器资源。
有了分页查询，这些问题就迎刃而解了：
- 用户访问网站，网站只去数据库拿**“第 1 页”**的 10 篇文章。
- 用户点击“下一页”，网站再去数据库拿**“第 2 页”**的 10 篇文章。
- 这样既快又省，用户体验也很好。
“分页查询”的实现原理
当你的网页（前端）告诉服务器（后端）说：“我想要第 3 页的文章，每页显示 10 篇”，那么后端会：
- 计算跳过多少条： 要拿第 3 页，每页 10 条，那前面第 1 页和第 2 页加起来就是 20 条，所以要跳过 20 条数据。
- 公式：
(页码 - 1) * 每页大小
- 从数据库查询： 向数据库发送一个特殊的命令，告诉它：“跳过前面 20 条数据，然后给我取接下来的 10 条数据”。
- 这个命令在 SQL 语言中通常是
LIMIT 10 OFFSET 20(或者LIMIT 20, 10)。
- 计算总数： 同时，后端还会问数据库：“满足我条件的文章总共有多少篇？” 这样前端就知道总共有多少页可以翻。
- 这个命令通常是
SELECT COUNT(*) FROM your_table WHERE ...
- 返回数据： 把当前页的 10 篇文章和总文章数一起返回给前端。
安装依赖
在**MyBatis Plus3.5.9及以上版本的分页功能独立了出来，所以我们需要额外安装一个依赖
mybatis-plus-jsqlparser** 如果你的版本是3.5.9以下，则无需安装。我们来到Maven依赖网站
选择3.5.12版本，请根据自己的**
mybatis-plus** 版本自行选择对应的版本安装，我用的是3.5.12版本。将依赖写入
pom.xml后记得更新一下依赖，前文说过便不再赘述。在config包下创建一个
MybatisPlusConfig，代码如下：前端部分
一个主页通常包含顶部导航，主要内容区，页脚。 大部分网站都是这样的，你可以打开各类网站观察一下他们的布局，在此我不赘述。 一个顶部导航可能会在很多地方都能用到，所以它最好是个组件，以便我们复用。 在src下的components下创建一个
TheHeader.vue
在视图下创建一个
Home.vue并导入TheHeader组件
按照惯例在router里加上Home，这样我们就能正确路由到Home了
数据库部分
我们需要一个article表，来存放文章内容 点击左上角的创建sql，写入sql代码，最后点击上方的闪电按钮执行。 这里的user_id和用户表的id关联了起来，当用户表的用户被删除时，与之关联的文章也会被一并删除。
我们再造一些模拟的假数据，你可以将上面的SQL代码复制下来，去问ai，让ai给你造一点数据
这里AI给我生成了20条假数据,文章作者分别对应user_id 1 到 5，请注意你有没有5个用户在用户表里，否则会出错。
后端部分
Article 实体类
创建一个Article实体类
ArticleMapper 接口
创建ArticleMapper接口
服务层
ArticleService接口
在service包下创建一个ArticleService接口，代码如下：
目前我们只有一个需求，实现分页查询，那就先设计一个分页查询接口。
ArticleServiceImpl类
接下来实现具体方法
在Impl包下创建
ArticleServiceImpl(注意Impl开头是大写i，末尾是小写l)，代码如下：ArticleController类
与之对应的前端
打开你的VSCode
Article接口
在interface文件夹下创建一个
Article.ts 接口,与后端的对应。
对接Api
来到前端，增加get方法getArticleList
别忘记export方法
文章列表卡片
记得把这个组件添加到Home.vue里，像TheHeader.vue一样
保存文件，热更新后可以看到你的主页有了一系列文章卡片展示
接下来实现点击文章卡片就能跳转到文章的详情页功能。