【JavaScript——页面渲染】课程列表（蓝桥杯真题-2457）【合集】

目录😋

背景介绍

准备步骤

目标效果

要求规定

判分标准

通关代码✔️

代码解析📑

一、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"></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 函数重新渲染页面。