真题练习
购物车
web真题(介绍)
网上购物已经成为现代人生活中不可或缺的一部分，那么人们最常用到的购物车功能又是如何实现的呢？
本题需要在已提供的基础项目中，使用 Vue 2.x 的知识，解决购物车商品管理过程中遇到的问题。
准备
开始答题前，需要先打开本题的项目文件夹，目录结构如下：
├── base.gif
├── css
│ └── index.css
├── effect.gif
├── images
│ ├── 1.png
│ └── 2.png
├── index.html
└── js
├── goods.js
└── vue.js
其中：
base.gif 是初始效果图。
effect.gif 是最终实现的效果图。
js/goods.js 是数据文件。
js/vue.js 是 Vue 2.x 文件。
css/index.css 是样式文件。
images 是图片文件夹。
index.html 是页面布局及逻辑。
当前出现的问题是：
当前出现的问题是：
在“商品列表”中点击 N 次“加入购物车”按钮，会在购物车列表中出现 N 个该商品，且初始数量为 1。
在“购物车”中点击商品数据后的加号（“+”）按钮，会在购物车列表中重复出现该商品，且初始数量为 1。
在“购物车”中点击商品数据后的减号（“-”）按钮，并未将商品从购物车中移出。
规定
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
请勿修改项目中提供的 id、class、函数名等名称，以免造成无法判题通过。
请勿修改 js/goods.js 文件中提供的数据。
本题目用到的函数splice,及forEach方法
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。
下面展示一些splice 内联代码片。
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]
splice语法参数格式
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)
//start:指定修改的开始位置（从 0 计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从 -1 计数，这意味着 -n 是倒数第 n 个元素并且等价于 array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第 0 位。
//deleteCount(可选参数):整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
//item1,item2,itemN要添加进数组的元素，从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
splice 简单应用
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");
// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素：[], 没有元素被删除
具体用法:splice函数用法详解: splice函数
forEach() 方法对数组的每个元素执行一次给定的函数。
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"
具体参数用法:
// 箭头函数
forEach((element) => { /* … */ })//element是每次遍历的结果
forEach((element, index) => { /* … */ })//index为遍历的索引，方便记录
forEach((element, index, array) => { /* … */ })//array是操作的数组本身
// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)
// 内联回调函数
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)
forEach() 方法要求使用同步函数——它不会等待 promise 执行完成。当你使用 promise（或者 async 函数）作为 forEach 的回调函数时，请确保你知道自己在做什么。
const ratings = [5, 4, 5];
let sum = 0;
const sumFunction = async (a, b) => a + b;
ratings.forEach(async (rating) => {
sum = await sumFunction(sum, rating);
});
console.log(sum);
// 期望的输出：14
// 实际的输出：0
forEach用法详解: forEach
好了，了解了以上的方法基础，我们本题也可以轻松做出来了，先来看看base.gif图吧
base.GIF: 
实现图片:
判分标准
本题完全实现题目目标得满分，否则得 0 分。
题解
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>购物车</title>
<script src="./js/goods.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<link href="./css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app">
<!-- 商品列表 -->
<h3>商品列表</h3>
<ul id="goodsList">
<template v-for="goods in goodsList" >
<li class="goods-item" :key="goods.id">
<div><img :src="goods.imgUrl"/> </div>
<div>{{goods.name}}</div>
<div>¥ {{goods.price}} </div>
<button @click="addToCart(goods)">加入购物车</button>
</li>
</template>
</ul>
<!-- 购物车 -->
<template v-if="cartList.length>0">
<h3>购物车</h3>
<ul id="cartList">
<template v-for="goods in cartList">
<li class="goods-item" :key="goods.id">
<div><img :src="goods.imgUrl"/> </div>
<div>{{goods.name}}</div>
<div>¥ {{goods.price}} </div>
<div class="item-control">
<button @click="removeGoods(goods)">-</button>
<h4>{{goods.num}}</h4>
<button @click="addToCart(goods)">+</button>
</div>
</li>
</template>
</ul>
</template>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
cartList:[],
goodsList:[]
},
mounted() {
this.goodsList = GoodsArr;
},
methods:{
addToCart(goods){
// TODO：修改当前函数，实现购物车加入商品需求
// 定义一个变量用来表示购物车内容里是否有商品，默认赋值为false，
let flag=false
// 遍历加入页面的商品对象信息
this.cartList.forEach(res=>{
// 判断是否传进来的商品与商品栏的信息是否一样
if(res.id==goods.id){
// 如果一样就是执行，添加成功 flag自动赋值为true
flag=true
// 点击++实现自增
goods.num++
}
})
// 判断购物车里面是否有商品，若没有就在购物车后面加入点击添加的商品信息
if(!flag){
goods.num = 1;
this.cartList.push(goods);
}
this.cartList = JSON.parse(JSON.stringify(this.cartList));
},
removeGoods(goods){
// TODO：补全代码实现需求
// 遍历加入页面的商品对象信息，并且传入index索引
this.cartList.forEach((res,index)=>{
// 判断商品信息与购物车里的信息是否一致
if(res.id==goods.id){
// --做自减操作
goods.num--
// 再次判断是否自减<=0，
if(goods.num<=0){
// 若小于0那么就将此购物车内的商品信息数据删除，使用的是splice函数
this.cartList.splice(index,1)
}
}
})
}
}
});
</script>
1275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
