【愚公系列】2022年01月 Django商城项目 29-商品浏览历史记录功能实现

2022-02-03 15:41:25 浏览数 (1)

文章目录

  • 前言
  • 一、商品浏览历史记录功能实现
    • 1.后台统计代码
    • 2.前台请求接口代码
      • 2.1 用户中心获取浏览历史记录
      • 2.2 商品详情页保存浏览记录

前言

浏览商品的历史记录主要有两种方式实现

  1. cookie(用户浏览器存储)
  2. redis(服务端存储)

本文介绍redis实现用户浏览商品的历史记录

思路: 用户每次浏览商品时, 向后台发送请求, 携带商品ID, 然后在 Redis中存储: 用户ID和浏览的商品ID,以时间排序. 来实现存储用户浏览历史记录. 其比较复杂的是redis选用数据结构(有序Set)

一、商品浏览历史记录功能实现

1.后台统计代码

代码语言:javascript复制
class AddUserHistroyView(LoginRequiredJSONMixin,View):

    def get(self,request):
        # 根据用户id,获取redis中的指定数据
        user = request.user

        redis_conn = get_redis_connection('history')
        # [1,2,34,] 根据id查询商品详细信息
        ids = redis_conn.lrange('history_%s'%user.id,0,4)
        # [SKu,SKU,SKU] 对象转换为字典
        sku_list = []
        for id in ids:
            sku = SKU.objects.get(pk=id)
            sku_list.append({
                'id': sku.id,
                'name': sku.name,
                'default_image_url': sku.default_image.url,
                'price': sku.price
            })

        # 返回相应
        return http.JsonResponse({'code':RETCODE.OK,'errmsg':'ok','skus':sku_list})


    def post(self,request):
        # 1.接收数据  用户信息,商品id
        user = request.user

        data = json.loads(request.body.decode())
        sku_id = data.get('sku_id')


        # 2.验证数据
        try:
            # pk primary key 主键 当前的主键就是 id
            SKU.objects.get(pk=sku_id)
            # SKU.objects.get(id=sku_id)
        except SKU.DoesNotExist:
            return http.JsonResponse({'codd':RETCODE.NODATAERR,'errmsg':'暂无次商品'})
        # 3.保存数据(后台:mysql /redis中)
        #  保存在列表中
        #  3.1 连接redis
        from django_redis import get_redis_connection
        redis_conn = get_redis_connection('history')
        #  3.2  先删除有可能存在的这个商品id
        #http://doc.redisfans.com/
        #LREM key count value
        redis_conn.lrem('history_%s'%user.id,0,sku_id)

        #  3.3  再添加商品id
        redis_conn.lpush('history_%s'%user.id,sku_id)
        #  3.4  因为最近浏览没有分页功能我们只保存5条历史记录
        redis_conn.ltrim('history_%s'%user.id,0,4)
        # 4.返回相应
        return http.JsonResponse({'code':RETCODE.OK,'errmsg':'ok'})

2.前台请求接口代码

2.1 用户中心获取浏览历史记录

代码语言:javascript复制
// 请求浏览历史记录
browse_histories(){
    var url = this.host   '/users/browse_histories/';
    axios.get(url, {
            responseType: 'json'
        })
        .then(response => {
            this.histories = response.data.skus;
            for(var i=0; i<this.histories.length; i  ){
                this.histories[i].url = '/goods/'   this.histories[i].id   '.html';//跳转商品详情页面
            }
        })
        .catch(error => {
            console.log(error.response);
        })
}

2.2 商品详情页保存浏览记录

代码语言:javascript复制
// 保存用户浏览记录
save_browse_histories(){
    if (this.sku_id) {
        var url = this.host   '/browse_histories/';
        axios.post(url, {
            'sku_id': this.sku_id
        }, {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            },
            responseType: 'json'
        })
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.log(error.response);
            });
    }
},

0 人点赞