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="">