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

  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. 首页、登录页、注册页都按上述步骤改写。 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}首页{% endblock %}</title>
    <script src="{{ url_for('static',filename='js/base.js')}}"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css">
</head>
<body id="myBody">
{% block head %}{% endblock %}
<div class="a">
    <nav>
        <a href="{{ url_for('index') }}">首页</a>
        <a href="">发布问答</a>
        <input type="text" name="search">
        <button type="submit">查找</button>
        <img class="navi" id="on_off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif " width="20px">
        <a class="navi" href="{{ url_for('register') }}">注册</a>
        <a class="navi" href="{{ url_for('login') }}">登录</a>
        <a class="navi" href="">收藏</a>
    </nav>
</div>
<hr>
    <div>
         <div class="img">
             <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=%E5%B0%8F%E7%8C%AA%E4%BD%A9%E5%A5%87&rsv_pq=f77d08900001a419&rsv_t=45ebl8vOLWaojJB%2BJqWl4G2jgewDoaq6Eal6j0Zx2EIT96apylRhpP3Koqg&rqlang=cn&rsv_enter=1&rsv_sug3=6&rsv_sug1=6&rsv_sug7=100">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477292746&di=b4d222e641b5c06b07c55cd205bba706&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161220%2Fca4c1e06ab854a40bb2590408a7b2f19_th.jpg"></a>
         <div class="desc"><a href="http://www.baidu.com/">小猪佩奇</a></div>
         </div>
     </div>
     <div>
         <div class="img">
             <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%89%98%E9%A9%AC%E6%96%AF%E5%92%8C%E4%BB%96%E7%9A%84%E6%9C%8B%E5%8F%8B%E4%BB%AC&oq=%25E5%25B0%258F%25E7%258C%25AA%25E4%25BD%25A9%25E5%25A5%2587&rsv_pq=eb12f7da00019eba&rsv_t=de8cbtTwyWVcQv6xzo8AEbWJhamBkxPdSWJh9Imdf5qYr8rt2NZHXCfYWNg&rqlang=cn&rsv_enter=1&inputT=3189&rsv_sug3=14&rsv_sug1=14&rsv_sug7=100&rsv_sug2=1&prefixsug=tuomasi&rsp=2&rsv_sug4=3188">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477829747&di=fd07b5cc8dd393392af74d2b90404779&imgtype=0&src=http%3A%2F%2Ffdfs.xmcdn.com%2Fgroup23%2FM06%2F8A%2F7E%2FwKgJL1h52lGCOLCQAAEaqmTeglU035.jpg"></a>
             <div class="desc"><a href="http://www.baidu.com/">托马斯和他的朋友们</a></div>
         </div>
     </div>
     <div>
         <div class="img">
             <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0&oq=%25E6%2589%2598%25E9%25A9%25AC%25E6%2596%25AF%25E5%2592%258C%25E4%25BB%2596%25E7%259A%2584%25E6%259C%258B%25E5%258F%258B%25E4%25BB%25AC&rsv_pq=d23a15630001b4ed&rsv_t=7430JNuHLv7607LmZ%2B%2BWE2eYL%2Fp7GhOQe3j0f5S9RCnmHRWM5plbXIAinRg&rqlang=cn&rsv_enter=1&inputT=2790&rsv_sug3=20&rsv_sug1=19&rsv_sug7=100&rsv_sug2=1&prefixsug=maohe%2520&rsp=0&rsv_sug4=2790">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477964743&di=46e94537aabf5867005957b87cd85799&imgtype=0&src=http%3A%2F%2Fcdn.aixifan.com%2Fdotnet%2Fartemis%2Fu%2Fcms%2Fwww%2F201603%2F2615504731cpun6r.jpg"></a>
             <div class="desc"><a href="http://www.baidu.com/">猫和老鼠</a></div>
         </div>
     </div>
     <div>
         <div class="img">
             <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%A4%A9%E7%BA%BF%E5%AE%9D%E5%AE%9D&oq=%25E7%258C%25AB%25E5%2592%258C%25E8%2580%2581%25E9%25BC%25A0&rsv_pq=8de48b3f0001c6b3&rsv_t=94c1qlZLktBv27KJJZA0Sxe9rIX64JhNE%2F7O030MAq3wDdaGuEiv99uR8Jg&rqlang=cn&rsv_enter=1&inputT=2790&rsv_sug3=27&rsv_sug1=26&rsv_sug7=100&bs=%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0">
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478000480&di=5fe3f1bdcea73b098ec174ea6a7b5f8b&imgtype=0&src=http%3A%2F%2Fd2xosoyzehxi5w.cloudfront.net%2Fwp-content%2Fuploads%2F2014%2F12%2Fteletubbies-sun-baby-jess-smith-3.jpg"></a>
             <div class="desc"><a href="http://www.baidu.com/">天线宝宝</a></div>
         </div>
     </div>
{%  block main %}{% endblock %}

</body>
</html>
    {% extends'base.html' %}

{% block title %}
登录
{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/js23.css') }}">
    <script src="{{ url_for('static',filename='js/js23.js') }}"></script>
{% endblock %}
{% block main %}
<div class="bg-img">
   <div class="box">
       <h1>登录</h1>
       <div class="input_box">
           <h3>username</h3>
           <input id="username" type="text" placeholder="请输入用户名">
       </div>
       <div class="input_box">
           <h3>userpass</h3>
           <input id="userpass" type="password" placeholder="请输入密码">
       </div>
       <br>
       <div class="link_box">
           <a href="js24.html">
               没有账号，立即注册
               <b> ></b>
           </a>
       </div>
       <div id="error_box"><br></div>
       <div class="input_box">
           <button onclick="fnLogin()">LOGIN</button>
           <button onclick=window.alert(fnLogin())>RESET</button>
       </div>
   </div>
</div>
{% endblock %}
    {% extends'base.html' %}

{% block title %}
注册
{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/js24.css') }}">
    <script src="{{ url_for('static',filename='js/js24.js') }}"></script>
{% endblock %}
{% block main %}
<div class="bg-img">
    <div class="box">
        <h1>注册</h1>
        <div class="input_box">
            用户名：<input id="username" type="text" placeholder="请输入新用户名">
        </div>
        <br>
        <div class="input_box">
            密 码：&nbsp&nbsp<input id="userpass" type="password" placeholder="请输入新密码">
        </div>
        <br>
        <div class="input_box">
            密 码：&nbsp&nbsp<input id="reuserpass" type="password" placeholder="请再次输入新密码">
        </div>
        <br>
        <div class="link_box">
            <a href="js23.html">
                已有帐号，立即登陆
                <b> ></b>
            </a>
        </div>
        <div id="error_box"><br></div>
        <div class="input_box">
           <button id="button" onclick="fnRegister()">注册</button>
        </div>
    </div>
</div>
{% endblock %}

posted @ 2017-11-08 12:03  088郑淑莹  阅读(449)  评论(0)    收藏  举报