习题链接
课程列表
将获取的数据,展现到页面中,一次显示5条数据
有两个按钮,选择上一页和下一页
点击下一页,就显示下五条数据,如果后面没有数据了,要改变当前按钮的样式
点击上一页,就显示上五条数据,如果前面没有数据了,要改变当前按钮的样式
关键点
- axios请求数据的
- axios中最常用的就是get与psot,axios是基于promise的异步操作,所以是可以是使用then,catch方法来处理结果的,在本题里面就是一个简单的请求
- axios.get(地址)
.then(res=>{当请求成功,返回的结果在此处操作})
.catch(err=>{执行失败的操作})
.finally(()=>{成功或失败都将执行的操作}) - 一点点的扩展知识(不看并不影响本次解题)
- 可以通过axios.interceptors对象来添加请求拦截器和响应拦截器
- axios是支持并发操作,可以使用axios.all,axios.spread方法来实现并发操作
- 操作数组的slice方法
- 提取数组的方法有slice(start,end) 从start开始截取直到end,end节点不会被截取。并不会修改原数组
- 使用filter也可以截取数组,并不会修改原数组
代码实现 && 完整的代码
- 获取数据
let listdata = []; axios.get("js/carlist.json").then((res) => { listdata = res.data; // 将数据保存在这里 });
- 写一个渲染函数,只需要传入一个输入,就自动将数据渲染到页面中去
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 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条数据 });
- 两个点击按钮的实现
// 点击上一页 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)); };
- 完整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)); };