一、热销数据功能实现

1.后台查询代码

class HotView(View):

    def get(self,request,category_id):
        #  1.获取分类id
        # 2.查询是否有当前分类
        try:
            category=GoodsCategory.objects.get(id=category_id)
        except Exception as e:
            return http.JsonResponse({'code':RETCODE.NODATAERR,'errmsg':'暂无此分类'})
        # 3.根据分类去查询指定的数据,并进行排序,排序之后获取n条
        skus = SKU.objects.filter(category=category,is_launched=True).order_by('-sales')[:2]
        # 4.ajax 把对象列表转换为字典列表
        skus_list = []
        for sku in skus:
            skus_list.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':skus_list})

二、热销数据信息展示

1.前台html代码

<script type="text/javascript">
    let category_id="{{ category.id }}"
</script>
<ul>
    <li v-for="sku in hots">
        <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>

vue相关接口请求代码

var vm = new Vue({
    el: '#app',
    // 修改Vue变量的读取语法，避免和django模板语法冲突
    delimiters: ['[[', ']]'],
    data: {
        host,
        cart_total_count: 0, // 购物车总数量
        carts: [], // 购物车数据,
        hots: [],
        category_id: category_id,
        username: '',
    },
    mounted(){
        // 获取热销商品数据
        this.get_hot_goods();
        this.username = getCookie('username');
    },
    methods: {
        // 获取热销商品数据
        get_hot_goods(){
            var url = this.host + '/hot/' + this.category_id + '/';
            axios.get(url, {
                responseType: 'json'
            })
                .then(response => {
                    this.hots = response.data.hot_skus;
                    for (var i = 0; i < this.hots.length; i++) {
                        this.hots[i].url = '/goods/' + this.hots[i].id + '.html';
                    }
                })
                .catch(error => {
                    console.log(error.response);
                })
        }
    }
});

2.实际效果