An Introduction to Flask 1~7

今年3月份接触到flask，转眼半年时间过去了。

学校里时在图书馆借到了 Flask Web 开发：基于Python的Web开发应用实战，还有好多本其他书籍。

大学毕业后，有了成块的时间学习，很快对flask有了更多的了解，也能做出简单的网站。
然后，回头补了许多Python、HTML、JavaScript、SQL、计算机网络、和其他计算机基础知识，再看Flask，有了顺理成章的感觉——对啊，就应该是这样啊！

---

在B站上看到了 O’Reilly - An Introduction to Flask 系列视频。 就是Flask 应用开发书籍的配套教学视频。

视频中内容比起书来更加直观详细。大概5天能看完、整理完学习笔记。

好多我以为只会在YouTube上出现的视频，在B站上都有。简直惊喜，好好利用这些资源啊。

---

配置开发环境

python+虚拟环境+flask+编辑器

一开虚拟机，就特别卡，反正是学习，Windows系统也行。

Ubuntu中以前整理过一些笔记：Linux 常用命令

Ubuntu中有Python，不用装python了。

虚拟环境用apt-get软件管理包安装：
sudo apt-get update
sudo apt-get install python-virtualenv

创建虚拟learn_flask环境：virtualenv learn_flask
**虚拟环境：source learn_flask/bin/activate
虚拟环境中有pip，使用pip安装flask：pip install flask

Ubuntu中安装编辑器

sudo add-apt-repository ppa:webupd8team/sublime-text-3  # 添加sublime-text-3软件地址
sudo apt-get update # 更新apt-get
sudo apt-get install sublime-text-installer # 使用apt-get安装sublime-text

然后在编辑器中写flask代码。
运行flask代码：python hello.py
退出虚拟环境：deactivate

以及一些git命令来连接github远程仓库.

Window系统中：

python 官网，各种软件商店都能下载到python安装包。
安装之后要把安装路径添加到系统环境变量中，才能在命令行中运行python程序。

使用pip安装虚拟环境：pip install vitualenv
创建learn_flask虚拟环境
**虚拟环境：learn_flask\Scripts\activate
虚拟环境中安装flask：pip install flask

Atom、SublimeText编辑器软件的安装很简单。
然后写好代码后在命令行中运行：python hello.py
退出虚拟环境：deactivate

---

Hello World !

简单的Hello world!程序。

from flask import Flask   #从flask库中导入Flask类

app = Flask(__name__)   #实例化一个app对象（面向对象编程），传递了__name__参数（__name__变量中存储着当前模块名字，让Flask知道应用路径）

@app.route('/')  # 绑定了 / 到 hello函数的映射关系，访问'/'会调用hello函数。
def hello():
    return "Hello world!"  # hello函数返回了一个文本"Hello World!"

if __name__ == '__main__':   # 上面一样，__name__是当前模块名，当前模块被直接运行（python hello.py）而不是被其他模块导入时，__name__变量会变成"__main__"
    app.run(debug=True)   # 这里会创建本地服务器，用来处理客户端（即浏览器）的请求，打开了debug模式，服务器会一直运行，等待处理下一个请求

运行程序、以及在浏览器访问http://127.0.0.1:5000/ 的效果：

浏览器中出现了hello函数的返回值内容。
然后看命令行中服务器的状态，最后一行。

1. 127.0.0.1是本机IP地址，或者说服务器，现在只有自己能访问。
   
2. 跟着是处理请求的日期时间
   
3. GET是请求方式，GET /访问URL后缀为/的页面，对应着hello视图函数。
   
4. HTTP/1.1 是HTTP协议的版本。
   
5. 200 是HTTP Status Code状态码，200表示正常处理。

---

模板

上面1a中hello()函数返回的是一个字符串Hello World!。

flask中视图函数也可以返回一个HTML文档，服务器会把不同形式的返回值转换成适当的页面。
如下图（python中三引号可以实现输出多行）：

---

在python代码中掺杂HTML文档，显得太乱了。
flask中可以写一个单独的HTML文件，使用模板渲染方法来调用这个文件。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():   # 和教材同步，这里把hello改成了index()函数
    return render_template("index.html")  # render_template默认调用当前文件目录下的templates文件夹下的HTML模板

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

---

模板渲染

书中是这样介绍的：

