每天生鮮-模板繼承和靜態文件

時間 2019-11-09

原文原文鏈接

1、模板繼承

Django 使用了「模板繼承」的概念：這就是 {% extends "base.html" %}所作的事。它意味着「首先載入名爲 ‘base’ 的模板中的內容到當前模板，而後再處理本模板中的其他內容。」總之，模板繼承讓你在模板間大大減小冗餘內容：每個模板只須要定義它獨特的部分便可。

在項目中一個頁面須要修改還好，那麼若是當多處而且多個頁面都須要修改，那麼就大大增長工做量。當時當多個頁面中多存在相同的部分，使用模板繼承就大大減小開發和維護人員的壓力。jquery

典型的應用就是在網站開頭或者網站結尾處。git

一、父模板：

若是一段代碼重複出現，爲了效率，一般會把這段代碼定義到模板中，這個模板就是父模板。父模板定義在templates目錄下。github

二、子模板：

須要繼承父模板格式的模板，定義在templates/應用目錄下。數據庫

模板繼承中使用block標籤，格式：django

{% block 名稱 %}
預留區域，能夠編寫默認內容，也能夠沒有默認內容
{% endblock 名稱 %}

2、實例

首先在項目settings中配置模板目錄session

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

一、主要頁面

頁面說明：

一、index.html   網站首頁，頂部「註冊|登陸」和用戶信息是切換顯示的，商品分類菜單點擊直接連接滾動到本頁面商品模塊。首頁已加入幻燈片效果。

二、list.html  商品列表頁，商品分類菜單鼠標懸停時切換顯示和隱藏，點擊菜單後連接到對應商品的列表頁。


三、detail.html  商品詳情頁，某一件商品的詳細信息。


四、cart.html 個人購物車頁，列出已放入購物車上的商品


五、place_order.html 提交訂單頁


六、login.html 登陸頁面


七、register.html 註冊頁面，已加入了初步的表單驗證效果，此效果在課程中已講述如何製做。


八、user_center_info.html 用戶中心-用戶信息頁 用戶中心功能一，查看用戶的基本信息


九、user_center_order.html 用戶中心-用戶訂單頁 用戶中心功能二，查看用戶的所有訂單


十、user_center_site.html 用戶中心-用戶收貨地址頁 用戶中心功能三，查看和設置用戶的收貨地址

index.html 網站首頁

detail.html 商品頁

index.html頁尾

所以模板繼承關係能夠列爲

全部頁面均繼承尾部，部分頁面繼承頁首

