【Django】基于PythonWeb的Django框架设计实现天天生鲜系统-7首页界面

2021-08-11 15:52:47 浏览数 (1)

首先将我们的模板文件拷贝到 templates 目录下, 将我们模板的静态文件拷贝到 static 目录下.

首页页面主要展示的数据包括:

  1. 产品的分类数据
  2. 每个分类的产品数据
  3. 购物车商品数据

编写首页视图函数 index, 代码实现如下:

代码语言：javascript复制
def index(request):
    """首页页面"""
​
    # 查询商品分类
    categories = GoodsCategory.objects.all()
    # 从每个分类中获取四个商品
    for cag in categories:
        cag.goods_list = cag.goodsinfo_set.order_by('-id')[:4]
​
    # 读取购物车商品列表
    cart_goods_list = []
    # 商品总数
    cart_goods_count = 0
    for goods_id, goods_num in request.COOKIES.items():
        if goods_id == 'csrftoken':
            continue
        cart_goods = GoodsInfo.objects.get(id=goods_id)
        cart_goods.goods_num = goods_num
        cart_goods_list.append(cart_goods)
        # 累加购物车商品总数
        cart_goods_count = cart_goods_count   int(goods_num)
​
    return render(request, 'index.html', {'categories': categories, 
                                          'cart_goods_list': cart_goods_list, 
                                          'cart_goods_count': cart_goods_count})
  1. 获得所有分类数据, 该部分功能实现代码如下:
代码语言：javascript复制
categories = GoodsCategory.objects.all()
  1. 然后根据分类获取每个分类中的4条商品数据.
代码语言：javascript复制
for cag in categories:
    cag.goods_list = GoodsInfo.objects.filter(goods_cag=cag)[:4]
  1. 购物车数据展示. 由于购物车数据我们存储在 cookie 中, 所以我们这里遍历 request.COOKIES 从中读取所有商品信息.
代码语言：javascript复制
# 读取购物车商品列表
cart_goods_list = []
# 商品总数
cart_goods_count = 0
for goods_id, goods_num in request.COOKIES.items():
    if goods_id == 'csrftoken':
        continue
    cart_goods = GoodsInfo.objects.get(id=goods_id)
    cart_goods.goods_num = goods_num
    cart_goods_list.append(cart_goods)
    # 累加购物车商品总数
    cart_goods_count = cart_goods_count   int(goods_num)

其中代码:

代码语言：javascript复制
if goods_id == 'csrftoken':
    continue

由于我们的 cookie 中除了商品数据之外, django 也会增加其他的 cookie 数据, 我们通过 if 判断将非商品数据的 cookie 过滤掉.

index.html 模板主要代码实现如下:

代码语言：javascript复制
<!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/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/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/static/js/slide.js"></script>
</head>
<body>
    <div class="header_con">
        <div class="header">
            <div class="welcome fl">欢迎来到天天生鲜!</div>
        </div>      
    </div>
​
    <div class="search_bar clearfix">
        <a href="/index/" class="logo fl"><img src="/static/images/logo.png"></a>
        <div class="guest_cart fr">
            <a href="/cart/show_cart/" class="cart_name fl">我的购物车</a>
            <div class="goods_count fl">{{ cart_goods_count }}</div>
            <ul class="cart_goods_show">
​
​
                {% for cart_goods in cart_goods_list %}
                <li>
                    <img src="/static/{{ cart_goods.goods_img }}" alt="商品图片">
                    <h4>{{ cart_goods.goods_name }}</h4>
                    <div>{{ cart_goods.goods_num }}</div>
                </li>
                {% endfor %}
​
            </ul>
            
        </div>
    </div>
​
    <div class="navbar_con">
        <div class="navbar">
            <h1 class="fl">全部商品分类</h1>
        </div>
    </div>
