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

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

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

题目要求如下：

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

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

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

  let pageNum = 1; // 当前页码，默认页码1let 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; // 当前页码，默认页码1let 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      html+=`                                          list[i].name}list[i].price}list[i].description}                `    }    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：待补充代码};

  p然后再来实现最后一个要求/p p点击按钮进行跳转并且页码为第一页的时候禁用上一页的按钮，页码为第二页的时候禁用下一页的按钮/p p根据要求可以轻易的得出，当页数为第一页的时候，上一页的按钮就应该添加disabled的样式/p p页数为最后一页的时候就轮到下一页的按钮添加disabled的样式，我们只需要根据当前页码判断即可/p p请注意添加了类名之后，情况如果改变需要移除类名并且每点击一次按钮就需要再调用一次getData()方法不要遗忘/p p完整代码如下/p pre let pageNum = 1; // 当前页码，默认页码1let 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 html+=` list[i].name}list[i].price}list[i].description} ` } 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()};