蓝桥杯前端Web赛道-课程列表

蓝桥杯前端Web赛道-课程列表

题目链接：0课程列表 - 蓝桥云课 (lanqiao.cn)

题目要求如下：

分析题目我们发现其实就是需要我们手写一个分页的功能，根据题目的要求，分析如下

• 需要通过axios获取数据
• 每页显示5条数据，默认当前页码是第一页
• 要在页面上渲染出总页数和当前是第几页
• 页码为第一页的时候禁用上一页的按钮，页码为第二页的时候禁用下一页的按钮

现在开始一步一步的完成上面的需求，我们先使用axios来获取数据

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数

// TODO：待补充代码
const getData = ()=>{
  axios.get('./js/carlist.json').then((res)=>{
    console.log(res.data);
  })
}
getData()
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO：待补充代码
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO：待补充代码
};

通过打印来验证是否获得数据

console.log(res.data);

确认数据被获取到之后，再把数据赋到另外一个变量去。

第二步的思路如下：当点击第一页的时候，我们就只渲染第一页应该出现的数据量，点击第二页的时候再出现第二页应该出现的数据量，所以getData()这个函数在点击上一页和下一页的时候是会被反复调用的，我们只需要确定从第几个数据开始遍历list变量，并确定遍历结束的位置即可。

根据题目我们可以得出，一共有十六条数据，一页需要显示5条数据。

则第一页的数据对应的是数组下标0到第4条数据

第二页的数据对应的是数组下标5到第9条数据

第三页对应的是数组下标10到第14条数据

最后一页则显示数组下标第15条数据

从上面的规律可以得出循环可以轻易的出遍历开始的计算公式

let start = (pageNum-1)*5

那么结束的位置怎么确定呢，我们看最后一页可以轻松得出，当pageNum到达第四页的时候，就来到了最后一条数据，此时start的值为15，所以就容易得出

let end = pageNum==4?start+1:start+4

判断此时pageNum的值是否是第四页，是的话就在start的基础上+1，这样循环就只会遍历一次，从而将最后一条数据遍历出来，否则则在此基础上加上4

可以通过以上两个公式来验证刚刚我们得到的结论。

得出规律之后，我们就可以进行遍历以及渲染了

然后再通过计算得出总页数

    maxPage = Math.ceil(list.length/5) 

Math.ceil函数的作用会将计算出来的数字进行向上取整。

然后按照要求渲染到对应的地方

 document.getElementById('pagination').innerHTML = `共${maxPage}页，当前${pageNum}页`

代码如下

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数

// TODO：待补充代码
const getData = ()=>{

  axios.get('./js/carlist.json').then((res)=>{
    let list;
    list = res.data
    console.log(list);
    let start = (pageNum-1)*5
    let end = pageNum==4?start+1:start+4
    maxPage = Math.ceil(list.length/5) 


    let html=''
    for(let i=start;i<end;i++){
      html+=`
      <!-- list-group 起始位置  list-group为示例代码，动态渲染时可删除-->
      <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">${list[i].name}</h5>
            <small>${list[i].price}</small>
          </div>
          <p class="mb-1">
           ${list[i].description}
          </p>
        </a>
      </div>
      <!-- list-group 结束位置 -->
      `
    }
    document.getElementById('list').innerHTML = html;
    document.getElementById('pagination').innerHTML = `共${maxPage}页，当前${pageNum}页`
  })
 
}
getData()
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO：待补充代码
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO：待补充代码
};

然后再来实现最后一个要求

点击按钮进行跳转并且页码为第一页的时候禁用上一页的按钮，页码为第二页的时候禁用下一页的按钮

根据要求可以轻易的得出，当页数为第一页的时候，上一页的按钮就应该添加disabled的样式

页数为最后一页的时候就轮到下一页的按钮添加disabled的样式，我们只需要根据当前页码判断即可

请注意添加了类名之后，情况如果改变需要移除类名并且每点击一次按钮就需要再调用一次getData()方法不要遗忘

完整代码如下

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数

// TODO：待补充代码
const getData = ()=>{

  axios.get('./js/carlist.json').then((res)=>{
    let list;
    list = res.data
    let start = (pageNum-1)*5
    let end = pageNum==4?start+1:start+4
    maxPage = Math.ceil(list.length/5) 


    let html=''
    for(let i=start;i<end;i++){
      html+=`
      <!-- list-group 起始位置  list-group为示例代码，动态渲染时可删除-->
      <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">${list[i].name}</h5>
            <small>${list[i].price}</small>
          </div>
          <p class="mb-1">
           ${list[i].description}
          </p>
        </a>
      </div>
      <!-- list-group 结束位置 -->
      `
    }
    document.getElementById('list').innerHTML = html;
    document.getElementById('pagination').innerHTML = `共${maxPage}页，当前${pageNum}页`
  })
 
}
getData()
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO：待补充代码
  pageNum = pageNum-1
  if(pageNum===1){
   prev.classList.add('disabled')
   next.classList.remove('disabled')
  }else {
    prev.classList.remove('disabled')
  }
  getData()
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  pageNum = pageNum+1
  // TODO：待补充代码
  if(pageNum===4){
    next.classList.add('disabled')
   }else {
    next.classList.remove('disabled')
    prev.classList.remove('disabled')
   }
  getData()
};

至此完成目标