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

  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. 首页、登录页、注册页都按上述步骤改写。
  5. 父模板： 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="../static/css/base.css" type="text/css">
    <script src="../static/js/base.js"></script>
     <base target="_blank" />
</head>
<body id="myBody">

<nav class="nav">
    <ul>
        <li><a href="{{ url_for('index') }}"><img  src="../static/images/shouye.jpg">首页</a></li>
        <li><a href="{{ url_for('sign_in') }}"><img src="../static/images/denglu.jpg">登录</a></li>
        <li><a href="{{ url_for('sign_up') }}"><img src="../static/images/zhuce.jpg">注册</a></li>
        <img id="on_off" onclick="mySwitch()" src="../static/images/pic_bulbon.gif" width="50px">
        <button style="float: right;margin: 5px auto;border-radius: 5px;height: 30px" type="submit">搜索</button>
        <input style="float: right;margin: 5px auto;border-radius: 8px;width: 200px;height: 20px;"  type="text" name="search"PLACEHOLDER="输入要搜索的内容">

    </ul>
</nav>

<div id="bottom">
    <a href="">联系我们</a>
    <a href="">加入我们</a>
    <a href="">合作伙伴</a>
</div>

<div class="copyright">
    <p>Copyright &copy; 2017. Created by <a href="#" target="_blank">ben</a></p>
</div>

</body>
</html>

    首页：

    {% extends'base.html' %}
{% block title %}
    Home
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css')}}" type="text/css">
{% endblock %}
{% block main %}
<body>
<div class="all">
    <div class="pic">
        <a href="">
            <img src="http://pal4.roogames.com/pal4/pal4index_files/pic/pic_d_22.jpg"></a>
        <div class="ziying"><a  href="https://baike.baidu.com/item/%E6%85%95%E5%AE%B9%E7%B4%AB%E8%8B%B1/3622704?fr=aladdin">慕容紫英</a></div>
    </div>
    <div class="pic">
        <a href="">
            <img src="http://pal4.roogames.com/pal4/pal4index_files/pic/pic_d_23.jpg"></a>
        <div class="tianhe"><a href="https://baike.baidu.com/item/%E4%BA%91%E5%A4%A9%E6%B2%B3/11894?fr=aladdin&fromid=9077568&fromtitle=%E5%A4%A9%E6%B2%B3">云天河</a></div>
    </div>
    <div class="pic">
        <a href="">
            <img src="http://pal4.roogames.com/pal4/pal4index_files/pic/pic_24.jpg"></a>
        <div class="mengli"><a href="https://baike.baidu.com/item/%E6%9F%B3%E6%A2%A6%E7%92%83/3622691?fr=aladdin">柳梦璃</a></div>
    </div>
    <div class="pic">
        <a href="">
            <img src="http://pal4.roogames.com/pal4/pal4index_files/pic/pic_03.jpg"></a>
        <div class="lingsha"><a href="https://baike.baidu.com/item/%E9%9F%A9%E8%8F%B1%E7%BA%B1/3622760?fr=aladdin">韩菱纱</a></div>
    </div>
</div>
</body>
{% endblock %}
</html>

    登录：

    {% extends 'base.html' %}

{% block title %}
    登陆
{% endblock %}

{% block head %}
 <script src="{{ url_for('static',filename='js/ggg.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/vvv.css')}}">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
{% endblock %}

{% block main %}
<body>
<div class="div1">
    <div class="div2">登录</div>
    <div class="div3">
       <div class="iconfont ic-user"></div> 用户：<input id="username" type="text" placeholder="请输入用户名">
    </div>
    <div class="div3">
        密码：<input id="userpass" type="text" placeholder="请输入密码">
    </div>
    <div id="error_box"><br></div>
     <div class="div3">
        <button onclick="myLogin()">登陆</button>
    </div>
</div>
</body>
{% endblock %}
</html>

    注册

    {% extends'base.html' %}
{% block title %}
    注册
{% endblock %}
    {% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/yyy.css')}}">
     <script src="{{ url_for('static',filename='js/rrr.js') }}"></script>
{% endblock %}
{% block main %}
<body>

<div class="div1">
    <div class="div2">登录注册</div>
    <div class="div3">
        请输入你的昵称：<input id="username" type="text" placeholder="请输入你的昵称">
    </div>
    <div class="div3">
                   设置密码：<input id="userpass" type="text" placeholder="请输入密码">
    </div>
    <div class="div3">
                   重复密码：<input id="userpass1" type="text" placeholder="请再次输入密码">
    </div>
    <div class="div3">
          请输入手机号：<input id="phonenumber" type="text" placeholder="请输入11位手机号">
    </div>
    <div id="error_box"><br></div>
     <div class="div3">
        <button onclick="myLogin()">注册</button>
    </div>
    <div class="div2">点击 “注册” 即表示您同意并愿意遵守<br>用户协议 和 隐私政策 。</div>
</div>
<br>
</body>
</html>

     

posted @ 2017-11-08 18:47  055刘柏坚  阅读(216)  评论(0)  编辑  收藏  举报