Flask 4（template、flask-bootstrap、flask-debugtoolbar）

红太狼 2023-10-08 12:03 75阅读 0赞

#### Flask template ####

*   *  1、template
     *   *  1.1、基本模板语法规则
         *  1.2、宏定义marco
         *  1.3、过滤器
         *  1.4、template路径问题
         *  1.5、在模板引用路径的两种方式
     *  2、flask-bootstrap
     *   *  2.1、开始使用
     *  3、flask-debugtoolbar

### 1、template ###

#### 1.1、基本模板语法规则 ####

语法规则和django的模型语法规则基本一样

for循环:挖坑  
\{% for… in …%\} \{ \{…\}\} \{% endfor %\}  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200213161242150.png]  
![在这里插入图片描述][2020021315560319.png]  
for循环:填坑  
![在这里插入图片描述][20200213155536666.png]  
if：flask里面不用ifequal  
![在这里插入图片描述][20200213155727879.png]  
块：block  
![在这里插入图片描述][20200213155939860.png]  
继承：extends  
![在这里插入图片描述][20200213160219196.png]  
包含：  
![在这里插入图片描述][20200213160320468.png]  
![在这里插入图片描述][20200213160355668.png]

#### 1.2、宏定义marco ####

![在这里插入图片描述][20200213160448246.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 1]  
你可以把函数单独写成一个html  
定义函数  
![在这里插入图片描述][20200213160759720.png]  
调用函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 2]

#### 1.3、过滤器 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 4]

#### 1.4、template路径问题 ####

首先我们找到app = Flask(**name**)所在路径，Flask会负责找到template和static的路径，默认是在app = Flask(**name**)所在路径的同级目录下，比如这里  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 5]  
如果我们需要把template放在app = Flask(**name**)所在路径的前一个目录下，需要这样声明  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 6]  
同理static也可以放外面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 7]  
另外，我们也可以在蓝图这里指定template路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 8]  
给路由加一个前缀  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][20200220205531307.png]

#### 1.5、在模板引用路径的两种方式 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 10]

### 2、flask-bootstrap ###

flask-bootstrap是flask的一个插件，最新支持bootstrap4的叫bootstrap-flask

#### 2.1、开始使用 ####

先安装  
![在这里插入图片描述][20200213161936615.png]  
再插件中导入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 11]  
创建一个base.html  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 12]  
在bootstrap官网找一个导航条实例放进base.html试试

> bootstrap官网  
> https://v3.bootcss.com/components/\#navbar

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 14]  
运行并访问看看效果  
![在这里插入图片描述][20200220114907298.png]

### 3、flask-debugtoolbar ###

flask-debugtoolbar一个前端测试工具，一般用不可以不用安装  
安装  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 15]  
初始化  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 16]  
使用flask-debugtoolbar记得配置SECRET\_KEY  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 18]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200213161132888.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200213161242150.png]: https://img-blog.csdnimg.cn/20200213161242150.png
[2020021315560319.png]: https://img-blog.csdnimg.cn/2020021315560319.png
[20200213155536666.png]: https://img-blog.csdnimg.cn/20200213155536666.png
[20200213155727879.png]: https://img-blog.csdnimg.cn/20200213155727879.png
[20200213155939860.png]: https://img-blog.csdnimg.cn/20200213155939860.png
[20200213160219196.png]: https://img-blog.csdnimg.cn/20200213160219196.png
[20200213160320468.png]: https://img-blog.csdnimg.cn/20200213160320468.png
[20200213160355668.png]: https://img-blog.csdnimg.cn/20200213160355668.png
[20200213160448246.png]: https://img-blog.csdnimg.cn/20200213160448246.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200213160627377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200213160759720.png]: https://img-blog.csdnimg.cn/20200213160759720.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200213160856674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200213161331191.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200213161353657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200220204814853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200220205128512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2020022021014188.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200220205712831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200220205618385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200220205531307.png]: https://img-blog.csdnimg.cn/20200220205531307.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/2020022021033943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200213161936615.png]: https://img-blog.csdnimg.cn/20200213161936615.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200213162034799.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200213162539342.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200220114729397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200220114829971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200220114907298.png]: https://img-blog.csdnimg.cn/20200220114907298.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/2020022021052395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200220210645676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200220210823330.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20200220210952175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70