加载静态文件,父模板的继承和扩展
- 用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 %}
- 首页、登录页、注册页都按上述步骤改写。
父模板base.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{% block title %}{% endblock %}base</title> <link rel="stylesheet" type="text/css" href="../static/css/base.css"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> {% block head %}{% endblock %} </head> <body id="mybody"> <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid" id="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">首页</a> </div> <div> <ul class="nav navbar-nav"> <li><a href="{{ url_for("login") }}" onclick="">登录</a></li> <li><a href="{{ url_for("register") }}" onclick="">注册</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 更多 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">收藏</a></li> <li><a href="#">分享</a></li> <li><a href="#">搜索</a></li> <li class="divider"></li> <li><a href="#">点赞</a></li> </ul> </li> </ul> </div> <div style="float: right"> <img id="myonoff" onclick="mySwitch()" src="https://ps.ssl.qhimg.com/sdmt/119_135_100/t01ebad6510c93738fc.gif" style="width:50px" > </div> <div> <input type="text" name="user" id="user" placeholder="请输入搜索关键词"> <input type="button" value="搜索" class="btn btn-success" onclick=""> </div> </div> </nav> {% block main %}{% endblock %}
base.css
img { width: 200px; } #container { background: cyan; } div.sa { border-style: solid; border-width: 5px; border-color: gold; width: 400px; float: left; margin: 5px; } div.sa img { width: 80%; heigh: aute; } div.st { text-align: center; padding: 2px; } div.sa:hover { border-style: solid; border-width: 5px; border-color: green; }
base.js
function mySwitch() { var oBody = document.getElementById("mybody"); var oOnoff = document.getElementById("myonoff"); if (oOnoff.src.match("t01ebad6510c93738fc")) { oOnoff.src = "https://ps.ssl.qhimg.com/sdmt/119_135_100/t01ebad6510c93738fc.gif"; oBody.style.background = "black"; oBody.style.color = "yellow" } else { oOnoff.src = "https://ps.ssl.qhimg.com/sdmt/119_135_100/t01ebad6510c93738fc.gif"; oBody.style.background = "white"; oBody.style.color = "black" } }
login.html
<head> <link href="../static/css/base.css" rel="stylesheet" type="text/css"> </head>{% extends "base.html" %} {% block title %} 登陆 {% endblock %} {% block head %} <link href="{{ url_for('static',filename='css/login.css')}}" rel="stylesheet" type="text/css"> <script src="{{ url_for('static',filename='js/base.js') }}"></script> {% endblock %} {% block main %} <body> <div class="bigbox"> <div class="box"> <h2 align="center">登录</h2> <div class="input_box" align="center"> 账户:<input id="umane"type="text"placeholder="请输入用户名"> </div> <div class="input_box" align="center"> 密码:<input id="upass"type="password"placeholder="请输入密码"> </div> <div id="error_box"><br></div> <div class="input_box" align="center"> <button onclick="myLogin()">登录</button> <button onclick=window.alert("是否取消登录?")>取消</button></div> </div> </div> <script>function myLogin() { var oUname = document.getElementById("umane"); var oError = document.getElementById("error_box"); var oUpass = document.getElementById("upass"); oError.innerHTML = "<br>" //oUname if (oUname.value.length>12 || oUname.value.length<6){ oError.innerHTML = "name:6-12"; return; } else if((oUname.value.charCodeAt(0)>=48) && oUname.value.charCodeAt(0)<=57){ oError.innerHTML = "首字母不能是数字"; return; }else for(var i=0; i<oUname.value.length;i++) { if((oUname.value.charCodeAt(i)<48 || oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97 || oUname.value.charCodeAt(i)>122 )){ oError.innerHTML = "只能包含字母和数字"; return; } } if(upass.value.length>12 || upass.value.length<6){ oError.innerHTML="password;6-12"; return; } window.alert("登陆成功 !") } </script> </body> {% endblock %}
login.css
h2 { align: center; } .bigbox { display: -webkit-flex; display: flex; /*width: 300px;*/ /*height: 250px;*/ /*padding-left: 200px;*/ /*padding-top: 100px;*/ background-color: cyan; } #input_box { align: center; margin: 500px; padding-left: 500px; } #error_box { color: dodgerblue; } .bigbox { padding-right: 500px; margin-top: 100px; padding-left: 500px; font-size: 16px; padding-bottom: 40px; padding-top: 40px; font-family: verdana, Arial, Helvetica, sans-serif; }
register.html
{% extends 'base.html' %} {% block title %} 注册 {% endblock %} {% block head %} <link href="../static/css/login.css" rel="stylesheet" type="text/css"> <script src="{{ url_for('static',filename='js/base.js') }}"></script> {% endblock %} {% block main %} <script>function myLogin() { var oUname = document.getElementById("umane"); var oError = document.getElementById("error_box"); var oUpass = document.getElementById("upass"); oError.innerHTML = "<br>" //oUname if (oUname.value.length>12 || oUname.value.length<6){ oError.innerHTML = "name:6-12"; return; } else if((oUname.value.charCodeAt(0)>=48) && oUname.value.charCodeAt(0)<=57){ oError.innerHTML = "首字母不能是数字"; return; }else for(var i=0; i<oUname.value.length;i++) { if((oUname.value.charCodeAt(i)<48 || oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97 || oUname.value.charCodeAt(i)>122 )){ oError.innerHTML = "只能包含字母和数字"; return; } } if(upass.value.length>12 || upass.value.length<6){ oError.innerHTML="password;6-12"; return; } window.alert("登陆成功 !") }</script> <body> <div class="bigbox"> <div class="box"> <h2 align="center">注册</h2> <div class="input_box" align="center"> 输入账户:<input id="umane"type="text"placeholder="请输入用户名"> </div> <div class="input_box" align="center"> 输入密码:<input id="upass"type="password"placeholder="请输入密码"> </div> <div class="input_box" align="center"> 再输密码:<input id="userpass1" type="password" placeholder="请再次输入密码"> </div> <div id="error_box"><br></div> <div class="input_box" align="center"> <button onclick="myLogin()">注册</button> </div> </div> </body> {% endblock %}
from flask import Flask from flask import render_template app = Flask(__name__) @app.route('/') def base(): return render_template('base.html') @app.route('/login/') def login(): return render_template('login.html') @app.route('/register/') def register(): return render_template('register.html') if __name__ == '__main__': app.run(debug=True)