加载静态文件,父模板的继承和扩展
- 用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 %}
- 首页、登录页、注册页都按上述步骤改写。
from flask import Flask,render_template app = Flask(__name__) @app.route('/') def shouye(): return render_template('shouye.html') @app.route('/denglu/') def denglu(): return render_template('denglu.html') @app.route('/zhuce/') def zhuce(): return render_template('zhuce.html') if __name__ == '__main__': app.run()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <base target="_blank"> <title>{% block title %} 爱奇艺 {% endblock %}</title> <link rel="stylesheet" type="text/css" href="../static/css/text.css"> <script> function mySwitch() { var myele=document.getElementById("on_off") if(myele.src.match("on")){ myele.src="{{ url_for('static',filename='image/off.gif') }}" document.getElementById("myBody").style.background="grey" document.getElementById("demo").style.color="white" } else { myele.src="{{ url_for('static',filename='image/on.gif') }}" document.getElementById("myBody").style.background="white" document.getElementById("demo").style.color="black" } } </script> {% block js %}{% endblock %} </head> <body id="myBody" > <nav class="aaa"> <img src="{{ url_for('static',filename='image/daohan.png') }}"style="height: 40px;width: 45px; "> <a href="http://www.iqiyi.com/">爱奇艺官网</a> <a href="http://www.aiqiyibofangqi.com/">APP下载</a> <a href="{{ url_for("denglu") }}">用户登录</a> <a href="{{ url_for("zhuce") }}">注册</a> <input type="text"placeholder="请输入搜索内容"> <input type="button"value="搜索"> <img id="on_off" onclick="mySwitch()" src="{{ url_for('static',filename='image/on.gif') }}" style="height: 40px;width: 35px; " > </nav> <hr> {% block jiemian %} <div style=" color:darkcyan;font-weight: bold;font-style: italic;font-size: 30px;text-align: center">推荐</div> <div> <div class="img" > <a href="http://www.le.com/tv/73868.html"> <img src="{{ url_for('static',filename='image/01.jpg') }}"></a> <div class="desc"> <a href="http://www.le.com/tv/73868.html">甑嬛传</a> </div> </div> <div class="img"> <a href="http://www.360kan.com/tv/PLRrcH7kSmPlMH.html"> <img src="{{ url_for('static',filename='image/02.jpg') }}"></a> <div class="desc"> <a href="http://www.360kan.com/tv/PLRrcH7kSmPlMH.html">锦绣未央</a> </div> </div> <div class="img"> <a href="http://www.iqiyi.com/a_19rrhalt31.html?vfm=2008_aldbd"> <img src="{{ url_for('static',filename='image/03.png') }}"></a> <div class="desc"> <a href="http://www.iqiyi.com/a_19rrhalt31.html?vfm=2008_aldbd">楚乔传</a> </div> </div> <div class="img"> <a href="http://www.iqiyi.com/a_19rrharlvd.html?vfm=2008_aldbd"> <img src="{{ url_for('static',filename='image/04.jpg') }}"></a> <div class="desc"> <a href="http://www.iqiyi.com/a_19rrharlvd.html?vfm=2008_aldbd">三生三世十里桃花</a> </div> </div> </div> {% endblock %} </body> </html>
{% extends'shouye.html' %} {% block title %} 用户登录 {% endblock %} {% block js %} <script src="{{ url_for('static',filename='js/kk.js') }}"> </script> {% endblock %} {% block jiemian %} <div id="container" style="width:500px;margin: 0 auto " > <div id="header" style="background-color:mediumaquamarine;height: 40px"><h2 align="center" style="margin-bottom:0;font-size: 33px;font-family: 楷体" >用户登录</h2></div> <div id="content" style="background-color:#EEEEEE;height: 280px;width:500px;float:left;text-align:center;font-size: 22px"> <div class="input-box"> <br>用户名<input id="un" type="text" name="user" placeholder="请输入用户账号"style="height: 20px"> </div> <div class="input-box"> <br>密码<input id="pw" type="password" name="pass"style="height: 20px"><br> </div> <br><input type="radio">普通用户 <input type="radio">VIP用户 <div class="input-box"> <br><input type="submit" value="登录" onclick="myLogin()" style="width:65px;height:25px;font-size:15px"> <input type="button"value="注册"onclick="youLogin()" style="width:65px;height:25px;font-size:15px"><br> <div id="error_box" style="font-size: 25px"><br></div> </div> </div> <div id="footer" style="background-color:mediumaquamarine;clear:both;text-align:center;height: 40px;font-size: 31px;font-family: 楷体">版权*GZCC</div> </div> {% endblock %}
{% extends'shouye.html' %} {% block title %} 用户注册 {% endblock %} {% block js %} <script src="{{ url_for('static',filename='js/cc.js') }}"> </script> {% endblock %} {% block jiemian %} <div id="container" style="width:500px;margin: 0 auto " > <div id="header" style="background-color:mediumaquamarine;height: 40px"><h2 align="center" style="margin-bottom:0;font-size: 33px;font-family: 楷体" >新用户注册</h2></div> <div id="content" style="background-color:#EEEEEE;height: 320px;width:500px;float:left;text-align:center;font-size: 22px"> <div class="input-box"> <br>用户昵称<input id="un" type="text" name="user" placeholder="请输入昵称"style="height: 20px"> </div> <div class="input-box"> <br>输入密码<input id="pw" type="password" name="pass"placeholder="请输入密码" style="height: 20px"><br> </div> <div class="input-box"> <br>确认密码<input id="tpw" type="password" name="pass"placeholder="请确认密码"style="height: 20px"><br> </div> <br><input type="radio">普通用户 <input type="radio">VIP用户 <div class="input-box"> <br><input type="submit" value="登录" onclick="myLogin()" style="width:65px;height:25px;font-size:15px"> <input type="button"value="注册"onclick="youLogin()" style="width:65px;height:25px;font-size:15px"><br> <div id="error_box" style="font-size: 25px"><br></div> </div> </div> <div id="footer" style="background-color:mediumaquamarine;clear:both;text-align:center;height: 40px;font-size: 31px;font-family: 楷体">版权*GZCC</div> </div> {% endblock %}
function myLogin() { var one=document.getElementById("un"); var two=document.getElementById("pw"); var three=document.getElementById("error_box"); var four=document.getElementById("tpw"); if(two.value.length<6){ three.innerHTML="为了账号安全,请输入6个以上的密码!"; return } else if((one.value.charCodeAt(0)>=48)&&one.value.charCodeAt(0)<=57){ three.innerHTML="账号首个不能为数字!"; return } else if (two.value!=four.value){ three.innerHTML="输入密码不一致!请重新输入!"; return } else for(var i=1;i<one.value.length;i++){ if((one.value.charCodeAt(i)<48||one.value.charCodeAt(i)>57)&&(one.value.charCodeAt(i)<97||one.value.charCodeAt(i)>122)){ three.innerHTML="账号只能为数字!"; return } } if(one.value.length<6){ three.innerHTML="账号需为6-12个长度!"; return } window.alert("登录成功!") }
function myLogin() { var one=document.getElementById("un"); var two=document.getElementById("pw"); var three=document.getElementById("error_box"); if(two.value.length<6){ three.innerHTML="为了账号安全,请输入6个以上的密码!"; return } else if((one.value.charCodeAt(0)>=48)&&one.value.charCodeAt(0)<=57){ three.innerHTML="账号首个不能为数字!"; return } else for(var i=1;i<one.value.length;i++){ if((one.value.charCodeAt(i)<48||one.value.charCodeAt(i)>57)&&(one.value.charCodeAt(i)<97||one.value.charCodeAt(i)>122)){ three.innerHTML="账号只能为数字!"; return } } if(one.value.length<6){ three.innerHTML="账号需为6-12个长度!"; return } window.alert("登录成功!") }
img{ width: 300px; height: 200px; } .img{ border:1px solid skyblue; width: 300px; height: 250px; float: left; margin: 5px; } .img img{ width:100%; height: 85%; } .desc{ text-align:center; padding: 5px; } .img:hover{ border: 1px solid blue; } p{ color:fuchsia; } .kk{ color:darkcyan;font-weight: bold;font-style: italic;font-size: 20px; } #abc{ color: darkblue;text-decoration: underline;font-size: 25px; } .aaa img{ height:50px; width:50px; }