1、列表页热销排行

根据路径参数category_id查询出该类型商品销量前二的商品。
使用Ajax实现局部刷新的效果。

查询列表页热销排行数据

请求方式
请求参数：路径参数
响应结果：JSON

{"code":"0","errmsg":"OK","hot_skus":[{"id":6,"default_image_url":"http://image.meiduo.site:8888/group1/M00/00/02/CtM3BVrRbI2ARekNAAFZsBqChgk3141998","name":"Apple iPhone 8 Plus (A1864) 256GB 深空灰色 移动联通电信4G手机","price":"7988.00"},{"id":14,"default_image_url":"http://image.meiduo.site:8888/group1/M00/00/02/CtM3BVrRdMSAaDUtAAVslh9vkK04466364","name":"华为 HUAWEI P10 Plus 6GB+128GB 玫瑰金 移动联通电信4G手机 双卡双待","price":"3788.00"}]
}

接口定义和实现

class HotGoodsView(View):"""商品热销排行"""def get(self, request, category_id):"""提供商品热销排行JSON数据"""# 根据销量倒序skus = models.SKU.objects.filter(category_id=category_id, is_launched=True).order_by('-sales')[:2]# 序列化hot_skus = []for sku in skus:hot_skus.append({'id':sku.id,'default_image_url':sku.default_image.url,'name':sku.name,'price':sku.price})return http.JsonResponse({'code':RETCODE.OK, 'errmsg':'OK', 'hot_skus':hot_skus})

渲染列表页热销排行数据

模板数据category_id传递到Vue.js

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

data: {category_id: category_id,
},

Ajax请求商品热销排行JSON数据

get_hot_skus(){if (this.category_id) {let url = '/hot/'+ this.category_id +'/';axios.get(url, {responseType: 'json'}).then(response => {this.hot_skus = response.data.hot_skus;for(let i=0; i<this.hot_skus.length; i++){this.hot_skus[i].url = '/detail/' + this.hot_skus[i].id + '/';}}).catch(error => {console.log(error.response);})}
},

渲染商品热销排行界面

<div class="new_goods" v-cloak><h3>热销排行</h3><ul><li v-for="sku in hot_skus"><a :href="sku.url"><img :src="sku.default_image_url"></a><h4><a :href="sku.url">[[ sku.name ]]</a></h4><div class="price">￥[[ sku.price ]]</div></li></ul>
</div>

项目实例代码

商品视图文件：apps/goods/views.py

"""
商品视图文件：apps/goods/views.py
"""
from django.shortcuts import render
from django.views import View
from contents.utils import get_categories         # 导入封装方法
from .utils import get_breadcrumb                 # 导入面包屑封装方法
from .models import GoodsCategory, SKU            # 导入模型
from django.views.generic import ListView          # 分页
from django.core.paginator import Paginator        # 分页
from django import http
from utils.response_code import RETCODE# 热销商品视图
class HotGoodsView(View):"""热销排行"""def get(self, request, category_id):"""返回两条热销商品"""skus = SKU.objects.filter(category_id=category_id, is_launched=True).order_by('-sales')[:2]  # 根据sales的逆序排序，并取前两个数据# 拼接数据,序列化hot_skus = []for sku in skus:sku_dict = {"id": sku.id,"default_image_url": sku.default_image_url.url,"name": sku.name,"price": sku.price,}hot_skus.append(sku_dict)          # 数据添加# print(hot_skus)""" 拼接数据之后的形式{"code":"0","errmsg":"OK","hot_skus":[{"id":6,"default_image_url":"http://image.meiduo.site:8888/group1/M00/00/02/CtM3BVrRbI2ARekNAAFZsBqChgk3141998","name":"Apple iPhone 8 Plus (A1864) 256GB 深空灰色 移动联通电信4G手机","price":"7988.00"},{"id":14,"default_image_url":"http://image.meiduo.site:8888/group1/M00/00/02/CtM3BVrRdMSAaDUtAAVslh9vkK04466364","name":"华为 HUAWEI P10 Plus 6GB+128GB 玫瑰金 移动联通电信4G手机 双卡双待","price":"3788.00"}]}"""return http.JsonResponse({'code': RETCODE.OK, 'errmsg': 'ok', 'hot_skus': hot_skus})class GoodsListView(View):"""商品列表页面"""def get(self, request, category_id, page_num):"""查询并渲染商品"""# category_id 是商品分类的idtry:# 查询面包屑category = GoodsCategory.objects.get(id=category_id)except Exception as e:return render(request, '404.html')# 获取排序规则  接收sort参数：如果用户不传，就是默认的排序规则sort = request.GET.get('sort', 'default')     # 根据字段sort查询if sort == 'price':                # 按照排序规则查询该分类商品SKU信息sort_field = 'price'           # 根据字段price的正序排列,价格由低到高elif sort == 'hot':sort_field = '-sales'          # 根据字段sales的倒序排列,销量由高到低else:                              # 当传输的排序方式不是上面的两种，需要让排序方式为默认的sort = 'default'sort_field = 'create_time'     # 根据create_time字段排序# 排序      根据category.id筛选，以sort_field排序skus = SKU.objects.filter(is_launched=True, category_id=category.id).order_by(sort_field)# print(skus)# 分页  Paginator('分页面的记录', '每页记录的条数')  创建分页器paginator = Paginator(skus, 5)# 获取page_num的页码的数据page_skus = paginator.page(page_num)# 总的页面数tatal_page = paginator.num_pages# 查询商品的类别categories = get_categories()breadcrumb = get_breadcrumb(category)                     # 调用封装的方法# print(breadcrumb)context = {"categories": categories,       # 频道分类"breadcrumb": breadcrumb,       # 面包屑导航"page_skus": page_skus,         # 分页后数据"tatal_page": tatal_page,       # 总页数"category_id": category_id,     # 商品类别id"sort": sort,                   # 排序字段,以何种方式排序"page_num": page_num,           # 当前页码}return render(request, 'list.html', context=context)        # 传递数据到前端界面list.html

