- 用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 %}
- 首页、登录页、注册页都按上述步骤改写。 父模板：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>{% block title%}{% endblock %}base</title> <link rel="stylesheet" href="{{ url_for('static',filename='css/base.css')}}"> <script src="{{ url_for('static',filename='js/base.js') }}"></script> <base target="_blank" /> {% block head %} {% endblock %} </head> <body> <div><h1>武林</h1></div> <nav> <a href="http://127.0.0.1:5000/" style="color: red">首页</a> <a href="" style="color: red">下载</a> <input type="text"name="search"> <button type="submit" >搜索</button> <a href="http://127.0.0.1:5000/login" style="color: red">登录</a> <a href="{{ url_for('regist')}}" style="color: red">注册</a> </nav> {% block main %}{% endblock %} </body> </html>
首页
{% extends'base.html' %} {% block title %} 首页 {% endblock %} {% block head %} <link rel="stylesheet" href="{{ url_for('static',filename='css/hh.css')}}" type="text/css"> {% endblock %} {% block main %} <body> <div class="all"> <div class="img"> <a href=""> <img src="http://img2.touxiang.cn/file/20160601/78050c8c02997f95d03bc5c8041b5131.jpg"></a> <div class="wenzi1"><a href="">一念无明</a></div> </div> <div class="img"> <a href=""> <img src="http://img2.touxiang.cn/file/20160601/9144c9b9c9bc63150d9aa5aac727b392.jpg"></a> <div class="wenzi2"><a href="">美人为馅</a></div> </div> <div class="img"> <a href=""> <img src="http://img2.touxiang.cn/file/20160504/b1e6d1af8b96f4506d4a8acc9a1182f7.jpg"></a> <div class="wenzi3"><a href="">公子如玉</a></div> </div> <div class="img"> <a href=""> <img src="http://img2.touxiang.cn/file/20160601/99473e3887d3e8c6e8a9015e134c3307.jpg"></a> <div class="wenzi4"><a href="">刀剑无眼</a></div> </div> </div> </body> {% endblock %} </html>
登录页
{% extends'base.html' %} {% block title %} 登录 {% endblock %} {% block head %} <link href="../static/css/hh.css" rel="stylesheet" type="text/css"> <script src="../static/js/hl.js"></script> {% endblock %} {% block main %} <body> <div><h1>武林|登录</h1></div> <div class="box"> <div class="input_box"> 姓名：<input type="text" id="uname" placeholder="敢问阁下大名"> </div> <br> <div class="input_box"> 密码：<input type="password" id="upass" placeholder="请输入通关密码"> </div> <br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">登录</button> </div> <br> </div> </div> {% endblock %} </body> </html>
注册页
{% extends'base.html' %} {% block title %} 注册 {% endblock %} {% block head %} <link href="../static/css/hh.css" rel="stylesheet" type="text/css"> <script src="../static/js/hl.js"></script> {% endblock %} {% block main %} <body> <div><h1>武林|注册</h1></div> <div class="box"> <div class="input_box"> 请输入账号：<input id="name" type="text"placeholder="请输入用户名"><br> </div> <br> <div class="input_box"> 请输入密码：<input id="password" type="password"placeholder="请输入密码"><br><br> 请确认密码：<input id="password2" type="password"placeholder="请再次输入密码"><br> </div> <br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">注册</button> </div> <br> </div> </div> </body> {% endblock %} </html>
首页
登录
注册
