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

  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. 首页、登录页、注册页都按上述步骤改写。 
    from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def base():
    return render_template('base.html')


@app.route('/login/')
def login():
    return render_template('login.html')


@app.route('/register/')
def register():
    return render_template('register.html')

if __name__ == '__main__':
    app.run(debug=True)

    base

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}首页{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/1.css')}}">
    <script src="{{ url_for('static',filename='js/s.js') }}"></script>
     <base target="_blank" />
{% block head %}{% endblock %}
</head>
<body id="myBody">
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="20px";>

<h1>简书</h1>
<nav>
    <a href="{{ url_for('base' )}}">首页</a>
    <a href="{{ url_for('login' )}}" class="right">注册</a>
    <a href="{{ url_for('regiter' )}}" class="right">登录</a>
    <a href="">退出</a>
    <input type="text" name="search">
    <button type="submit">搜索</button>
    <a href="">下载</a>
    <a href="">播放记录</a>
    <a href="">最新咨讯</a>
</nav>
<br>
<div class="recommend" >
    <div class="img">
            <a href=""><img src="../image/a.jpg" width="250" height="100" ></a>
            <div class="desc"><a href="../static/image/a.jpg" >简书交友</a></div>
        </div>
    <div class="img">
        <img src="../image/b.jpg" width="250" height="100"></a>
        <div class="desc"><a href="../static/image/b.jpg" >读书</a></div>
        </div>
    <div class="img">
       <img src="../image/c.jpg" width="250" height="100" ></a>
     <div class="desc"><a href="../static/image/c.jpg" >散文</a></div>
        </div>
        <div id="bottom">
    <a href="">联系我们</a>
    <a href="">加入我们</a>
    <a href="">帮助中心</a>
    <a href="">合作伙伴</a>
</div>
</div>

{% endblock %}
</body>

</html>

    登录html

    {% extends'base.html' %}
{% block title %}
    Login
{% endblock %}
{% block head %}
    <script src="{{ url_for('static',filename='js/denglu.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/1.css')}}">
{% endblock %}
{% block main %}
<body>
<div class="box">
 <div id="container" style="width: 400px"align="center">
      <div id="header" style="background-color:lightskyblue"><h2 align="center" style="margin-bottom: 0;">会员登录</h2></div>
      <div id="content" style="background-color:lightpink;height:205px;width:400px;float:left;">
            <p></p>
          <div class="input_box">
              Username:<input id="uname"type="text" name="username"placeholder="请输入用户名"><br>
          </div>
               <br>
              <div class="input_box">
              Password:<input id="upass"type="password" name="password"placeholder="请输入登录密码"><br>
               </div>
          <div id="error_box"><br></div>
          <div class="input_box">
                <input type="radio">普通会员
                    <input type="radio">金牌会员
                    <input type="radio">钻石会员 </div><br>
             <div class="input_box">
              <button onclick="fnLogin()">登录</button>
              <button type="button" onclick=window.alert("是否取消登录！")>取消</button>

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

    注册html

    {% extends'base.html' %}
{% block title %}
    register
{% endblock %}
    {% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/1.css')}}">
     <script src="{{ url_for('static',filename='js/zhuce.js') }}"></script>
{% endblock %}
{% block main %}
<body>
<div class="box">
 <div id="container" style="width: 400px"align="center">
      <div id="header" style="background-color:lightskyblue"><h2 align="center" style="margin-bottom: 0;">注册</h2></div>
      <div id="content" style="background-color:lightpink;height:205px;width:400px;float:left;">
            <p></p>
          <div class="input_box">
              Username：<input id="uname"type="text" name="username"placeholder="请输入用户名">
          </div>
              <br>
              <div class="input_box">
              Password：<input id="upass"type="password" name="password"placeholder="请输入登录密码">
           </div>
              <br>
          <div class="input_box">
               密码确认：<input id="zhuce" type="password" placeholder="请再次输入密码">
         </div><br>
             <div id="error_box"><br></div>
             <div class="input_box">
              <button onclick="myLogin()">点击注册</button>
              <button type="button" onclick=window.alert("是否取消注册！")>取消</button>

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

     

posted @ 2017-11-08 20:19  103许雅婷  阅读(124)  评论(0)  编辑  收藏  举报