加載靜態文件,父模板的繼承和擴展

時間  2019-11-19
標籤 加載 靜態 文件 模板 繼承 擴展 欄目 網站開發 简体版
原文   原文鏈接

1.用url_for加載靜態文件javascript

<1><script src="{{ url_for('static',filename='js/login.js') }}"></script>css

<2>flask 從static文件夾開始尋找html

<3>可用於加載css, js, image文件java

2.繼承和擴展flask

<1>把一些公共的代碼放在父模板中，避免每一個模板寫一樣的內容。base.htmlapp

<2>子模板繼承父模板jsp

 a. {% extends 'base.html’ %}svg

<3>父模板提早定義好子模板能夠實現一些本身需求的位置及名稱。blockurl

a.<title>{% block title %}{% endblock %}-MIS問答平臺</title>spa

b.{% block head %}{% endblock %}

c.{% block main %}{% endblock %}

<4>子模板中寫代碼實現本身的需求。block

 a. {% block title %}登陸{% endblock %}

3.首頁、登陸頁、註冊頁都按上述步驟改寫。

 py：

from flask import Flask,render_template

app = Flask(__name__)



@app.route('/login')
def login():
    return render_template('login.html')

@app.route('/register')
def register():
    return render_template('register.html')

@app.route('/base')
def base():
    return render_template('base.html')

@app.route('/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)

父模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title%}父模板{% endblock %}</title>
    <script src="{{url_for('static',filename='js/base.js') }}" type="text/javascript"></script>
    <link href="{{ url_for('static' ,filename='css/base.css') }}"  rel="stylesheet" type="text/css">
    {% block head %}
    {% endblock %}
</head>
<body id="myBody">
<nav class="body">
    <div style="background-color: floralwhite">
        <img id="imgs" src="../static/images/chihuo.jpg">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <a class="s" href="{{ url_for('base') }}">首頁</a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <a class="ss" href="">下載APP</a>&nbsp&nbsp&nbsp&nbsp
        <input id="sousuo" type="text" name="search" placeholder="請輸入搜索內容：">
        <button id="sou" type="submit">查找</button>
        &nbsp&nbsp&nbsp&nbsp
        <a class="login" href="{{ url_for('login') }}">登陸</a>
        <a class="register" href="{{ url_for('register') }}">註冊</a>
        <img id="myOn_Off" onclick="mySwitch()" src="../static/images/taiyang.png" width="50" height="50">
    </div>
</nav>
{% block main %}{% endblock %}
    <footer>
        <div class="footer_box">
            Copyright@2017-2027 我的版權，版權全部 做者：JZX telephone:0000-1234567 mobile phone:11111111111
        </div>
    </footer>
</body>
</html>

首頁：

{% extends'index.html' %}
{% block title %}
    首頁
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}" type="text/css">
{% endblock %}
{% block main %}
    <body id="myBody">
    <div>
        <div>
            <div class="img">
                <a href="http://www.gzcc.cn/html/xueyuanrongyu/">
                    <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg">
                </a>
                <div class="desc"><a href="http://www.gzcc.cn">學校榮譽</a></div>
            </div>
            <div class="img">
                <a href="http://www.gzcc.cn/html/banxuechengguo/">
                    <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg">
                </a>
                <div class="desc"><a href="http://www.gzcc.cn">師生獲獎</a></div>
            </div>
            <div class="img">
                <a href="http://www.gzcc.cn/html/xygk/ldgh/">
                    <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg">
                </a>
                <div class="desc"><a href="http://www.gzcc.cn">領導關懷</a></div>
            </div>
            <div class="img">
                <a href="http://i.gzcc.cn/cas/login?service=http%3A%2F%2Fi.gzcc.cn%2Fdcp%2Findex.jsp">
                    <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg">
                </a>
                <div class="desc"><a href="http://www.gzcc.cn">數字廣商</a></div>
            </div>
            <div class="img">
                <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">
                    <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg">
                </a>
                <div class="desc"><a href="http://www.gzcc.cn">話說校園</a></div>
            </div>
            <div class="img">
                <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">
                    <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg">
                </a>
                <div class="desc"><a href="http://www.gzcc.cn">視頻校園</a></div>
            </div>
            <div class="img">
                <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">
                    <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg">
                </a>
                <div class="desc"><a href="http://www.gzcc.cn">全景校園</a></div>
            </div>
            <div class="img">
                <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">
                    <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg">
                </a>
                <div class="desc"><a href="http://www.gzcc.cn">校友風采</a></div>
            </div>
            <div class="clearfloat">
                <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg">
                <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg">
                <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg">
                <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"><br>
                <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg">
                <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg">
                <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg">
                <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg">
            </div>
        </div>
    </div>

    </body>
{% endblock %}

