课程列表

习题链接

课程列表

任务

将获取的数据，展现到页面中，一次显示5条数据
有两个按钮，选择上一页和下一页
点击下一页，就显示下五条数据，如果后面没有数据了，要改变当前按钮的样式
点击上一页，就显示上五条数据，如果前面没有数据了，要改变当前按钮的样式

关键点

1. axios请求数据的
   1. axios中最常用的就是get与psot，axios是基于promise的异步操作，所以是可以是使用then,catch方法来处理结果的，在本题里面就是一个简单的请求
   2. axios.get(地址)
      .then(res=>{当请求成功，返回的结果在此处操作})
      .catch(err=>{执行失败的操作})
      .finally(()=>{成功或失败都将执行的操作})
   3. 一点点的扩展知识（不看并不影响本次解题）
      1. 可以通过axios.interceptors对象来添加请求拦截器和响应拦截器
      2. axios是支持并发操作，可以使用axios.all，axios.spread方法来实现并发操作
2. 操作数组的slice方法
   1. 提取数组的方法有slice(start,end) 从start开始截取直到end，end节点不会被截取。并不会修改原数组
   2. 使用filter也可以截取数组，并不会修改原数组

代码实现 && 完整的代码

1. 获取数据

   let listdata = [];
   axios.get("js/carlist.json").then((res) => {
       listdata = res.data; // 将数据保存在这里
   });
   

2. 写一个渲染函数，只需要传入一个输入，就自动将数据渲染到页面中去

   function renderStr(data) { 
       let template = "";
       for (let i = 0; i < data.length; i++) {
           const element = data[i];
           template += `
           <a href="#" class="list-group-item list-group-item-action">
               <div class="d-flex w-100 justify-content-between">
               <h5 class="mb-1">${element.name}</h5>
               <small>${element.price ? element.price : 0}元</small>
               </div>
               <p class="mb-1">
               ${element.description}  
               </p>
           </a>`;
       }
       document.getElementsByClassName("list-group")[0].innerHTML = template;
   }
   

3. 将获取数据和渲染函数结合使用一下

   let listdata = [];
   axios.get("js/carlist.json").then((res) => {
       listdata = res.data;
       maxPage = (res.data.length / 5) | 0; // 获取最大页面，使用|0是向下取整的 所以可能导致还有的页面未算入
       maxPage * 5 - (res.data.length / 5) != 0 ? maxPage++ : ''; // 对前面未算入的页面进行补偿
       renderStr(listdata.slice(0, 5));     // 先传入当前数组的前5条数据
   });
   

4. 两个点击按钮的实现

   // 点击上一页
   let prev = document.getElementById("prev");
   prev.onclick = function () {
   // TODO：待补充代码
   if(--pageNum <= 1){  // 当前页到达了第一页的时候，意味着前面没有数据了就应该更改样式
       prev.className = "page-item disabled"; 
       pageNum = 1;     // 因为前面使用了前置++所以这里需要将当前页重置到1
   }
   next.className = "page-item"; // 点击了上一页，所以后面肯定是有数据了
   renderStr(listdata.slice((pageNum - 1) * 5, (pageNum - 1) * 5 + 5));
   };
   // 点击下一页  此处同理
   let next = document.getElementById("next");
   next.onclick = function () {
   // TODO：待补充代码
   if(++pageNum >= maxPage){ 
       next.className = "page-item disabled";
       pageNum = maxPage; 
   } 
   prev.className = "page-item";
   renderStr(listdata.slice((pageNum - 1) * 5, (pageNum - 1) * 5 + 5));
   }; 
   

5. 完整code

   let pageNum = 1; // 当前页码，默认页码1
   let maxPage; // 最大页数
   
   // TODO：待补充代码
   let listdata = [];
   axios.get("js/carlist.json").then((res) => {
   listdata = res.data;
   maxPage = (res.data.length / 5) | 0;
   maxPage * 5 - (res.data.length / 5) != 0 ? maxPage++ : '';
   renderStr(listdata.slice(0, 5)); 
   });
   
   function renderStr(data) { 
   let template = "";
   for (let i = 0; i < data.length; i++) {
       const element = data[i];
       template += `
       <a href="#" class="list-group-item list-group-item-action">
           <div class="d-flex w-100 justify-content-between">
           <h5 class="mb-1">${element.name}</h5>
           <small>${element.price ? element.price : 0}元</small>
           </div>
           <p class="mb-1">
           ${element.description}  
           </p>
       </a>`;
   }
   document.getElementsByClassName("list-group")[0].innerHTML = template;
   }
   
   // 点击上一页
   let prev = document.getElementById("prev");
   prev.onclick = function () {
   // TODO：待补充代码
   if(--pageNum <= 1){
       prev.className = "page-item disabled"; 
       pageNum = 1; 
   }
   next.className = "page-item";
   renderStr(listdata.slice((pageNum - 1) * 5, (pageNum - 1) * 5 + 5));
   };
   // 点击下一页
   let next = document.getElementById("next");
   next.onclick = function () {
   // TODO：待补充代码
   if(++pageNum >= maxPage){ 
       next.className = "page-item disabled";
       pageNum = maxPage; 
   } 
   prev.className = "page-item";
   renderStr(listdata.slice((pageNum - 1) * 5, (pageNum - 1) * 5 + 5));
   };