南山做网站公司在哪里微信公众号如何开通小程序
目录😋
背景介绍
准备步骤
目标效果
要求规定
判分标准
通关代码✔️
代码解析📑
一、HTML 部分
二、JavaScript 部分
三、工作流程▶️
测试结果👍
背景介绍
分页是前端页面中必不可少的一项功能，下面让我们一起来完成一个课程列表的分页吧。
准备步骤
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── css │ └── bootstrap.css ├── effect.gif ├── 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是需要补充的 js 文件。effect.gif是最终效果图。注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
cd /home/project wget https://labfile.oss.aliyuncs.com/courses/9791/10.zip && unzip 10.zip && rm 10.zip请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来，效果如下：
注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。
目标效果
- 完成数据请求（数据来源
js/carlist.json）。在项目目录下已经提供了axios，考生可自行选择是否使用。- 完成数据分页显示，每页 5 条数据，默认当前页码为第一页（即
pageNum = 1），按照顺序第一页显示 1-5 条，第二页显示 6-10 条，依此类推。将每条数据显示到list-group元素中。使用已有代码中list-group，不要修改list-group元素的 DOM 结构。动态渲染时，list-group示例代码可删除。- 当页码为第一页时，上一页为禁用状态（
class=disabled），点击无任何变化。- 当页码为最后一页时，下一页为禁用状态（
class=disabled），点击无任何变化。- 在
id为pagination元素中正确显示当前页码和总页码（即最大页码）。当前页码变量使用pageNum，总页码变量使用maxPage。请勿修改当前页码和总页码的变量名称，以免造成判题无法通过。完成后的效果见文件夹下面的 gif 图，图片名称为
effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
要求规定
- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
- 请勿修改项目中提供的
id、class、函数名等名称，以免造成无法判题通过。
判分标准
- 本题完成目标 2 给 10 分，完成目标 3、4、5 各给 5 分。
通关代码✔️
let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数// TODO：待补充代码
let dataList =[]
let list = document.querySelector("#list")
let prev = document.getElementById("prev");
let next = document.getElementById("next");
//入口函数axios.get("./js/carlist.json").then(res=>{dataList = res.data;
render();})
//渲染函数
function render(){
let content = ''
//按钮调整
disableBtn();
maxPage=Math.ceil(dataList.length/5)
//修改当前页数
renderCurrentAndMax();
let beforeIndex = (pageNum-1)*5
let currentLength = (pageNum == maxPage? dataList.length - beforeIndex : 5)
for(i = beforeIndex;i<beforeIndex+currentLength;i++){content+=`<div class="list-group"><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">${dataList[i].name} uni-app</h5><small>${(dataList[i].price/100).toFixed(2) }元</small></div><p class="mb-1">${dataList[i].description}</p></a></div>`
}
list.innerHTML = content
}
function disableBtn(){if(pageNum == 1){prev.classList.add('disabled')}else{prev.classList.remove('disabled')}if(pageNum == maxPage){next.classList.add('disabled')}else{next.classList.remove('disabled')}
}
//在页面中渲染当前页数和总页数
function renderCurrentAndMax(){
let pagination = document.querySelector('#pagination')
pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`
}
// 点击上一页
prev.onclick = function () {// TODO：待补充代码if(pageNum == 1){return}pageNum --render()
};
// 点击下一页
next.onclick = function () {// TODO：待补充代码if(pageNum == maxPage){return}pageNum ++render()
};
代码解析📑
一、HTML 部分
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>课程列表</title><script src="./js/axios.js"></script><link rel="stylesheet" href="./css/bootstrap.css" /><style>* {outline: none;}h1 {text-align: center;}</style></head><body><h1>课程列表</h1><div id="list"><!-- list-group 起始位置 list-group为示例代码，动态渲染时可删除--><!-- list-group 结束位置 --></div><div class="container"><div class="row"><div class="col-6"><nav aria-label="Page navigation"><ul class="pagination"><li id="prev" class="page-item disabled"><a class="page-link" href="javascript:void(0)">上一页</a></li><li id="next" class="page-item"><a class="page-link" href="javascript:void(0)">下一页</a></li></ul></nav></div><div class="col"><div id="pagination"></div></div></div></div></body><script src="./js/index.js"></script> </html>
头部信息（
<head>）：
- 字符编码设置为
UTF-8，确保页面能正确显示各种字符。- 借助
meta标签保证页面在不同浏览器和设备上能正确显示。- 页面标题为 “课程列表”。
- 引入
axios.js库，用于发起 HTTP 请求。- 引入
bootstrap.css样式文件，为页面提供样式支持。- 自定义样式，去除所有元素的轮廓线，让标题居中显示。
主体内容（
<body>）：
- 显示一个标题 “课程列表”。
- 有一个
id为list的div元素，用于动态渲染课程列表。- 有一个分页导航栏，包含 “上一页” 和 “下一页” 按钮，还有一个
id为pagination的div元素，用于显示当前页码和总页数。- 引入
index.js脚本文件，实现页面的交互逻辑。
二、JavaScript 部分
let pageNum = 1; // 当前页码，默认页码1 let maxPage; // 最大页数// TODO：待补充代码 let dataList =[] let list = document.querySelector("#list") let prev = document.getElementById("prev"); let next = document.getElementById("next"); //入口函数axios.get("./js/carlist.json").then(res=>{dataList = res.data; render();}) //渲染函数 function render(){ let content = '' //按钮调整 disableBtn(); maxPage=Math.ceil(dataList.length/5) //修改当前页数 renderCurrentAndMax(); let beforeIndex = (pageNum-1)*5 let currentLength = (pageNum == maxPage? dataList.length - beforeIndex : 5) for(i = beforeIndex;i<beforeIndex+currentLength;i++){content+=`<div class="list-group"><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">${dataList[i].name} uni-app</h5><small>${(dataList[i].price/100).toFixed(2) }元</small></div><p class="mb-1">${dataList[i].description}</p></a></div>` } list.innerHTML = content } function disableBtn(){if(pageNum == 1){prev.classList.add('disabled')}else{prev.classList.remove('disabled')}if(pageNum == maxPage){next.classList.add('disabled')}else{next.classList.remove('disabled')} } //在页面中渲染当前页数和总页数 function renderCurrentAndMax(){ let pagination = document.querySelector('#pagination') pagination.innerHTML = `共${maxPage}页，当前${pageNum}页` } // 点击上一页 prev.onclick = function () {// TODO：待补充代码if(pageNum == 1){return}pageNum --render() }; // 点击下一页 next.onclick = function () {// TODO：待补充代码if(pageNum == maxPage){return}pageNum ++render() };
变量定义：
pageNum：表示当前页码，默认值为 1。maxPage：表示最大页数，初始值未定义。dataList：用于存储从carlist.json文件中获取的课程数据。list：获取id为list的div元素，用于显示课程列表。prev和next：分别获取 “上一页” 和 “下一页” 按钮元素。入口函数：
- 利用
axios.get方法从carlist.json文件中获取课程数据。- 若请求成功，将数据存储在
dataList中，并调用render函数进行渲染。渲染函数（
render）：
- 初始化一个空字符串
content，用于存储课程列表的 HTML 内容。- 调用
disableBtn函数，根据当前页码启用或禁用 “上一页” 和 “下一页” 按钮。- 计算最大页数
maxPage，每页显示 5 条数据。- 调用
renderCurrentAndMax函数，在页面上显示当前页码和总页数。- 计算当前页的起始索引
beforeIndex和当前页的课程数量currentLength。- 遍历当前页的课程数据，将每条课程信息拼接成 HTML 字符串，并添加到
content中。- 将
content赋值给list元素的innerHTML属性，完成课程列表的渲染。按钮状态调整函数（
disableBtn）：
- 若当前页码为 1，则禁用 “上一页” 按钮；反之，则启用。
- 若当前页码为最大页数，则禁用 “下一页” 按钮；反之，则启用。
页码显示函数（
renderCurrentAndMax）：
- 获取
id为pagination的div元素。- 将当前页码和总页数的信息拼接成字符串，并赋值给该元素的
innerHTML属性。按钮点击事件处理函数：
- 上一页按钮（
prev.onclick）：若当前页码为 1，则不做处理；否则，将当前页码减 1，并调用render函数重新渲染页面。- 下一页按钮（
next.onclick）：若当前页码为最大页数，则不做处理；否则，将当前页码加 1，并调用render函数重新渲染页面。
三、工作流程▶️
- 页面加载：浏览器加载 HTML 文件，同时引入
axios.js、bootstrap.css和index.js文件。- 数据获取：
index.js中的入口函数通过axios.get方法从carlist.json文件中获取课程数据。- 数据渲染：若数据获取成功，将数据存储在
dataList中，并调用render函数进行渲染。render函数会根据当前页码和每页显示的数量，从dataList中提取相应的课程数据，拼接成 HTML 字符串，并插入到list元素中。- 按钮状态调整：
render函数会调用disableBtn函数，根据当前页码启用或禁用 “上一页” 和 “下一页” 按钮。- 页码显示：
render函数会调用renderCurrentAndMax函数，在页面上显示当前页码和总页数。- 用户交互：用户点击 “上一页” 或 “下一页” 按钮时，会触发相应的点击事件处理函数。这些函数会更新当前页码，并调用
render函数重新渲染页面。
测试结果👍
