六、商品详情页

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)# 获取当前商品的所有SKUskus = 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):returnfor index, spec in enumerate(goods_specs):# 复制当前sku的规格键key = sku_key[:]# 该规格的选项spec_options = spec.options.all()for option in spec_options:# 在规格参数sku字典中查找符合当前规格的skukey[index] = option.idoption.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 = categorycounts_data.count += 1counts_data.save()except Exception as e:logger.error(e)return http.HttpResponseServerError('服务器异常')return http.JsonResponse({'code': RETCODE.OK, 'errmsg': 'OK'})

美多商城之商品(商品详情页)相关推荐

美多商城项目：商品数据库表设计、准备商品数据、首页广告、商品列表页
一.商品数据库表设计 1.1 SPU和SKU 在电商中对于商品,有两个重要的概念:SPU和SKU 1. SPU介绍 SPU = Standard Product Unit (标准产品单位) SPU是商 ...
商城项目 pc----商品详情页
目录 vue路由滚动行为排他思想放大镜加入购物车操作项目实战 Promise 特点用法 then 执行顺序拓展 async/await Promise优缺点 Promise方法: 浏览器缓 ...
美多商城之商品（2）
美多商城之商品(2) 1.商品搜索 1.1.全文检索方案Elasticsearch 1.2.Haystack扩展建立索引 1.3.渲染商品搜索结果 2.商品详情页 2.1.商品详情页分析和准备 2.2 ...
Python_美多商城（商品）_6
商品数据库表设计 SPU和SKU 在电商中对于商品,有两个重要的概念:SPU和SKU 1. SPU介绍 SPU = Standard Product Unit (标准产品单位) SPU是商品信息聚合的 ...
商品详情页html代码获取,直播带货小程序源码中，商品详情页是如何获取html图片的...
在搭建直播带货小程序源码过程中,需要为商品构建详情页,而商品页中的图片是要通过html获取并展示到本地的,那么这个过程是如何实现的?接下来小编将通过代码演示一下: 1.配置webView mWebVi ...
仿各大app的商品详情页购买信息弹幕
我们总是会在商品的详情页看到提示某某买两个该商品或某某几秒前怎样怎样这种的消息提示框弹出最近项目中也用到了所以做个记录 html: 数据处理: css样式: 好了,记得离开页面清除定时器
爬取京东笔记本电脑销量榜每件商品详情页url，并存入云服务器中的mysql库
文章目录一.目的分析二.爬取页面商品所有详情页链接 1.爬取href链接 2.将数据存入数据库完整代码: 三.多线程优化版已完成 (多线程优化)爬取京东笔记本电脑销量榜data-sku(商品id ...
如何从详情页获取淘宝/天猫商品的分类？
熟悉淘宝/天猫的人应该都知道,在商品的详情页是没有显示商品的所属分类的.而"商品分类"对我们的数据分析又是一个很重要的参数,那如何获取这个信息呢? 通过分析发现有两种方法,下面一一 ...
Django项目-商品详情页
商品详情页分析和准备 1.商品分类 2.面包屑 3.热销排行 4.商品名字.价格.数量.规格(颜色,内存,) 总价(和数量有关系) 5.商品详情规格与包装售后服务 6. 商品评价(完成下单后) 商 ...
带货直播系统源码中，商品详情页是如何搭建起来的
市面上大多数带货直播系统源码的商品介绍详情页,都是仿照淘宝的商品详情页的制作的,那么这个模块是如何通过代码建立起来的呢?下面小编将会通过代码来描述其实现过程. 1.实现滑动控制到导航栏的显示和隐藏 m ...

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