1.用url_for加载静态文件
- <script src="{{ url_for('static',filename='js/login.js') }}"></script>
- flask 从static文件夹开始寻找
- 可用于加载css, js, image文件
2.继承和扩展
- 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
- 子模板继承父模板
- {% extends 'base.html’ %}
- 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
- <title>{% block title %}{% endblock %}-MIS问答平台</title>
- {% block head %}{% endblock %}
- {% block main %}{% endblock %}
- 子模板中写代码实现自己的需求。block
- {% block title %}登录{% endblock %}
3.首页、登录页注册页都按上述步骤改写。
模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block titlr %}广州商学院{% endblock %}</title> <link rel="stylesheet" type="text/css" href="../static/base.css"> <script src="../static/base.js"></script> {% block head %} {% endblock %} <base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank"> </head> <body> <body id="myBody"> <div class="clearfloat"> <nav > <img src="w_02_08_00.png" > <a href="{{url_for('muban')}}">首页</a> <a href="http://www.gzcc.cn/">下载</a> <input type="text" name="search" > <button type="submit">搜索</button> <a href="{{url_for('login')}}">登录</a> <a href="{{url_for('zhuce')}}">注册</a> <a href="http://www.gzcc.cn/" >意见反馈</a> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="20px";> </nav><hr> </div> <div id="footer" style="background-color: lightskyblue;clear: both;text-align: center;"></div> {% block main %} {% endblock %} </body> <footer> <div class="footer_box"> Copyright © 2017 广州商学院 All Rights Reserved 版权归个人所有 </div> </footer> <body background="http://d.hiphotos.baidu.com/image/pic/item/f636afc379310a55808b5625bd4543a9832610b7.jpg"style="background-repeat:no-repeat;background-size: 100% 100%; background-attachment: fixed;"></body> </body> </html>
首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../static/base.css"> <script src="../static/base.js"></script> <base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank"> </head> <body id="myBody"> <div class="clearfloat"> <nav > <img src="w_02_08_00.png" > <a href="login.html"></a> <a href="">下载</a> <a href="">图书馆</a> <a href="">意见反馈</a> <input type="text" name="search"> <button type="submit">搜索</button> <a href="" >联系我们</a> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="20px";> </nav><hr> </div> <br> <br> <br> <br><br> <h1> 广州商学院欢迎你! </h1> <br><br> <h1> 活力广商，筑梦远航！ </h1> <br><br><br> <div id="footer" style="background-color: lightskyblue;clear: both;text-align: center;"></div> <div class="desc" > <hr> <div class="img" > <a href="http://www.gzcc.cn/"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508497686486&di=e2ccca98fa05f9473c84f73db141ad88&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F57ac36088f69c.jpg" width="20px"> </a> <div><a href="http://www.gzcc.cn/">数字广商</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508497686476&di=50b7102b085d85e015eff1b2d31436ea&imgtype=0&src=http%3A%2F%2Fimg5.xiazaizhijia.com%2Fwalls%2F20150803%2F1440x900_96ae2cb132cbe37.jpg"></a> <div><a href="http://www.gzcc.cn/">视频校园</a></div> </div> <div class="img" class="clearfloat" class="img-hover"> <a href="http://www.gzcc.cn/"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508498137537&di=82dbcda3618e2dfd61810d2fb0daf202&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F5754d121da01d.jpg"></a> <div><a href="http://www.gzcc.cn/">画说校园</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508498264263&di=55e6cb21f27b29f83d3c9ff9a73b3bae&imgtype=0&src=http%3A%2F%2Fwww.zcool.com.cn%2Fcommunity%2F037b9a359147e96b5b3086ed42c6bee.jpg" width="80px"></a> <div><a href="http://www.gzcc.cn/">全景校园</a></div> </div> </div> <footer> <div class="footer_box"> Copyright © 2017 广州商学院 All Rights Reserved </div> </footer> </body> </html>
登录
{% extends 'muban.html' %} {% block title %}登录{% endblock %} {% block head %} <link rel="stylesheet" type="text/css" href="../static/login.css"> <script src="../static/login.js"></script> {% endblock %} {% block main %} <div class="Outbox"> <div class="box"> <h2>欢迎来到博客园，代码改变世界！</h2> <h3>登录页面</h3> <div class="input_box"> 账号：<input id="umane"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="myLogin()">登录</button> <button onclick=window.alert("请重新输入")>取消</button></div> </div> </div> </body> {% endblock %}
注册
{% extends'muban.html' %} {% block title %} 注册 {% endblock %} {% block head %} <link rel="stylesheet" type="text/css" href="../static/login.css"> <script src="../static/login.js"></script> {% endblock %} {% block main %} <div class="Outbox"> <div class="box"> <h2>欢迎来到博客园，代码改变世界！</h2> <h3>用户注册</h3> <div class="input_box"> 输入账号：<input id="umane"type="text"placeholder="请输入用户名"> </div> <div class="input_box"> 输入密码：<input id="upass"type="password"placeholder="请输入密码"> </div> <div class="input_box"> 确认密码：<input id="userpass1" type="password" placeholder="请再次输入密码"> </div> <div id="error_box"><br></div> <div class="input_box"> <button onclick="myLogin()">注册</button> <button onclick=window.alert("取消注册") type="submit" class="btn btn-primary btn-block btn-large">返回</button> </div> </div> </div> {% endblock %}