</html>

登陸頁：

{% extends'index.html' %}
{% block title %}
    登陸
{% endblock %}
{% block head %}
    <script src="{{ url_for('static',filename='js/login.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/login.css')}}" type="text/css">
{% endblock %}

{% block main %}
    <body>
    <div class="box">
        <div>
            <a href="{{ url_for('login') }}">登陸</a>
            <a style="color: antiquewhite">*</a>
            <a href="{{ url_for('register') }}">註冊</a>
        </div>
        <br>

        <div class="name" align="center">
            <svg class="iconphone" width="20px" height="20px" viewBox="0 0 20 20">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                   sketch:type="MSPage">
                    <g id="2-copy-2" sketch:type="MSArtboardGroup"
                       transform="translate(-505.000000, -357.000000)" fill="#666">
                        <path d="M517.388314,366.868305 C519.068314,366.001784 520.220053,364.252653 520.220053,362.231784 C520.220053,359.350479 517.883966,357.014392 515.002662,357.014392 C512.121357,357.014392 509.78527,359.350479 509.78527,362.231784 C509.78527,364.252653 510.936575,366.001784 512.616575,366.868305 C508.246575,367.938305 505.002662,371.879175 505.002662,376.57961 C505.002662,376.81961 505.197009,377.014392 505.437444,377.014392 C505.677444,377.014392 505.872227,376.81961 505.872227,376.57961 C505.872227,371.537001 509.960053,367.449175 515.002662,367.449175 C520.04527,367.449175 524.133096,371.537001 524.133096,376.57961 C524.133096,376.81961 524.327444,377.014392 524.567879,377.014392 C524.807879,377.014392 525.002662,376.81961 525.002662,376.57961 C525.002662,371.879175 521.758749,367.938305 517.388314,366.868305 L517.388314,366.868305 Z M510.654835,362.231784 C510.654835,359.830479 512.601357,357.883957 515.002662,357.883957 C517.403966,357.883957 519.350488,359.830479 519.350488,362.231784 C519.350488,364.632653 517.403966,366.57961 515.002662,366.57961 C512.601357,366.57961 510.654835,364.632653 510.654835,362.231784 L510.654835,362.231784 Z"
                              id="id" sketch:type="MSShapeGroup"></path>
                    </g>
                </g>
            </svg>
            <input
                    id="uname" type="text" placeholder="請輸入用戶名:">

        </div>
        <br>
        <div class="email" align="center">
            <svg class="iconphone" width="20px" height="20px" viewBox="0 0 20 20">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                   sketch:type="MSPage">
                    <g id="2-copy-2" sketch:type="MSArtboardGroup"
                       transform="translate(-505.000000, -407.000000)" fill="#666">
                        <path d="M515,418.304324 C514.12782,418.304324 513.421091,418.888119 513.421091,419.608723 C513.421091,419.995004 513.624357,420.341947 513.947394,420.580774 L513.947394,421.782554 C513.947394,422.262857 514.418637,422.652187 515.00003,422.652187 C515.581302,422.652187 516.052667,422.262857 516.052667,421.782554 L516.052667,420.580774 C516.375703,420.341947 516.579,419.995004 516.579,419.608723 C516.57897,418.888119 515.87221,418.304324 515,418.304324 L515,418.304324 L515,418.304324 Z M522.368454,414.391327 L521.315788,414.391327 L521.315788,412.217421 C521.315788,409.335657 518.488418,407 515,407 C511.511582,407 508.684212,409.335657 508.684212,412.217421 L508.684212,414.391327 L507.631576,414.391327 C506.178003,414.391327 505,415.364503 505,416.565234 L505,424.826193 C505,426.026824 506.178003,427 507.631576,427 L522.368424,427 C523.821422,427 525,426.026899 525,424.826193 L525,416.565234 C525.00003,415.364478 523.821422,414.391327 522.368454,414.391327 L522.368454,414.391327 L522.368454,414.391327 Z M515,407.869583 C517.906571,407.869583 520.263152,409.816309 520.263152,412.217396 L520.263152,414.391302 L509.737544,414.391302 L509.737544,412.217396 L509.736848,412.217396 C509.736848,409.816309 512.093459,407.869583 515,407.869583 L515,407.869583 L515,407.869583 Z M523.947364,424.826093 C523.947364,425.546622 523.240604,426.130392 522.368454,426.130392 L507.631606,426.130392 C506.759396,426.130392 506.052667,425.546622 506.052667,424.826093 L506.052667,416.565234 C506.052667,415.84468 506.759426,415.260835 507.631606,415.260835 L522.368454,415.260835 C523.240635,415.260835 523.947364,415.844705 523.947364,416.565234 L523.947364,424.826093 L523.947364,424.826093 L523.947364,424.826093 Z"
                              id="pw" sketch:type="MSShapeGroup"></path>
                    </g>
                </g>
            </svg>
            <input
                    type="password" id="upass" placeholder="請輸入密碼:">

        </div>
        <br>


        <div id="error_box"></div>
        <div>
            <button id="login" onclick="myLogin()">登陸</button>

        </div>
        <br>

        <div>
            <input value="1" name="remember" id="remember" type="checkbox">
            <label for="remember" style="color: darkmagenta">保存登陸信息</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input value="2" name="remember" id="remember" type="checkbox">
            <label for="remember" style="color: darkmagenta">記住我</label>
        </div>

        <br>
        <a class="register-login" href="{{ url_for('register') }}">進入註冊界面</a>

        <div id="footer" style="background-color: transparent;clear:both;text-align:center;">版權 ． duym@jzx</div>
    </div>
    <script>
        document.getElementById("demo").innerHTML = Date();
        document.write(Date())
    </script>
    </body>
{% endblock %}
</html>

