17- 项目梳理-商品列表--product

创建子应用

# 1. 新建product子应用
      python manage.py startapp product
 
# 2. 注册子应用
 
# 3. 子应用新建urls.py; 主应用urls绑定子应用urls.py
      re_path(r'^', include(('product.urls', 'product'), namespace='product')),

新建uitls.py工具类

# 获取分类
# category是ProductCateGory的数据对象
def daohang(category):
    dict = {"category1": "", "category2": "", "category3": ""}
    # 判断该条分类数据有没有父类
    if category.parent is None:
        # 是一级分类
        dict["category1"] = category
    elif category.subs.count() == 0:
        # 是三级分类
        dict["category3"] = category
        dict["category2"] = category.parent  # 二级分类的数据
        dict["category1"] = category.parent.parent  # 以及分类的数据
 
    return dict

创建视图函数

 
class ProductListView(View):
    # 打开列表页面  categoryId:三级分类id
    def get(self, request, categoryId, pageNum):
        try:
            category = ProdctCategory.objects.get(id=categoryId)
        except Exception:
            return HttpResponseNotFound("分类不存在")
 
        # sort排序方式, default默认 --id price价格  hot--sale_count
        sort = request.GET.get("sort", "default")
        # 根据sort传值,查询sku数据
        if sort == "price":
            paixu = "price"
        elif sort == "hot":  # 销量,从大到小
            paixu = "-sale_count"
        else:
            sort = "default"
            paixu = "id"
 
        # 查询商品数据sku
        products = ProductSku.objects.filter(category=category, is_shop=True).order_by(paixu)
        # 分页对象
        pg = Paginator(products, 5)
 
        # 获取每一页数据
        try:
            products_page = pg.page(pageNum)
        except Exception:
            return HttpResponseNotFound("分页不存在")
 
        # 总共页数
        totalPages = pg.num_pages
 
        # 分类数据,导航数据
        data = {
            "categories": product_category(),
            "daohang": daohang(category),
            "sort": sort,
            "category": category,  # 三级分类
            "products_page": products_page,
            "totalPages": totalPages,
            "pageNum": pageNum,  # 当前所在页
 
        }
        return render(request, "product/product_list.html", context=data)

创建路由

urlpatterns = [
    re_path(r'productList/(?P<categoryId>\d+)/(?P<pageNum>\d+)/$', ProductListView.as_view(), name="productList"),
    ]

编写product.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>喵喵商城-商品列表</title>
    <link rel="stylesheet" type="text/css" href="{{ static('css/jquery.pagination.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
    <script type="text/javascript" src="{{ static('js/jquery-1.12.4.min.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/utils.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/jquery.pagination.min.js') }}"></script>
