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

用url_for加载静态文件

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

继承和扩展

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

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

from flask import Flask,render_template

app = Flask(__name__)

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


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

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


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

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

导航页

<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}{% endblock %}
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}首页</title>
    <nav style="background-color: slategray">
         <img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png" width="40px">
    <link rel="stylesheet" href="{{url_for('static',filename='css/loginMy.css')}}">
    <img  src="{{url_for('static',filename='image/yezi.jpg')}}" alt="wo" width="50px">
<a href="{{url_for('login')}}">login</a>
<a href="{{url_for('register')}}">register</a>
<a href="{{url_for('base')}}">base</a>
        <img id="myOnOff" onclick="mySwitch()" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509532539555&di=5c7e5df90fa122e5a6dcae2de5fb45d5&imgtype=0&src=http%3A%2F%2Fwww.jbhdq.com%2Fuploadfile%2F2016%2F0617%2F20160617103213932.jpg"
     width="40px">
     </nav>

登陆

{% extends'danghangye.html' %}
{% block title %}欢迎来到登录界面，请登录{% endblock %}
{% block head %}
     <script type="text/javascript" src="../static/js/cao.js"></script>
    <link rel="stylesheet" href="../static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../static/css/loginMy.css"/>
    <style>
html,body{width:100%;}
</style>

{% endblock %}
{% block main %}
  <div id="container" style="width: 300px;margin-left: auto;margin-right: auto">

    <div id="header"><h2 align="center" style="color: azure">登陆界面</h2></div>

    <div id="content">

            <p align="center"><input id="uname" type="text" name="user"  placeholder="请输入账号">

            </p>
            <p align="center"><input id="upass" type="password" name="psw" placeholder="请输入密码"></p>

            <br>
            <div id="error_box"><br>
            </div>

            <br>

            <input type="checkbox" value="true" width="30px">记住密码 <br>

         <p align="center"><button onclick="fnLogin()">登录</button></p>
        <a href="http://localhost:63342/untitled/templates/register.html?_ijt=l785tte8f1v8n30nbrmi0bkp7"><p align="center" style="background-color: darkgrey"><button>注册</button></p></a>
            &nbsp&nbsp&nbsp



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

{% extends'danghangye.html' %}
{% block title %} 欢迎来到注册界面{% endblock %}

{% block head %}  <script type="text/javascript" src="../static/js/cao.js"></script>{% endblock %}


{% block main %}
<body>

<div id="container" style="width: 300px;margin-left: auto;margin-right: auto">

    <div id="header" style="background-color: darkorange"><h2 align="center">注册</h2></div>

    <div id="content">

            <p align="center">用户名：<input id="uname" type="text" name="user" placeholder="请输入账号">

            </p>
            <p align="center"> 密码&nbsp：<input id="upass" type="password" name="psw" placeholder="请输入密码"></p>
             <p align="center">密码&nbsp：<input id="upass2" type="password" name="psw2" placeholder="请再次输入密码"></p>
            <br>
            <div id="error_box"><br>
            </div>

            <br>

            <input type="checkbox" value="true">记住密码 <br>

         <p align="center"><button onclick="fnLogin()">注册</button></p>
            &nbsp&nbsp&nbsp



    </div>

    <p id="meto">中国标准时间</p>
<script>document.getElementById("meto").innerHTML = Date()</script>
</div>

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

posted on 2017-11-04 01:57 201506050009曹艺健阅读(120) 评论(0) 编辑收藏举报