美多商城之商品(商品详情页)

最新推荐文章于 2023-12-08 11:47:15 发布

IT之一小佬

最新推荐文章于 2023-12-08 11:47:15 发布

阅读量2k

点赞数 3

分类专栏：美多商城文章标签： django python web

本文链接：https://blog.csdn.net/weixin_44799217/article/details/118642066

版权

美多商城专栏收录该内容

39 篇文章 22 订阅

订阅专栏

六、商品详情页

6.1 商品详情页分析和准备

6.1.1. 商品详情页组成结构分析

1.商品频道分类

已经提前封装在contents.utils.py文件中，直接调用方法即可。

2.面包屑导航

已经提前封装在goods.utils.py文件中，直接调用方法即可。

3.热销排行

该接口已经在商品列表页中实现完毕，前端直接调用接口即可。

4.商品SKU信息(详情信息)

通过sku_id可以找到SKU信息，然后渲染模板即可。
使用Ajax实现局部刷新效果。

5.SKU规格信息

通过SKU可以找到SPU规格和SKU规格信息。

6.商品详情介绍、规格与包装、售后服务

通过SKU可以找到SPU信息，SPU中可以查询出商品详情介绍、规格与包装、售后服务。

7.商品评价

商品评价需要在生成了订单，对订单商品进行评价后再实现，商品评价信息是动态数据。
使用Ajax实现局部刷新效果。

6.1.2. 商品详情页接口设计和定义

1.请求方式

选项	方案
请求方法	GET
请求地址	/detail/(?P<sku_id>\d+)/

    #  商品详情
    url(r'^detail/(?P<sku_id>\d+)/$', views.DetailView.as_view(), name='detail'),

2.请求参数：路径参数

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

3.响应结果：HTML

detail.html

4.接口定义

goods.views.py

class DetailView(View):
    """商品详情页"""

    def get(self, request, sku_id):
        """提供商品详情页"""
        return render(request, 'detail.html')

6.1.3. 商品详情页初步渲染

渲染商品频道分类、面包屑导航、商品热销排行

将原先在商品列表页实现的代码拷贝到商品详情页即可。
添加detail.js

class DetailView(View):
    """商品详情页"""

    def get(self, request, sku_id):
        """提供商品详情页"""
        # 获取当前sku的信息
        try:
            sku = models.SKU.objects.get(id=sku_id)
        except models.SKU.DoesNotExist:
            return render(request, '404.html')

        # 查询商品频道分类
        categories = get_categories()
        # 查询面包屑导航
        breadcrumb = get_breadcrumb(sku.category)

        # 渲染页面
        context = {
            'categories':categories,
            'breadcrumb':breadcrumb,
            'sku':sku,
        }
        return render(request, 'detail.html', context)

提示：为了让前端在获取商品热销排行数据时，能够拿到商品分类ID，我们将商品分类ID从模板传入到Vue.js

<script type="text/javascript">
    let category_id = "{{ sku.category.id }}";
</script>

data: {
    category_id: category_id,
},

6.2 展示详情页数据

6.2.1. 查询和渲染SKU详情信息

# 渲染页面
context = {
    'categories':categories,
    'breadcrumb':breadcrumb,
    'sku':sku,
}
return render(request, 'detail.html', context)

