加载静态文件,父模板的继承和扩展

 

1.用url_for加载静态文件

  1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
  2. flask 从static文件夹开始寻找
  3. 可用于加载css, js, image文件

 

    <link  href="{{ url_for('static',filename='css/nino.css') }}" rel="stylesheet" type="text/css" >
    <script src="{{ url_for('static',filename='js/aiba.js') }}"></script>
    <img src="{{ url_for('static',filename='images/ars.jpg') }}"width="100px">

 

2.继承和扩展

  1. 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
  2. 子模板继承父模板
    1.   {% extends 'base.html’ %}
    3. 2.父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
    1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
    2. {% block head %}{% endblock %}
    3. {% block main %}{% endblock %}
  3. 3.子模板中写代码实现自己的需求。block
    1.   {% block title %}登录{% endblock %}

父模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}welcome</title>
    <link  href="{{ url_for('static',filename='css/nino.css') }}" rel="stylesheet" type="text/css" >
    <script src="{{ url_for('static',filename='js/aiba.js') }}"></script>
{% block head %}{% endblock %}
</head>
<body id="myBody">

<div id="container">
<nav class="header">
    <ul>
        <img src="{{ url_for('static',filename='images/ars.jpg') }}"width="100px">
        <img id="on_off" onclick="mySwitch()" src="http://img2.imgtn.bdimg.com/it/u=1878009223,3806655311&fm=200&gp=0.jpg" width="50px">
        <li><a href="{{ url_for('base') }}">首页</a></li>
        <li><input type="text" class="text" placeholder="搜索">
        <input type="submit" value="搜索"data-disable-with="搜索"></li>
        <li><a href="{{ url_for('sign_in') }}">登录</a></li>
        <li><a href="{{ url_for('sign_up') }}">注册</a></li>
        </ul>
</nav>
{% block main %}{% endblock %}
　<div id="footer">
    <p>you are my soul soul 18週年おめでとう</p></div>
    </div>
</body>
</html>

子模版：

{% extends 'index.html' %}
<head>
    <meta charset="UTF-8">
    <title>{% block title %}sign_in {% endblock %}</title>
    {% block head %}
    <link  href="{{ url_for('static',filename='css/nino.css') }}" rel="stylesheet" type="text/css" >
    <script src="{{ url_for('static',filename='js/aiba.js') }}"></script>
    {% endblock %}
</head>
<body>

    {% block main %}
    <div class="box">
        <h2>登录</h2>

        <div class="input_box">
            <input id="uname" class="sign" type="text" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            <input id="upass" class="sign" type="password" placeholder="请输入密码">
        </div>

        <div id="error_box"><br>
        </div>
        <div class="input_box">
            <input type="submit" name="commit" value="登录" class="sign-in-button" data-disable-with="登录" onclick="myLogin()">

            </div>

        </div>
    </div>
{% endblock %}
</body>
</html>

 

3.首页、登录页、注册页都按上述步骤改写。

首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
    <link  href="{{ url_for('static',filename='css/nino.css') }}" rel="stylesheet" type="text/css" >
    <script src="{{ url_for('static',filename='js/aiba.js') }}"></script>

</head>
<body id="myBody">

<div id="container">
<nav class="header">
    <ul>
        <img src="{{ url_for('static',filename='images/ars.jpg') }}"width="100px">
        <img id="on_off" onclick="mySwitch()" src="http://img2.imgtn.bdimg.com/it/u=1878009223,3806655311&fm=200&gp=0.jpg" width="50px">
        <li><a href="{{ url_for('base') }}">首页</a></li>
        <li><input type="text" class="text" placeholder="搜索">
        <input type="submit" value="搜索"data-disable-with="搜索"></li>
        <li><a href="{{ url_for('sign_in') }}">登录</a></li>
        <li><a href="{{ url_for('sign_up') }}">注册</a></li>

        </ul>
</nav>

    <div class="im">
            <a href="https://baike.baidu.com/item/ARASHI/4106370?fr=aladdin">
                <img src="http://p3.so.qhimgs1.com/bdr/_240_/t0109ab8c105af58973.jpg">
            </a>
            <div class="desc"><a href="https://baike.baidu.com/item/ARASHI/4106370?fr=aladdin">ARASHI</a></div>
        </div>
        <div class="im">
            <a href="https://baike.baidu.com/item/ARASHI/4106370?fr=aladdin">
                <img src="http://p0.so.qhimgs1.com/bdr/_240_/t010b57c4173029c22c.jpg">
            </a>
            <div class="desc"><a href="https://baike.baidu.com/item/ARASHI/4106370?fr=aladdin">ARASHI</a></div>
    </div>

　<div id="footer">
    <p>you are my soul soul 18週年おめでとう</p></div>
    </div>
</body>
</html>

登录页

{% extends 'index.html' %}
<head>
    <meta charset="UTF-8">
    <title>{% block title %}sign_in {% endblock %}</title>
    {% block head %}
    <link  href="{{ url_for('static',filename='css/nino.css') }}" rel="stylesheet" type="text/css" >
    <script src="{{ url_for('static',filename='js/aiba.js') }}"></script>
    {% endblock %}
</head>
<body>

    {% block main %}
    <div class="box">
        <h2>登录</h2>

        <div class="input_box">
            <input id="uname" class="sign" type="text" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            <input id="upass" class="sign" type="password" placeholder="请输入密码">
        </div>

        <div id="error_box"><br>
        </div>
        <div class="input_box">
            <input type="submit" name="commit" value="登录" class="sign-in-button" data-disable-with="登录" onclick="myLogin()">

            </div>

        </div>
    </div>
{% endblock %}
</body>
</html>

注册页

{% extends 'index.html' %}
<head>
    <meta charset="UTF-8">
    <title>{% block title %}sign_up {% endblock %}</title>

    <link  href="{{ url_for('static',filename='css/nino.css') }}" rel="stylesheet" type="text/css" >
    <script src="{{ url_for('static',filename='js/aiba.js') }}"></script>
</head>
<body>
{% block main %}


    <div class="box">
        <h2>注册</h2>

        <div class="input_box">
            <input id="uname" class="sign" type="text" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            <input id="upass" class="sign" type="password" placeholder="请输入密码">
        </div>
        <div class="input_box">
            <input id="upas" class="sign" type="password" placeholder="请再输入一次密码">
        </div>
        <div id="error_box"><br>
        </div>
        <div class="input_box">
            <input type="submit" name="commit" value="注册" class="sign-in-button" data-disable-with="注册" onclick="myLogin()">

            </div>

        </div>
    </div>
{% endblock %}
</body>
</html>

 

 

posted @ 2017-11-08 15:07  086黄向薇  阅读(170)  评论(0)    收藏  举报