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

  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;
    width: 58px;
    height: 58px;
    border: none;
    background: rgba(122, 162, 215, 0.55);
    border-radius: 0 5px 5px 0;
    cursor: pointer;

}

.d1 {
    margin-top: 10px;
    width: 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;
    width: 100%;
    text-align: center;
    color: rgba(58, 40, 66, 0.41);

}

#didao {
    position: absolute;
    bottom: 50px;
    margin: 10px;
    width: 100%;
    text-align: center;

}

div.img {

    border: 1px solid #ccc;
    width: 300px;

    float: left;
    margin: 5px;
}

div.img img {
    width: 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 %}

 

 

运行结果：

 

 

 

 

 

 

 

 

 

 

 

 

posted on 2017-11-03 16:14  046余博智  阅读(210)  评论(0)    收藏  举报

导航