<div class="goods_detail_con clearfix">
    <div class="goods_detail_pic fl"><img src="{{ sku.default_image.url }}"></div>
    <div class="goods_detail_list fr">
        <h3>{{ sku.name }}</h3>
        <p>{{ sku.caption }}</p>
        <div class="price_bar">
            <span class="show_pirce">¥<em>{{ sku.price }}</em></span>
            <a href="javascript:;" class="goods_judge">18人评价</a>
        </div>
        <div class="goods_num clearfix">
            <div class="num_name fl">数 量：</div>
            <div class="num_add fl">
                <input v-model="sku_count" @blur="check_sku_count" type="text" class="num_show fl">
                <a @click="on_addition" class="add fr">+</a>
                <a @click="on_minus" class="minus fr">-</a>
            </div> 
        </div>
        {#...商品规格...#}
        <div class="total" v-cloak>总价：<em>[[ sku_amount ]]元</em></div>
        <div class="operate_btn">
            <a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>                
        </div>
    </div>
</div>

提示：为了实现用户选择商品数量的局部刷新效果，我们将商品单价从模板传入到Vue.js

<script type="text/javascript">
    let sku_price = "{{ sku.price }}";
</script>

data: {
    sku_price: sku_price,
},

6.2.2. 查询和渲染SKU规格信息

1.查询SKU规格信息

class DetailView(View):
    """商品详情页"""

    def get(self, request, sku_id):
        """提供商品详情页"""
        # 获取当前sku的信息
        try:
            sku = models.SKU.objects.get(id=sku_id)
        except models.SKU.DoesNotExist:
            return render(request, '404.html')

        # 查询商品频道分类
        categories = get_categories()
        # 查询面包屑导航
        breadcrumb = get_breadcrumb(sku.category)

        # 构建当前商品的规格键
        sku_specs = sku.specs.order_by('spec_id')
        sku_key = []
        for spec in sku_specs:
            sku_key.append(spec.option.id)
        # 获取当前商品的所有SKU
        skus = sku.spu.sku_set.all()
        # 构建不同规格参数（选项）的sku字典
        spec_sku_map = {}
        for s in skus:
            # 获取sku的规格参数
            s_specs = s.specs.order_by('spec_id')
            # 用于形成规格参数-sku字典的键
            key = []
            for spec in s_specs:
                key.append(spec.option.id)
            # 向规格参数-sku字典添加记录
            spec_sku_map[tuple(key)] = s.id
        # 获取当前商品的规格信息
        goods_specs = sku.spu.specs.order_by('id')
        # 若当前sku的规格信息不完整，则不再继续
        if len(sku_key) < len(goods_specs):
            return
        for index, spec in enumerate(goods_specs):
            # 复制当前sku的规格键
            key = sku_key[:]
            # 该规格的选项
            spec_options = spec.options.all()
            for option in spec_options:
                # 在规格参数sku字典中查找符合当前规格的sku
                key[index] = option.id
                option.sku_id = spec_sku_map.get(tuple(key))
            spec.spec_options = spec_options

        # 渲染页面
        context = {
            'categories':categories,
            'breadcrumb':breadcrumb,
            'sku':sku,
            'specs': goods_specs,
        }
        return render(request, 'detail.html', context)

2.渲染SKU规格信息

{% for spec in specs %}
<div class="type_select">
    <label>{{ spec.name }}:</label>
    {% for option in spec.spec_options %}
        {% if option.sku_id == sku.id %}
        <a href="javascript:;" class="select">{{ option.value }}</a>
        {% elif option.sku_id %}
        <a href="{{ url('goods:detail', args=(option.sku_id, )) }}">{{ option.value }}</a>
        {% else %}
        <a href="javascript:;">{{ option.value }}</a>
        {% endif %}
    {% endfor %}
</div>
{% endfor %}

6.2.3. 查询和渲染详情、包装和售后信息

商品详情、包装和售后信息被归类到商品SPU中，sku.spu关联查询就可以找到该SKU的SPU信息。

<div class="r_wrap fr clearfix">
    <ul class="detail_tab clearfix">
        <li @click="on_tab_content('detail')" :class="tab_content.detail?'active':''">商品详情</li>
        <li @click="on_tab_content('pack')" :class="tab_content.pack?'active':''">规格与包装</li>
        <li @click="on_tab_content('service')" :class="tab_content.service?'active':''">售后服务</li>
        <li @click="on_tab_content('comment')" :class="tab_content.comment?'active':''">商品评价(18)</li>
    </ul>
    <div @click="on_tab_content('detail')" class="tab_content" :class="tab_content.detail?'current':''">
        <dl>
            <dt>商品详情：</dt>
            <dd>{{ sku.spu.desc_detail|safe }}</dd>
        </dl>
    </div>
    <div @click="on_tab_content('pack')" class="tab_content" :class="tab_content.pack?'current':''">
        <dl>
            <dt>规格与包装：</dt>
            <dd>{{ sku.spu.desc_pack|safe }}</dd>
        </dl>
    </div>
    <div @click="on_tab_content('service')" class="tab_content" :class="tab_content.service?'current':''">
        <dl>
            <dt>售后服务：</dt>
            <dd>{{ sku.spu.desc_service|safe }}</dd>
        </dl>
    </div>
    <div @click="on_tab_content('comment')" class="tab_content" :class="tab_content.comment?'current':''">
        <ul class="judge_list_con">
            {#...商品评价...#}
        </ul>
    </div>
</div>

6.3 统计分类商品访问量

提示：

统计分类商品访问量是统计一天内该类别的商品被访问的次数。
需要统计的数据，包括商品分类，访问次数，访问时间。
一天内，一种类别，统计一条记录。

6.3.1. 统计分类商品访问量模型类

模型类定义在goods.models.py中，然后完成迁移建表。

class GoodsVisitCount(BaseModel):
    """统计分类商品访问量模型类"""
    category = models.ForeignKey(GoodsCategory, on_delete=models.CASCADE, verbose_name='商品分类')
    count = models.IntegerField(verbose_name='访问量', default=0)
    date = models.DateField(auto_now_add=True, verbose_name='统计日期')

    class Meta:
        db_table = 'tb_goods_visit'
        verbose_name = '统计分类商品访问量'
        verbose_name_plural = verbose_name

【之前操作中修改了模型中的default_image_url的属性值，导致出现下面的错误】

解决办法：【参考博文：https://www.cnblogs.com/erhangboke/p/11660133.html】

6.3.2. 统计分类商品访问量后端逻辑

1.请求方式

选项	方案
请求方法	POST
请求地址	/detail/visit/(?P<category_id>\d+)/

    #  统计商品的访问量
    url(r'^detail/visit/(?P<category_id>\d+)/$', views.DetailVisitView.as_view()),

2.请求参数：路径参数

参数名	类型	是否必传	说明
category_id	string	是	商品分类ID，第三级分类

3.响应结果：JSON

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

4.后端接口定义和实现，

如果访问记录存在，说明今天不是第一次访问，不新建记录，访问量直接累加。
如果访问记录不存在，说明今天是第一次访问，新建记录并保存访问量。

from django.utils import timezone
from datetime import datetime
import logging


#  日志统计器
logger = logging.getLogger('django')


# Create your views here.
class DetailVisitView(View):
    """详情页分类商品访问量"""

    def post(self, request, category_id):
        """记录分类商品访问量"""
        try:
            category = GoodsCategory.objects.get(id=category_id)
        except GoodsCategory.DoesNotExist:
            return http.HttpResponseForbidden('缺少必传参数')

        # 获取今天的日期
        t = timezone.localtime()
        today_str = '%d-%02d-%02d' % (t.year, t.month, t.day)
        today_date = datetime.strptime(today_str, '%Y-%m-%d')
        try:
            # 查询今天该类别的商品的访问量
            counts_data = category.goodsvisitcount_set.get(date=today_date)
        except GoodsVisitCount.DoesNotExist:
            # 如果该类别的商品在今天没有过访问记录，就新建一个访问记录
            counts_data = GoodsVisitCount()

        try:
            counts_data.category = category
            counts_data.count += 1
            counts_data.save()
        except Exception as e:
            logger.error(e)
            return http.HttpResponseServerError('服务器异常')

        return http.JsonResponse({'code': RETCODE.OK, 'errmsg': 'OK'})

IT之一小佬

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
2
评论
美多商城之商品(商品详情页)

六、商品详情页6.1 商品详情页分析和准备6.1.1. 商品详情页组成结构分析1.商品频道分类已经提前封装在contents.utils.py文件中，直接调用方法即可。2.面包屑导航已经提前封装在goods.utils.py文件中，直接调用方法即可。3.热销排行该接口已经在商品列表页中实现完毕，前端直接调用接口即可。4.商品SKU信息(详情信息)通过sku_id可以找到SKU信息，然后渲染模板即可。使用Ajax实现局部刷新效果。5.SKU规格信息通过SKU可以
复制链接

扫一扫

专栏目录