商品模块的路由：apps/goods/urls.py

# -*- encoding: utf-8 -*-
"""
@File    : urls.py
@Time    : 2020/9/10 10:03
@Author  : chen商品模块的路由：apps/goods/urls.py
"""
from django.urls import path, include, re_path
from . import viewsapp_name = 'goods'urlpatterns = [re_path(r'^list/(?P<category_id>\d+)/(?P<page_num>\d+)/$', views.GoodsListView.as_view(), name='list'),re_path(r'^hot/(?P<category_id>\d+)/$', views.HotGoodsView.as_view()),
]

商品列表界面：templates/list.html

             <h3>热销排行</h3><ul>{#       热销产品的循环播放       vue的语法        #}<li v-for="sku in hot_skus"><a href="detail.html"><img :src="sku.default_image_url"></a><h4><a href="detail.html">[[  sku.name ]]</a></h4><div class="price">[[ sku.price ]]</div></li></ul>

2、商品搜索

全文检索方案Elasticsearch

全文检索和搜索引擎原理

商品搜索需求

当用户在搜索框输入商品关键字后，我们要为用户提供相关的商品搜索结果。

商品搜索实现

可以选择使用模糊查询like关键字实现。
但是like 关键字的效率极低。
查询需要在多个字段中进行，使用like关键字也不方便。

全文检索方案

我们引入全文检索的方案来实现商品搜索。
全文检索即在指定的任意字段中进行检索查询。
全文检索方案需要配合搜索引擎来实现。

搜索引擎原理

搜索引擎进行全文检索时，会对数据库中的数据进行一遍预处理，单独建立起一份索引结构数据。
索引结构数据类似新华字典的索引检索页，里面包含了关键词与词条的对应关系，并记录词条的位置。
搜索引擎进行全文检索时，将关键字在索引数据中进行快速对比查找，进而找到数据的真实存储位置。

结论：
搜索引擎建立索引结构数据，类似新华字典的索引检索页，全文检索时，关键字在索引数据中进行快速对比查找，进而找到数据的真实存储位置。

`Elasticsearch`介绍

实现全文检索的搜索引擎，首选的是Elasticsearch。

Elasticsearch 是用 Java 实现的，开源的搜索引擎。
它可以快速地储存、搜索和分析海量数据。维基百科、Stack Overflow、Github等都采用它。
Elasticsearch 的底层是开源库 Lucene。但是，没法直接使用 Lucene，必须自己写代码去调用它的接口。

分词说明

搜索引擎在对数据构建索引时，需要进行分词处理。
分词是指将一句话拆解成多个单字或词，这些字或词便是这句话的关键词。
比如：我是中国人; 分词后：我、是、中、国、人、中国等等都可以是这句话的关键字。
Elasticsearch 不支持对中文进行分词建立索引，需要配合扩展elasticsearch-analysis-ik来实现中文分词处理。

使用Docker安装Elasticsearch

获取Elasticsearch-ik镜像

# 从仓库拉取镜像
sudo docker image pull delron/elasticsearch-ik:2.4.6-1.0# 解压资料中本地镜像
sudo docker load -i elasticsearch-ik-2.4.6_docker.tar

配置Elasticsearch-ik

将资料中的elasticsearc-2.4.6目录拷贝到home目录下。
修改/home/xxx/elasticsearc-2.4.6/config/elasticsearch.yml第54行。
更改ip地址为本机真实ip地址。

3. 使用Docker运行Elasticsearch-ik

sudo docker run -dti --name=elasticsearch --network=host -v /home/xx/elasticsearch-2.4.6/config:/usr/share/elasticsearch/config delron/elasticsearch-ik:2.4.6-1.0

注意上面的文件路径需要根据自己的虚拟机路径来修改

Haystack扩展建立索引

Elasticsearch 的底层是开源库 Lucene。但是没法直接使用 Lucene，必须自己写代码去调用它的接口。

思考：

我们如何对接 Elasticsearch服务端？

解决方案：

Haystack

Haystack介绍和安装配置

Haystack介绍
• Haystack 是在Django中对接搜索引擎的框架，搭建了用户和搜索引擎之间的沟通桥梁。
• 我们在Django中可以通过使用 Haystack 来调用Elasticsearch搜索引擎。
• Haystack可以在不修改代码的情况下使用不同的搜索后端（比如Elasticsearch、Whoosh、Solr等等）。
Haystack安装

安装版本要确定，与上面的Elasticsearch-ik匹配

pip install django-haystack
pip install elasticsearch==2.4.1

Haystack注册应用和路由

INSTALLED_APPS = ['haystack', # 全文检索
]

总路由

path(r'search/', include('haystack.urls')),

Haystack配置
• 在配置文件中配置Haystack为搜索引擎后端

# Haystack
HAYSTACK_CONNECTIONS = {'default': {'ENGINE': 'haystack.backends.elasticsearch_backend.ElasticsearchSearchEngine','URL': 'http://192.168.232.142:9200/', # Elasticsearch服务器ip地址，端口号固定为9200'INDEX_NAME': 'lgshop', # Elasticsearch建立的索引库的名称},
}
# 当添加、修改、删除数据时，自动生成索引
HAYSTACK_SIGNAL_PROCESSOR = 'haystack.signals.RealtimeSignalProcessor'

HAYSTACK_SIGNAL_PROCESSOR 配置项保证了在Django运行起来后，有新的数据产生时，Haystack仍然可以让Elasticsearch实时生成新数据的索引。

项目实例代码

开发环境配置文件：dev.py

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles',# 'apps.users',                     # 在apps文件夹下的users模块进行app注册'users',                            # 用户模块'contents',                         # 网页首页模块，'verifications',                    # 验证码模块app'oauth',                            # 第三方登陆QQ的模块'areas',                            # 用户地址模块'goods',                            # 商品模块'haystack',                         # 全文检索
]# Haystack
HAYSTACK_CONNECTIONS = {'default': {'ENGINE': 'haystack.backends.elasticsearch_backend.ElasticsearchSearchEngine','URL': 'http://192.168.232.142:9200/',          # Elasticsearch服务器ip地址，端口号固定为9200'INDEX_NAME': 'lgshop',                         # Elasticsearch建立的索引库的名称},
}
# 当添加、修改、删除数据时，自动生成索引
HAYSTACK_SIGNAL_PROCESSOR = 'haystack.signals.RealtimeSignalProcessor'

项目总路由文件：shop/urls.py

'''
项目总路由文件：shop/urls.py
'''from django.contrib import admin
from django.urls import path, includeurlpatterns = [path('admin/', admin.site.urls),path('users/', include('users.urls')),    # 如果当时注册users模块时候没有使用sys.path.insert导入路径，这里就需要改为 'apps.users.urls'path('', include('contents.urls')),       # 首页路由path('', include('verifications.urls')),  # 验证码路由path('', include('oauth.urls')),          # QQ登陆路由path('', include('areas.urls')),          # 用户地址模块路由path('', include('goods.urls')),           # 商品模块总路由path(r'search/', include('haystack.urls')),     # 全文检索的总路由
]

商品搜索结果界面：templates/search/search.html

{#    商品搜索结果界面：templates/search/search.html   #}
{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>LG商城-商品搜索</title><link rel="stylesheet" type="text/css" href="{% static 'css/jquery.pagination.css' %}"><link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}"><link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"><script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script><script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script><script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
</head>
<body><div id="app"><div class="header_con"><div class="header" v-cloak><div class="welcome fl">欢迎来到LG商城!</div><div class="fr"><div v-if="username" class="login_btn fl">欢迎您：<em>[[ username ]]</em><span>|</span><a href="{{ url('users:logout' %}">退出</a></div><div v-else class="login_btn fl"><a href="{{ url('users:login' %}">登录</a><span>|</span><a href="{{ url('users:register' %}">注册</a></div><div class="user_link fl"><span>|</span><a href="{{ url('users:info' %}">用户中心</a><span>|</span><a href="cart.html">我的购物车</a><span>|</span><a href="user_center_order.html">我的订单</a></div></div></div></div><div class="search_bar clearfix"><a href="{{ url('contents:index' %}" class="logo fl"><img src="{% static 'images/1.png' %}"></a><div class="search_wrap fl"><form method="get" action="/search/" class="search_con"><input type="text" class="input_text fl" name="q" placeholder="搜索商品"><input type="submit" class="input_btn fr" name="" value="搜索"></form><ul class="search_suggest fl"><li><a href="#">索尼微单</a></li><li><a href="#">优惠15元</a></li><li><a href="#">美妆个护</a></li><li><a href="#">买2免1</a></li></ul></div></div><div class="main_wrap clearfix"><div class=" clearfix"><ul class="goods_type_list clearfix">{#      搜索的商品结果循环显示             #}{% for result in page %}<li>{# object取得才是sku对象 #}<a href="/detail/{{ result.object.id }}/"><img src="{{ result.object.default_image.url }}"></a><h4><a href="/detail/{{ result.object.id }}/">{{ result.object.name }}</a></h4><div class="operate"><span class="price">￥{{ result.object.price }}</span><span>{{ result.object.comments }}评价</span></div></li>{% empty %}<p>没有找到您要查询的商品。</p>{% endfor %}</ul><div class="pagenation"><div id="pagination" class="page"></div></div></div></div><div class="footer"><div class="foot_link"><a href="#">关于我们</a><span>|</span><a href="#">联系我们</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情链接</a></div><p>CopyRight © 2016 北京LG商业股份有限公司 All Rights Reserved</p><p>电话：010-****888    京ICP备*******8号</p></div></div><script type="text/javascript" src="{% static 'js/common.js' %}"></script><script type="text/javascript" src="{% static 'js/search.js' %}"></script><script type="text/javascript" src="{% static 'js/jquery.pagination.min.js' %}"></script><script type="text/javascript">$(function () {$('#pagination').pagination({currentPage: 1,totalPage: 3,callback:function (current) {{#location.href = '/search/?q=iphone&page=' + current;#}}})});</script>
</body>
</html>

3、Haystack建立数据索引

创建索引类
• 通过创建索引类，来指明让搜索引擎对哪些字段建立索引，也就是可以通过哪些字段的关键字来检索数据。
• 本项目中对SKU信息进行全文检索，所以在goods应用中新建search_indexes.py文件，用于存放索引类。

from haystack import indexes
from .models import SKU
class SKUIndex(indexes.SearchIndex, indexes.Indexable):"""SKU索引数据模型类"""text = indexes.CharField(document=True, use_template=True)def get_model(self):"""返回建立索引的模型类"""return SKUdef index_queryset(self, using=None):"""返回要建立索引的数据查询集"""return self.get_model().objects.filter(is_launched=True)

索引类SKUIndex说明：
• 在SKUIndex建立的字段，都可以借助Haystack由Elasticsearch搜索引擎查询。
• 其中text字段我们声明为 document=True，表名该字段是主要进行关键字查询的字段。
• text字段的索引值可以由多个数据库模型类字段组成，具体由哪些模型类字段组成，我们用use_template=True表示后续通过模板来指明。

创建text字段索引值模板文件
• 在templates目录中创建text字段使用的模板文件
• 具体在templates/search/indexes/goods/sku_text.txt文件中定义

{{ object.id }}
{{ object.name }}
{{ object.caption }}

模板文件说明：当将关键词通过text参数名传递时
• 此模板指明SKU的id、name、caption作为text字段的索引值来进行关键字索引查询。

手动生成初始索引

python manage.py rebuild_index

全文检索测试

准备测试表单
• 请求方法：GET
• 请求地址：/search/
• 请求参数：q

结论：错误提示告诉我们在templates/search/⽬录中缺少⼀个search.html⽂件 search.html⽂件作⽤就是接收和渲染全⽂检索的结果。

检索测试期间遇到的BUG问题及解决方案

Ubuntu虚拟机固定IP方法
https://my.oschina.net/u/2556916/blog/1509644
开启虚拟机的storage和tracker服务
django 报错：urllib3.exceptions.ConnectTimeoutError 问题解决方法
解答：之前运行docker容器还没有退出，导致出现容器重名情况：https://blog.csdn.net/u012129607/article/details/79616547
https://blog.csdn.net/qq_36662478/article/details/91044571

# 查看所有存在的进程
sudo docker container ls -all
# 删掉已经存在的elasticsearch进程号
sudo docker rm xxxxxx
# 开启storage
sudo docker start storage
# 开启tracker
sudo docker start tracker
# 重新创建elasticsearch进程
sudo docker run -dti --name=elasticsearch --network=host -v /home/ch/elasticsearch-2.4.6/config:/usr/share/elasticsearch/config delron/elasticsearch-ik:2.4.6-1.0# 查看最新的所有进程
sudo docker container ls

4、渲染商品搜索结果

准备商品搜索结果页面

渲染商品搜索结果
Haystack返回的数据包括：

query：搜索关键字
paginator：分页paginator 对象
page：当前页的page对象（遍历page中的对象，可以得到result对象）
result.objects: 当前遍历出来的SKU对象

Haystack搜索结果分页

设置每页返回数据条数

通过 HAYSTACK_SEARCH_RESULTS_PER_PAGE 可以控制每页显示数量
每页显示五条数据： HAYSTACK_SEARCH_RESULTS_PER_PAGE = 5

开发环境配置文件：dev.py

# 开发环境配置文件：dev.py# es搜索设置的分页每页数据条数
HAYSTACK_SEARCH_RESULTS_PER_PAGE = 5

准备搜索页分页器

搜索结果页面：templates/search/search.html

{#  搜索结果页面：templates/search/search.html  #}
{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>LG商城-商品搜索</title><link rel="stylesheet" type="text/css" href="{% static 'css/jquery.pagination.css' %}"><link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}"><link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"><script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script><script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script><script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
</head>
<body><div id="app"><div class="header_con"><div class="header" v-cloak><div class="welcome fl">欢迎来到LG商城!</div><div class="fr"><div v-if="username" class="login_btn fl">欢迎您：<em>[[ username ]]</em><span>|</span><a href="{{ url('users:logout' %}">退出</a></div><div v-else class="login_btn fl"><a href="{{ url('users:login' %}">登录</a><span>|</span><a href="{{ url('users:register' %}">注册</a></div><div class="user_link fl"><span>|</span><a href="{{ url('users:info' %}">用户中心</a><span>|</span><a href="cart.html">我的购物车</a><span>|</span><a href="user_center_order.html">我的订单</a></div></div></div></div><div class="search_bar clearfix"><a href="{{ url('contents:index' %}" class="logo fl"><img src="{% static 'images/1.png' %}"></a><div class="search_wrap fl"><form method="get" action="/search/" class="search_con"><input type="text" class="input_text fl" name="q" placeholder="搜索商品"><input type="submit" class="input_btn fr" name="" value="搜索"></form><ul class="search_suggest fl"><li><a href="#">索尼微单</a></li><li><a href="#">优惠15元</a></li><li><a href="#">美妆个护</a></li><li><a href="#">买2免1</a></li></ul></div></div><div class="main_wrap clearfix"><div class=" clearfix"><ul class="goods_type_list clearfix">{% for result in page %}<li>{# object取得才是sku对象 #}<a href="/detail/{{ result.object.id }}/"><img src="{{ result.object.default_image_url.url }}"></a><h4><a href="/detail/{{ result.object.id }}/">{{ result.object.name }}</a></h4><div class="operate"><span class="price">￥{{ result.object.price }}</span><span>{{ result.object.comments }}评价</span></div></li>{% empty %}<p>没有找到您要查询的商品。</p>{% endfor %}</ul><div class="pagenation"><div id="pagination" class="page"></div></div></div></div><div class="footer"><div class="foot_link"><a href="#">关于我们</a><span>|</span><a href="#">联系我们</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情链接</a></div><p>CopyRight © 2016 北京LG商业股份有限公司 All Rights Reserved</p><p>电话：010-****888    京ICP备*******8号</p></div></div><script type="text/javascript" src="{% static 'js/common.js' %}"></script><script type="text/javascript" src="{% static 'js/search.js' %}"></script><script type="text/javascript" src="{% static 'js/jquery.pagination.min.js' %}"></script><script type="text/javascript">$(function () {$('#pagination').pagination({currentPage: {{ page.number }},totalPage: {{ paginator.num_pages }},callback:function (current) {location.href = '/search/?q={{ query }}&page=' + current;}})});</script>
</body>
</html>

搜索页面样式文件： static/js/search.js文件

// 搜索页面样式文件： static/js/search.js文件
let vm = new Vue({el: '#app',delimiters: ['[[', ']]'],data: {username: getCookie('username'),},mounted(){},methods: {}
});

项目总路由文件：shop/urls.py

'''
项目总路由文件：shop/urls.py
'''from django.contrib import admin
from django.urls import path, includeurlpatterns = [path('admin/', admin.site.urls),path('users/', include('users.urls')),    # 如果当时注册users模块时候没有使用sys.path.insert导入路径，这里就需要改为 'apps.users.urls'path('', include('contents.urls')),       # 首页路由path('', include('verifications.urls')),  # 验证码路由path('', include('oauth.urls')),          # QQ登陆路由path('', include('areas.urls')),          # 用户地址模块路由path('', include('goods.urls')),           # 商品模块总路由path(r'search/', include('haystack.urls')),     # 全文检索的总路由，es固定的写法
]

5、商品详情页

商品详情页分析和准备

商品详情页组成结构分析

商品频道分类
已经提前封装在contents.utils.py⽂件中，直接调用方法即可。
面包屑导航
已经提前封装在goods.utils.py⽂件中，直接调用方法即可。
热销排行
该接口已经在商品列表页中实现完毕，前端直接调用接口即可。
商品SKU信息(详情信息)
通过sku_id可以找到SKU信息，然后渲染模板即可。
使用Ajax实现局部刷新效果。
SKU规格信息
通过SKU可以找到SPU规格和SKU规格信息。
商品详情介绍、规格与包装、售后服务
通过SKU可以找到SPU信息，SPU中可以查询出商品详情介绍、规格与包装、售后服务。
商品评价
商品评价需要在生成了订单，对订单商品进行评价后再实现，商品评价信息是动态数据。
使用Ajax实现局部刷新效果。

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

请求方式
请求参数：路径参数
响应结果：HTML
detail.html
接⼝定义

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

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

# 商品详情类
class DetailGoodsView(View):"""商品详情"""def get(self, request, sku_id):try:sku = SKU.objects.get(id=sku_id)          # 异常处理，sku_id获取的值异常时候except Exception as e:return render(request, '404.html')# 查询商品类别categories = get_categories()# 查询面包屑breadcrumb = get_breadcrumb(sku.category)# 传递数据context = {'categories': categories,'breadcrumb': breadcrumb,'sku': sku,'category_id': sku.category.id,}return render(request, 'detail.html', context=context)

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

商品详情页面文件：templates/detail.html

{#   商品详情页面文件：templates/detail.html        #}
{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>LG商城-商品详情</title><link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}"><link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"><script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script><script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
</head>
<body><div id="app"><div class="header_con"><div class="header" v-cloak><div class="welcome fl">欢迎来到LG商城!</div><div class="fr"><div v-if="username" class="login_btn fl">欢迎您：<em>[[ username ]]</em><span>|</span><a href="{{ url('users:logout' %}">退出</a></div><div v-else class="login_btn fl"><a href="{{ url('users:login' %}">登录</a><span>|</span><a href="{{ url('users:register' %}">注册</a></div><div class="user_link fl"><span>|</span><a href="{{ url('users:info' %}">用户中心</a><span>|</span><a href="cart.html">我的购物车</a><span>|</span><a href="user_center_order.html">我的订单</a></div></div></div>        </div><div class="search_bar clearfix"><a href="{{ url('contents:index' %}" class="logo fl"><img src="{% static 'images/logo.png' %}"></a><div class="search_wrap fl"><form method="get" action="/search/" class="search_con"><input type="text" class="input_text fl" name="q" placeholder="搜索商品"><input type="submit" class="input_btn fr" name="" value="搜索"></form><ul class="search_suggest fl"><li><a href="#">索尼微单</a></li><li><a href="#">优惠15元</a></li><li><a href="#">美妆个护</a></li><li><a href="#">买2免1</a></li></ul></div><div class="guest_cart fr"><a href="cart.html" class="cart_name fl">我的购物车</a><div class="goods_count fl" id="show_count">2</div><ul class="cart_goods_show"><li><img src="{% static 'images/goods/goods001.jpg' %}" alt="商品图片"><h4>华为 HUAWEI P10 Plus 6GB+64GB 钻雕金 移动联通电信4G手机 双卡双待</h4><div>1</div></li><li><img src="{% static 'images/goods/goods002.jpg' %}" alt="商品图片"><h4>Apple iPhoneX 64GB 深空灰色 移动联通电信4G手机</h4><div>1</div></li></ul>         </div></div><div class="navbar_con"><div class="navbar"><div class="sub_menu_con fl"><h1 class="fl">商品分类</h1>{#  apps/goods/views.py文件中传递的categories数据进行渲染    #}<ul class="sub_menu">{% for group in categories.values %}<li>{#      一级查询      #}<div class="level1">{% for channel in group.channels %}<a href="{{ channel.url }}">{{ channel.name }}</a>{% endfor %}</div><div class="level2">{#      二级查询      #}{% for cat2 in group.sub_cats %}<div class="list_group"><div class="group_name fl">{{ cat2.name }} &gt;</div><div class="group_detail fl">{#      三级查询      #}{% for cat3 in cat2.sub_cats %}<a href="/list/{{ cat3.id }}/1/">{{ cat3.name }}</a>{% endfor %}</div></div>{% endfor %}</div></li>{% endfor %}</ul></div><ul class="navlist fl"><li><a href="">首页</a></li><li class="interval">|</li><li><a href="">真划算</a></li><li class="interval">|</li><li><a href="">抽奖</a></li></ul></div></div>{#  面包屑标题展示：传输数据breadcrumb是由商品视图文件：apps/goods/views.py文件传输过来  #}<div class="breadcrumb">{#   breadcrumb.cat1.name  一级标题     #}<a href="http://shouji.jd.com/">{{ breadcrumb.cat1.name }}</a>{% if breadcrumb.cat2.name %}<span>></span><a href="javascript:;">{{ breadcrumb.cat2.name }}</a>{% endif %}{#   三级标题     #}{% if breadcrumb.cat3.name %}<span>></span><a href="javascript:;">{{ breadcrumb.cat3.name }}</a>{% endif %}</div><div class="goods_detail_con clearfix"><div class="goods_detail_pic fl"><img src="{{ sku.default_image_url.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>{% 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' option.sku_id %}">{{ option.value }}</a>{% else %}<a href="javascript:;">{{ option.value }}</a>{% endif %}{% endfor %}</div>{% endfor %}<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><div class="main_wrap clearfix"><div class="l_wrap fl clearfix"><div class="new_goods"><h3>热销排行</h3><ul>{#       热销产品的循环播放       vue的语法        #}<li v-for="sku in hot_skus"><a href="detail.html"><img :src="sku.default_image_url"></a><h4><a href="detail.html">[[  sku.name ]]</a></h4><div class="price">[[ sku.price ]]</div></li></ul></div></div><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"><li class="judge_list fl"><div class="user_info fl"><img src="{% static 'images/cat.jpg' %}"><b>张***厨</b></div><div class="judge_info fl"><div class="stars_five"></div><div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div></div></li>            </ul></div></div></div><div class="footer"><div class="foot_link"><a href="#">关于我们</a><span>|</span><a href="#">联系我们</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情链接</a>      </div><p>CopyRight © 2016 北京LG商业股份有限公司 All Rights Reserved</p><p>电话：010-****888    京ICP备*******8号</p></div></div><script type="text/javascript">let category_id = "{{ category_id }}";let sku_price = "{{ sku.price }}";let sku_id = "";</script><script type="text/javascript" src="{% static 'js/common.js' %}"></script><script type="text/javascript" src="{% static 'js/detail.js' %}"></script>
</body>
</html>

项目实例代码

商品视图文件：apps/goods/views.py

"""
商品视图文件：apps/goods/views.py
"""
from django.shortcuts import render
from django.views import View
from contents.utils import get_categories         # 导入封装方法
from .utils import get_breadcrumb                 # 导入面包屑封装方法
from .models import GoodsCategory, SKU            # 导入模型
from django.views.generic import ListView          # 分页
from django.core.paginator import Paginator        # 分页
from django import http
from utils.response_code import RETCODE# 商品详情类
class DetailGoodsView(View):"""商品详情"""def get(self, request, sku_id):try:sku = SKU.objects.get(id=sku_id)          # 异常处理，sku_id获取的值异常时候except Exception as e:return render(request, '404.html')# 查询商品类别categories = get_categories()# 查询面包屑breadcrumb = get_breadcrumb(sku.category)# 构建当前商品的规格键sku_specs = sku.specs.order_by('spec_id')      # specs外键，根据spec_id排序，从sku_specification表中查询# print(sku_specs)sku_key = []for spec in sku_specs:sku_key.append(spec.option.id)             # 添加默认选项# 获取当前商品的所有SKUskus = sku.spu.sku_set.all()                   # 查询tb_sku表# print(skus)# 构建不同规格参数（选项）的sku字典spec_sku_map = {}for s in skus:# 获取sku的规格参数s_specs = s.specs.order_by('spec_id')      # 查询的是tb_sku_specification表中数据print(s_specs)# ⽤于形成规格参数-sku字典的键key = []for spec in s_specs:key.append(spec.option.id)              # 添加option.id# 向规格参数-sku字典添加记录spec_sku_map[tuple(key)] = s.id             # key为字典，value值为s.id     {(1,4,7):1, (1,3,7):2}# 获取当前商品的规格信息goods_specs = sku.spu.specs.order_by('id') # spu为外键，specs是商品SPU规格模型中的related_name字段，查询tb_spu_specification表中数据# 若当前sku的规格信息不完整，则不再继续if len(sku_key) < len(goods_specs):returnfor index, spec in enumerate(goods_specs):       # enumerate()枚举    index是索引值，从0开始，spec是商品SPU规格内容# 复制当前sku的规格键key = sku_key[:]# 该规格的选项spec_options = spec.options.all()            # 查询的是tb_specification_option表中的数据for option in spec_options:# 在规格参数sku字典中查找符合当前规格的skukey[index] = option.idoption.sku_id = spec_sku_map.get(tuple(key))        # spec_sku_map是上面拼接的字典，字典根据元祖key取值，将值添加到属性sku_idspec.spec_options = spec_options            # 添加属性，spec是对象# 传递数据context = {'categories': categories,'breadcrumb': breadcrumb,'sku': sku,'category_id': sku.category.id,'goods_specs': goods_specs,             # 商品规格}return render(request, 'detail.html', context=context)# 热销商品视图
class HotGoodsView(View):"""热销排行"""def get(self, request, category_id):"""返回两条热销商品"""skus = SKU.objects.filter(category_id=category_id, is_launched=True).order_by('-sales')[:2]  # 根据sales的逆序排序，并取前两个数据# 拼接数据,序列化hot_skus = []for sku in skus:sku_dict = {"id": sku.id,"default_image_url": sku.default_image_url.url,"name": sku.name,"price": sku.price,}hot_skus.append(sku_dict)          # 数据添加# print(hot_skus)""" 拼接数据之后的形式{"code":"0","errmsg":"OK","hot_skus":[{"id":6,"default_image_url":"http://image.meiduo.site:8888/group1/M00/00/02/CtM3BVrRbI2ARekNAAFZsBqChgk3141998","name":"Apple iPhone 8 Plus (A1864) 256GB 深空灰色 移动联通电信4G手机","price":"7988.00"},{"id":14,"default_image_url":"http://image.meiduo.site:8888/group1/M00/00/02/CtM3BVrRdMSAaDUtAAVslh9vkK04466364","name":"华为 HUAWEI P10 Plus 6GB+128GB 玫瑰金 移动联通电信4G手机 双卡双待","price":"3788.00"}]}"""return http.JsonResponse({'code': RETCODE.OK, 'errmsg': 'ok', 'hot_skus': hot_skus})class GoodsListView(View):"""商品列表页面"""def get(self, request, category_id, page_num):"""查询并渲染商品"""# category_id 是商品分类的idtry:# 查询面包屑category = GoodsCategory.objects.get(id=category_id)except Exception as e:return render(request, '404.html')# 获取排序规则  接收sort参数：如果用户不传，就是默认的排序规则sort = request.GET.get('sort', 'default')     # 根据字段sort查询if sort == 'price':                # 按照排序规则查询该分类商品SKU信息sort_field = 'price'           # 根据字段price的正序排列,价格由低到高elif sort == 'hot':sort_field = '-sales'          # 根据字段sales的倒序排列,销量由高到低else:                              # 当传输的排序方式不是上面的两种，需要让排序方式为默认的sort = 'default'sort_field = 'create_time'     # 根据create_time字段排序# 排序      根据category.id筛选，以sort_field排序skus = SKU.objects.filter(is_launched=True, category_id=category.id).order_by(sort_field)# print(skus)# 分页  Paginator('分页面的记录', '每页记录的条数')  创建分页器paginator = Paginator(skus, 5)# 获取page_num的页码的数据page_skus = paginator.page(page_num)# 总的页面数tatal_page = paginator.num_pages# 查询商品的类别categories = get_categories()breadcrumb = get_breadcrumb(category)                     # 调用封装的方法# print(breadcrumb)context = {"categories": categories,       # 频道分类"breadcrumb": breadcrumb,       # 面包屑导航"page_skus": page_skus,         # 分页后数据"tatal_page": tatal_page,       # 总页数"category_id": category_id,     # 商品类别id"sort": sort,                   # 排序字段,以何种方式排序"page_num": page_num,           # 当前页码}return render(request, 'list.html', context=context)        # 传递数据到前端界面list.html

商品详情页面文件：templates/detail.html

{#   商品详情页面文件：templates/detail.html        #}
{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>LG商城-商品详情</title><link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}"><link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"><script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script><script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
</head>
<body><div id="app"><div class="header_con"><div class="header" v-cloak><div class="welcome fl">欢迎来到LG商城!</div><div class="fr"><div v-if="username" class="login_btn fl">欢迎您：<em>[[ username ]]</em><span>|</span><a href="{{ url('users:logout' %}">退出</a></div><div v-else class="login_btn fl"><a href="{{ url('users:login' %}">登录</a><span>|</span><a href="{{ url('users:register' %}">注册</a></div><div class="user_link fl"><span>|</span><a href="{{ url('users:info' %}">用户中心</a><span>|</span><a href="cart.html">我的购物车</a><span>|</span><a href="user_center_order.html">我的订单</a></div></div></div>        </div><div class="search_bar clearfix"><a href="{{ url('contents:index' %}" class="logo fl"><img src="{% static 'images/logo.png' %}"></a><div class="search_wrap fl"><form method="get" action="/search/" class="search_con"><input type="text" class="input_text fl" name="q" placeholder="搜索商品"><input type="submit" class="input_btn fr" name="" value="搜索"></form><ul class="search_suggest fl"><li><a href="#">索尼微单</a></li><li><a href="#">优惠15元</a></li><li><a href="#">美妆个护</a></li><li><a href="#">买2免1</a></li></ul></div><div class="guest_cart fr"><a href="cart.html" class="cart_name fl">我的购物车</a><div class="goods_count fl" id="show_count">2</div><ul class="cart_goods_show"><li><img src="{% static 'images/goods/goods001.jpg' %}" alt="商品图片"><h4>华为 HUAWEI P10 Plus 6GB+64GB 钻雕金 移动联通电信4G手机 双卡双待</h4><div>1</div></li><li><img src="{% static 'images/goods/goods002.jpg' %}" alt="商品图片"><h4>Apple iPhoneX 64GB 深空灰色 移动联通电信4G手机</h4><div>1</div></li></ul>         </div></div><div class="navbar_con"><div class="navbar"><div class="sub_menu_con fl"><h1 class="fl">商品分类</h1>{#  apps/goods/views.py文件中传递的categories数据进行渲染    #}<ul class="sub_menu">{% for group in categories.values %}<li>{#      一级查询      #}<div class="level1">{% for channel in group.channels %}<a href="{{ channel.url }}">{{ channel.name }}</a>{% endfor %}</div><div class="level2">{#      二级查询      #}{% for cat2 in group.sub_cats %}<div class="list_group"><div class="group_name fl">{{ cat2.name }} &gt;</div><div class="group_detail fl">{#      三级查询      #}{% for cat3 in cat2.sub_cats %}<a href="/list/{{ cat3.id }}/1/">{{ cat3.name }}</a>{% endfor %}</div></div>{% endfor %}</div></li>{% endfor %}</ul></div><ul class="navlist fl"><li><a href="">首页</a></li><li class="interval">|</li><li><a href="">真划算</a></li><li class="interval">|</li><li><a href="">抽奖</a></li></ul></div></div>{#  面包屑标题展示：传输数据breadcrumb是由商品视图文件：apps/goods/views.py文件传输过来  #}<div class="breadcrumb">{#   breadcrumb.cat1.name  一级标题     #}<a href="http://shouji.jd.com/">{{ breadcrumb.cat1.name }}</a>{% if breadcrumb.cat2.name %}<span>></span><a href="javascript:;">{{ breadcrumb.cat2.name }}</a>{% endif %}{#   三级标题     #}{% if breadcrumb.cat3.name %}<span>></span><a href="javascript:;">{{ breadcrumb.cat3.name }}</a>{% endif %}</div><div class="goods_detail_con clearfix"><div class="goods_detail_pic fl"><img src="{{ sku.default_image_url.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>{% for spec in goods_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' option.sku_id %}">{{ option.value }}</a>{% else %}<a href="javascript:;">{{ option.value }}</a>{% endif %}{% endfor %}</div>{% endfor %}{#  sku_amount是detail.js文件中计算的价格，传输过来的 ；v-cloak是为了解决页面加载显示顺序的bug    #}<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><div class="main_wrap clearfix"><div class="l_wrap fl clearfix"><div class="new_goods"><h3>热销排行</h3><ul>{#       热销产品的循环播放       vue的语法        #}<li v-for="sku in hot_skus"><a href="detail.html"><img :src="sku.default_image_url"></a><h4><a href="detail.html">[[  sku.name ]]</a></h4><div class="price">[[ sku.price ]]</div></li></ul></div></div><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>{#     desc_detail 、desc_pack、desc_service是apps/goods/models.py 文件中的SPU模型字段内容    #}<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"><li class="judge_list fl"><div class="user_info fl"><img src="{% static 'images/cat.jpg' %}"><b>张***厨</b></div><div class="judge_info fl"><div class="stars_five"></div><div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div></div></li>         </ul></div></div></div><div class="footer"><div class="foot_link"><a href="#">关于我们</a><span>|</span><a href="#">联系我们</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情链接</a>      </div><p>CopyRight © 2016 北京LG商业股份有限公司 All Rights Reserved</p><p>电话：010-****888    京ICP备*******8号</p></div></div><script type="text/javascript">let category_id = "{{ category_id }}";let sku_price = "{{ sku.price }}";let sku_id = "";</script><script type="text/javascript" src="{% static 'js/common.js' %}"></script><script type="text/javascript" src="{% static 'js/detail.js' %}"></script>
</body>
</html>

Django项目实战——14—(列表页热销排行、商品搜索、Haystack建立数据索引、渲染商品搜索结果、商品详情页)相关推荐

Django项目实战——用户投票系统(三)
Django项目实战--用户投票系统(三) 承接上文官方文档链接附上: 编写你的第一个 Django 应用,第 3 部分 | Django 文档 | Django (djangoproject.co ...
电商项目实战第六节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【页底信息，网站备案信息】
上一节:电商项目实战第五节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[商品栏及右侧垂直导航] 文章目录电商项目实战第六节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[页 ...
flutter 项目实战四列表数据展示
本项目借用逛丢网站的部分数据,仅作为 flutter 开发学习之用. 逛丢官方网址:https://guangdiu.com/ flutter windows开发环境设置 flutter 项目实战 ...
Django项目实战：CMDB资产扫描和DevOPS自动化运维
文章目录项目实战:CMDB自动化资产扫描和自动化运维 1.项目介绍 2.项目技术分析运维自动化难点和痛点项目技术难点整体工程设计 3.项目环境搭建项目环境要求项目环境的搭建项目目录的配置 ...
python django项目实例_最新Django项目实战-从零开发NB的任务平台python视频学习教程...
saas导学视频 .mp4 │ 模态框.zip │ ├─day01 │ │ 01 day01 sass项目介绍 .mp4 │ │ 02 day01 sass项目演示 .mp4 │ │ 04 day01 ...
Django项目实战（一）项目准备
今天开始将更新Django项目专栏,此次项目是电商项目,具体页面效果等最后完成时更新,有需要的朋友可以点个关注哦! 开发模式选项技术选型开发模式前后端不分离后端框架 Django 前端框架 ...
Django项目实战: Django + PyPDF2实现PDF页面提取和PDF文件输出
在日常工作中我们经常需要从一个大的PDF文档中提取我们所需要的页面,所以今天我们将教你用Django + PyPDF2开发个小Web应用: 用户上传一个PDF文档,输入需要提取的页面号码,点击确定后浏 ...
Django项目实战(附源码免费下载)
制作图书管理系统(末尾附源码) 第一步先更改settings.py里面的必要配置,更改或附件项如下 INSTALLED_APPS = ['django.contrib.admin','django.c ...
HBase项目实战：HBase+Flume+Kafka+Hive+SSM实现电信大数据通话信息实时读写定位系统
内容简介一.项目内容深度分析 1. 项目内容概览 2.数据的大致流向分析 3. 涉及的知识难点分析二.项目所用到的框架清单三.项目实战代码 1. 后端开发 1. 构建工程项目模块 2.开发通话记 ...

Django项目实战——14—(列表页热销排行、商品搜索、Haystack建立数据索引、渲染商品搜索结果、商品详情页)

1、列表页热销排行

查询列表页热销排行数据

渲染列表页热销排行数据

项目实例代码

2、商品搜索

全文检索方案Elasticsearch

`Elasticsearch`介绍

使用Docker安装Elasticsearch

Haystack扩展建立索引

Haystack介绍和安装配置

项目实例代码

3、Haystack建立数据索引

全文检索测试

检索测试期间遇到的BUG问题及解决方案

4、渲染商品搜索结果

准备商品搜索结果页面

Haystack搜索结果分页

5、商品详情页

商品详情页分析和准备

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

项目实例代码

Django项目实战——14—(列表页热销排行、商品搜索、Haystack建立数据索引、渲染商品搜索结果、商品详情页)相关推荐

最新文章

热门文章

Django项目实战——14—(列表页热销排行、商品搜索、Haystack建立数据索引、渲染商品搜索结果、商品详情页)

1、列表页热销排行

查询列表页热销排行数据

渲染列表页热销排行数据

项目实例代码

2、商品搜索

全文检索方案Elasticsearch

Elasticsearch介绍

使用Docker安装Elasticsearch

Haystack扩展建立索引

Haystack介绍和安装配置

项目实例代码

3、Haystack建立数据索引

全文检索测试

检索测试期间遇到的BUG问题及解决方案

4、渲染商品搜索结果

准备商品搜索结果页面

Haystack搜索结果分页

5、商品详情页

商品详情页分析和准备

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

项目实例代码

Django项目实战——14—(列表页热销排行、商品搜索、Haystack建立数据索引、渲染商品搜索结果、商品详情页)相关推荐

最新文章

热门文章

`Elasticsearch`介绍