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

  1. 用url_for加载静态文件
    1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
    2. flask 从static文件夹开始寻找
    3. 可用于加载css, js, image文件
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/myweb.css') }}">
    <script src="{{ url_for('static',filename='js/switch.js') }}"></script>    



        <a href="{{ url_for('myweb') }}">返回首页</a>
            <button type="button" class="lbutton"><a href="{{ url_for('login') }}">
                登录
            </a></button>
            <button type="button" class="rbutton"><a href="{{ url_for('regist') }}">
                注册
            </a></button>

 

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

父模版html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>主页 {% block logintitle %}
    {% endblock %}</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/myweb.css') }}">
    <script src="{{ url_for('static',filename='js/switch.js') }}"></script>
    {% block loginhead %}
    {% endblock %}
</head>

<body id="myBody" style="background: aquamarine">
<nav class="navi">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><img class="ico" src="../static/img/ico.jpg" alt=""></a>
        </div>

        <div>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <a href="{{ url_for('myweb') }}">返回首页</a>
            <button type="button" class="lbutton"><a href="{{ url_for('login') }}">
                登录
            </a></button>
            <button type="button" class="rbutton"><a href="{{ url_for('regist') }}">
                注册
            </a></button>
            <div style="text-align: right">
                <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" class="bulb">
            </div>
        </div>
    </div>
</nav>

<footer>
    <div class="footer_box">
        <p>Posted by: W3School</p>
        <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
    </div>
</footer>
{% block loginbody %}  {% endblock %}
{% block registbody %} {% endblock %}
</body>
</html>

登录子模版html:

{% extends'myweb.html' %}
{% block logintitle %}登录页面{% endblock %}


{% block loginhead %}
    <link rel="stylesheet" type="text/css" href="../static/css/component.css"/>
    <script src="../static/js/login.js"></script>
{% endblock %}

{% block loginbody %}

    <div class="logo_box">
        <h3 style="text-align: center">欢迎你</h3>
        <div class="input_outer">
            <span class="u_user"></span>
            <input id="uname" class="text" style="color: #383a3c" type="text" placeholder="请输入账号">
        </div>
        <div class="input_outer">
            <span class="us_uer"></span>
            <input id="upass" class="text" style="color:#383a3c ; position:absolute; z-index:100;"
                   value="" type="password" placeholder="请输入密码">
        </div>
        <div class="errorText" id="error_box" style="color: red"><br></div>
        <div>
            <button onclick="fnLogin()" class="lb1" style="color:black">登录</button>
        </div>
    </div>
{% endblock %}

注册子模版html:

{% extends'myweb.html' %}
{% block logintitle %}注册页面{% endblock %}
{% block loginhead %}
    <link rel="stylesheet" type="text/css" href="../static/css/component.css"/>
    <script src="../static/js/regist.js"></script>
{% endblock %}
{% block registbody %}
    <div class="logo_box">
        <h3 style="text-align: center">欢迎你</h3>
        <div class="input_outer">
            <span class="u_user"></span>
            <input id="uname" class="text" style="color: #383a3c" type="text" placeholder="请输入账号">
        </div>
        <div class="input_outer">
            <span class="us_uer"></span>
            <input id="upass" class="text" style="color:#383a3c ; position:absolute; z-index:100;"
                   value="" type="password" placeholder="请输入密码">
        </div>
        <div class="input_outer">
            <span class="us_uer"></span>
            <input id="upass" class="text" style="color:#383a3c ; position:absolute; z-index:100;"
                   value="" type="password" placeholder="请再次输入密码">
        </div>
        <div class="errorText" id="error_box" style="color: red"><br></div>
        <div>
            <button onclick="fnLogin()" class="lb1" style="color:black">注册</button>
        </div>
    </div>
{% endblock %}

 

运行截图：

 

 

 

posted @ 2017-11-05 14:54  yishhaoo  阅读(178)  评论(0)  编辑  收藏  举报