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$1234567891011121314151617181920
正式开始
(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__.py12345
在_ _ init _ _.py中写如下代码,你可以使用pycharm,vscode等IDE来更快的书写代码。
app/_ _ init _ _.py : 项目初始化
from flask import Flask
#创建app应用,__name__是python预定义变量,被设置为使用本模块.
app = Flask(__name__)
#如果你使用的IDE,在routes这里会报错,因为我们还没有创建呀,为了一会不要再回来写一遍,因此我先写上了
from app import routes12345
创建路由模块,你可以使用IDE直接新建,没有必要要使用命令行创建
(venv) duke@coding:~/flask_tutorial/flask/app$ touch routes.py1
app/routes.py : 主页路由
#从app模块中即从__init__.py中导入创建的app应用
from app import app
#建立路由,通过路由可以执行其覆盖的方法,可以多个路由指向同一个方法。
@app.route('/')
@app.route('/index')
def index():
return "Hello,World!"12345678
现在基本都齐全了,但是我们还是需要在app模块之外创建一个主入口,即执行这个主入口就可以达成运行整个项目的目的。
(venv) duke@coding:~/flask_tutorial/flask/app$ cd ..
(venv) duke@coding:~/flask_tutorial/flask$ touch myblog.py12
myblog.py : 项目入口
#从app模块中导入app应用
from app import app
#防止被引用后执行,只有在当前模块中才可以使用
if __name__=='__main__':
app.run()123456
现在整个小demo就完成了,结构应该是这样的
flask
├── app
│ ├── __init__.py
│ └── routes.py
└── myblog.py12345
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)
12345678910
在浏览器里输入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 = '''
Home Page - Microblog'''
return html123456789101112131415161718
如图所示,这样就完成了返回网页的目的,但是这样实在是太麻烦了,因此肯定有解决这个问题的办法喽。对,模板就是解决这个问题的办法。
(venv) duke@coding:~/flask_tutorial/flask$ mkdir app/templates
#在新建的templates中新建一个index.html
(venv) duke@coding:~/flask_tutorial/flask/app/templates$ touch index.html123
app/templates/index.html : 主页模板,将数据显示在其中
{{ title }} - 博客12345678910
这里出现{{ }} 意味着变量,可以接受数据的地方。既然在这里写了变量,那么就要在路由中修改对应的格式,因为要把数据返回才可以。
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)12345678910
从新运行后,效果还是符合预期的。但是,如果你传递至模板的数据是空的,那页面显示岂不是很难看?因此我们需要在模板中加上一些判断,看数据是否为空。
app/templates/index.html : 主页模板,完善模板
{% if title %}
{{ title }} - 博客{% else %}
欢迎来到博客!{% endif %}
1234567891011121314
如果传进来的数据很多,那么就可以使用循环来展示数据。首先,还是对路由里的方法进行修改。
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)12345678910111213141516171819
增加了这些数据之后要对模板中的结构进行一些修改。
app/templates/index.html : 循环展示数据
{% if title %}
{{ title }} - 博客{% else %}
欢迎来到博客!{% endif %}
{% for post in posts %}
{{ post.author.username }} 说:{{ post.body }}
{% endfor %}
123456789101112131415161718
我们发现,每次修改页面都是要有很多重复的不必要代码,因此把重复的代码放到一个基类模板里,在里面留上占位符,这样只需要修改其中一部分就可以了,十分方便。
创建一个基类模板
(venv) duke@coding:~/flask_tutorial/flask/app/templates$ touch base.html1
app/templates/base.html : 填充内容
{% if title %}
{{ title }} - 博客{% else %}
欢迎来到博客!{% endif %}
{% block content %}
{% endblock %}
1234567891011121314151617
那么这有什么作用呢?注意这里面有{% block content %} {% endblock %}这一对标签,因此其他页面只需要继承这个页面,然后写上相同的标签,在标签内写上内容,就可以完整的在页面上显示所有内容。既然有了基类模板,那么index.html显示就不需要那么多代码了,这里对index.html进行修改。
app/templates/index.html : 修改格式和内容
{% extends 'base.html' %}
{% block content %}
{% for post in posts %}
{{ post.author.username }} 说:{{ post.body }}
{% endfor %}
{% endblock %}
---------------------