【Vue+DRF生鲜电商】30.首页轮播图、新品展示功能

# 首页、商品相关功能 接下来把Django运行到本地，Vue也运行到本地 首先修改Django虚拟环境  修改运行环境  然后以Debug运行起来，浏览器访问 http://127.0.0.1:8000/ 看是否显示API就可以了 将Vue中 src/api/api.js 修改到本地 ```JavaScript let local_host = 'http://localhost:8000'; //let local_host = 'http://xx.ip.ip.xx:8000'; ``` 启用Vue本地服务器，访问 http://127.0.0.1:8080/ 看能否正常加载Vue项目即可。 重新打包Vue项目`> cnpm run build`，将 dist 目录下的 index.entry.js 文件复制到Django项目 static 目录下。 由于本地启动到 http://127.0.0.1:8000/ 上，代理Vue运行后，调用 http://localhost:8000 就会出现跨域问题，解决办法：1是修改`local_host`，2是修改 DjangoOnlineFreshSupermarket/settings.py 中的`CORS_ORIGIN_WHITELIST`，增加`'localhost:8000',` ```python # 跨域CORS设置 # CORS_ORIGIN_ALLOW_ALL = False # 默认为False，如果为True则允许所有连接 CORS_ORIGIN_WHITELIST = ( # 配置允许访问的白名单 'localhost:8080', 'localhost:8000', '127.0.0.1:8080', '127.0.0.1:8000', ) ``` 之后访问就正常了。 分析：首页有轮播图、新品，商品列表  首页Index中有Banner和NewP、SeriesList为一些列首页显示的商品 也就是需要3个接口：轮播图、新品、首页商品列表 ## 首页轮播图 ### BannerSerializer创建轮播图序列化类 在 apps/goods/serializers.py 中添加 `BannerSerializer` ```python from .models import Goods, GoodsCategory, GoodsImage, Banner class BannerSerializer(serializers.ModelSerializer): class Meta: model = Banner fields = "__all__" ``` ### BannerViewSet轮播图显示 在 apps/goods/views.py 添加 `BannerViewSet` ```python from .models import Goods, GoodsCategory, Banner from .serializers import GoodsSerializer, CategorySerializer, ParentCategorySerializer, BannerSerializer class BannerViewSet(mixins.ListModelMixin, viewsets.GenericViewSet): """ list: 获取轮播图列表 """ queryset = Banner.objects.all() serializer_class = BannerSerializer ``` ### 添加轮播图路由 ```python from goods.views import GoodsListView, GoodsListViewSet, CategoryViewSet, ParentCategoryViewSet, BannerViewSet # 注册轮播图url router.register(r'banners', BannerViewSet, base_name='banners') # 首页轮播图 ``` 接下来访问 http://127.0.0.1:8000/banners/ 接口  什么都没显示，接下来访问后台添加一些轮播图 http://127.0.0.1:8000/admin/goods/banner/add/  百度随意找一些添加进去，然后刷新 http://127.0.0.1:8000/banners/ 就可以看到API中的列表了  ### Vue轮播图接口联调 刷新Vue的 http://127.0.0.1:8080/#/app/home/index 首页  进入首页后，引用了 src/views/index/banners.vue 这个组件，当这个组件创建时 ```JavaScript created() { this.getBanner(); } ``` 调用`getBanner()`方法 ```JavaScript getBanner() { bannerGoods() .then((response) => { //console.log(response) // 跳转到首页页response.body面 this.banners = response.data }) .catch(function (error) { console.log(error); }); } ``` 这儿会调用`bannerGoods()`，也就是 src/api/api.js 中的接口 ```JavaScript //获取轮播图 export const bannerGoods = params => { return axios.get(`${local_host}/banners/`) }; ``` 拿到数据后赋值给`banners` ```html <swiper :options="swiperOption"> <swiper-slide v-for="item in banners" :key="item.goods"> <router-link :to="'/app/home/productDetail/'+item.goods" target=_blank><img :src="item.image" alt=""/> </router-link> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> ``` 循环显示所有数据。点击图片就可以跳转到对应的商品。 ## 首页新品展示 对于新品，可以直接使用商品列表的接口。因为在`Goods`的models中有一个字段是`is_new = models.BooleanField(default=False, verbose_name='是否新品', help_text='是否新品')`，如果是要显示新品，无非是直接过滤商品中`is_new`是非为`True`即可。 ### GoodsFilter过滤器增加新品过滤 在 apps/goods/views.py 中的`GoodsListViewSet`，过滤器是使用的`filterset_class = GoodsFilter`，可以直接添加`is_new`这个字段 ```python class GoodsFilter(filters.FilterSet): """ 商品的过滤类 """ name = filters.CharFilter(field_name='name', lookup_expr='contains', help_text='分类名模糊匹配') # 包含关系，模糊匹配 goods_desc = filters.CharFilter(field_name='name', lookup_expr='contains', help_text='商品描述模糊匹配') min_price = filters.NumberFilter(field_name="shop_price", lookup_expr='gte', help_text='最低价格') # 自定义字段 max_price = filters.NumberFilter(field_name="shop_price", lookup_expr='lte', help_text='最高价格') top_category = filters.NumberFilter(method='top_category_filter', field_name='category_id', lookup_expr='=', help_text='自定义过滤某个一级分类') # 自定义过滤，过滤某个一级分类 def top_category_filter(self, queryset, field_name, value): """ 自定义过滤内容 这儿是传递一个分类的id，在已有商品查询集基础上获取分类id，一级一级往上找，直到将三级类别找完 :param queryset: :param field_name: :param value: 需要过滤的值 :return: """ queryset = queryset.filter(Q(category_id=value) | Q(category__parent_category_id=value) | Q(category__parent_category__parent_category_id=value)) return queryset class Meta: model = Goods fields = ['name', 'goods_desc', 'min_price', 'max_price', 'is_hot', 'is_new'] ``` 然后刷新 http://127.0.0.1:8000/goods/ 点击过滤器就可以就行该字段过滤了  没有内容因为数据库中没有设置新品  随意在数据库中把一些商品标记为新品即可  刷新API页面，就能正常显示了  ### Vue新品接口联调 在Vue中，新品放在 src/views/index/new.vue 组件中，index调用这个组件时，会调用`getOpro()`方法 ```JavaScript getOpro() { getGoods({ "is_new": "true" }) .then((response) => { //跳转到首页页response.body面 this.newopro = response.data.results }) .catch(function (error) { console.log(error); }); } ``` 然后调用 `getGoods`，实际上也是调用商品列表 ```JavaScript //获取商品列表 export const getGoods = params => { return axios.get(`${local_host}/goods/`, {params: params}) }; ``` 只是传递了`"is_new": "true"`这个参数，由于返回的结果`response.data`商品列表进行了分页，需要使用`response.data.results`才能正确取到值 将这些商品显示出来 ```html <li class="prolist-cent clearfix have_num" v-for="item in newopro"> <div class="prolist-l fl"> <router-link :to="'/app/home/productDetail/'+item.id" target=_blank> <a :title="item.name" class="imgBox"> <img :src="item.goods_front_image" style="height: 158px;width: 158px;" class="zom" :alt="item.name"> </a> </router-link> </div> <div class="prolist-r fl"> <h3 class="ft14 c333 bold"> <router-link :to="'/app/home/productDetail/'+item.id" :title="item.name" target=_blank> {{item.name}} </router-link> </h3> <p><em class="c333"></em>{{item.goods_brief}}</p> <div> <span class="p-price"><em class="fastbuy_price">￥{{item.shop_price}}元</em><del>原价:￥{{item.market_price}}元</del></span> <router-link :to="'/app/home/productDetail/'+item.id" target=_blank> <a class="p-buy fr ibg">立即抢购</a> </router-link> <span class="p-time fr">销量：{{item.sold_num}}件</span> </div> </div> </li> ```  点击商品的链接，即可跳转到商品详情页。

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/e165421110ba03099a1c0393373c5b43/

很赞哦！ (1)