模板是一个包含响应文本的文件，其中包含用占位变量表示的动态部分，其具体值只在请求的上下文中才能知道。使用真实值替换变量，再返回最终得到的响应字符串，这一过程称为渲染。为了渲染模板，Flask 使用了一个名为Jinja2 的强大模板引擎。

请求上下文以后再说，简单的理解，模板渲染就是将flask代码中变量的值传递到模板中显示的过程。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    name = "FengWeilei"  # name 变量，存储着一个字符串
    return render_template("index.html",name=name)  # 第一个name是要传递给index.html模板的参数，第二个name是上面的变量

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

---

Jinja2

Jinja2模板引擎有自己的语言，自然有语法。

和学习C语言、python等语言一样的过程。

1. 首先， 输出Hello World ： {{ Hello World! }}
   
2. 变量： {{ name }} (2a中的例子，变量是一种特殊的占位符，告诉模板引擎这个位置的值从渲染模板时使用的数据中获取。Jinja2 能识别所有类型的变量，甚至是一些复杂的类型，例如列表、字典和对象。)
   
3. 可以使用过滤器修改变量，过滤器名添加在变量名之后，中间使用竖线分隔。例如 Hello, {{ name|capitalize }}
   
4. 注释一段文字：{# ... #}
   
5. 陈述语句，正常语句：{% ... %}
   
6. 赋值：{% set date = "2017/09/15" %}
   
7. 函数的定义和使用：
   {% macro render_comment(comment) %}
<li>{{ comment }}</li>
{% endmacro %}
<ul>
{% for comment in comments %}
{{ render_comment(comment) }}
{% endfor %}
</ul>
   
8. 从其他文件中导入函数：{% from ... import ... %}
   
9. if语句：
   {% if user %}
Hello, {{ user }}!
{% else %}
Hello, Stranger!
{% endif %}
   
10. for循环：
    {% for item in items %}
{{ item }}
{% end for %}

    
11. with（对比Python中的while）
    {% with foo = 42 %}
{{ foo }}
{% endwith %}

    
12. 模板继承（类似python中导入其他模块）:
    {% extends "base.html" %}
{% include 'head.html' %}

大概语法就这么多，更多的用到了再查文档。

---

Bootstrap

Bootstrap是一个前端框架，前端主要是为了让网页变好看一些。具体需要用到CSS、JavaScript语言。
Bootstrap作为开发框架，能让前端的网站开发更容易一些。

flask中有flask-bootstrap扩展包。方便在flask代码中使用Bootstrap。

发现确实有些别扭。直接学习Bootstrap多好。
BootstrapCDN网站提供了相关的CSS文件和JavaScript文件的URL。
在HTML模板文件中用link标签、 script标签指向两个资源文件看起来更正常一些。

不过，还是跟着书中内容继续学习。

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)  #实例化一个bootstrap对象，在index.html中能看到效果

@app.route('/')
def index():
    name = "FengWeilei"
    return render_template("index.html",name=name)

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

首先，使用了模板继承的方法继承了bootstrap/base.html模板（安装flask_bootstrap时会有，不用自己写）

这里出现的class属性，都是bootstrap 中的 class属性。

网页中的内容对应着index.html模板中的内容，如下：

主要分成三块儿(flask_bootstrao可以将模板分成更多块儿)，网页标题、导航栏、网页内容。（浏览器窗口变小后，隐藏了导航栏的部分内容，点那三根横线会出现其他的导航标签）

使用了bootstrap后，设计网页样式会变得简单、有效一些。

---

错误页面

导航栏那一块儿内容太多了，先写在base.html中，方便其他模板来继承。

{% extends "bootstrap/base.html" %}

{% block title %}Flask Web Development{% endblock %}

{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
            data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flaskapp</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

flask中可以自己定义错误页面。

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)

@app.route('/')
def index():
    name = "FengWeilei"
    return render_template("index.html",name=name)

@app.errorhandler(404)  # HTTP状态码，404 not found
def page_not_found(e):
    return render_template("404.html"),404

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

---

链接

导航栏中就有链接，不用自己输入URL地址就可以到达对应页面。

在404错误页面，添加链接（使用a标签）：

404.html：

{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h4>于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话可说，惟有轻轻地问一声：“噢，你也在这里吗？”</h4>
    </div>
    <br><p class="pull-right">没有找到网页。</p>
    <br>
    <a href="{{ url_for('index') }}"><<点击回到首页</a>
</div>
{% endblock %}

使用了flask中的url_for方法，点击链接会定向到index('/')页面。