【愚公系列】2022年01月 Django商城项目 25-热销数据功能实现
【愚公系列】2022年01月 Django商城项目 25-热销数据功能实现
愚公搬代码
发布于 2022-02-01 09:34:19
发布于 2022-02-01 09:34:19
文章目录
一、热销数据功能实现
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.实际效果
在这里插入图片描述
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-01-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录