PythonWeb开发：90分钟用Flask搭建博客

来自https://www.bilibili.com/video/BV1gh411q7xo?p=2&vd_source=54aa98683b2f8392aec4499961f896ce

1. 环境准备

1.1 搭建虚拟环境

在项目文件夹下打开控制台，输入

python -m venv myvenv

就能新建一个叫做myvenv的虚拟环境。执行之后会在目录下看到一个myvenv的文件夹，这就是虚拟环境的文件。

1.2 激活虚拟环境与安装flask

输入：

.\myvenv\bin\activate

即可激活虚拟环境，然后使用pip安装flask

1.3 新建代码目录

按照个人习惯，我这里新建一个src文件夹用于存放项目文件。整个项目文件夹目录如下所示：

src
|- app.py　　　　#这是程序执行的入口
|- templates/　　#模板文件夹，存放网页。值得指出的是，这个名字的文件夹是默认的，一般不更改
|- static　　　　　　#存放静态文件，比如css等
　　|-css
　　|-js

 2. 启动程序

这里首先以最简的形式让程序运行起来，以达到快速入门的目的。

1. 在templates文件夹下新建一个index.html

里面随便先写些什么

2. 向app.py中添加代码

代码如下：

 1 from flask import Flask,render_template
 2 
 3 app = Flask(__name__)
 4 
 5 @app.route('/')
 6 def index():
 7     return render_template('index.html')
 8 
 9 
10 if __name__ == '__main__':
11     app.run(debug=True)

解释：

1. 第3行是默认的写法，直接写就行

2. 第5行是个装饰器，代表访问根目录时执行index函数。

3. 第7行时要渲染模板，flask会自动去与app.py相同的目录下寻找templates文件夹中的index.html

4. 第11行时运行程序，debug=True方便调试，让我们所做的任何更改在刷新网页后可以马上应用。

3. 跑起来

有两中做法：

• 直接运行app.py
• 在终端中执行flask run

3. 页面模板

为了提高网页的灵活性与可拓展性，可以在html文件中嵌入一些特殊“标记”即Jinjia语言，以便于动态生成网页以及复用网页代码(比如具有公共的菜单栏等)。

3.1 Jinjia语法 

Jinjia负责告诉框架如何动态生成网页，其通常嵌入在html文件中，以“{{”和“}}“或者"{%"和”%}“括起来。它与Python语法比较类似。

如果说要将一个列表里面的元素放入网页的

标签中，可以使用循环语句，比如：

  {% for user in users %}
    
{{ user.username }}
  {% endfor %}

解释如下：

注释：`{# 这是注释 #}`
变量：`{{ post.title }}`，或字典元素`{{your_dict['key']}}`，或列表`{{your_list[0]}}`
多行代码块：`{% 开始 %} HTML标签 {% 结束 %}`

它可以使用if for等逻辑控制结构

3.2 复用网页代码

如果我们的一组网页都具有相同部分，比如菜单，我们可以把菜单的代码单独摘出来，形成一个文件。然后在其它网页代码中“拓展”这个文件，即可实现复用。

假定我们的这个公共部分的代码存放在base.html，如下所示

 1 
 2 
 3 
 4 
 5     
 6     
 7     
 8     
 9 
10 
11 
12     

13         ocean的博客
14         
16             
17         
18         

19             

20                 

21                     关于ocean
22                 
23             
24         
25     
26     

27         {% block content %} {% endblock %}
28     
29 
30     
31     
32     
33 
34 

注意到第27行声明了一个叫做content的代码块，表示这里留了一个空位给其它文件中的代码使用。这里实现的其实就是一个顶部标题栏，效果如下：

可以看到其余部分是空白的，要留给我们补充。那我们如何使用呢？假定我们需要使用它的代码文件为index.html，我们只需写入：

1 {% extends 'base.html' %}
2 
3 {% block title %} index {% endblock %}
4 
5 {% block content %}
6 你好！
7 {% endblock %}

就能出现下面的效果拉：

 代码里面，第一行表示当前文件需要拓展base.html；第3、5行分别表示现在要实现title和content两个部分。