本文介绍如何利用Redis存储购物车数据。在商品详情页面，数据通过detail.js传递到Redis，然后在购物车页面，数据从Redis读取并显示。Vue.js用于处理页面交互，商品信息包括名称、详情、价格、数量等。当商品数量改变时，Redis中的数据会相应更新。购物车数据以Hash形式存储，键值结构为实例-属性-值，覆盖原有值进行更新。
Redis存储购物车数据
思路：
商品详情页的数据-->detail.js-->视图函数-->redis
redis-->视图函数-->js变量-->carts.js-->购物车页面
值得注意的小点：
vue里可以接收的参数有：html页面中的模板变量([[ template_var ]])，vue标签中的v-model属性，标签里定义的变量。
redis的hash存储方式是：实例-属性-值，如，user-age-12。当同一个值再次hset时，原先的值会被覆盖，所以redis的hash没有专门的修改方法，直接重复赋值即可。
案例目录结构如图所示：
detail.html页面：
detail.html代码：
Document商品详情页面
商品名称：[[vmodel_skuname]]
商品详情：[[vmodel_skucaption]]
商品价格：[[vmodel_skuprice]]
商品数量：
[[vmodel_skucount]]
增加
减少
商品总价：[[vmodel_skuamount]]
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代码：
Document
3560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