​
    <div class="center_con clearfix">
        <ul class="subnav fl">
            {% for cag in categories %}
                <li><a href="/goods/?cag={{ cag.id }}&page=1" class="{{ cag.cag_css }}">{{ cag.cag_name }}</a></li>
            {% endfor %}
        </ul>
        <div class="slide fl">
            <ul class="slide_pics">
                <li><img src="/static/images/slide.jpg" alt="幻灯片"></li>
                <li><img src="/static/images/slide02.jpg" alt="幻灯片"></li>
                <li><img src="/static/images/slide03.jpg" alt="幻灯片"></li>
                <li><img src="/static/images/slide04.jpg" alt="幻灯片"></li>
            </ul>
            <div class="prev"></div>
            <div class="next"></div>
            <ul class="points"></ul>
        </div>
        <div class="adv fl">
            <a href="#"><img src="/static/images/adv01.jpg"></a>
            <a href="#"><img src="/static/images/adv02.jpg"></a>
        </div>
    </div>
​
    {% for cag in categories %}
    <div class="list_model">
        <div class="list_title clearfix">
            <h3 class="fl" id="model01">{{ cag.cag_name }}</h3>
            <a href="/goods/?cag={{ cag.id }}&page=1" class="goods_more fr" id="fruit_more">查看更多 ></a>
        </div>
​
        <div class="goods_con clearfix">
            <div class="goods_banner fl"><img src="/static/{{ cag.cag_img }}"></div>
            <ul class="goods_list fl">
​
                {% for goods in cag.goods_list %}
                <li>
                    <h4><a href="/detail/?id={{ goods.id }}">{{ goods.goods_name }}</a></h4>
                    <a href="/detail/?id={{ goods.id }}"><img src="/static/{{ goods.goods_img }}"></a>
                    <div class="prize">¥ {{ goods.goods_price }}</div>
                </li>
                {% endfor %}
​
            </ul>
        </div>
    </div>
    {% endfor %}
​
    <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 © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
        <p>电话：010-****888    京ICP备*******8号</p>
    </div>
</body>
</html>

我们由 index 视图函数传递给模板的数据 categories 是一个结果集, 我们在 index.html 模板中, 通过使用 Django 提供的模板语法, 来遍历输出. 模板中 for 的使用格式如下:

代码语言：javascript复制
{% for ... in ... %}
​
{% endfor %}

输出变量, 我们使用如下格式的语法:

代码语言：javascript复制
{{ 变量名 }}

下面模板代码, 主要用户遍历输出购物车中的商品信息.

代码语言：javascript复制
<a href="/cart/show_cart/" class="cart_name fl">我的购物车</a>
<div class="goods_count fl">{{ cart_goods_count }}</div>
<ul class="cart_goods_show">
​
​
   {% for cart_goods in cart_goods_list %}
    <li>
        <img src="/static/{{ cart_goods.goods_img }}" alt="商品图片">
        <h4>{{ cart_goods.goods_name }}</h4>
        <div>{{ cart_goods.goods_num }}</div>
    </li>
   {% endfor %}
​
</ul>

下面的模板代码主要用于输出产品分类信息:

代码语言：javascript复制
<ul class="subnav fl">
    {% for cag in categories %}
        <li><a href="/goods/?cag={{ cag.id }}&page=1" class="{{ cag.cag_css }}">{{ cag.cag_name }}</a></li>
    {% endfor %}
</ul>

遍历输出每个分类下的商品数据:

代码语言：javascript复制
  {% for cag in categories %}
    <div class="list_model">
        <div class="list_title clearfix">
            <h3 class="fl" id="model01">{{ cag.cag_name }}</h3>
            <a href="/goods/?cag={{ cag.id }}&page=1" class="goods_more fr" id="fruit_more">查看更多 ></a>
        </div>
​
        <div class="goods_con clearfix">
            <div class="goods_banner fl"><img src="/static/{{ cag.cag_img }}"></div>
            <ul class="goods_list fl">
​
                {% for goods in cag.goods_list %}
                <li>
                    <h4><a href="/detail/?id={{ goods.id }}">{{ goods.goods_name }}</a></h4>
                    <a href="/detail/?id={{ goods.id }}"><img src="/static/{{ goods.goods_img }}"></a>
                    <div class="prize">¥ {{ goods.goods_price }}</div>
                </li>
                {% endfor %}
​
            </ul>
        </div>
    </div>
    {% endfor %}

当点击商品图片或者名字时, 跳转到:

代码语言：javascript复制
/detail/?id={{ goods.id }}

问号之后的内容为请求携带的参数, 键为 id, 值为商品ID.

网络安全 编程算法 html django

0 人点赞