註冊頁：

{% extends'index.html' %}
{% block title %}
    註冊
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/register.css') }}" type="text/css">
    <script src="{{url_for('static',filename='js/register.js') }}"></script>
{% endblock %}
{% block main %}
    <body>
    <div class="box">
        <div>
            <a href="{{ url_for('login') }}">登陸</a>
            <a style="color: antiquewhite">*</a>
            <a href="{{ url_for('register') }}">註冊</a>
        </div>
        <br>

        <div class="name" align="center">
            <input id="uname" type="text" placeholder="登陸帳號:">
        </div>
        <br>
        <div class="telephone" align="center">


            <input type="tel"
                   id="uuser"
                   placeholder="請輸入你的手機號:">
        </div>
        <br>

        <div class="email" align="center">
            <input
                    type="password" id="upass" placeholder="設置你的密碼:">
        </div>
        <br>
        <div class="email" align="center">
            <input
                    type="password" id="upass2" placeholder="請輸入你的密碼:">
        </div>
        <br>
        <div>
            <div id="error_box"></div>
            <div>
                <button id="register" onclick="myRegister()">註冊</button>

            </div>
            <a class="login-register" href="{{ url_for('login') }}">進入登陸界面</a>


            <div id="footer" style="background-color: transparent;clear:both;text-align:center;">版權 ． duym@jzx</div>
        </div>
    </div>
    </body>
{% endblock %}
</html>

 

截圖以下：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程