JavaWeb（10）——前端综合案例4（购物车示例）
一、实例需求 ⌛
购物车需要展示一个已加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作 等信息，还需要实时显示购买的总价。其中购买数量可以增加或减少，每类商品还可以从购物车中移除。最终实现的效果大致如图所示。
基础版
plus版
二、代码实现 ☕
先在 index.html 中引入 Vue.js 和相关资源，创建一个根元素来挂载 Vue 实例：
购物车示例
注意，这里将 vue.min.js 和 index.js 文件写在的最底部，如果写在里，Vue 实例 将无法创建，因为此时 DOM 还没有被解析完成，除非通过异步或在事件 DOMContentLoaded（IE 是 onreadystatechange）触发时再创建 Vue 实例，这有点像 jQuery 的$(document).ready()方法。
本例需要用到 Vue.js 的 computed、methods 等选项，在 index.js 中先初始化实例：
var app = new Vue({
el: '#app',
data: {
},
computed: {
},
methods: {
}
});我们需要的数据比较简单，只有一个列表，里面包含了商品名称、单价、购买数量。在实际 业务中，这个列表应该是通过 Ajax 从服务端动态获取的，这里只做示例，所以直接写入在 data 选 项内，另外每个商品还应该有一个全局唯一的 id。我们在 data 内写入列表 list：
data: {
list: [
{
id: 1,
name: 'iPhone 7',
price: 6188,
count: 1
},
{
id: 2,
name: 'iPad Pro',
price: 5888,
count: 1
},
{
id: 3,
name: 'MacBook Pro',
price: 21488,
count: 1
}
]
}数据构建好后，可以在 index.html 中展示列表了，毫无疑问，肯定会用到 v-for，不过在此之 前，我们先做一些小的优化。因为每个商品都是可以从购物车移除的，所以当列表为空时，在页面 中显示一个“购物车为空”的提示更为友好，我们可以通过判断数组 list 的长度来实现该功能：
购物车为空
里的代码分两部分，一部分是商品列表信息，我们用表格 table 来展现；另一部分就是带有千位分隔符的商品总价（每隔三位数加进一个逗号）。这部分代码如下：
商品名称
商品单价
购买数量
操作
总价：￥ {{ totalPrice }}
总价 totalPrice 是依赖于商品列表而动态变化的，所以我们用计算属性来实现，顺便将结果转换为带有“千位分隔符”的数字，在 index.js 的 computed 选项内写入：
computed: {
totalPrice: function () {
let total = 0;
for (let i = 0; i < this.list.length; i++) {
let item = this.list[i];
total += item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
} 这段代码中的return total.toString().replace(/\B(?=(\d{3})+$)/g,',');是将总价total转换为字符串，并在每三个数字之间添加逗号，以便更好地显示金额。这是通过正则表达式\B(?=(\d{3})+$)和.replace()方法来实现的。
具体来说，\B(?=(\d{3})+$)是一个正则表达式，\B表示非单词边界，(?=(\d{3})+$)表示匹配后面跟着的三个数字的连续重复，且这三个数字一直到字符串结尾。这个正则表达式的作用是找到每三个数字的位置。
.replace()方法接受两个参数，第一个参数是要替换的内容（匹配到的每三个数字），第二个参数是用于替换的内容（在匹配到的每三个数字之间插入逗号）。所以，这段代码的作用是将总价转换为带有逗号分隔的字符串形式，例如："1,000,000"。
最后就剩下商品列表的渲染和相关的几个操作了。先在内把数组 list 用 v-for 指令循环出来:
{{ index + 1 }}
{{ item.name }}
{{ item.price }}
{{ item.count }}
商品序号、名称、单价、数量都是直接使用插值来完成的，在第 4 列的两个按钮用 于增/减购买数量，分别绑定了两个方法 handleReduce 和 handleAdd，参数都是当前商品在数组 list 中的索引。很多时候，一个元素上会同时使用多个特性（尤其是在组件中使用 props 传递数据时）， 写在一行代码较长，不便阅读，所以建议特性过多时，将每个特性都单独写为一行，比如第一个中使用了 v-bind 和 v-on 两个指令（这里都用的语法糖写法）。每件商品购买数量最少是 1 件，所以当 count 为 1 时，不允许再继续减少，所以这里给动态绑定了 disabled 特性来禁用按钮 。
在 index.js 中继续完成剩余的 3 个方法：
methods: {
handleReduce: function (index) {
if (this.list[index].count === 1) return;
this.list[index].count--;
},
handleAdd: function (index) {
this.list[index].count++;
},
handleRemove: function (index) {
this.list.splice(index, 1);
}
}这 3 个方法都是直接对数组 list 的操作，没有太复杂的逻辑。需要说明的是，虽然在 button 上已经绑定了 disabled 特性，但是在 handleReduce 方法内又判断了一遍，这是因为在某些时候，可能不一定会用 button 元素，也可能是 div、span 等，给它们增加 disabled 是没有任何作用的，所以安全起见，在业务逻辑中再判断一次，避免因修改 HTML 模板后出现 bug。
以下是完整代码
HTML：
购物车示例
商品名称
商品单价
购买数量
操作
{{ index + 1 }}
{{ item.name }}
{{ item.price }}
{{ item.count }}
总价：￥ {{ totalPrice }}
购物车为空
JS:
let app = new Vue({
el: '#app',
data: {
list: [
{
id: 1,
name: 'iPhone 7',
price: 6188,
count: 1
},
{
id: 2,
name: 'iPad Pro',
price: 5888,
count: 1
},
{
id: 3,
name: 'MacBook Pro',
price: 21488,
count: 1
}
]
},
computed: {
totalPrice: function () {
let total = 0;
for (let i = 0; i < this.list.length; i++) {
let item = this.list[i];
total += item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
methods: {
handleReduce: function (index) {
if (this.list[index].count === 1) return;
this.list[index].count--;
},
handleAdd: function (index) {
this.list[index].count++;
},
handleRemove: function (index) {
this.list.splice(index, 1);
}
}
}); CSS:
[v-cloak] {
display: none;
}
/*全局样式添加手型样式：*/
* {
cursor: pointer;
}
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th, td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
}
/*鼠标悬停时背景颜色变蓝：
这将使表头（th元素）和表格单元格（td元素）在鼠标悬停时背景颜色变为蓝色，
文字颜色变为白色。将上述代码添加到您的CSS文件或