1、Flask模板系统

　　Django框架有自己独立的模板系统，而Flask是没有的，Flask默认采用jinjia2模板系统，jinjia2是仿写Django模板系统的一个第三方模块，但性能上要比Django的模板系统要好一些，在安装Flask的时候，jinjia2被以依赖包的形式安装到了环境里，下面介绍在Flask中模板渲染的步骤：

（1）加载HTML文件

　　Flask中使用render_template方法来加载HTML文件，HTML默认指向当前脚本同级目录templates下的文件

  1. from flask import Flask
  2. from flask import render_template
  3.  
  4. # 创建一个应用
  5. app = Flask(__name__)
  6.  
  7. @app.route("/index/", methods=["GET", "POST"])
  8. def index():
  9.     return render_template("index.html")
  10.  
  11. if __name__ == '__main__':
  12.     app.run(host="127.0.0.1", port=5000, debug=True)

　　使用render_template方法前需要从flask将该方法导入，看下方源代码，template_folder参数的默认值为"templates"，当浏览器访问路由"http://127.0.0.1:5000/index/"时，视图函数将返回脚本同级目录templates下的index.html文件，

  1.     def __init__(
  2.         self,
  3.         import_name,
  4.         static_url_path=None,
  5.         static_folder="static",
  6.         static_host=None,
  7.         host_matching=False,
  8.         subdomain_matching=False,
  9.         template_folder="templates",
  10.         instance_path=None,
  11.         instance_relative_config=False,
  12.         root_path=None,
  13.     ):

（2）传递参数

a、常规传参

  1. @app.route("/index/", methods=["GET", "POST"])
  2. def index():
  3.     return render_template("index.html", name = "index")

b、解包传参

  1. @app.route("/index/", methods=["GET", "POST"])
  2. def index():
  3.     name = "index"
  4.     return render_template("index.html", **locals())

（3）进行渲染

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     这是一个{{name}}文件
  9. </body>
  10. </html>

　　前端页面接收后台传递变量的方式与Django模板系统一致

效果展示：

2、Flask静态文件

（1）静态文件介绍

　　静态文件指的是js文件、css文件、image图片等，在Flask当中，静态文件默认放在脚本同级的static目录下，如下源码所示，static_folder参数的默认值为"static"

  1. def __init__(
  2.         self,
  3.         import_name,
  4.         static_url_path=None,
  5.         static_folder="static",
  6.         static_host=None,
  7.         host_matching=False,
  8.         subdomain_matching=False,
  9.         template_folder="templates",
  10.         instance_path=None,
  11.         instance_relative_config=False,
  12.         root_path=None,
  13.     ):

（2）前端文件静态目录的修改

　　在原来静态文件路径的基础上在路径开头加上"/static/"

  1. <link rel="shortcut icon" type="image/x-icon" href="/static/img/common/icon/ome.icon.linklogo.png">
  2.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  3.         <link rel="stylesheet" href="/static/css/iconfont.css" />
  4.         <link rel="stylesheet" href="/static/css/ome.style.css" />
  5.         <link rel="stylesheet" href="/static/css/ome.style.dif.css" />
  6.         <link rel="stylesheet" href="/static/css/ome.index.css" />

