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