首页 > 其他分享 >课程列表

课程列表

时间:2023-06-02 09:36:57浏览次数:42  
标签:axios listdata res 列表 maxPage 课程 let data

习题链接

课程列表

课程列表

将获取的数据,展现到页面中,一次显示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));
    }; 
    

标签:axios,listdata,res,列表,maxPage,课程,let,data
From: https://www.cnblogs.com/DnmyCourage/p/17450865.html

相关文章

  • 设备通过GB28181接入EasyCVR,设备列表多出一层目录是什么原因?
    EasyCVR平台基于云边端协同架构,可支持多协议、多类型的海量设备接入与分发,平台既具备传统安防视频监控的能力,也能接入AI智能分析的能力,在线下均有大量应用。EasyCVR平台可提供的视频能力包括:视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、云台控制、语音......
  • 算法之二分法、三元表达式、列表生成式、字典生成式(了解)、匿名函数、常见的内置函数
    算法之二分法二分概念二分算法,又称折半查找,即在一个单调有序的集合中查找一个解。每次分为左右两部分,判断解在哪个部分中并调整上下界,直到找到目标元素,每次二分后都将舍弃一半的查找空间。定义and实现:算法就是解决问题的高效办法常见的算法:二分法算法还可以锻炼我们的......
  • 软件工程课程总结
    本学期的软件课程中,我学习了地铁站查询系统、分页查询以及团队合作和安卓端的开发,针对以上内容,我写出课程总结。当我们在构建一个完整的地铁站查询系统时,我们需要为用户构建一个友好、高效、易用、多样化的界面。更进一步, 我们可以设计并开发一个android应用程序,为用户提供更加......
  • 软件工程课程总结
    在本学期中,我参加了一门软件工程的课程,该课程包含了软件工程的基本概念和实践技术。在这篇总结中,我会详细描述我在这门课程中学到的内容,以及对本课程的反思和建议。一、学习成果 1.掌握了软件工程的基本概念和流程 在本课程中,我掌握了软件工程的基本概念,例如软件需求分析、......
  • 吴恩达教授AI课程:LangChain、扩散模型,用ChatGPT API搭建系统
    家人们,吴恩达教授的AI课程时隔一个月终于又更新了!这次一口气直接推出了三门课,主题包括LangChain、扩散模型,以及用ChatGPTAPI搭建系统。依旧是限时免费,除了扩散模型需要一定知识储备之外,另外两门课新手也能听。有网友为了看完这些课程,直接连觉都不睡了。课程内容这三门课的......
  • 软件工程课程总结
    软件工程课程总结 软件工程是一门涉及软件开发过程、设计、实现、测试和维护的学科。我在这门课程中学到了很多关于软件工程的知识和实践技术,下面是我的课程总结。首先,在课程中我们了解了软件工程的发展历程、定义和原则。软件工程的发展从单机应用到分布式网络应用,其......
  • 快速操作Linux终端命令行的快捷键列表
    快速操作Linux终端命令行的快捷键列表在shell命令终端中,Ctrl+n相当于方向向下的方向键,Ctrl+p相当于方向向上的方向键。在命令终端中通过它们或者方向键可以实现对历史命令的快速查找。这也是快速输入命令的技巧。在命令终端中可以通过Ctrl+r实现快速检索使用过的历史命令。Ctrl+r......
  • 软件工程-课程总结
    软件工程课程总结一、回顾课程计划(第一周的计划),进行总结开学初和现在自己的对比对于javaweb的掌握更加熟练了,能够更加快速的开发一个简易的mis系统写的代码更加优质了,有良好的扩展性和健壮性。熟悉与多人合作的流程,能较好的融入团队,进行团队合作总结这学期所学学......
  • 2023.6.1-软件工程课程总结
    回顾我的课程计划:我在开学第一周提出的计划是,达到王建民老师的最基本要求,软件工程这门课取得及格的好成绩。对于这个计划,我觉得我应该大致完成了王建民老师的最基本要求,计划的前一部分应该是做到了。关于后面一部分取得及格的好成绩,我觉得我应该也能够完成,软件工程这门课应该可以......
  • 【python基础】复杂数据类型-列表类型(增删改查)
    1.初识列表(list)列表由一系列按特定顺序排列的数据元素组成。可以将任何类型数据元素加入列表中,其中的数据元素之间没有任何关系。鉴于列表通常包含多个数据元素,给列表指定一个表示复数的名称是个不错的选择。在python中,用方括号[]来表示列表,并用逗号来分隔其中的数据元素。编写......