Flask从入门到做出一个博客的大型教程(一)

本项目全部在虚拟环境中运行，因此请参照前面的文章，链接为https://blog.csdn.net/u014793102/article/details/80302975 建立虚拟环境后，再接着完成本教程的学习。

0 开始之前

网上看了很多教程，都不是很满意，因此自己写一个大型教程，从入门到做出一个比较完整的博客。此次教程不是直接把整个博客直接代码整理出来然后运行一遍就完事，我会从flask的各个模块讲起。所以，如果你没有接触过flask，按照整个教程完整做一遍会掌握flask。(前提是你要有一定Python和web基础)

1 Hello world !

如果你接触过任何编程语言，对这个小标题都会很熟悉，此次对flask的学习也是从这个小例子开始。

准备工作环境

duke@coding:~$ mkdir flask_tutorial
duke@coding:~$ cd flask_tutorial/
duke@coding:~/flask_tutorial$ virtualenv --no-site-package venv
Using base prefix '/home/duke/.pyenv/versions/3.6.4'
New python executable in /home/duke/flask_tutorial/venv/bin/python3.6
Also creating executable in /home/duke/flask_tutorial/venv/bin/python
Installing setuptools, pip, wheel...done.
duke@coding:~/flask_tutorial$ source venv/bin/activate
#进入Python虚拟环境
(venv) duke@coding:~/flask_tutorial$
(venv) duke@coding:~/flask_tutorial$ pip install flask
#创建flask目录
(venv) duke@coding:~/flask_tutorial$ mkdir flask
(venv) duke@coding:~/flask_tutorial$ cd flask/
(venv) duke@coding:~/flask_tutorial/flask$

正式开始

(venv) duke@coding:~/flask_tutorial/flask$ mkdir app
(venv) duke@coding:~/flask_tutorial/flask$ cd app/
#创建初始化文件
(venv) duke@coding:~/flask_tutorial/flask/app$ touch __init__.py

在_ _ init _ _.py中写如下代码，你可以使用pycharm,vscode等IDE来更快的书写代码。

app/_ _ init _ _.py : 项目初始化

from flask import Flask
#创建app应用,__name__是python预定义变量，被设置为使用本模块.
app = Flask(__name__)
#如果你使用的IDE，在routes这里会报错，因为我们还没有创建呀，为了一会不要再回来写一遍，因此我先写上了
from app import routes

创建路由模块,你可以使用IDE直接新建，没有必要要使用命令行创建

(venv) duke@coding:~/flask_tutorial/flask/app$ touch routes.py

app/routes.py : 主页路由

#从app模块中即从__init__.py中导入创建的app应用
from app import app
#建立路由，通过路由可以执行其覆盖的方法，可以多个路由指向同一个方法。
@app.route('/')
@app.route('/index')
def index():
    return "Hello,World!"

现在基本都齐全了，但是我们还是需要在app模块之外创建一个主入口，即执行这个主入口就可以达成运行整个项目的目的。

(venv) duke@coding:~/flask_tutorial/flask/app$ cd ..
(venv) duke@coding:~/flask_tutorial/flask$ touch myblog.py

myblog.py : 项目入口

#从app模块中导入app应用
from app import app
#防止被引用后执行，只有在当前模块中才可以使用
if __name__=='__main__':
    app.run()

现在整个小demo就完成了，结构应该是这样的

flask
├── app
│   ├── __init__.py
│   └── routes.py
└── myblog.py

ok,接下来就让项目跑起来

(venv) duke@coding:~/flask_tutorial/flask$ export FLASK_APP=myblog.py
(venv) duke@coding:~/flask_tutorial/flask$ flask run
 * Serving Flask app "myblog.py"
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

在浏览器里输入http://127.0.0.1:5000/ 或者 http://127.0.0.1:5000/index 都可以访问你的项目啦!

2 模板

在1里，我们完成了一个返回值的显示，但这肯定远远不能满足我们需求的。因为我们希望看到的是丰富多彩的网页呀～,有什么办法呢？上一步咱们返回了一个值，那咱们返回一个网页会怎么样呢？

app/routes.py : 返回一个网页

