加载静态文件,父模板的继承和扩展
1.用url_for加载静态文件
<1><script src="{{ url_for('static',filename='js/login.js') }}"></script>
<2>flask 从static文件夹开始寻找
<3>可用于加载css, js, image文件
2.继承和扩展
<1>把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
<2>子模板继承父模板
a. {% extends 'base.html’ %}
<3>父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
a.<title>{% block title %}{% endblock %}-MIS问答平台</title>
b.{% block head %}{% endblock %}
c.{% block main %}{% endblock %}
<4>子模板中写代码实现自己的需求。block
a. {% block title %}登录{% endblock %}
3.首页、登录页、注册页都按上述步骤改写。
py：
from flask import Flask,render_template app = Flask(__name__) @app.route('/login') def login(): return render_template('login.html') @app.route('/register') def register(): return render_template('register.html') @app.route('/base') def base(): return render_template('base.html') @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True)
父模板：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title%}父模板{% endblock %}</title> <script src="{{url_for('static',filename='js/base.js') }}" type="text/javascript"></script> <link href="{{ url_for('static' ,filename='css/base.css') }}" rel="stylesheet" type="text/css"> {% block head %} {% endblock %} </head> <body id="myBody"> <nav class="body"> <div style="background-color: floralwhite"> <img id="imgs" src="../static/images/chihuo.jpg">       <a class="s" href="{{ url_for('base') }}">首页</a>         <a class="ss" href="">下载APP</a>     <input id="sousuo" type="text" name="search" placeholder="请输入搜索内容："> <button id="sou" type="submit">查找</button>      <a class="login" href="{{ url_for('login') }}">登录</a> <a class="register" href="{{ url_for('register') }}">注册</a> <img id="myOn_Off" onclick="mySwitch()" src="../static/images/taiyang.png" width="50" height="50"> </div> </nav> {% block main %}{% endblock %} <footer> <div class="footer_box"> Copyright@2017-2027 个人版权，版权所有 作者：JZX telephone:0000-1234567 mobile phone:11111111111 </div> </footer> </body> </html>
首页：
{% extends'index.html' %} {% block title %} 首页 {% endblock %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}" type="text/css"> {% endblock %} {% block main %} <body id="myBody"> <div> <div> <div class="img"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/"> <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"> </a> <div class="desc"><a href="http://www.gzcc.cn">学校荣誉</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/banxuechengguo/"> <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"> </a> <div class="desc"><a href="http://www.gzcc.cn">师生获奖</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xygk/ldgh/"> <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"> </a> <div class="desc"><a href="http://www.gzcc.cn">领导关怀</a></div> </div> <div class="img"> <a href="http://i.gzcc.cn/cas/login?service=http%3A%2F%2Fi.gzcc.cn%2Fdcp%2Findex.jsp"> <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"> </a> <div class="desc"><a href="http://www.gzcc.cn">数字广商</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/"> <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"> </a> <div class="desc"><a href="http://www.gzcc.cn">话说校园</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/shipinxiaoyuan/"> <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"> </a> <div class="desc"><a href="http://www.gzcc.cn">视频校园</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html"> <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"> </a> <div class="desc"><a href="http://www.gzcc.cn">全景校园</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xiaoyoufengcai/"> <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"> </a> <div class="desc"><a href="http://www.gzcc.cn">校友风采</a></div> </div> <div class="clearfloat"> <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"> <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"> <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"> <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"><br> <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"> <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"> <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"> <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"> </div> </div> </div> </body> {% endblock %} </html>
登录页：
{% extends'index.html' %} {% block title %} 登录 {% endblock %} {% block head %} <script src="{{ url_for('static',filename='js/login.js') }}"></script> <link rel="stylesheet" href="{{ url_for('static',filename='css/login.css')}}" type="text/css"> {% endblock %} {% block main %} <body> <div class="box"> <div> <a href="{{ url_for('login') }}">登录</a> <a style="color: antiquewhite">*</a> <a href="{{ url_for('register') }}">注册</a> </div> <br> <div class="name" align="center"> <svg class="iconphone" width="20px" height="20px" viewBox="0 0 20 20"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="2-copy-2" sketch:type="MSArtboardGroup" transform="translate(-505.000000, -357.000000)" fill="#666"> <path d="M517.388314,366.868305 C519.068314,366.001784 520.220053,364.252653 520.220053,362.231784 C520.220053,359.350479 517.883966,357.014392 515.002662,357.014392 C512.121357,357.014392 509.78527,359.350479 509.78527,362.231784 C509.78527,364.252653 510.936575,366.001784 512.616575,366.868305 C508.246575,367.938305 505.002662,371.879175 505.002662,376.57961 C505.002662,376.81961 505.197009,377.014392 505.437444,377.014392 C505.677444,377.014392 505.872227,376.81961 505.872227,376.57961 C505.872227,371.537001 509.960053,367.449175 515.002662,367.449175 C520.04527,367.449175 524.133096,371.537001 524.133096,376.57961 C524.133096,376.81961 524.327444,377.014392 524.567879,377.014392 C524.807879,377.014392 525.002662,376.81961 525.002662,376.57961 C525.002662,371.879175 521.758749,367.938305 517.388314,366.868305 L517.388314,366.868305 Z M510.654835,362.231784 C510.654835,359.830479 512.601357,357.883957 515.002662,357.883957 C517.403966,357.883957 519.350488,359.830479 519.350488,362.231784 C519.350488,364.632653 517.403966,366.57961 515.002662,366.57961 C512.601357,366.57961 510.654835,364.632653 510.654835,362.231784 L510.654835,362.231784 Z" id="id" sketch:type="MSShapeGroup"></path> </g> </g> </svg> <input id="uname" type="text" placeholder="请输入用户名:"> </div> <br> <div class="email" align="center"> <svg class="iconphone" width="20px" height="20px" viewBox="0 0 20 20"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="2-copy-2" sketch:type="MSArtboardGroup" transform="translate(-505.000000, -407.000000)" fill="#666"> <path d="M515,418.304324 C514.12782,418.304324 513.421091,418.888119 513.421091,419.608723 C513.421091,419.995004 513.624357,420.341947 513.947394,420.580774 L513.947394,421.782554 C513.947394,422.262857 514.418637,422.652187 515.00003,422.652187 C515.581302,422.652187 516.052667,422.262857 516.052667,421.782554 L516.052667,420.580774 C516.375703,420.341947 516.579,419.995004 516.579,419.608723 C516.57897,418.888119 515.87221,418.304324 515,418.304324 L515,418.304324 L515,418.304324 Z M522.368454,414.391327 L521.315788,414.391327 L521.315788,412.217421 C521.315788,409.335657 518.488418,407 515,407 C511.511582,407 508.684212,409.335657 508.684212,412.217421 L508.684212,414.391327 L507.631576,414.391327 C506.178003,414.391327 505,415.364503 505,416.565234 L505,424.826193 C505,426.026824 506.178003,427 507.631576,427 L522.368424,427 C523.821422,427 525,426.026899 525,424.826193 L525,416.565234 C525.00003,415.364478 523.821422,414.391327 522.368454,414.391327 L522.368454,414.391327 L522.368454,414.391327 Z M515,407.869583 C517.906571,407.869583 520.263152,409.816309 520.263152,412.217396 L520.263152,414.391302 L509.737544,414.391302 L509.737544,412.217396 L509.736848,412.217396 C509.736848,409.816309 512.093459,407.869583 515,407.869583 L515,407.869583 L515,407.869583 Z M523.947364,424.826093 C523.947364,425.546622 523.240604,426.130392 522.368454,426.130392 L507.631606,426.130392 C506.759396,426.130392 506.052667,425.546622 506.052667,424.826093 L506.052667,416.565234 C506.052667,415.84468 506.759426,415.260835 507.631606,415.260835 L522.368454,415.260835 C523.240635,415.260835 523.947364,415.844705 523.947364,416.565234 L523.947364,424.826093 L523.947364,424.826093 L523.947364,424.826093 Z" id="pw" sketch:type="MSShapeGroup"></path> </g> </g> </svg> <input type="password" id="upass" placeholder="请输入密码:"> </div> <br> <div id="error_box"></div> <div> <button id="login" onclick="myLogin()">登录</button> </div> <br> <div> <input value="1" name="remember" id="remember" type="checkbox"> <label for="remember" style="color: darkmagenta">保存登录信息</label> <input value="2" name="remember" id="remember" type="checkbox"> <label for="remember" style="color: darkmagenta">记住我</label> </div> <br> <a class="register-login" href="{{ url_for('register') }}">进入注册界面</a> <div id="footer" style="background-color: transparent;clear:both;text-align:center;">版权 ． duym@jzx</div> </div> <script> document.getElementById("demo").innerHTML = Date(); document.write(Date()) </script> </body> {% endblock %} </html>
注册页：
{% extends'index.html' %} {% block title %} 注册 {% endblock %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/register.css') }}" type="text/css"> <script src="{{url_for('static',filename='js/register.js') }}"></script> {% endblock %} {% block main %} <body> <div class="box"> <div> <a href="{{ url_for('login') }}">登录</a> <a style="color: antiquewhite">*</a> <a href="{{ url_for('register') }}">注册</a> </div> <br> <div class="name" align="center"> <input id="uname" type="text" placeholder="登录账号:"> </div> <br> <div class="telephone" align="center"> <input type="tel" id="uuser" placeholder="请输入你的手机号:"> </div> <br> <div class="email" align="center"> <input type="password" id="upass" placeholder="设置你的密码:"> </div> <br> <div class="email" align="center"> <input type="password" id="upass2" placeholder="请输入你的密码:"> </div> <br> <div> <div id="error_box"></div> <div> <button id="register" onclick="myRegister()">注册</button> </div> <a class="login-register" href="{{ url_for('login') }}">进入登录界面</a> <div id="footer" style="background-color: transparent;clear:both;text-align:center;">版权 ． duym@jzx</div> </div> </div> </body> {% endblock %} </html>
截图如下：
浙公网安备 33010602011771号