Flask web开发之路六

紧接着上篇文档，写模板继承和block，URL链接和加载静态文件

模板继承和block

项目结构

主app文件代码：

from flask import Flask,render_template

app = Flask(__name__)

#class Person(object):

    #name = ''

    #age = 0

#class Student(Person):

    #pass

@app.route('/')

def index():

    return render_template('index.html')

@app.route('/login/')

def login():

    return render_template('login.html')

if __name__ == '__main__':

    app.run(debug=True)

base.html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>{% block title %}{% endblock %}</title>

        <style>

        .nav{

            background: #000000;

            height:100px;

        }

        ul{

            overflow:hidden;

        }

        ul li {

            float:left;

            list-style:none;

            padding:0 10px;

            line-height:65px;

        }

                }

        ul li a{

            color: #ffffff;

        }

    </style>

</head>

<body>

<div class="nav">

    <ul>

        <li><a href="#">首页</a></li>

        <li><a href="#">发布问答</a></li>

    </ul>

</div>

{% block main %}{% endblock %}

</body>

</html>

index.html代码：

{% extends 'base.html' %}

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

{% block main %} <hi>这是首页</hi> {% endblock %}

{% extends 'base.html' %}

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

{% block main %}

    <hi>这是首页</hi>

{% endblock %}

### 继承和block：
1. 继承作用和语法：
* 作用：可以把一些公共的代码放在父模板中，避免每个模板写同样的代码。
* 语法：
```
{% extends 'base.html' %}
```
2. block实现：
* 作用：可以让子模板实现一些自己的需求。父模板需要提前定义好。
* 注意点：字模板中的代码，必须放在block块中。

URL链接和加载静态文件

项目结构

主app文件代码：

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')

def index():

    return render_template('index.html')

@app.route('/login/')

def login():

    return render_template('login.html')

if __name__ == '__main__':

    app.run(debug=True)

index.html代码;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">

    <script src="{{ url_for('static',filename ='js/index.js') }}"></script>

</head>

<body>

<a href="{{ url_for('login') }}">登录</a>

<img src="{{ url_for('static',filename= 'images/zhuanli.jpg') }}" alt="">

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>这是登录页面</h1>

</body>

</html>

CSS文件代码：

a{

    background: red;

}

### url链接：使用`url_for(视图函数名称)`可以反转成url。

### 加载静态文件：
1. 语法：`url_for('static',filename='路径')`
2. 静态文件，flask会从`static`文件夹中开始寻找，所以不需要再写`static`这个路径了。
3. 可以加载`css`文件，可以加载`js`文件，还有`image`文件。
```
第一个：加载css文件
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
第二个：加载js文件
<script src="{{ url_for('static',filename='js/index.js') }}"></script>
第三个：加载图片文件
<img src="{{ url_for('static',filename='images/zhiliao.png') }}" alt="">