美多商城之商品(用户浏览记录)

七、用户浏览记录

7.1 设计浏览记录存储方案

• 当登录用户在浏览商品的详情页时，我们就可以把详情页这件商品信息存储起来，作为该登录用户的浏览记录。
• 用户未登录，我们不记录其商品浏览记录。

7.1.1. 存储数据说明

• 虽然浏览记录界面上要展示商品的一些SKU信息，但是我们在存储时没有必要存很多SKU信息。
• 我们选择存储SKU信息的唯一编号（sku_id）来表示该件商品的浏览记录。
• 存储数据：sku_id

7.1.2. 存储位置说明

• 用户浏览记录是临时数据，且经常变化，数据量不大，所以我们选择内存型数据库进行存储。
• 存储位置：Redis数据库 3号库

CACHES = {
    "history": { # 用户浏览记录
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/3",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    },
}

7.1.3. 存储类型说明

• 由于用户浏览记录跟用户浏览商品详情的顺序有关，所以我们选择使用Redis中的list类型存储 sku_id
• 每个用户维护一条浏览记录，且浏览记录都是独立存储的，不能共用。所以我们需要对用户的浏览记录进行唯一标识。
• 我们可以使用登录用户的ID来唯一标识该用户的浏览记录。
• 存储类型：'history_user_id' : [sku_id_1, sku_id_2, ...]

7.1.4. 存储逻辑说明

• SKU信息不能重复。
• 最近一次浏览的商品SKU信息排在最前面，以此类推。
• 每个用户的浏览记录最多存储五个商品SKU信息。
• 存储逻辑：先去重，再存储，最后截取。

7.2 保存和查询浏览记录

7.2.1. 保存用户浏览记录

1.请求方式

选项	方案
请求方法	POST
请求地址	/browse_histories/

users.urls.py

#  用户浏览记录
    url(r'^browse_histories/$', views.UserBrowseHistory.as_view()),

2.请求参数：JSON

参数名	类型	是否必传	说明
sku_id	string	是	商品SKU编号

3.响应结果：JSON

字段	说明
code	状态码
errmsg	错误信息

4.后端接口定义和实现

users.views.py

class UserBrowseHistory(LoginRequiredJSONMixin, View):
    """用户浏览记录"""

    def post(self, request):
        """保存用户浏览记录"""
        # 接收参数
        json_dict = json.loads(request.body.decode())
        sku_id = json_dict.get('sku_id')

        # 校验参数
        try:
            models.SKU.objects.get(id=sku_id)
        except models.SKU.DoesNotExist:
            return http.HttpResponseForbidden('sku不存在')

        # 保存用户浏览数据
        redis_conn = get_redis_connection('history')
        pl = redis_conn.pipeline()
        user_id = request.user.id

        # 先去重
        pl.lrem('history_%s' % user_id, 0, sku_id)
        # 再存储
        pl.lpush('history_%s' % user_id, sku_id)
        # 最后截取
        pl.ltrim('history_%s' % user_id, 0, 4)
        # 执行管道
        pl.execute()

        # 响应结果
        return http.JsonResponse({'code': RETCODE.OK, 'errmsg': 'OK'})

 7.2.2. 查询用户浏览记录

1.请求方式

选项	方案
请求方法	GET
请求地址	/browse_histories/

2.请求参数：

无

3.响应结果：JSON

字段	说明
code	状态码
errmsg	错误信息
skus[ ]	商品SKU列表数据
id	商品SKU编号
name	商品SKU名称
default_image_url	商品SKU默认图片
price	商品SKU单价

{
    "code":"0",
    "errmsg":"OK",
    "skus":[
        {
            "id":6,
            "name":"Apple iPhone 8 Plus (A1864) 256GB 深空灰色 移动联通电信4G手机",
            "default_image_url":"http://image.meiduo.site:8888/group1/M00/00/02/CtM3BVrRbI2ARekNAAFZsBqChgk3141998",
            "price":"7988.00"
        },
        ......
    ]
}

4.后端接口定义和实现

class UserBrowseHistory(LoginRequiredJSONMixin, View):
    """用户浏览记录"""

    def get(self, request):
        """获取用户浏览记录"""
        # 获取Redis存储的sku_id列表信息
        redis_conn = get_redis_connection('history')
        sku_ids = redis_conn.lrange('history_%s' % request.user.id, 0, -1)

        # 根据sku_ids列表数据，查询出商品sku信息
        skus = []
        for sku_id in sku_ids:
            sku = models.SKU.objects.get(id=sku_id)
            skus.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': skus})

Vue渲染用户浏览记录

user_center_info.html

<div class="has_view_list" v-cloak>
    <ul class="goods_type_list clearfix">
        <li v-for="sku in histories">
            <a :href="sku.url"><img :src="sku.default_image_url"></a>
            <h4><a :href="sku.url">[[ sku.name ]]</a></h4>
            <div class="operate">
                <span class="price">￥[[ sku.price ]]</span>
                <span class="unit">台</span>
                <a href="javascript:;" class="add_goods" title="加入购物车"></a>
            </div>
        </li>
    </ul>
</div>