Django+Vue打造购物网站(四)

首页商品类别数据显示

商品分类接口

大概需要两个,一个显示三个类别

一个显示类别及类别下的全部商品

现在开始写商品的接口

首先编写三个分类的serializer

class CategorySerializer3(serializers.ModelSerializer):
'''
三级分类
''' class Meta:
model = GoodsCategory
fields = "__all__"class CategorySerializer2(serializers.ModelSerializer):
'''
二级分类
'''
# 在parent_category字段中定义的related_name="sub_cat"
sub_cat = CategorySerializer3(many=True) class Meta:
model = GoodsCategory
fields = "__all__"class CategorySerializer(serializers.ModelSerializer):
"""
商品一级类别序列化
"""
sub_cat = CategorySerializer2(many=True) class Meta:
model = GoodsCategory
fields = "__all__"


然后编写视图函数

class CategoryViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
'''
list:
商品分类列表数据
''' queryset = GoodsCategory.objects.filter(category_type=1)
serializer_class = CategorySerializer


配置url

# 配置Category的url
router.register(r'categorys', CategoryViewSet, base_name="categorys")


注释的内容会显示在文档中

mixins.RetrieveModelMixin可以查看单个分类

前面已经配置过文档的url了

vue展示商品分类数据

接口相关代码都放在src/api/api.js里面，调试接口的时候我们首先需要新建一个自己的host，然后替换要调试的host

let local_host = 'http://127.0.0.1:8000'


替换商品类别默认的host

//获取商品类别信息
export const getCategory = params => {
if('id' in params){
return axios.get(`${local_host}/categorys/`+params.id+'/');
}
else {
return axios.get(`${local_host}/categorys/`, params);
}
};


打开浏览器,可以看到,数据并没有显示出来,

是因为这涉及到了跨域问题，接下来就解决跨域的问题

后端服务器解决跨域问题的方法

https://github.com/ottoyiu/django-cors-headers

安装模块

pip install django-cors-headers


添加到INSTALL_APPS中

INSTALLED_APPS = (
'corsheaders',
)


添加中间件

CorsMiddleware应尽可能放置，特别是在可以生成响应的任何中间件之前，例如Django CommonMiddleware或Whitenoise WhiteNoiseMiddleware。如果不是之前，它将无法将CORS标头添加到这些响应中。

此外，如果你使用CORS_REPLACE_HTTPS_REFERER它应该放在Django之前CsrfViewMiddleware（见下文）

这里放在最前面

MIDDLEWARE = [
# 跨域
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]


在Django设置中配置了中间件。您必须添加允许执行跨站点请求的主机 CORS_ORIGIN_WHITELIST，或者设置CORS_ORIGIN_ALLOW_ALL以True 允许所有主机。

这里先允许所有主机跨域,等部署后可以直接将主机ip或域名添加到CORS_ORIGIN_WHITELIST中

# 跨域
CORS_ORIGIN_ALLOW_ALL = True


打开浏览器进行访问,会发现导航里面没有数据,这是因为后台没有进行设置,需要在后台进行设置

vue展示商品列表页数据

商品列表页会判断我们是serach还是getGoods

getListData() {
if(this.pageType=='search'){
getGoods({
search: this.searchWord, //搜索关键词
}).then((response)=> {
this.listData = response.data.results;
this.proNum = response.data.count;
}).catch(function (error) {
console.log(error);
});
}else {
getGoods({
page: this.curPage, //当前页码
top_category: this.top_category, //商品类型
ordering: this.ordering, //排序类型
pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间
pricemax: this.pricemax // 价格最高 默认为‘’
}).then((response)=> { this.listData = response.data.results;
this.proNum = response.data.count;
}).catch(function (error) {
console.log(error);
});
} },


根据前端内容修改后端分页的参数

class GoodsPagination(PageNumberPagination):
'''
商品列表自定义分页
'''
# 默认每页显示的个数
page_size = 12
# 可以动态改变每页显示的个数
page_size_query_param = 'page_size'
# 页码参数 http://127.0.0.1:8000/goods/?page=2&page_size=30
page_query_param = 'page'
# 每页最多能显示多少体条
# 仅当 page_size_query_param 设置时有效
max_page_size = 20


通过vue代码可以看到url参数中有一个top_category

需要给这个参数添加过滤方法

class GoodsFilter(django_filters.rest_framework.FilterSet):
'''
商品过滤的类
'''
# 两个参数，field_name是要过滤的字段，lookup是执行的行为，‘小与等于本店价格’
pricemin = django_filters.NumberFilter(field_name="shop_price", lookup_expr='gte', label='最低价')
pricemax = django_filters.NumberFilter(field_name="shop_price", lookup_expr='lte', label='最高价')
top_category = django_filters.NumberFilter(method='top_category_filter', label='分类ID') # 自定义过滤方法,不管当前点击的是一级分类二级分类还是三级分类，都能找到。
def top_category_filter(self, queryset, name, value):
return queryset.filter(Q(category_id=value) | Q(category__parent_category_id=value) | Q(
category__parent_category__parent_category_id=value)) class Meta:
model = Goods
fields = ['pricemin', 'pricemax']


通过浏览器可以进行测试

在后台查找某一分类下的商品,然后在前台点击进行对比

修改排序

前台是按照销量和价格进行排序的,修改后端代码

#排序
ordering_fields = ('sold_num', 'shop_price')


分类过滤

价格区间过滤

显示商品数量

分页

搜索