使用Axios实现分页

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本项目中,你将学习如何为课程列表实现分页功能。分页是前端网页开发中的一项重要功能,本项目将指导你完成从JSON文件中获取数据、以分页格式显示数据以及处理上一页和下一页功能的过程。

👀 预览

分页功能演示

🎯 任务

在本项目中,你将学习:

  • 如何使用Axios库从JSON文件中获取数据
  • 如何以分页格式显示课程数据,每页显示5条数据
  • 如何实现上一页和下一页按钮的功能
  • 如何在适当的时候(第一页和最后一页)禁用上一页和下一页按钮
  • 如何更新分页显示以显示当前页码和总页数

🏆 成果

完成本项目后,你将能够:

  • 使用Axios从JSON文件中获取数据
  • 为课程列表实现分页功能
  • 处理用户与上一页和下一页按钮的交互
  • 根据当前页面有条件地禁用按钮
  • 更新用户界面以显示当前页面和总页数

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/NetworkingGroup -.-> javascript/http_req("`HTTP Requests`") javascript/NetworkingGroup -.-> javascript/json("`JSON`") subgraph Lab Skills javascript/functions -.-> lab-299861{{"`使用Axios实现分页`"}} javascript/async_prog -.-> lab-299861{{"`使用Axios实现分页`"}} javascript/dom_select -.-> lab-299861{{"`使用Axios实现分页`"}} javascript/dom_manip -.-> lab-299861{{"`使用Axios实现分页`"}} javascript/event_handle -.-> lab-299861{{"`使用Axios实现分页`"}} javascript/http_req -.-> lab-299861{{"`使用Axios实现分页`"}} javascript/json -.-> lab-299861{{"`使用Axios实现分页`"}} end

设置项目结构

在这一步中,你将设置项目文件和结构。按照以下步骤完成此步骤:

打开项目文件夹。目录结构如下:

├── 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 变量中。

  1. 找到 js/index.js 文件,并找到 // TODO: Requesting data from the carlist.json file 注释。
  2. 使用 axios.get() 方法从 ./js/carlist.json 文件中获取数据。
  3. 数据获取成功后,将其存储在 data 变量中。
  4. 通过将项目总数除以每页显示的项目数(5)来计算最大页数。将此值存储在 maxPage 变量中。
  5. 调用 showPagination() 函数,并将 maxPagepageNum(默认设置为1)作为参数传递,以显示当前页码和总页数。
  6. 调用 getPageData() 函数,并将 data 作为参数传递,以获取第一页的数据(项目1 - 5)。将其存储在 pageData 变量中。
  7. 调用 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);
});

实现上一页功能

在这一步中,你将学习如何实现上一页按钮的功能。

  1. 找到上一页按钮的点击事件处理程序(prev.onclick)。
  2. 在事件处理程序内部,首先从下一页按钮中移除 disabled 类(next.classList.remove("disabled"))。
  3. pageNum 变量减1,以切换到上一页。
  4. 如果 pageNum 小于或等于1,这意味着我们处于第一页,因此将 disabled 类添加到上一页按钮(this.classList.add("disabled")),并将 pageNum 设置为1。
  5. 调用 showPagination() 函数,并将 maxPagepageNum 作为参数传递,以更新分页显示。
  6. 调用 getPageData() 函数,并将 data 作为参数传递,以获取当前页面的数据。将其存储在 pageData 变量中。
  7. 调用 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);
};

实现下一页功能

在这一步中,你将学习如何实现下一页按钮的功能。

  1. 找到下一页按钮的点击事件处理程序(next.onclick)。
  2. 在事件处理程序内部,首先从前一页按钮中移除 disabled 类(prev.classList.remove("disabled"))。
  3. pageNum 变量加1,以切换到下一页。
  4. 如果 pageNum 大于或等于 maxPage,这意味着我们处于最后一页,因此将 disabled 类添加到下一页按钮(this.classList.add("disabled")),并将 pageNum 设置为 maxPage
  5. 调用 showPagination() 函数,并将 maxPagepageNum 作为参数传递,以更新分页显示。
  6. 调用 getPageData() 函数,并将 data 作为参数传递,以获取当前页面的数据。将其存储在 pageData 变量中。
  7. 调用 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中练习更多实验以提升技能。

您可能感兴趣的其他 JavaScript 教程