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

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 titlr %}广州商学院{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="../static/base.css">
    <script src="../static/base.js"></script>
    {% block head %}
    {% endblock %}
<base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank">
</head>
<body>
<body id="myBody">

<div class="clearfloat">
     <nav >
         <img src="w_02_08_00.png" >
         <a href="{{url_for('muban')}}">首页</a>
         <a href="http://www.gzcc.cn/">下载</a>
         <input type="text" name="search" >
         <button type="submit">搜索</button>
         <a href="{{url_for('login')}}">登录</a>
         <a href="{{url_for('zhuce')}}">注册</a>
         <a href="http://www.gzcc.cn/" >意见反馈</a>
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="20px";>
     </nav><hr>

</div>

        <div id="footer" style="background-color: lightskyblue;clear: both;text-align: center;"></div>

{% block main %}

{% endblock %}

</body>
<footer>
 <div class="footer_box">
    Copyright © 2017 广州商学院 All Rights Reserved　  版权归个人所有
 </div>
 </footer>
<body background="http://d.hiphotos.baidu.com/image/pic/item/f636afc379310a55808b5625bd4543a9832610b7.jpg"style="background-repeat:no-repeat;background-size: 100% 100%; background-attachment: fixed;"></body>
</body>
</html>

 首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" type="text/css" href="../static/base.css">
    <script src="../static/base.js"></script>
<base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank">
</head>
<body id="myBody">
<div class="clearfloat">


     <nav >
         <img src="w_02_08_00.png" >
        <a href="login.html"></a>
         <a href="">下载</a>
         <a href="">图书馆</a>
         <a href="">意见反馈</a>
         <input type="text" name="search">
         <button type="submit">搜索</button>


         <a href="" >联系我们</a>
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="20px";>
     </nav><hr>

</div>

<br>

<br>
<br>
<br><br>
<h1>
    广州商学院欢迎你!
</h1>
<br><br>
<h1>
    活力广商，筑梦远航！
</h1>
<br><br><br>

        <div id="footer" style="background-color: lightskyblue;clear: both;text-align: center;"></div>
    <div class="desc" >
        <hr>
        <div class="img" >
            <a href="http://www.gzcc.cn/">
                <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1508497686486&amp;di=e2ccca98fa05f9473c84f73db141ad88&amp;imgtype=0&amp;src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F57ac36088f69c.jpg" width="20px">
            </a>
            <div><a href="http://www.gzcc.cn/">数字广商</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1508497686476&amp;di=50b7102b085d85e015eff1b2d31436ea&amp;imgtype=0&amp;src=http%3A%2F%2Fimg5.xiazaizhijia.com%2Fwalls%2F20150803%2F1440x900_96ae2cb132cbe37.jpg"></a>
                <div><a href="http://www.gzcc.cn/">视频校园</a></div>
        </div>

        <div class="img" class="clearfloat" class="img-hover">
            <a href="http://www.gzcc.cn/">
                <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1508498137537&amp;di=82dbcda3618e2dfd61810d2fb0daf202&amp;imgtype=0&amp;src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F5754d121da01d.jpg"></a>
                <div><a href="http://www.gzcc.cn/">画说校园</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1508498264263&amp;di=55e6cb21f27b29f83d3c9ff9a73b3bae&amp;imgtype=0&amp;src=http%3A%2F%2Fwww.zcool.com.cn%2Fcommunity%2F037b9a359147e96b5b3086ed42c6bee.jpg" width="80px"></a>
                <div><a href="http://www.gzcc.cn/">全景校园</a></div>


 </div>
        </div>
<footer>
 <div class="footer_box">
     Copyright © 2017 广州商学院 All Rights Reserved　
 </div>
 </footer>
</body>
</html>

 登录

{% extends 'muban.html' %}
{% block title %}登录{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="../static/login.css">
    <script src="../static/login.js"></script>
{% endblock %}
{% block main %}
<div class="Outbox">
      <div class="box">
          <h2>欢迎来到博客园，代码改变世界！</h2>
          <h3>登录页面</h3>

        <div class="input_box">
           账号：<input id="umane"type="text"placeholder="请输入账号">
        </div>
        <div class="input_box">
           密码：<input id="upass"type="password"placeholder="请输入密码">
        </div>
          <div id="error_box"><br></div>
          <div class="input_box">
              <button onclick="myLogin()">登录</button>
               <button onclick=window.alert("请重新输入")>取消</button></div>

          </div>
</div>
</body>
{% endblock %}

 注册

{% extends'muban.html' %}
{% block title %}
    注册
{% endblock %}
{% block head %}
<link rel="stylesheet" type="text/css" href="../static/login.css">
    <script src="../static/login.js"></script>
{% endblock %}
{% block main %}

<div class="Outbox">
      <div class="box">
          <h2>欢迎来到博客园，代码改变世界！</h2>
          <h3>用户注册</h3>
       <div class="input_box">
          输入账号：<input id="umane"type="text"placeholder="请输入用户名">
       </div>
        <div class="input_box">
            输入密码：<input id="upass"type="password"placeholder="请输入密码">
       </div>
          <div class="input_box">
           确认密码：<input id="userpass1" type="password" placeholder="请再次输入密码">
    </div>
          <div id="error_box"><br></div>
          <div class="input_box">
              <button onclick="myLogin()">注册</button>
<button onclick=window.alert("取消注册") type="submit" class="btn btn-primary btn-block btn-large">返回</button>

          </div>
      </div>
</div>

{% endblock %}

 

posted @ 2017-11-08 21:45  064曾志彬  阅读(195)  评论(0)  编辑  收藏  举报