介绍
在本项目中，你将学习如何为课程列表实现分页功能。分页是前端网页开发中的一项重要功能，本项目将指导你完成从 JSON 文件中获取数据、以分页格式显示数据以及处理上一页和下一页功能的过程。
👀 预览
🎯 任务
在本项目中，你将学习：
- 如何使用 Axios 库从 JSON 文件中获取数据
- 如何以分页格式显示课程数据，每页显示 5 条数据
- 如何实现上一页和下一页按钮的功能
- 如何在适当的时候（第一页和最后一页）禁用上一页和下一页按钮
- 如何更新分页显示以显示当前页码和总页数
🏆 成果
完成本项目后，你将能够：
- 使用 Axios 从 JSON 文件中获取数据
- 为课程列表实现分页功能
- 处理用户与上一页和下一页按钮的交互
- 根据当前页面有条件地禁用按钮
- 更新用户界面以显示当前页面和总页数
设置项目结构
在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：
打开项目文件夹。目录结构如下：
├── css
│ └── bootstrap.css
├── index.html
└── js
├── axios.js
├── carlist.json
└── index.js
在此结构中：
css/bootstrap.css是项目中使用的 Bootstrap 样式文件。index.html是主网页。js/carlist.json是请求所需的数据文件。js/axios.js是用于请求的 axios 文件。js/index.js是需要完成的 JavaScript 文件。
点击 WebIDE 右下角的 Go Live 按钮来运行项目。
接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。效果如下：
从 JSON 文件中获取数据
在这一步中，你将学习如何从 carlist.json 文件中获取数据并将其存储在 data 变量中。
- 找到
js/index.js文件，并找到// TODO: Requesting data from the carlist.json file注释。 - 使用
axios.get()方法从./js/carlist.json文件中获取数据。 - 数据获取成功后，将其存储在
data变量中。 - 通过将项目总数除以每页显示的项目数（5）来计算最大页数。将此值存储在
maxPage变量中。 - 调用
showPagination()函数，并将maxPage和pageNum（默认设置为 1）作为参数传递，以显示当前页码和总页数。 - 调用
getPageData()函数，并将data作为参数传递，以获取第一页的数据（项目 1 - 5）。将其存储在pageData变量中。 - 调用
renderHtml()函数，并将pageData作为参数传递，以渲染第一页的 HTML。
你的代码应该如下所示：
let data;
let pageData;
// TODO: Requesting data from the carlist.json file
axios.get("./js/carlist.json").then((res) => {
data = res.data;
maxPage = Math.ceil(data.length / 5);
showPagination(maxPage, pageNum);
pageData = getPageData(data);
renderHtml(pageData);
});
实现上一页功能
在这一步中，你将学习如何实现上一页按钮的功能。
- 找到上一页按钮的点击事件处理程序（
prev.onclick）。 - 在事件处理程序内部，首先从下一页按钮中移除
disabled类（next.classList.remove("disabled")）。 - 将
pageNum变量减 1，以切换到上一页。 - 如果
pageNum小于或等于 1，这意味着我们处于第一页，因此将disabled类添加到上一页按钮（this.classList.add("disabled")），并将pageNum设置为 1。 - 调用
showPagination()函数，并将maxPage和pageNum作为参数传递，以更新分页显示。 - 调用
getPageData()函数，并将data作为参数传递，以获取当前页面的数据。将其存储在pageData变量中。 - 调用
renderHtml()函数，并将pageData作为参数传递，以渲染当前页面的 HTML。
你的代码应该如下所示：
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
// TODO
next.classList.remove("disabled");
pageNum--;
if (pageNum <= 1) {
this.classList.add("disabled");
pageNum = 1;
}
showPagination(maxPage, pageNum);
pageData = getPageData(data);
renderHtml(pageData);
};
实现下一页功能
在这一步中，你将学习如何实现下一页按钮的功能。
- 找到下一页按钮的点击事件处理程序（
next.onclick）。 - 在事件处理程序内部，首先从前一页按钮中移除
disabled类（prev.classList.remove("disabled")）。 - 将
pageNum变量加 1，以切换到下一页。 - 如果
pageNum大于或等于maxPage，这意味着我们处于最后一页，因此将disabled类添加到下一页按钮（this.classList.add("disabled")），并将pageNum设置为maxPage。 - 调用
showPagination()函数，并将maxPage和pageNum作为参数传递，以更新分页显示。 - 调用
getPageData()函数，并将data作为参数传递，以获取当前页面的数据。将其存储在pageData变量中。 - 调用
renderHtml()函数，并将pageData作为参数传递，以渲染当前页面的 HTML。
你的代码应该如下所示：
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
// TODO
prev.classList.remove("disabled");
pageNum++;
if (pageNum >= maxPage) {
this.classList.add("disabled");
pageNum = maxPage;
}
showPagination(maxPage, pageNum);
pageData = getPageData(data);
renderHtml(pageData);
};
现在，你已经完成了课程列表分页功能的实现。你可以通过点击上一页和下一页按钮来测试功能，以查看课程数据是否正确显示。
所有功能完成后的动图如下：
总结
恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升技能。
