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

Rossy Yan

发布于 2025-04-12 18:28:15

31000

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

分页是前端页面中必不可少的一项功能，下面让我们一起来完成一个课程列表的分页吧。

准备步骤

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── 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 函数重新渲染页面。