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语法比较类似。

如果说要将一个列表里面的元素放入网页的<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两个部分。

posted @ 2022-12-03 11:15 X-ocean 阅读(477) 评论(0) 收藏举报

刷新页面返回顶部

X-ocean