Flask：Flask的模板系统和静态文件的更多相关文章

  1. Django 2.0 学习(13)：Django模板继承和静态文件

    Django模板继承和静态文件 模板继承(extend) Django模板引擎中最强大也是最复杂的部分就是模板继承了,模板继承可以让我们创建一个基本的"骨架"模板,它可以包含网页中 ...

  2. Django模板变量及静态文件引用

    一.模板变量传递 1.视图向模板传递变量 视图中的列表,数组,字典,函数均可以传递给模板 在视图中定义变量通过render(content{‘name’ : value})传递给模板 模板通过{{  ...

  3. Django框架（二）—— 基本配置：app注册、模板配置、静态文件配置、数据库连接配置post和get

    目录 app注册.模板配置.静态文件配置.数据库连接配置post和get 一.app 二.模板配置 三.静态文件配置 四.数据库连接配置 五.get请求和post请求 六.新手三件套 七.登录功能案例 ...

  4. Flask初级（四）flash在模板中使用静态文件

    Project name :Flask_Plan templates: 默认设置下,Flask在程序根目录中名为static的子目录中寻找静态文件. 随便找个图片放进去把,命令test.png Fla ...

  5. Django框架——基础之模板系统（template文件夹）

    ---恢复内容开始--- 1. 常用语法 需要记住两组特殊符号:{{  }}  和 {%  %}. 在运用到变量的时候使用{{  }},如果是跟逻辑相关的话就使用{%  %}. 在Django模板(t ...

  6. Django-2- 模板路径查找，模板变量，模板过滤器，静态文件引用

    模板路径查找 路径配置 2. templates模板查找有两种方式 2.1 - 在APP目录下创建templates文件夹,在文件夹下创建模板 2.2 - 在项目根目录下创建templates文件夹, ...

  7. Django（五）框架之模板继承和静态文件配置

    https://www.cnblogs.com/haiyan123/p/7731959.html 一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% end ...

  8. Django框架之模板继承和静态文件配置

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  9. Django框架----模板继承和静态文件配置

    母板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

随机推荐

  1. 无暇代码（js的整洁之道）

    如果你关注代码本身和代码的编写方式,而不是只关心它是否能工作,那么你写代码是有一定的水准.专业开发人员将为未来的自己和“其他人”编写代码,而不仅仅只编写当前能工作就行的代码.在此基础上,简洁代码可以定 ...

  2. Spring Boot 2.x基础教程：Swagger接口分类与各元素排序问题详解

    之前通过Spring Boot 2.x基础教程:使用Swagger2构建强大的API文档一文,我们学习了如何使用Swagger为Spring Boot项目自动生成API文档,有不少用户留言问了关于文档 ...

  3. 检测MySQL主从是否异常

    #!bin/bash user='root' passwd="123" host="192.168.192.156" mycmd="mysql -u$ ...

  4. .Net Core删除ClientApp目录，重新生成报错解决办法

    因为在老的项目上做修改,需要删除单独的spa目录,就把ClientApp删掉了.但是重新生成报错,在VS2017界面上也没找到在什么地方配置.最后发现在csproj上里面可以去掉spa的配置 < ...

  5. MySQL 视图（合并多表数据）引发的严重性能问题

    问题背景: 一.客户环境连续多次出现性能问题,系统登入异常,数据库CPU告警. 处理过程: 1>协助排查数据库性能问题时发现如下两个较频繁的SQL导致严重的性能问题(均使用了视图合并多表数据): ...

  6. 02-18 scikit-learn库之k近邻算法

    目录 scikit-learn库之k近邻算法 一.KNeighborsClassifier 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 方法 1.4.1 kneighbors([X, n ...

  7. html5新媒体播放器标签video、audio 与embed、object

    html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...

  8. cogs2550. 冰桥，升起来了！

    [问题背景] 11月16日: 今天要来到南极洲的一角来考察啦!南极的空气真的很好呢,只不过有点冷,雪什么的真是太可爱了!这次我要在一个冰谷(应该说是山谷的地方)考察,考察点在这山谷的两边(希望不要掉下 ...

  9. What is neural network?

    It is a powerful learning algoithm inspired by how the brain work. Example 1 - single neural network ...

  10. 不就是SELECT COUNT语句吗，竟然能被面试官虐的体无完肤

    数据库查询相信很多人都不陌生,所有经常有人调侃程序员就是CRUD专员,这所谓的CRUD指的就是数据库的增删改查. 在数据库的增删改查操作中,使用最频繁的就是查询操作.而在所有查询操作中,统计数量操作更 ...