来自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语法比较类似。
如果说要将一个列表里面的元素放入网页的<li>标签中，可以使用循环语句，比如：
<ul>
{% for user in users %}
<li><a href="{{ user.url }}">{{ user.username }}</a></li>
{% endfor %}
</ul>
解释如下：
注释：`{# 这是注释 #}`
变量：`{{ post.title }}`，或字典元素`{{your_dict['key']}}`，或列表`{{your_list[0]}}`
多行代码块：`{% 开始 %} HTML标签 {% 结束 %}`
它可以使用if for等逻辑控制结构
3.2 复用网页代码
如果我们的一组网页都具有相同部分，比如菜单，我们可以把菜单的代码单独摘出来，形成一个文件。然后在其它网页代码中“拓展”这个文件，即可实现复用。
假定我们的这个公共部分的代码存放在base.html，如下所示
1 <!DOCTYPE html>
2 <html lan="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
7 <link rel="stylesheet" href="{{ url_for('static',filename='/css/bootstrap.min.css') }}">
8 <title>{% block title %} {% endblock %}</title>
9 </head>
10 <!--手敲https://www.bilibili.com/video/BV1gh411q7xo?t=141.6-->
11 <body>
12 <nav class="navbar navbar-expand-md navbar-light bg-light">
13 <a class="navbar-brand" href="{{ url_for('index') }}">ocean的博客</a>
14 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
15 aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
16 <span class="navbar-toggler-icon"></span>
17 </button>
18 <div class="collapse navbar-collapse" id="navbarNav">
19 <ul class="navbar-nav">
20 <li class="nav-item active">
21 <a class="nav-link" href="#">关于ocean</a>
22 </li>
23 </ul>
24 </div>
25 </nav>
26 <div class="container">
27 {% block content %} {% endblock %}
28 </div>
29
30 <script src="{{ url_for('static',filename='js/jquery-3.6.1.slim.js') }}"></script>
31 <script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
32 <!-- popper由于版本更新被包含在bootstrap里，所以不需要了 -->
33 </body>
34 </html>
注意到第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两个部分。
标签：文件夹,index,网页,Flask,代码,html,90,app,PythonWeb From： https://www.cnblogs.com/x-ocean/p/16883914.html