來看一下具體網站首頁的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="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/slide.js"></script>
</head>
<body>
    <div class="header_con">
        <div class="header">
            <div class="welcome fl">歡迎來到每天生鮮!</div>
            <div class="fr">
                <div class="login_info fl">
                    歡迎您：<em>張 山</em>
                </div>
                <div class="login_btn fl">
                    <a href="login.html">登陸</a>
                    <span>|</span>
                    <a href="register.html">註冊</a>
                </div>
                <div class="user_link fl">
                    <span>|</span>
                    <a href="user_center_info.html">用戶中心</a>
                    <span>|</span>
                    <a href="cart.html">個人購物車</a>
                    <span>|</span>
                    <a href="user_center_order.html">個人訂單</a>
                </div>
            </div>
        </div>        
    </div>

    <div class="search_bar clearfix">
        <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
        <div class="search_con fl">
            <input type="text" class="input_text fl" name="" placeholder="搜索商品">
            <input type="button" class="input_btn fr" name="" value="搜索">
        </div>
        <div class="guest_cart fr">
            <a href="#" class="cart_name fl">個人購物車</a>
            <div class="goods_count fl" id="show_count">1</div>
        </div>
    </div>

    <div class="navbar_con">
        <div class="navbar">
            <h1 class="fl">所有商品分類</h1>
            <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>
            </ul>
        </div>
    </div>

    <div class="center_con clearfix">
        <ul class="subnav fl">
            <li><a href="#model01" class="fruit">新鮮水果</a></li>
            <li><a href="#model02" class="seafood">海鮮水產</a></li>
            <li><a href="#model03" class="meet">豬牛羊肉</a></li>
            <li><a href="#model04" class="egg">禽類蛋品</a></li>
            <li><a href="#model05" class="vegetables">新鮮蔬菜</a></li>
            <li><a href="#model06" class="ice">速凍食品</a></li>
        </ul>
        <div class="slide fl">
            <ul class="slide_pics">
                <li><img src="images/slide.jpg" alt="幻燈片"></li>
                <li><img src="images/slide02.jpg" alt="幻燈片"></li>
                <li><img src="images/slide03.jpg" alt="幻燈片"></li>
                <li><img src="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="images/adv01.jpg"></a>
            <a href="#"><img src="images/adv02.jpg"></a>
        </div>
    </div>

    <div class="list_model">
        <div class="list_title clearfix">
            <h3 class="fl" id="model01">新鮮水果</h3>
            <div class="subtitle fl">
                <span>|</span>
                <a href="#">鮮芒</a>
                <a href="#">加州提子</a>
                <a href="#">亞馬遜牛油果</a>
            </div>
            <a href="#" class="goods_more fr" id="fruit_more">查看更多 ></a>
        </div>

        <div class="goods_con clearfix">
            <div class="goods_banner fl"><img src="images/banner01.jpg"></div>
            <ul class="goods_list fl">
                <li>
                    <h4><a href="#">草莓</a></h4>
                    <a href="#"><img src="images/goods/goods003.jpg"></a>
                    <div class="prize">¥ 30.00</div>
                </li>
                <li>
                    <h4><a href="#">葡萄</a></h4>
                    <a href="#"><img src="images/goods/goods002.jpg"></a>
                    <div class="prize">¥ 5.50</div>
                </li>
                <li>
                    <h4><a href="#">檸檬</a></h4>
                    <a href="#"><img src="images/goods/goods001.jpg"></a>
                    <div class="prize">¥ 3.90</div>
                </li>
                <li>
                    <h4><a href="#">奇異果</a></h4>
                    <a href="#"><img src="images/goods/goods012.jpg"></a>
                    <div class="prize">¥ 25.80</div>
                </li>
            </ul>
        </div>
    </div>

    <div class="list_model">
        <div class="list_title clearfix">
            <h3 class="fl" id="model02">海鮮水產</h3>
            <div class="subtitle fl">
                <span>|</span>
                <a href="#">河蝦</a>
                <a href="#">扇貝</a>                
            </div>
            <a href="#" class="goods_more fr">查看更多 ></a>
        </div>

        <div class="goods_con clearfix">
            <div class="goods_banner fl"><img src="images/banner02.jpg"></div>
            <ul class="goods_list fl">
                <li>
                    <h4><a href="#">青島野生海捕大青蝦</a></h4>
                    <a href="#"><img src="images/goods/goods018.jpg"></a>
                    <div class="prize">¥ 48.00</div>
                </li>
                <li>
                    <h4><a href="#">扇貝</a></h4>
                    <a href="#"><img src="images/goods/goods019.jpg"></a>
                    <div class="prize">¥ 46.00</div>
                </li>
                <li>
                    <h4><a href="#">冷凍秋刀魚</a></h4>
                    <a href="#"><img src="images/goods/goods020.jpg"></a>
                    <div class="prize">¥ 19.00</div>
                </li>
                <li>
                    <h4><a href="#">基圍蝦</a></h4>
                    <a href="#"><img src="images/goods/goods021.jpg"></a>
                    <div class="prize">¥ 25.00</div>
                </li>
            </ul>
        </div>
    </div>

    <div class="list_model">
        <div class="list_title clearfix">
            <h3 class="fl" id="model03">豬牛羊肉</h3>
            <div class="subtitle fl">
                <span>|</span>
                <a href="#">鮮芒</a>
                <a href="#">加州提子</a>
                <a href="#">亞馬遜牛油果</a>
            </div>
            <a href="#" class="goods_more fr">查看更多 ></a>
        </div>

        <div class="goods_con clearfix">
            <div class="goods_banner fl"><img src="images/banner03.jpg"></div>
            <ul class="goods_list fl">
                <li>
                    <h4><a href="#">維多利亞葡萄維多利亞葡萄維多利亞葡萄維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
            </ul>
        </div>
    </div>

    <div class="list_model">
        <div class="list_title clearfix">
            <h3 class="fl" id="model04">禽類蛋品</h3>
            <div class="subtitle fl">
                <span>|</span>
                <a href="#">鮮芒</a>
                <a href="#">加州提子</a>
                <a href="#">亞馬遜牛油果</a>
            </div>
            <a href="#" class="goods_more fr">查看更多 ></a>
        </div>

        <div class="goods_con clearfix">
            <div class="goods_banner fl"><img src="images/banner04.jpg"></div>
            <ul class="goods_list fl">
                <li>
                    <h4><a href="#">維多利亞葡萄維多利亞葡萄維多利亞葡萄維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
            </ul>
        </div>
    </div>

    <div class="list_model">
        <div class="list_title clearfix">
            <h3 class="fl" id="model05">新鮮蔬菜</h3>
            <div class="subtitle fl">
                <span>|</span>
                <a href="#">鮮芒</a>
                <a href="#">加州提子</a>
                <a href="#">亞馬遜牛油果</a>
            </div>
            <a href="#" class="goods_more fr">查看更多 ></a>
        </div>

        <div class="goods_con clearfix">
            <div class="goods_banner fl"><img src="images/banner05.jpg"></div>
            <ul class="goods_list fl">
                <li>
                    <h4><a href="#">維多利亞葡萄維多利亞葡萄維多利亞葡萄維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
            </ul>
        </div>
    </div>

    <div class="list_model">
        <div class="list_title clearfix">
            <h3 class="fl" id="model06">速凍食品</h3>
            <div class="subtitle fl">
                <span>|</span>
                <a href="#">鮮芒</a>
                <a href="#">加州提子</a>
                <a href="#">亞馬遜牛油果</a>
            </div>
            <a href="#" class="goods_more fr">查看更多 ></a>
        </div>

        <div class="goods_con clearfix">
            <div class="goods_banner fl"><img src="images/banner06.jpg"></div>
            <ul class="goods_list fl">
                <li>
                    <h4><a href="#">維多利亞葡萄維多利亞葡萄維多利亞葡萄維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
                <li>
                    <h4><a href="#">維多利亞葡萄</a></h4>
                    <a href="#"><img src="images/goods.jpg"></a>
                    <div class="prize">¥ 38.00</div>
                </li>
            </ul>
        </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 © 2016 北京每天生鮮信息技術有限公司 All Rights Reserved</p>
        <p>電話：010-****888    京ICP備*******8號</p>
    </div>
    <script type="text/javascript" src="js/slideshow.js"></script>
    <script type="text/javascript">
        BCSlideshow('focuspic');
        var oFruit = document.getElementById('fruit_more');
        var oShownum = document.getElementById('show_count');

        var hasorder = localStorage.getItem('order_finish');

        if(hasorder)
        {
            oShownum.innerHTML = '2';
        }

        oFruit.onclick = function(){
            window.location.href = 'list.html';
        }
    </script>