</head>
<body>
<div id="app">
    <div class="header_con">
        <div class="header" v-cloak>
            <div class="welcome fl">欢迎来到喵喵商城</div>
            <div class="fr">
                <div class="login_btn fl" v-show="flag1">
                    欢迎您：<em>{[ username ]}</em>
                    <span>|</span>
                    <a href="{{ url('users:logout') }}">退出</a>
                </div>
                <div class="login_btn fl" v-show="flag2">
                    <a href="{{ url('users:login') }}">登录</a>
                    <span>|</span>
                    <a href="{{ url('users:zhuce') }}">注册</a>
                </div>
                <div class="user_link fl">
                    <span>|</span>
                    <a href="{{ url('users:userinfo') }}">用户中心</a>
                    <span>|</span>
                    <a href="">我的购物车</a>
                    <span>|</span>
                    <a href="">我的订单</a>
                </div>
            </div>
        </div>
    </div>
    <div class="search_bar clearfix">
        <a href="{{ url('shouye:index') }}" class="logo fl"><img src="{{ static('images/logo.png') }}"></a>
        <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="#">满199减100</a></li>
                <li><a href="#">家装建材</a></li>
                <li><a href="#">潮流家电</a></li>
                <li><a href="#">华为新品</a></li>
            </ul>
        </div>
        <div class="guest_cart fr">
            <a href="" class="cart_name fl">我的购物车</a>
            <div class="goods_count fl" id="show_count"></div>
            <ul class="cart_goods_show">
                <li>
                    <img src="" alt="商品图片">
                    <h4></h4>
                    <div></div>
                </li>
            </ul>
        </div>
    </div>
    <div class="navbar_con">
        <div class="navbar">
            <div class="sub_menu_con fl">
                <h1 class="fl">商品分类</h1>
                <ul class="sub_menu">
                    {% for g in categories.values() %}
                        <li>
                            <div class="level1">
                                {% for yiji in g.channels %}
                                    <a href="{{ yiji.url }}">{{ yiji.name }}</a>
                                {% endfor %}
                            </div>
                            <div class="level2">
                                <div class="list_group">
                                    {% for category2 in g.sub_categorys %}
                                        <div class="group_name fl">{{ category2.name }} &gt;</div>
                                        <div class="group_detail fl">
                                            {% for category3 in category2.sub_categorys %}
                                                <a href="/productList/{{ category3.id }}/1/">{{ category3.name }}</a>
                                            {% endfor %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <ul class="navlist fl">
                <li><a href="">秒杀</a></li>
                <li class="interval">|</li>
                <li><a href="">拍卖</a></li>
                <li class="interval">|</li>
                <li><a href="">喵喵家电</a></li>
                <li class="interval">|</li>
                <li><a href="">喵喵超市</a></li>
                <li class="interval">|</li>
                <li><a href="">喵喵生鲜</a></li>
                <li class="interval">|</li>
                <li><a href="">喵喵国际</a></li>
            </ul>
        </div>
    </div>
    <div class="breadcrumb">
        <a href="javascript:;">{{ daohang.category1.name }}</a>
        <span>></span>
        <a href="javascript:;">{{ daohang.category2.name }}</a>
        <span>></span>
        <a href="javascript:;">{{ daohang.category3.name }}</a>
    </div>
    <div class="main_wrap clearfix">
        <div class="l_wrap fl clearfix">
            <div class="new_goods">
                <h3>热销排行</h3>
                <ul>
                    <li v-for="pro in products">
                        <a :href="pro.detailUrl"><img src="http://yhcsxtest.yonghui.cn//wimages/44788/main/44788_main_1657605282537.jpg"></a>
                        <h4><a :href="pro.detailUrl">{[ pro.name ]}</a></h4>
                        <div class="price">¥{[ pro.price ]}</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="r_wrap fr clearfix">
            <div class="sort_bar">
                <a href="{{ url('product:productList',args=(category.id,1)) }}?sort=default"
                   {% if sort == 'default' %}class="active" {% endif %}>默认</a>
                <a href="{{ url('product:productList',args=(category.id,1)) }}?sort=price"
                   {% if sort == 'price' %}class="active" {% endif %}>价格</a>
                <a href="{{ url('product:productList',args=(category.id,1)) }}?sort=hot"
                   {% if sort == 'hot' %}class="active" {% endif %}>销量</a>
            </div>
            <ul class="goods_type_list clearfix">
                {% for p in products_page %}
                    <li>
                        {#                        <a href=""><img src="{{ p.default_imgurl }}"></a>#}
                        <a href="{{ url('product:productDetail',args=(p.id,)) }}"><img
                                src="http://yhcsxtest.yonghui.cn//wimages/813860/main/813860_main_1657701335763.jpg"></a>
                        <h4><a href="{{ url('product:productDetail',args=(p.id,)) }}">{{ p.name }}</a></h4>
                        <div class="operate">
                            <span class="price">¥{{ p.price }}</span>
                            <span class="unit">个</span>
                            <a href="#" class="add_goods" title="加入购物车"></a>
                        </div>
                    </li>
                {% endfor %}
            </ul>
            {# 分页插件 #}
            <div class="pagenation">
                <div id="pagination" class="page"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2018 北京*******有限公司 All Rights Reserved</p>
        <p>电话：010-******* 京ICP备********号</p>
    </div>
</div>
</body>
<script type="text/javascript">
    let categoryId = "{{ category.id }}"
</script>
 
 
<script type="text/javascript" src="{{ static('js/productlist.js') }}"></script>
<script type="text/javascript">
    $(function () {
        $('#pagination').pagination({
            currentPage: {{ pageNum }},
            totalPage: {{ totalPages }},
            callback: function (current) {
                location.href = '/productList/{{ category.id }}/' + current + '/?sort={{ sort }}'
            }
        })
    })
 
</script>
 
</html>

编写productlist.js

var v = new Vue({
    el: "#app",
    delimiters: ["{[", "]}"],
    data: {
        username: "",
 
 
        flag1: false,  //展示用户名和退出
        flag2: true,  //展示注册和登陆
 
        categoryId: categoryId,
        products: "",
 
    },
    //页面加载完成后,自动调用
    mounted() {
        //从cookie里面读取用户名...可能会从cookie中读取很多数据-->编写一个工具js文件,写一个getcookie函数读取信息
        this.username = getCookie("username");
 
        if (this.username != undefined) {
            this.flag1 = true;
            this.flag2 = false;
 
        } else {
            this.flag1 = false;
            this.flag2 = true;
        }
 
        //发送获取热门商品的请求
        this.get_remen_product();
    },
    methods: {
        get_remen_product() {
            if (this.categoryId) {
                let path = "/hotProduct/" + this.categoryId + "/";
                axios.get(path).then(resp => {
                    this.products = resp.data.products;
                    //给每一条sku加上商品详情连接跳转
                    for (let i = 0; i < this.products.length; i++) {
                        this.products[i].detailUrl = '/productDetail/' + this.products[i].id + "/";
 
                    }
 
 
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
 
})
posted @   测试圈的彭于晏  阅读(91)  评论(0)  编辑  收藏  举报
相关博文：
· 18- 项目梳理-商品详情--product
· 14- 项目梳理-用户中心页面--users
· 微信小程序商城构建全栈应用
· Flask-框架秘籍-全-
· 电商类项目-展示首页商品频道分类(三级联动数据的展示)
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示