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

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

    1. 子模板继承父模板
      1.   {% extends 'base.html’ %}
    2. 2.父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
      1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
      2. {% block head %}{% endblock %}
      3. {% block main %}{% endblock %}
    3. 3.子模板中写代码实现自己的需求。block
    4.        1.{% block title %}登录{% endblock %}
    5. 3.首页、登录页、注册页都按上述步骤改写。
    6. py:
    7. from flask import Flask,render_template

app = Flask(__name__)



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

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

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

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


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

      base.html:

    8. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title%}父模板{% endblock %}</title>
    <script src="{{url_for('static',filename='js/base.js') }}" type="text/javascript"></script>
    <link href="{{ url_for('static' ,filename='css/base.css') }}"  rel="stylesheet" type="text/css">
    {% block head %}
    {% endblock %}




</head>
<body>
<nav>
   <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D180%2C140%2C50/sign=9f84efaedc2a60595245b25a4e0905a3/8718367adab44aede0f8bd83b81c8701a18bfb27.jpg">


    <input type="text"name="search">
    <button type="submit">搜索</button>

<a href="{{ url_for('index') }}">首页</a>
<a href="{{ url_for('login') }}">登陆</a>
<a href="{{ url_for('regist') }}">注册</a>
</nav>
       <img src="../static/images/lx2.png" alt="wo" width="30">
       <img src="{{ url_for('static',filename='images/lx2.png') }}" alt="wo" width="50">
       {% block main %} {% endblock %}



<footer>
    <div class="footer_box">
         Copyright@ 2017-2022 个人版权，版权所有
     </div>
 </footer>
{% endblock %}

      login.html:

    9. {% extends'base.html' %}
{% block title %}
    登录
{% endblock %}
{% block head %}
    <script src="{{ url_for('static',filename='js/login.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/login.css')}}" type="text/css">
{% 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 id="error_box"><br></div>
          <div class="input_box">
              <button onclick="myLogin()">登录</button>
               <button onclick=window.alert("是否取消登录？")>取消</button></div>
          </div>
               </div>

{% endblock %}

      index.html:

      10.  
{% extends'base.html' %}
{% block title %}
    首页
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/base.css') }}" type="text/css">
{% endblock %}
{% block main %}
<body id="myBody">

<nav>
    <img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif"　height="20" width="20px">
    <a href="https://www.baidu.com/">首页</a>
    <input type="text" name="search">
    <button type="submit">搜索</button>
    <a href="http://localhost:63342/my1/templates/login.html?_ijt=258mlfkqv5j4ogr05tb7rdj75i">登录</a>
    <a href="http://localhost:63342/my1/templates/zhuce.html?_ijt=vfohs6o03buojpcgd8i9m4991j">注册</a>
</nav>

<div>
    <p><span style="font-size: 40px;color: blue;font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace";>浩瀚星空</p>
</div>

 <div>
        <div class="img">
            <a href="https://www.baidu.com/">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558937&di=e9f6b3da7e4525b5048761d321e7a334&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D9d0e654a05b30f242197e440a0fcbb36%2F43a7d933c895d1434bcc2a0879f082025aaf0767.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/">地球</a></div>
            </div>

         <div class="img">
            <a href="https://www.baidu.com/">
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558936&di=f4549e6b6f694583b5e01832ae57ff79&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D7e5fc0351bdfa9ece9235e540ab99d76%2F8b13632762d0f7031d0337f502fa513d2697c562.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/">星云</a></div>
            </div>

    <div class="img">
            <a href="https://www.baidu.com/">
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558935&di=01d805549265c8b439c92ed817f2664d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D1fd11f0e9716fdfacc61ceaddce6e621%2Fae51f3deb48f8c542cd0210a30292df5e0fe7f90.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/">璀璨星空</a></div>
            </div>

       <div class="img">
            <a href="https://www.baidu.com/">
             <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558935&di=b77b1b7fb70e8474b8a317fd70ea71ce&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D2820c0958dd6277ffd1f3a7b40517545%2F9f2f070828381f304605d987a3014c086e06f084.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/">星轨</a></div>
            </div>
    </div>
     <br>



{% endblock %}

regist.html:

{% extends'base.html' %}
{% block title %}
    注册
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/regist.css') }}" type="text/css">
    <script src="{{url_for('static',filename='js/regist.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">
              <button onclick="myLogin()">注册</button>

          </div>
               </div>

{% endblock %}

 

posted @ 2017-11-08 19:39  062许立帅  阅读(179)  评论(0)    收藏  举报