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

  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. from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route('/')
def switch():
    return render_template('switch.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)

    父模板：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> {% block title %}
        {% endblock %}
        Home</title>
    <link rel="stylesheet" type="text/css" href="xyjie.css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body id="mybody">

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">首页</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="#" onclick="">登陆</a></li>
                <li><a href="#" onclick="">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        设置 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">收藏</a></li>
                        <li><a href="#">分享</a></li>
                        <li><a href="#">搜索</a></li>
                        <li class="divider"></li>
                        <li><a href="#">点赞</a></li>
                    </ul>
                </li>
                <li><a href="#">||</a></li>
            </ul>
        </div>
        <div style="float: left">
            <img id="myonoff" onclick="mySwitch()" src="http://p0.so.qhimgs1.com/bdr/200_200_/t01d734a105379159dc.gif" style width="40px"  >
        </div>
        <div>
            <input type="text" name="user" id="user" placeholder="请输入内容">
            <input type="button" value="搜索" class="btn btn-success" onclick="">
        </div>
    </div>
</nav>

<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
    <ul class="nav navbar-nav">
        <li><img src="http://www.gzcc.cn/2016/images/footer1-logo.png"></li>
        <li style="color: bisque;">版权所有@xyjie</li>
    </ul>
</nav>

<div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2330928080,25031233&amp;fm=27&amp;gp=0.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">花花华晨宇1</a></div>
    </div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3605928156,2200570185&amp;fm=27&amp;gp=0.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">花花华晨宇2</a></div>
    </div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2787456122,2827006597&amp;fm=27&amp;gp=0.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">花花华晨宇3</a></div>
    </div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2478028302,36965079&amp;fm=27&amp;gp=0.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">花花华晨宇4</a></div>
    </div>
</div>
</body>
</html>

    登陆页面：

    {% extends 'switch.html'  %}
{% block title %}login{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='login.css') }}">
    <script src="{{ url_for('static',filename='login.js') }}"></script>
{% endblock %}

{% block main %}
    

     
    

    <body>
<div class="bigbox">
      <div class="box">
          <h2>♛游民星空账号登录♛</h2>

       <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>
{% endblock %}
</body>
</html>
    

    

    注册页面：
    

    

    {% extends 'switch.html'  %}
{% block title %}register{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='login.css') }}">
    <script src="{{ url_for('static',filename='login.js') }}"></script>
{% endblock %}

{% block main %}
<div class="bigbox">
      <div class="box">
          <h2>♛游民星空账号注册♛</h2>

       <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">
               <h5><input type="radio" value="我已阅读相关条例">我已阅读相关条例</h5>. <br>
              <button onclick="myLogin()">注册</button>
              <button onclick="myLogin()">取消</button>
          </div>
               </div>

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

    

    

    

    

    2. 







            

            
posted @ 
2017-11-07 22:23 
073徐英杰 
阅读(153) 
评论(0) 
编辑 
收藏 
举报