前言,此为结尾篇了,觉得不错请帮我点赞、收藏、关注

此篇干货满满

第8题:购物车

介绍:

网上购物已成为现代人生活中不可或缺的一部分,那么人们最常用到的购物车功能又是如何实现的呢?

本题需要在以提高的基础项目中,使用Vue2.x的知识,解决购物车商品管理过程中遇到的问题。

目标:

  1. 修改adToCart方法,实现将商品加入购物车的功能。即:

​ (1)点击“加入购物车”按钮后,如果购物车中不存在改商品,则将改商品添加到购物车末尾,并初始化数量为1;

​ (2)如果购物车已存在改商品,则只在原数量上+1即可。

  1. 完善removeGoods方法,实现移出购物车商品功能。即:

    (1)点击购物车商品后对应的减号(“-”)按钮,将其数量在原数量上+1;

    (2)如果减后数量为0,则将该商品从购物车中删除。

几个解题关键点:

  1. 检查是否有该商品了。使用Array.some(function(el){return boolean}),返回值为布尔类型。确认商品是否存在

  2. 查找商品在购物车的索引。用forEach()逐个查找,找到的化返回商品在购物车的id

  3. 数量为0的删删除。数组函数Array.splice(索引位置,删除元素个数)

关键代码:

 new Vue({
     el: '#app',
     data: {
         cartList:[],
         goodsList:[]
     },
     mounted() {
         this.goodsList = GoodsArr;
     },
     methods:{
         addToCart(goods){
             // TODO:修改当前函数,实现购物车加入商品需求
             let flag = this.cartList.some(el=>{
                 return el.id == goods.id
             })
             if (flag) {
                 let gindex = 0;
                 this.cartList.forEach((el,index) => {
                     if(el.id == goods.id){
                         gindex =  index
                     }
                 });
                 this.cartList[gindex].num++
                 return
             }else{
                 goods.num = 1;
                 this.cartList.push(goods);
                 this.cartList = JSON.parse(JSON.stringify(this.cartList));
                 return 
             }


         },
         removeGoods(goods){
             // TODO:补全代码实现需求
             let gindex = 0; 
             this.cartList.forEach((el,index) => {
                 if(el.id == goods.id){
                     gindex =  index
                 }
             });
             if(this.cartList[gindex].num == 1){
                 this.cartList.splice(gindex,1)
             }
             else{
                 this.cartList[gindex].num--
             }

         }
     }
 });

效果:
图片来自蓝桥web第8题素材

第9题:寻找狼人

介绍:

“狼人杀”是一款多人参与e策略类桌面游戏。本题我们一起完成一个简易的狼人杀游戏,让我们找到其中的狼人。

解题思路:

这里要写的代码比较少,如果了解js原型的话这道题其实也简单。要实现一个Array.filter()方法。

Array.prototype指代的是数组的原型,即所有的数组。

Array.prototype.myarray是给原型添加一个myarray属性,添加后所有的数组就都会继承到myarray这个属性。这是es5的面向对象语法了。

而下面这段代码就是将一个函数赋值给myarray,同时这个函数参数是一个返回值为布尔类型的闭包函数

this可以获取到原型,可以获取到元素本身。

我们为vue中添加属性是否也是用形如:Vue.prototype.属性 = 值的形式。在vue中调用的时候是不是用this.属性。如果直接输出this就是Vue实例了

关键代码:js/myarray.js

// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  // TODO:待补充代码
  let result = []
  this.forEach(el=>{
    if(cb(el)){
      result.push(el)
    }
  })
  return result
};

效果:
图片来自蓝桥web第9题素材

第10题:课程列表

介绍:

分页是前端页面中鼻部可少的一项功能,下面让我们一起完成一个课程列表的分页吧。

目标:

请添加图片描述

解题思路:

题目只给了数据文件、axois、没有任何框架因此需要使用原生js来完成这个功能。

**关键点:**分页。使用Array.slice(开始下标,结束结尾)来实现

关键代码:

js/index.js

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

// TODO:待补充代码
let all = []
let list = document.getElementById("list")
let pageSize=5
let pagination = document.getElementById("pagination")

function render(data){
  let html = '' 
  data.forEach(item=>{
    html += ` <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">${item.name}</h5>
        <small>${item.price ? item.price.toFixed(2) : ''}</small>
      </div>
      <p class="mb-1">
        ${item.description}
      </p>
    </a>
  </div>`;
  })
  list.innerHTML = html;
  // 分页
  pageNum <= 1 ? prev.classList.add('disabled') : prev.classList.remove('disabled')
  pageNum >= maxPage ? next.classList.add('disabled'): next.classList.remove('disabled')
    
  pagination.innerHTML = `${maxPage}页,当前${pageNum}`
}

window.onload = function(){
  axios.get('./js/carlist.json').then(res=>{
      all = res.data
      maxPage = Math.ceil(all.length/pageSize)
      let start  = (pageNum -1) * pageSize
      let end = start + pageSize
      render(all.slice(start,end))
  })
  
}
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO:待补充代码
  if(pageNum <= 1){
    return 
  }
  pageNum--
  let start  = (pageNum -1) * pageSize
  let end = start + pageSize
  render(all.slice(start,end))
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO:待补充代码
  if(pageNum >= maxPage){
    return 
  }
  pageNum++
  let start  = (pageNum -1) * pageSize
  let end = start + pageSize
  render(all.slice(start,end))
};

效果:
图片来自蓝桥web第10题素材

end