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

060王昊
关注文章
TinyMind专栏频道
  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('/regist/')
def regist():
    return render_template('regist.html')
@app.route('/index/')
def index():
    return render_template('index.html')
if __name__ == '__main__':
    app.run(debug=True)
    <!DOCTYPE html>
<html lang="en">
<head>
    <body bgcolor="#f5f5f5"></body>
    <meta charset="UTF-8">
    <title>{% block title%}DJI{% endblock %}</title>

 <link href="{{ url_for('static',filename='css/base.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='js/base.js') }}"></script>
    {% block head %}{% endblock %}
</head>
<body id="myBody">

<nav>
    <img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif"　height="20" width="20px">
    <a href="{{ url_for('index') }}">首页</a>
    <a href="http://www.dji.com/cn">消费级产品</a>
    <a href="http://www.dji.com/cn">专业级产品</a>
    <input type="text" name="search">
    <button type="submit">搜索</button>
    <a href="{{ url_for('login') }}">登录</a>
    <a href="{{ url_for('regist') }}">注册</a>
</nav>

<div>
<p><span style="font-size: 50px;color:gold;font-family: '华文楷体', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace";>DJI大疆创新
</span></p>
</div>

<div class="area">
{% block main %}{% endblock %}
<br>

</div>
<br>
<footer class="copyright">
    <p>Copyright @ MarsGCC</p>
</footer>
<body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510150688168&di=c33e4c9a7d66c191aa98f67dbffa08d5&imgtype=0&src=http%3A%2F%2Fimg.dixintong.com%2FInUpImg%2FSection_ProInfomation%2F2016-11-25%2F161125160647903500.jpg"style="background-repeat:no-repeat;background-size: 100% 100%; background-attachment: fixed;"></body>
</body>
</html>
</body>
    {% extends 'base.html' %}

{% block title %}首页{% endblock %}

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

{% block main %}

<div>
        <div class="img">
            <a href="http://www.dji.com/cn">
              <img src="https://img14.360buyimg.com/n7/jfs/t5977/17/185587587/108108/247ade15/5925b821N32b8bb9a.jpg"></a>
          <div class="desc"><a href="http://www.dji.com/cn">大疆“晓”Spark</a></div>

     　　</div>
        <div class="img">
        <a href="http://www.dji.com/cn">
              <img src="https://img10.360buyimg.com/n7/jfs/t3232/65/6215650755/81612/3a052265/58a27e59N05fb5fc2.jpg" ></a>
          <div class="desc"><a href="http://www.dji.com/cn">大疆“精灵”Phantom</a></div>

    </div>
        <div class="img">
        <a href="http://www.dji.com/cn">
              <img src="https://img14.360buyimg.com/n7/jfs/t4012/34/459557656/48075/11cf82d3/584fcc5cN056eb123.jpg" ></a>
          <div class="desc"><a href="http://www.dji.com/cn">大疆“御”Mavic Pro</a></div>


    </div>
        <div class="img">
        <a href="http://www.dji.com/cn">
              <img src="https://img10.360buyimg.com/n7/jfs/t2278/130/1443161174/71119/87b96780/565edd23N23d203bc.jpg"></a>
          <div class="desc"><a href="http://www.dji.com/cn">大疆“悟”Inspire</a></div>


    </div>


</div>
<div class="clearfloat">
      <img src="https://img14.360buyimg.com/n7/jfs/t5977/17/185587587/108108/247ade15/5925b821N32b8bb9a.jpg">
      <img src="https://img10.360buyimg.com/n7/jfs/t3232/65/6215650755/81612/3a052265/58a27e59N05fb5fc2.jpg">
      <img src="https://img14.360buyimg.com/n7/jfs/t4012/34/459557656/48075/11cf82d3/584fcc5cN056eb123.jpg">
      <img src="https://img10.360buyimg.com/n7/jfs/t2278/130/1443161174/71119/87b96780/565edd23N23d203bc.jpg">

</div>


<body background="http://img5.imgtn.bdimg.com/it/u=1444609104,245569973&fm=27&gp=0.jpg"></body>

{% endblock %}
    {% extends 'base.html' %}

{% block title %}登录{% endblock %}

{% block head %}
    <link href="{{ url_for('static',filename='css/login.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='js/login.js') }}"></script>
{% endblock %}
<body background="http://img2.imgtn.bdimg.com/it/u=1662655920,2109868634&fm=200&gp=0.jpg"></body>

{% block main %}
<div class="aa" >
    <div class="login" ><h2>LOGIN</h2></div>
    <div class="aa1" >
        Username：<input id="name" type="text"placeholder="请输入用户名"><br>
        Password：<input id="password" type="password"placeholder="请输入密码"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="aa2" >
         <button onclick="myLogin()">Login</button>
         <button type="button" onclick=window.alert("是否取消登录！")>Cancel</button>
<body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510743700&di=99ef867fd6c5a1386163e38f9d7b5f2c&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic.leiphone.com%2Fuploads%2Fnew%2Farticle%2Fpic%2F201610%2F57fb516e1b62a.jpg%3Fwatermark%2F1%2Fimage%2FaHR0cDovL20uaWdhbzcuY29tL3Jlc1dlYi9pbWFnZXMvc2h1aXlpbi5wbmc%3D%2Fdissolve%2F80%2Fgravity%2FSouth%2Fdx%2F20%2Fdy%2F20"style="background-repeat:no-repeat;background-size: 100% 100%; background-attachment: fixed;"></body>

    </div>
</div>

{% endblock %}
    {% extends 'base.html' %}

{% block title %}注册{% endblock %}

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

{% block main %}
<div class="aa" >
    <div class="login" ><h2>注册/Register</h2></div>
    <div class="aa1" >
        Set account：<input id="name" type="text"placeholder="请输入用户名"><br>
        Set password：<input id="password" type="password"placeholder="请输入密码"><br>
        Repeat password：<input id="password1" type="password"placeholder="请再次输入密码"><br>
        Phone number：<input id="userphone" type="text"placeholder="请输入手机号码"><br>
    </div>
        <div id="error_box"><br></div>
      <div class="aa2" >
         <button onclick="myLogin()">Submit</button>
         <button type="button" onclick=window.alert("是否取消登录！")>Cancel</button>

<body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510743628&di=571738b7d2f56efdc88e82b5404a756e&imgtype=jpg&er=1&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1612%2F11%2F8637260_126a9835.jpg"style="background-repeat:no-repeat;background-size: 100% 100%; background-attachment: fixed;">
</body>
    </div>
</div>
{% endblock %}

优质内容筛选与推荐>>
1、SQL中exists,not exists的用法
2、C++11新特性 lambda表达式
3、css:中文词不断开，整体换行
4、Chrome For EBS
5、20165211 2017-2018-2 《Java程序设计》第3周学习总结


长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消，“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字，当前共字 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字，当前共字

    发送中

    网络异常，请稍后重试

    微信扫一扫
    关注该公众号

    0 │ 收藏 │ 举报