from app import app
@app.route('/')
@app.route('/index')
def index():
    user = {'username':'duke'}
    html = '''
    <html>
    <head>
        <title>Home Page - Microblog</title>
    </head>
    <body>
        <h1>Hello, ''' + user['username'] + '''!</h1>
    </body>
</html>
    '''
    return html

如图所示，这样就完成了返回网页的目的，但是这样实在是太麻烦了，因此肯定有解决这个问题的办法喽。对，模板就是解决这个问题的办法。

(venv) duke@coding:~/flask_tutorial/flask$ mkdir app/templates
#在新建的templates中新建一个index.html
(venv) duke@coding:~/flask_tutorial/flask/app/templates$ touch index.html

app/templates/index.html : 主页模板，将数据显示在其中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ title }} - 博客</title>
</head>
<body>
        <h1> Hello ,{{ user.username }} !</h1>
</body>
</html>

这里出现{{ }} 意味着变量，可以接受数据的地方。既然在这里写了变量，那么就要在路由中修改对应的格式，因为要把数据返回才可以。

app/routes.py : 将写在路由中的html删除，并增加一些变量。

#导入模板模块
from flask import render_template
from app import app
@app.route('/')
@app.route('/index')
def index():
    user = {'username':'duke'}
    #将需要展示的数据传递给模板进行显示
    return render_template('index.html',title='我的',user=user)

从新运行后，效果还是符合预期的。但是，如果你传递至模板的数据是空的，那页面显示岂不是很难看？因此我们需要在模板中加上一些判断，看数据是否为空。

app/templates/index.html : 主页模板，完善模板

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
     {% if title %}
        <title>{{ title }} - 博客</title>
        {% else %}
        <title>欢迎来到博客!</title>
        {% endif %}
    </head>
    <body>
        <h1>Hello, {{ user.username }}!</h1>
    </body>
</html>

如果传进来的数据很多，那么就可以使用循环来展示数据。首先，还是对路由里的方法进行修改。

app/routes.py : 增加一些数据

from flask import render_template
from app import app
@app.route('/')
@app.route('/index')
def index():
    user = {'username':'duke'}
    posts = [
        {
            'author':{'username':'刘'},
            'body':'这是模板模块中的循环例子～1'
        },
        {
            'author': {'username': '忠强'},
            'body': '这是模板模块中的循环例子～2'
        }
    ]
    return render_template('index.html',title='我的',user=user,posts=posts)

增加了这些数据之后要对模板中的结构进行一些修改。

app/templates/index.html : 循环展示数据

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
     {% if title %}
        <title>{{ title }} - 博客</title>
        {% else %}
        <title>欢迎来到博客!</title>
        {% endif %}
    </head>
    <body>
        <h1>你好呀, {{ user.username }} !</h1>
        {% for post in posts %}
            <div><p>{{ post.author.username }} 说:<b>{{ post.body }}</b></p></div>
        {% endfor %}
    </body>
</html>

我们发现，每次修改页面都是要有很多重复的不必要代码，因此把重复的代码放到一个基类模板里，在里面留上占位符，这样只需要修改其中一部分就可以了，十分方便。

创建一个基类模板

(venv) duke@coding:~/flask_tutorial/flask/app/templates$ touch base.html

app/templates/base.html : 填充内容

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
     {% if title %}
        <title>{{ title }} - 博客</title>
        {% else %}
        <title>欢迎来到博客!</title>
        {% endif %}
    </head>
    <body>
       <div>博客 : <a href="/index">首页</a></div>
        {% block content %}
        {% endblock %}
    </body>
</html>

那么这有什么作用呢？注意这里面有{% block content %} {% endblock %}这一对标签，因此其他页面只需要继承这个页面，然后写上相同的标签，在标签内写上内容，就可以完整的在页面上显示所有内容。既然有了基类模板，那么index.html显示就不需要那么多代码了，这里对index.html进行修改。

app/templates/index.html : 修改格式和内容

{% extends 'base.html' %}
     {% block content %}
       <h1>你好呀, {{ user.username }} !</h1>
        {% for post in posts %}
            <div><p>{{ post.author.username }} 说:<b>{{ post.body }}</b></p></div>
        {% endfor %}
     {% endblock %}

再此访问主页面的地址试一试！