美多商城之商品
Posted 风姿--惊鸿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了美多商城之商品相关的知识，希望对你有一定的参考价值。
美多商城之商品（2）
1.商品搜索
1.1.全文检索方案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/python/elasticsearc-2.4.6/config/elasticsearch.yml第54行。
- 更改ip地址为本机真实ip地址。
-
使用Docker运行Elasticsearch-ik
$ sudo docker run -dti --name=elasticsearch --network=host -v /home/python/elasticsearch-2.4.6/config:/usr/share/elasticsearch/config delron/elasticsearch-ik:2.4.6-1.0
-
1.2.Haystack扩展建立索引
提示：
- Elasticsearch 的底层是开源库 Lucene。但是没法直接使用 Lucene，必须自己写代码去调用它的接口。
思考：
- 我们如何对接 Elasticsearch服务端？
解决方案：
- Haystack
-
Haystack介绍和安装配置
-
Haystack介绍
- Haystack 是在Django中对接搜索引擎的框架，搭建了用户和搜索引擎之间的沟通桥梁。
- 我们在Django中可以通过使用 Haystack 来调用 Elasticsearch 搜索引擎。
- Haystack 可以在不修改代码的情况下使用不同的搜索后端（比如 Elasticsearch、Whoosh、Solr等等）。
-
Haystack安装
$ pip install django-haystack==2.7.0 $ pip install elasticsearch==2.4.1 -
Haystack注册应用和路由
INSTALLED_APPS = [ 'haystack', # 全文检索 ] url(r'^search/', include('haystack.urls')), -
Haystack配置
在配置文件中配置Haystack为搜索引擎后端
# Haystack HAYSTACK_CONNECTIONS = 'default': 'ENGINE': 'haystack.backends.elasticsearch_backend.ElasticsearchSearchEngine', 'URL': 'http://192.168.103.158:9200/', # Elasticsearch服务器ip地址，端口号固定为9200 'INDEX_NAME': 'meiduo_mall', # Elasticsearch建立的索引库的名称 , # 当添加、修改、删除数据时，自动生成索引 HAYSTACK_SIGNAL_PROCESSOR = 'haystack.signals.RealtimeSignalProcessor'重要提示：
- HAYSTACK_SIGNAL_PROCESSOR 配置项保证了在Django运行起来后，有新的数据产生时，Haystack仍然可以让Elasticsearch实时生成新数据的索引
-
-
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 SKU def 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
<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>
-
-
全文检索测试结果
-
- 结论：
- 错误提示告诉我们在templates/search/目录中缺少一个search.html文件
- search.html文件作用就是接收和渲染全文检索的结果。
1.3.渲染商品搜索结果
-
准备商品搜索结果页面
-
渲染商品搜索结果
-
Haystack返回的数据包括：
- query：搜索关键字
- paginator：分页paginator对象
- page：当前页的page对象（遍历page中的对象，可以得到result对象）
- result.objects: 当前遍历出来的SKU对象。
<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> % else % <p>没有找到您要查询的商品。</p> % endfor % </ul> <div class="pagenation"> <div id="pagination" class="page"></div> </div> </div> </div>
-
-
Haystack搜索结果分页
-
设置每页返回数据条数
- 通过HAYSTACK_SEARCH_RESULTS_PER_PAGE可以控制每页显示数量
- 每页显示五条数据：HAYSTACK_SEARCH_RESULTS_PER_PAGE = 5
-
准备搜索页分页器
<div class="main_wrap clearfix"> <div class=" clearfix"> ...... <div class="pagenation"> <div id="pagination" class="page"></div> </div> </div> </div> <script type="text/javascript"> $(function () $('#pagination').pagination( currentPage: page.number , totalPage: paginator.num_pages , callback:function (current) #window.location.href = '/search/?q=iphone&page=1';# window.location.href = '/search/?q= query &page=' + current; ) ); </script>
-
2.商品详情页
2.1.商品详情页分析和准备
- 商品详情页组成结构分析
-
商品频道分类
- 已经提前封装在contents.utils.py文件中，直接调用方法即可。
-
面包屑导航
- 已经提前封装在goods.utils.py文件中，直接调用方法即可。
-
热销排行
- 该接口已经在商品列表页中实现完毕，前端直接调用接口即可。
-
商品SKU信息(详情信息)
- 通过sku_id可以找到SKU信息，然后渲染模板即可。
- 使用Ajax实现局部刷新效果。
-
SKU规格信息
- 通过SKU可以找到SPU规格和SKU规格信息。
-
商品详情介绍、规格与包装、售后服务
- 通过SKU可以找到SPU信息，SPU中可以查询出商品详情介绍、规格与包装、售后服务。
-
商品评价
- 商品评价需要在生成了订单，对订单商品进行评价后再实现，商品评价信息是动态数据。
- 使用Ajax实现局部刷新效果。
-
- 商品详情页接口设计和定义
- 请求方式
| 选项 | 方案 |
|---|---|
| 请求方法 | GET |
| 请求地址 | /detail/(?P<sku_id>\\d+)/ |
2. 请求参数：路径参数
| 参数名 | 类型 | 是否必传 | 说明 |
|---|---|---|---|
| sku_id string | 是 | 商品SKU编号 |
3. 响应结果：HTML
detail.html
4. 接口定义
class DetailView(View):
"""商品详情页"""
def get(self, request, sku_id):
"""提供商品详情页"""
return render(request, 'detail.html')
- 商品详情页初步渲染
-
渲染商品频道分类、面包屑导航、商品热销排行
- 将原先在商品列表页实现的代码拷贝到商品详情页即可。
- 添加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, ,
-
2.2.展示详情页数据
-
查询和渲染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, , -
查询和渲染SKU规格信息
-
查询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.以上是关于美多商城之商品的主要内容，如果未能解决你的问题，请参考以下文章
-