,购物车实现步骤
a, 给"加入购物车"按钮提供点击事件
b, 在vue中编写 addToCart方法,将商品加入购物车
1)准备数据:添加至购物车的商品数据
2)从localStorage中取出cart信息
3)如果取出的cart数据为空,那就直接把信息添加进购物车
4)如果取出的cart数据不为空,表明购物车中已经存在商品
判断当前新增商品是否在购物车中
如果新增商品在购物车中,只新增数量
如果新增商品不在购物车中,直接新增商品
c, 进入购物车flow1.html页面
1 复选框
修改页面HTML代码
2 列表显示
取出cart数据,循环遍历
3 修改数量
编写两个方法就可以实现
4 动态计算每个商品的总价
由于vue具有双向绑定的功能,自动实现
5 计算购物总金额
需要使用计算属性:计算属性的本质是一个方法,只是使用的时候,像属性
d,删除购物车信息
1,在未登录的情况下
1.加入购物车按钮
<input type="button" @click.prevent="addToCart" value="" class="add_btn" />
2,购物车js方法的定义和编写
//添加到购物车
addToCart() {
//定义商品对象,并赋值
let goods = {
skuid: this.skuid,
goods_name: this.goodsInfo.goods_name,
price: this.goodsInfo.price,
count: this.buyCount,
checked: true,
midlogo: this.goodsInfo.logo.smlogo,
spec_info: this.goodsInfo.spec_info.id_txt
}
3,不管是否重复,先添加进购物车**
//从浏览器中获取购物车信息
let cart = localStorage.getItem("cart")
//判断是否为空
if (cart != null) {
//定义一个变量
let isnew = true
//转回一个json
cart = JSON.parse(cart)
4,判断是否重复购买
//循环购物车,判读是否重复添加商品
for (let i = 0; i < cart.length; i++) {
//判断购物车里面是否有相同的商品
if (cart[i].skuid == goods.skuid) {
//并且不重复添加
isnew = false
//如果有,数量加
cart[i].count += parseInt(goods.count)
break
}
}
if (isnew) {
//将新的商品添加到购物车里
cart.push(goods)
}
} else {
//如果没有,直接定义一个
cart = [goods]
}
//把数组保存到浏览器里
localStorage.setItem("cart", JSON.stringify(cart))
//操作之后跳转到购物车页面
location.href = "flow1.html"
},
5,加减时数量获取不到
//购买数量改变
reduce_num() {
//数量减一
if (this.buyCount <= 1) {
this.buyCount == 1
} else {
this.buyCount--
}
},
//数量加
add_num() {
this.buyCount++
},
> <dd>
> <a href="javascript:;" id="reduce_num" @click.prevent="reduce_num"></a> <input type="text"
> v-model="buyCount" name="amount" value="1" class="amount" />
> <a href="javascript:;" id="add_num" @click.prevent="add_num"></a> </dd>
6,flow1.html页面获取初始数据
7,绑定数据
<tr v-if="carts.length == 0 ">
<td style="height:50px;" colspan="7">当前购物车还没有商品~~</td>
</tr>
<tr v-for="(v , k) in carts">
<td>
<input @change="updataCart(k)" type="checkbox" v-model="v.checked">
</td>
<td class="col1"><a href=""><img :src="v.midlogo" alt="" /></a>
<strong><a href="">{{v.goods_name}}</a></strong>
</td>
<td class="col2">
<p>{{v.spec_info}}</p>
</td>
<td class="col3">¥<span>{{v.price}}</span></td>
<td class="col4">
<a href="javascript:;" @click="redcueNum(k)" class="reduce_num"></a>
<input type="text" @change="updataCart(k)" name="amount" v-model="v.count" class="amount" />
<a href="javascript:;" @click="addNum(k)" class="add_num"></a>
</td>
<td class="col5">¥<span>{{(v.count * v.price).toFixed(2)}}</span></td>
<td class="col6"><a href="" @click.prevent="delCart(k)">删除</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7">购物金额总计: <strong>¥ <span id="total">{{totalPrice}}</span></strong></td>
</tr>
8,添加复选框功能
9,商品总价
使用的技术点:计算属性
回忆:计算属性本质是一个方法,但是可以像属性一样使用
computed: {
totalPrice() {
let sum = 0
for (let i = 0; i < this.carts.length; i++) {
if (this.carts[i].checked) {
sum += this.carts[i].count * this.carts[i].price
}
}
return sum.toFixed(2)
}
}
10,修改购物车商品数量时,修改localStorage中的数据
redcueNum(k) {
if (this.carts[k].count > 1) {
this.carts[k].count--
//修改完成之后,继续存放到本地
this.updataCart(k)
}
},
//商品数量加后保存修改
addNum(k) {
this.carts[k].count++
//修改完成之后,继续存放到本地
this.updataCart(k)
},
//修改cart
updataCart(k) {
// 如果登陆了
if (this.token) {
updataCarts(this.carts[k].skuid, {
count: this.carts[k].count,
checked: this.carts[k].checked
})
} else {
//修改完成之后保存到本地
localStorage.setItem("cart", JSON.stringify(this.carts))
}
},
11,删除购物车中的商品
http://www.w3school.com.cn/jsref/jsref_splice.asp(这是api的网站)
定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
注释:该方法会改变原始数组。
语法 arrayObject.splice(index,howmany,item1,…,itemX) 参数 描述
index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为
0,则不会删除项目。 item1, …, itemX 可选。向数组添加的新项目。
难点:如何从数组中删除一条记录?
答:使用splice,
比如:splice(k,1)
<td class="col6"><a href="" @click.prevent="delCart(k)">删除</a></td>
//删除购物车的商品
delCart(k) {
if (confirm("确认删除??")) {
this.carts.splice(k, 1)
if (this.token) {
deleteCarts(this.carts[k].skuid)
} else {
//更新浏览器的数据
this.updataCart(k)
}
}
},
二:登录购物车
登录的时候保存购物车到服务器
登录的时候把购物车里的数据同步到用户上,当用户登录退出的时候,再次进入购物车页面的时候就没有任何 数据了
流程:
1、在登录时,把浏览器中的数据提交到服务器
2、从此之后,再操作购物车,就是直接通过AJAX操作服务器
修改登录的代码,添加四段代码:
取出购物车中的数据
拼出接口数据
传数据
清空浏览器中的数据
<script>
var vm = new Vue({
el: "#app",
data: {
loginForm: {},
},
methods: {
toLogin() {
let cart = localStorage.getItem("cart")
if (cart) {
JSON.parse(cart)
} else {
cart = []
}
let data = {
mobile: this.loginForm.mobile,
password: this.loginForm.password,
cart: cart
}
//登录方法
login(data).then(res => {
//判断返回值
if (res.data.errno === 1) {
//登录错误提示
alert(res.data.errmsg)
} else {
//成功提示
alert("登录成功")
//登录成功,把信息保存到token
localStorage.setItem("token", res.data.token)
localStorage.setItem("name", res.data.name)
//清空浏览器的数据
localStorage.removeItem("cart")
// //获取存放的回调页面
// let returnURL = sessionStorage.getItem("returnURL")
// if (returnURL) {
// //清除存放的数据
// sessionStorage.removeItem("returnURL")
// //跳转到回调的页面
// location.href = returnURL
// } else {
//跳转到首页
location.href = "index.html"
}
// }
})
}
}
})
</script>
2.1加入购物车
业务:当登录之后,如果再加入购物车,就直接通过ajax直接保存到服务器上,不直接保存到本地localStorage
//加入购物车
Mock.mock("/cart-service/carts", "post", {
"errno": "@integer(0,1)",
"errmsg": "@csentence(5,20)"
})
//添加到购物车
function addCart(params) {
return axios.post("/cart-service/carts",params)
}
2.2
【第四步】加入购物车的时候,判断是否有token,如果有token,就发送Ajax请求去服务器,如果没有,就加入本地存储
token: localStorage.getItem("token")
/
/判断是否登录
if (this.token != null) {
// 加入购物车
addCart({
skuid: this.skuid,
count: this.buyCount
}).then(res => {
if (res.data.errno == 0) {
location.href = "flow1.html"
} else {
alert(res.data.errmsg)
}
})
return
}
2.3购物车列表-登录后
//登录的购物车
Mock.mock("/cart-service/carts", "get", {
'data|3-10': [
{
"skuid": "@id",
"goods_name": "@ctitle(10,30)",
"price": "@integer(0,9999)",
"count": "@integer(1,10)",
"checked": true,
"midlogo": "@dataImage(50x50)",
"spec_info": "颜色:黑色|内存:4G|"
}
]
})
在api.js中发送ajax请求
//获取购物车的信息
function getCart() {
return axios.get("/cart-service/carts")
}
created() {
//判断是否有token,这里是已登录
if (this.token) {
// 发送请求到服务器
getCart().then(res => {
this.carts = res.data.data
})
} else {
//从浏览器获取购物车
let cart = localStorage.getItem("cart")
//判断赋值
if (cart != null) {
this.carts = JSON.parse(cart)
}
}
},
2.4修改购物车-登陆后
//修改购物车的商品
Mock.mock(/\/carts\/\d+/, "put", {
//成功信息
"errno": "@integer(0,1)",
//失信息
"errmsg": "@csentence(5,20)"
})
//修改购物车信息
function updataCarts(id, data) {
return axios.put("/cart-service/carts/" + id, data)
}
往上找第10个有代码
2.5删除
//删除购物车的商品
Mock.mock(/\/carts\/\d+/, "delete", {
//成功信息
"errno": "@integer(0,1)",
//失信息
"errmsg": "@csentence(5,20)"
})
//删除购物车商品
function deleteCarts(id) {
return axios.put("/cart-service/carts/" + id)
}
找11