- 用url_for加载静态文件
- <script src="{{ url_for('static',filename='js/login.js') }}"></script>
- flask 从static文件夹开始寻找
- 可用于加载css, js, image文件
- 继承和扩展
- 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
- 子模板继承父模板
- {% extends 'base.html’ %}
- 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
- <title>{% block title %}{% endblock %}-MIS问答平台</title>
- {% block head %}{% endblock %}
- {% block main %}{% endblock %}
- 子模板中写代码实现自己的需求。block
- {% block title %}登录{% endblock %}
- 首页、登录页、注册页都按上述步骤改写。
py：
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def daohang():
return render_template('daohang.html')
@app.route('/login/')
def login():
return render_template('1031.html')
@app.route('/regist/')
def regist():
return render_template('regist.html')
if __name__ == '__main__':
app.run(debug=True)
首页：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}首页</title> <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='/css/index.css') }}"> <script src="{{ url_for('static',filename='js/moonlight.js') }}"></script> {% block head %}{% endblock %} </head> <body id="myBody"> <nav> <img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png" width="40px"> <a href="{{ url_for('daohang') }}">首页</a> <a href="http://www.jianshu.com/">下载app</a> <input type="text" name="search"> <button type="submit">搜索</button> <a href="{{ url_for('login') }}">登陆</a> <a href="{{ url_for('regist') }}">注册</a> <img id="myOnOff" src="http://www.runoob.com/images/pic_bulbon.gif" onclick="mySwitch()" width="20px"> </nav> {% block main %}{% endblock %} </body> </html>
登录：
{% extends'daohang.html' %} {% block title %}登录{% endblock %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/1031.css') }}" type="text/css"> <script src="{{ url_for('static',filename='/js/js.js') }}"></script>' {% endblock %} {% block main %} <div class="box" > <h2>登录</h2> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">登录</button> <button type="button" onclick=window.alert("账号密码为空，请输入！")>未输入账号密码</button> </div> </div> {% endblock %}
注册：
{% extends'daohang.html' %} {% block title %}注册{% endblock %} {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/1031.css') }}"> <script src="{{ url_for('static',filename='js/zhuce1.js') }}"></script> {% endblock %} {% block main %} <div class="box" > <h2>注册</h2> <div class="input_box"> <input id="uname" type="text" placeholder="设置用户名"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="设置密码"> </div> <div class="input_box"> <input id="upass1" type="password" placeholder="请再次输入密码"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">注册</button> </div> </div> {% endblock %}
