加载静态文件,父模板的继承和扩展

用url_for加载静态文件
1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
2. flask 从static文件夹开始寻找
3. 可用于加载css, js, image文件
继承和扩展
1. 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
2. 子模板继承父模板
  1. {% extends 'base.html’ %}
3. 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
  1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
  2. {% block head %}{% endblock %}
  3. {% block main %}{% endblock %}
4. 子模板中写代码实现自己的需求。block
  1. {% 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;

}

posted on 2017-11-08 20:34 079刘洁婷阅读(142) 评论(0) 收藏举报

刷新页面返回顶部

加载静态文件,父模板的继承和扩展

导航

公告