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

一、用url_for加载静态文件

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

二、继承和扩展

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

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

from flask import Flask,render_template

app = Flask(__name__)


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

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

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


if __name__ == '__main__':
    app.run(debug=True)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        首页
        {% block denglutitle %}{% endblock %}
    {% block zhucetitle %}{% endblock %}
    {% block tupiantitle %}{% endblock %}
    </title>
    <link rel="stylesheet" href="{{ url_for('static',filename='index.css') }}">

    <script src="{{ url_for('static',filename='js/index.js') }}"></script>
{% block dengluhead %}{% endblock %}
{% block zhucehead %}{% endblock %}
{% block tupianhead %}{% endblock %}
</head>
<body id="mybody">

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="{{ url_for('index') }}">首页</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="{{ url_for('login') }}" onclick="">登陆</a></li>
                <li><a href="{{ url_for('zhuce') }}" onclick="">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        设置 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">收藏</a></li>
                        <li><a href="#">分享</a></li>
                        <li><a href="#">搜索</a></li>
                        <li class="divider"></li>
                        <li><a href="#">点赞</a></li>
                    </ul>
                </li>
                <li><a href="#">||</a></li>
            </ul>
        </div>
        <div style="float: left">
            <img id="myonoff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" style="width:40px" >
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="{{ url_for('tupian') }}" onclick="">图片区</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="{{ url_for('fabu') }}" onclick="">发布</a></li>
            </ul>
        </div>
        <div>
            <input type="text" name="user" id="user" placeholder="请输入内容">
            <input type="button" value="搜索" class="btn btn-success" onclick="">
        </div>
    </div>


</nav>




<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
    <ul class="nav navbar-nav">
        <li><img src="http://www.gzcc.cn/2016/images/footer1-logo.png"></li>
        <li style="color: bisque;">版权@misaki</li>
    </ul>
</nav>




{% block denglubody %}{% endblock %}
{% block zhucebody %}{% endblock %}
{% block tupianbody %}{% endblock %}
</body>
</html>
{% extends 'index.html' %}

{% block denglutitle %}登陆{% endblock %}
{% block dengluhead %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css') }}">
    <script src="{{ url_for('static',filename='js/login.js') }}"></script>
{% endblock %}
{% block denglubody %}
    <div id="container" style="margin-left: auto;margin-right: auto">
        <div id="header"><h2 align="center">请登录</h2></div>
        <div id="content">
            <form>
                Username：<input type="text" name="user" id="user" placeholder="请输入用户名">
                <br>
                Password：<input type="password" name="pass" id="pass" placeholder="请输入密码">
                <br>
                <input type="radio" name="r1" id="r1" value="stu">student
                <input type="radio" name="r2" id="r2" value="tea">teacher
                <br>
                <input type="checkbox" name="c1" id="c1" value="">记住我
                <br>
                <div id="error_box"><br></div>
                <input type="button" value="login" onclick="fnLogin()">&nbsp
                <button><a href="http://localhost:63342/untitled1/templates/lin2.html?_ijt=trea96c8krh54963ip8s1c8rso">registration</a>
                </button>
                <a href="">忘记密码？</a>

            </form>
        </div>
        <div id="footer"><p align="right">版权@misaki</p></div>
    </div>
{% endblock %}
{% extends 'index.html' %}

{% block zhucetitle %}注册{% endblock %}
{% block zhucehead %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css') }}">
    <script src="{{ url_for('static',filename='js/login.js') }}"></script>
{% endblock %}
{% block zhucebody %}
    <div id="container" style="margin-left: auto;margin-right: auto">
        <div id="header"><h2 align="center">注册</h2></div>
        <div id="content">
            <form>
                <p align="center">Username：</p>
                <p align="center">
                    <input type="text" name="user" id="user" placeholder="请输入用户名">
                </p>
                <p align="center">Password：</p>
                <p align="center">
                    <input type="password" name="pass" id="pass" placeholder="请输入密码">
                </p>
                <p align="center">Lnput again：</p>
                <p align="center">
                    <input type="password" name="again" id="again" placeholder="再次输入密码">
                </p>
                <p align="center">
                    <input type="radio" name="r1" id="r1" value="stu">student
                    <input type="radio" name="r2" id="r2" value="tea">teacher
                </p>
                <div id="error_box"><br></div>
                <p align="center">
                    <input type="button" value="registration" onclick="fnRegistration()">
                </p>

            </form>
        </div>
        <div id="footer"><p align="right">版权@misaki</p></div>
    </div>
{% endblock %}

 

posted on 2017-11-08 15:12  106洪瑜  阅读(165)  评论(0)  编辑  收藏  举报