[ 蓝桥杯Web真题 ]-课程列表

目录

介绍

准备

目标

规定

思路

解法参考

---

介绍

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

准备

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

├── 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 插件启动项目，避免项目无法访问，影响做题。

目标

1.完成数据请求（数据来源 js/carlist.json）。在项目目录下已经提供了 axios，考生可自行选择是否使用。

2.完成数据分页显示，每页 5 条数据，默认当前页码为第一页（即 pageNum = 1 ），按照顺序第一页显示 1-5 条，第二页显示 6-10 条，依此类推。将每条数据显示到 list-group 元素中。使用已有代码中 list-group，不要修改 list-group 元素的 DOM 结构。动态渲染时，list-group 示例代码可删除。

3.当页码为第一页时，上一页为禁用状态（class=disabled），点击无任何变化。

4.当页码为最后一页时，下一页为禁用状态（class=disabled），点击无任何变化。

5.在 id 为 pagination 元素中正确显示当前页码和总页码（即最大页码）。当前页码变量使用 pageNum，总页码变量使用 maxPage。请勿修改当前页码和总页码的变量名称，以免造成判题无法通过。

规定

• 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
• 请勿修改项目中提供的 id、class、函数名等名称，以免造成无法判题通过。
• 自己先做一下吧：传送门

---

思路

这道题目是13届蓝桥杯Web赛道省赛的最后一题，我们还是可以看到13届明显会比14届简单一些。这道题目主要是考察axios发送数据请求，以及对数据的处理渲染和对DOM元素的操作等知识点。本道题目重点是如何实现每页获取5条数据的要求，这部分可以通过很多的方式来进行解决，可以直接观察当前页面与对应页面获取的数据的规律来进行得到数据，或者是使用，数组方法来对数据进行截取，然后根据不同页面去获取不同截取之后的数据。不管怎么样能够解决这道题目就可以啦，但是你如果追求更好更优的解决方法，你可以不断地去进行尝试。

解法参考

首先第一问，我们使用axios来进行数据的请求，直接使用get方法，传入路径之后调用回调函数来将得到的数据赋值给用于存储数据的data。

function getData(){
  let data
  // 请求数据
    axios.get('./js/carlist.json').then(function(res){
    data=res.data
    }
}

接着我们来对获取到的数据进行处理，先思考每一个页面，需要的数据是哪些。例如：第一页：起始值为0，最大值为4。 第二页：起始值为5，最大值为9。第三页：起始值为10，最大值为14。第四页：起始值为15，最大值为16。因此我们可以得出每一个所对应的数据：起始的数据为（当前页码-1）*5，除了最后一页，其他的页最后一条数据的值为：起始数据值+4。

因此，我们将数据插入到模板中，并插入到对应的元素中。

function getData(){
  let data
  axios.get('./js/carlist.json').then(function(res){
  data=res.data
  //ceil向上取整
  maxPage=Math.ceil(data.length/5)
  //声明模板
  let html='';
  let first=(pageNum-1)*5
  let last=pageNum!=4?first+4:first+1
  // 将data中的数据渲染到页面
  for(var i=first;i<last;i++){
    html +=`
  <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">${data[i].name}</h5>
            <small>￥${data[i].price/100}</small>
          </div>
          <p class="mb-1">
            ${data[i].description}
          </p>
        </a>
      </div>
    `
  document.getElementById("list").innerHTML=html
    } 
    document.getElementById("pagination").innerHTML=`${pageNum} / ${maxPage}`
  })
}
//首次渲染
getData()

接着我们处理后面的点击事件，当点击上一页时，我们将当前的页码数减1，并判断两个按钮的禁止或者使用状态，点击下一页时，处理的逻辑与上一页一样。这部分需要注意的是元素类名的添加使用：classList.add，类名的删除使用：classList.remove。

// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO：待补充代码
  pageNum--;
  getData()
  if(pageNum==1){
    prev.classList.add("disabled")
  }else if(pageNum==4){
    next.classList.add("disabled")
  }else{
    next.classList.remove("disabled")
    prev.classList.remove("disabled")
  }

};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO：待补充代码
  pageNum++;
  getData()
  if(pageNum==1){
    prev.classList.add("disabled")
  }else if(pageNum==4){
    next.classList.add("disabled")
  }else{
    next.classList.remove("disabled")
    prev.classList.remove("disabled")
  }
}

好了，本文就到这里结束啦~~