</body>
</html>

View Code

二、templates目錄

templates
　　----base.hml
　　----base_foot.html

base.html 頁首

包括全文檢索，購物車，以及用戶登陸信息的判斷

{% extends 'base_foot.html' %}

{% block body %}

    <div class="header_con">
        <div class="header">
            <div class="welcome fl">歡迎來到每天生鮮!</div>
            <div class="fr">
{#                判斷是否已經登陸#}
                {% if request.session.user_name|default:'' != '' %}
{#                    default過濾器進行判斷若是request.session.user_name不等於空字符串則用戶登錄狀態爲true#}
{#                    也就是說當用戶爲已登錄狀態時則顯示用戶名#}

{#                    class="login_info fl"#}
                <div class="login_btn fl">歡迎您：<em>{{ request.session.user_name }}</em>
                    <span>|</span>
                    <em><a href="/user/logout/">退出</a></em>
                </div>
                {% else %}
                <div class="login_btn fl">
                    <a href="/user/login/">登陸</a>
                    <span>|</span>
                    <a href="/user/register/">註冊</a>
                </div>
                {% endif %}
                <div class="user_link fl">
                    <span>|</span>
                    <a href="/user/info/">用戶中心</a>
                    <span>|</span>
                    <a href="/cart/">個人購物車</a>
                    <span>|</span>
                    <a href="/user/order/">個人訂單</a>
                </div>
            </div>
        </div>
    </div>


    <div class="search_bar clearfix">
        <a href="/" class="logo fl"><img src="/static/images/logo.png"></a>
        {% if page_name == 1 %}
            <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;{{ title }}</div>
        {% endif %}
        <div class="search_con fl">
             <script>
                $(function () {
                    $('.input_btn').click(function () {
                        q = $('.input_text').val();
                        location.href = '/search/?q='+q+'&page=1'
                    })
                })

            </script>
            <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
{#            這裏的name值爲q#}
            <input type="button" class="input_btn fr" name="" value="搜索">
        </div>

        {% if guest_cart == 1 %}
            <div class="guest_cart fr">
                <a href="/cart/" class="cart_name fl">個人購物車</a>
                <div class="goods_count fl" id="show_count">{{ cart_count }}</div>
            </div>
        {% endif %}
    </div>
{% block center_body %}{% endblock center_body %}

{% endblock body %}

base_foot.html 頁腳

包括<head>和企業信息等

<!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 }}每天生鮮</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/register.js"></script>#}
    {% block head %}{% endblock head %}
{#預留區域#}
</head>
<body>

{% block body %}{% endblock body %}

    <div class="footer no-mp">
        <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>

這裏的模板語言和JavaScript後續會說到。

注：這個電商網站是博主在接觸Django以後作的第一個項目，因此還須要修改。若是有須要項目相關視頻資源的朋友能夠博客園私信，或者評論區留言，博主會在看到的第一時間分享。
附github源碼地址（包含靜態文件）：https://github.com/weilanhanf/daily_fresh_demo