Redis存儲購物車數據
阿新 • • 發佈：2019-05-12
go import init min title head ole gif axios 獲取數據
Redis存儲購物車數據
思路：
商品詳情頁的數據-->detail.js-->視圖函數-->redis
redis-->視圖函數-->js變量-->carts.js-->購物車頁面
案例目錄結構如圖所示：
detail.html頁面：
detail.html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="../static/js/host.js"></script> <script type="text/javascript" src="../static/js/vue-2.5.16.js"></script> <script type="text/javascript" src="../static/js/axios-0.18.0.min.js"></script> </head> <body> <div id="app" v-cloak> <h2>商品詳情頁面</h2> <a href="/c/">購物車</a><br> <label>商品名稱：</label>[[vmodel_skuname]]<br> <label>商品詳情：</label>[[vmodel_skucaption]]<br> <label>商品價格：</label>[[vmodel_skuprice]]<br> <label>商品數量：</label> [[vmodel_skucount]] <a href="javascript:;" @click="click_add">增加</a> <a href="javascript:;" @click="click_del">減少</a><br> <label>商品總價：</label>[[vmodel_skuamount]]<br> <a href="javascript:;" id="add_cart" @click="click_addcart">加入購物車</a><br> </div> <script type="text/javascript" src="../static/js/d.js"></script> </body> </html>
detail.js：
var vm = new Vue({ el:'#app', delimiters:['[[', ']]'], data:{ host:host, // 綁定v-model，獲取數據 // 商品名稱 vmodel_skuname:'iphoneX', // 商品詳情 vmodel_skucaption:'太貴了', // 商品價格 vmodel_skuprice:'6000', // 商品數量 vmodel_skucount:1, // 商品總數 vmodel_skuamount:'', }, mounted(){ this.vmodel_skuamount = this.vmodel_skuprice * this.vmodel_skucount }, watch:{}, methods:{ // 增加商品數量 click_add(){ this.vmodel_skucount++; this.vmodel_skuamount = this.vmodel_skuprice * this.vmodel_skucount }, click_del(){ if(this.vmodel_skucount > 1){ this.vmodel_skucount--; } this.vmodel_skuamount = this.vmodel_skuprice * this.vmodel_skucount }, click_addcart(){ var url = this.host + '/c/'; console.log(url) axios.post(url, { vmodel_skuamount :this.vmodel_skuamount, vmodel_skucaption : this.vmodel_skucaption, vmodel_skucount : this.vmodel_skucount, vmodel_skuname : this.vmodel_skuname, vmodel_skuprice : this.vmodel_skuprice }, { responseType:'json', withCredentials:true }).then(response => { if(response.data.code == '0'){ alert('添加購物車成功！') } else{ alert(response.data.errmsg) } }).catch(error => { console.log(error.response) }) } } });
carts.html頁面：
添加成功彈窗
carts.html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="../static/js/host.js"></script> <script type="text/javascript" src="../static/js/vue-2.5.16.js"></script> <script type="text/javascript" src="../static/js/axios-0.18.0.min.js"></script> </head> <body> <div id="app" v-cloak> <h2>購物車頁面</h2> <a href="/d/">商品詳情</a><br> <ul v-for="cart_item in carts"> <!-- <li><label>商品名稱：</label>[[cart_item.name]]<br> <label>商品詳情：</label>[[cart_item.caption]]<br> <label>商品價格：</label>[[cart_item.price]]<br> <label>商品數量：</label>[[cart_item.count]]<br> <label>商品總價：</label>[[cart_item.amount]]<br></li> --> <li>[[cart_item]]</li> </ul> </div> </li> </div> <script> var v_js_carts = {{ v_js_carts| safe }}; </script> <script type="text/javascript" src="../static/js/c.js"></script> </body> </html>
carts.js：
var vm = new Vue({
el:'#app',
delimiters:['[[', ']]'],
data:{
host:host,
carts:[]
},
mounted(){
this.render_carts();
},
watch:{},
methods:{
//渲染購物車
render_carts(){
this.carts = JSON.parse(JSON.stringify(v_js_carts));
}
}
});視圖函數代碼：
from django.shortcuts import render
from django.views import View
import json
from django import http
from carts.utils.code import RETCODE
from django_redis import get_redis_connection
class DetailsView(View):
def get(self, request):
return render(request, 'd.html')
class CartsView(View):
def get(self, request):
redis_cli = get_redis_connection('redis_db_carts')
cart_redis_getall = redis_cli.hgetall('cart')
c_list = []
for k,v in cart_redis_getall.items():
c_d = {k.decode():v.decode()}
c_list.append(c_d)
print(c_list)
context = {
'v_js_carts':c_list
}
return render(request, 'c.html', context)
def post(self, request):
# 1.接收
# 接收這五個參數：
# vmodel_skuamount :this.vmodel_skuamount,
# vmodel_skucaption : this.vmodel_skucaption,
# vmodel_skucount : this.vmodel_skucount,
# vmodel_skuname : this.vmodel_skuname,
# vmodel_skuprice : this.vmodel_skuprice
param_dict = json.loads(request.body.decode())
amount = param_dict.get('vmodel_skuamount')
caption = param_dict.get('vmodel_skucaption')
count = param_dict.get('vmodel_skucount')
name = param_dict.get('vmodel_skuname')
price = param_dict.get('vmodel_skuprice')
cart_list = [amount, caption, count, name, price]
# 2.驗證
if not all([amount, caption, count, name, price]):
return http.JsonResponse({
'code':RETCODE.PARAMERR,
'errmsg':'參數不完整'
})
# 3.處理
response = http.JsonResponse({
'code':RETCODE.OK,
'errmsg':'ok'
})
# 將數據存入redis
redis_cli = get_redis_connection('redis_db_carts')
redis_pip = redis_cli.pipeline()
redis_pip.hset('cart', 'amount', amount)
redis_pip.hset('cart', 'caption', caption)
redis_pip.hset('cart', 'count', count)
redis_pip.hset('cart', 'name', name)
redis_pip.hset('cart', 'price', price)
redis_pip.execute()
# 4.響應
return responseRedis存儲購物車數據