在前后端分离项目中用vue写购物车

---

,购物车实现步骤
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