zoukankan      html  css  js  c++  java
  • 加载静态文件,父模板的继承和扩展

    1. 用url_for加载静态文件
      1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
      2. flask 从static文件夹开始寻找
      3. 可用于加载css, js, image文件
    2. 继承和扩展
      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 %}
    3. 首页、登录页、注册页都按上述步骤改写。

    1.

    basic.html

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
         <script language="javascript" type="text/javascript" src="{{url_for('static',filename="js/basic.js")  }}"></script>
        <link rel="stylesheet" type="text/css" href="{{url_for('static',filename="css/basic.css")  }}">
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body  id="myBody" background="{{url_for('static',filename="img/timg1.jpg")  }}">
    
    
    <ul class="nav nav-pills">
        <li class="active"><a href="{{ url_for('index')  }}"><h2>Home</h2></a></li>
        <li><a href="#"><h2>PHP</h2></a></li>
        <li><a href="#"><h2>JAVA</h2></a></li>
        <li><a href="#"><h2>C++</h2></a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <h2>更多</h2><span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#"><h2>python</h2></a></li>
                <li><a href="#"><h2>html</h2></a></li>
                <li><a href="#"><h2>jsp</h2></a></li>
    
            </ul>
        </li>
    <li><a href="#"><h2>......&nbsp</h2></a></li>
    <li>
          <input class="d1" type="text" placeholder="搜索从这里开始...">
          <button  class="b" type="submit">搜索</button></li>
    
        <li><img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">&nbsp;</li>
        <li><a href="{{ url_for('login') }}"><h2>登录</h2></a></li>
        <li><a href="{{ url_for('zhuce') }}"><h2>注册</h2></a></li>
        <li><a href="#"><h2>联系我</h2></a></li>
    </ul>
    
    
    <img id="gui" onclick="mySwitch()" src="" width="1700px">
    <div class="kuai">
    <div class="n1">
        <h2>内容块1</h2>
    </div >
    <div class="n2">
        <h2>内容块2</h2>
    </div>
    </div>
    
    
    <div id="didao">
    
        <div class="img"><a href="http://www.baidu.com"><img src="http://scimg.jb51.net/allimg/140408/10-14040QG01GU.jpg"></a><div class="desc"></div><a href="http://www.baidu.com">友情链接</a></div>
        <div class="img"><a href="http://www.baidu.com"><img src="http://imgstore.cdn.sogou.com/app/a/100540002/800197.jpg"></a><div class="desc"></div><a href="http://www.baidu.com">教务系统</a></div>
        <div class="img"><a href="http://www.baidu.com"><img src="http://4493bz.1985t.com/uploads/allimg/150625/1-1506251F320.jpg"></a><div class="desc"></div><a href="http://www.baidu.com">读者留言</a></div>
        <div class="img"><a href="http://www.baidu.com"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510223061&di=bc9ea322068f5f0311fb2ab6fe9db29a&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.005.tv%2Fuploads%2Fallimg%2F160920%2F103J12649-15.jpg"></a><div class="desc"></div><a href="http://www.baidu.com">回到顶部</a></div>
    
    </div>
    
    
    
    <footer>
        <div class="foot">
           <div > <a href="#"> 联系我们</a> · <a href="#"> 加入我们</a> ·  <a href="#"> 品牌与徽标 </a> ·  <a href="#">帮助中心</a> · <a href="#">合作伙伴</a></div>
            <div>©2015-2017 广州商学院信息技术与工程学院 / 粤ICP备278953737号-5 / 粤公网安备2015060050046号 /   Smrz 粤公网安备201506050046号 /   Wxb  举报电话:020-66666666</div>
        </div>
    </footer>
    </body>
    </html>
    复制代码

    basic.css

    复制代码
    #myBody {
        background-size: auto 1021px;
    }
    
    #myOnOff {
        margin-left: 400px;
    }
    
    .b {
        margin-top: 10px;
        position: absolute;
        top: 0;
        right: 0px;
         58px;
        height: 58px;
        border: none;
        background: rgba(122, 162, 215, 0.55);
        border-radius: 0 5px 5px 0;
        cursor: pointer;
    
    }
    
    .d1 {
        margin-top: 10px;
         100%;
        height: 58px;
        padding-left: 10px;
        border: 2px solid #e7e4e4;
        border-radius: 5px;
        outline: none;
        background: rgba(231, 228, 228, 0.37);
        color: #e7e4e4;
    }
    
    .foot {
        position: absolute;
        bottom: 0px;
        margin: 10px;
         100%;
        text-align: center;
        color: rgba(58, 40, 66, 0.41);
    
    }
    
    #didao {
        position: absolute;
        bottom: 50px;
        margin: 10px;
         100%;
        text-align: center;
    
    }
    
    div.img {
    
        border: 1px solid #ccc;
         300px;
    
        float: left;
        margin: 5px;
    }
    
    div.img img {
         200px;
        height: 135px;
    
    }
    
    div.desc {
        text-align: center;
        padding: 5px;
    }
    
    div.img:hover {
        border: 1px solid #000000;
    }
    
    .n1 {
        height: 150px;
        background-color: rgba(255, 113, 133, 0.13);
    
    }
    
    .n2 {
        height: 150px;
        background-color: antiquewhite;
    
    
    }
    复制代码

    basic.js

    复制代码
    function mySwitch() {
        var oBody = document.getElementById("myBody");
    
        var oOnOff = document.getElementById("myOnOff");
        var ogui = document.getElementById("gui");
        if (oOnOff.src.match('bulbon')) {
    
            oOnOff.src = "http://www.runoob.com/images/pic_bulboff.gif";
            oBody.style.backgroundColor = "black";
            oBody.background="../static/img/h.jpg"
            oBody.style.color = "white";
            ogui.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509563443074&di=b1bbb3f5714a580e2211e281124636c2&imgtype=0&src=http%3A%2F%2Fpic15.nipic.com%2F20110709%2F7854247_221301558161_2.jpg";
        } else {
            oOnOff.src = "http://www.runoob.com/images/pic_bulbon.gif";
            oBody.style.backgroundColor = "white";
            oBody.style.color = "black";
            ogui.src = "";
            oBody.background="../static/img/timg1.jpg"
        }
    }
    复制代码

    py文件:

    复制代码
    from flask import Flask
    from flask import render_template
    
    app = Flask(__name__)
    
    @app.route('/')
    def index():
        return render_template('basic.html')
    @app.route('/login/')
    def login():
        return render_template('login.html')
    @app.route('/zhuce/')
    def zhuce():
        return render_template('zhuce.html')
    if __name__ == '__main__':
        app.run(debug=True)
    复制代码

     2/3

    运行结果:

     

     

     
     
     

     代码如下:

    basic.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
         <script language="javascript" type="text/javascript" src="{{url_for('static',filename="js/basic.js")  }}"></script>
        <link rel="stylesheet" type="text/css" href="{{url_for('static',filename="css/basic.css")  }}">
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body  id="myBody" background="{{url_for('static',filename="img/timg1.jpg")  }}">
    
    
    <ul class="nav nav-pills">
        <li class="active"><a href="{{ url_for('index')  }}"><h2>Home</h2></a></li>
        <li><a href="#"><h2>PHP</h2></a></li>
        <li><a href="#"><h2>JAVA</h2></a></li>
        <li><a href="#"><h2>C++</h2></a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <h2>更多</h2><span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#"><h2>python</h2></a></li>
                <li><a href="#"><h2>html</h2></a></li>
                <li><a href="#"><h2>jsp</h2></a></li>
    
            </ul>
        </li>
    <li><a href="#"><h2>......&nbsp</h2></a></li>
    <li>
          <input class="d1" type="text" placeholder="搜索从这里开始...">
          <button  class="b" type="submit">搜索</button></li>
    
        <li><img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">&nbsp;</li>
        <li><a href="{{ url_for('login') }}"><h2>登录</h2></a></li>
        <li><a href="{{ url_for('zhuce') }}"><h2>注册</h2></a></li>
        <li><a href="#"><h2>联系我</h2></a></li>
    </ul>
    
    
    <img id="gui" onclick="mySwitch()" src="" width="1700px">
    
    {% block aa %}{% endblock %}
    
    <div id="didao">
    
        <div class="img"><a href="http://www.baidu.com"><img src="http://scimg.jb51.net/allimg/140408/10-14040QG01GU.jpg"></a><div class="desc"></div><a href="http://www.baidu.com">友情链接</a></div>
        <div class="img"><a href="http://www.baidu.com"><img src="http://imgstore.cdn.sogou.com/app/a/100540002/800197.jpg"></a><div class="desc"></div><a href="http://www.baidu.com">教务系统</a></div>
        <div class="img"><a href="http://www.baidu.com"><img src="http://4493bz.1985t.com/uploads/allimg/150625/1-1506251F320.jpg"></a><div class="desc"></div><a href="http://www.baidu.com">读者留言</a></div>
        <div class="img"><a href="http://www.baidu.com"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510223061&di=bc9ea322068f5f0311fb2ab6fe9db29a&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.005.tv%2Fuploads%2Fallimg%2F160920%2F103J12649-15.jpg"></a><div class="desc"></div><a href="http://www.baidu.com">回到顶部</a></div>
    
    </div>
    
    
    
    <footer>
        <div class="foot">
           <div > <a href="#"> 联系我们</a> · <a href="#"> 加入我们</a> ·  <a href="#"> 品牌与徽标 </a> ·  <a href="#">帮助中心</a> · <a href="#">合作伙伴</a></div>
            <div>©2015-2017 广州商学院信息技术与工程学院 / 粤ICP备278953737号-5 / 粤公网安备2015060050046号 /   Smrz 粤公网安备201506050046号 /   Wxb  举报电话:020-66666666</div>
        </div>
    </footer>
    </body>
    </html>

    zhuce.html

      {% extends 'basic.html'%}
      {% block aa %}
        <link rel="stylesheet" type="text/css" href="{{url_for('static',filename="css/zhuce.css")  }}">
    <div id=mao ><p></p>
        <div id="header"><h2 align="center"></h2></div>
        <div id="content" >
    
            <form><br/>
    
    
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">Username:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="uname"
                               placeholder="make your username"><br>
                    </div>
    
    
                </div>
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">Password:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="upass"
                               placeholder="make your password"><br>
                    </div>
                </div>
    
    
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">AgainPass:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="upass2"
                               placeholder="again your password"><br>
                    </div>
                </div>
    
                <div >
                <br> &nbsp &nbsp &nbsp <input type="radio" name="role" value="stu">student
                <input id="tea" type="radio" name="role" value="tea">teacher<br/>
                </div>
    
                <div id="error_box"  ></div>
                <div align="center">
                   <input id="input_box" type="button" class="btn btn-default btn-lg active" value="注册" onclick="miao()">
                 </div>
              </form>
    </div>
    </div>
    
    
    
      {% endblock %}

    login.html

      {% extends 'basic.html'%}
      {% block aa %}
        <link rel="stylesheet" type="text/css" href="{{url_for('static',filename="css/login.css")  }}">
    
    
    &nbsp<a href="{{ url_for('index')  }}"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509622142069&di=e2b231bb86f22bf12f9279144deef856&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_0_2679158030D2163567386_23.jpg" width="80px"  >
    </a>
        <div id=mao ><p></p>
        <div id="header"><h1 align="center">Login</h1></div>
        <div id="content" >
    
            <form><br/>
    
    
    
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">Username:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="uname"
                               placeholder="input your username"><br>
                    </div>
    
    
                </div>
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">Password:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="upass"
                               placeholder="input your password"><br>
                    </div>
                </div>
    
    
               <div >
                <br> &nbsp &nbsp &nbsp <input type="radio" name="role" value="stu">student&nbsp
                <input id="tea" type="radio" name="role" value="tea">teacher<br/><br/>
                </div>
    
                <div align="center">
                <input id="rem" type="checkbox" value="true"><span>remember me</span> &nbsp &nbsp &nbsp &nbsp<a href="http://help.clouddream.net/newsitem/277741776" target="_blank">Login problem</a><br/>
                <br>
                </div>
          <div id="error_box" ></div>
                <div align="center">
                   <input id="input_box" type="button" class="btn btn-default btn-lg active" value="登录" onclick="miao()">
                 </div>
              </form>
    </div>
    </div>
    
    
    
      {% endblock %}

    运行结果:

     

  • 相关阅读:
    Jmeter之http性能测试实战 非GUI模式压测 NON-GUI模式 结果解析TPS——干货(十一)
    UI Recorder 自动化测试 回归原理(九)
    UI Recorder 自动化测试 录制原理(八)
    UI Recorder 自动化测试 整体架构(七)
    UI Recorder 自动化测试 配置项(六)
    UI Recorder 自动化测试 工具栏使用(五)
    UI Recorder 自动化测试 回归测试(四)
    UI Recorder 自动化测试 录制(三)
    UI Recorder 自动化测试工具安装问题疑难杂症解决(二)
    UI Recorder 自动化测试安装教程(一)
  • 原文地址:https://www.cnblogs.com/decadeyu/p/7778639.html
Copyright © 2011-2022 走看看