在前後端分離專案中用vue寫購物車
阿新 • • 發佈：2018-12-06
,購物車實現步驟
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