flask第十七篇——模板【1】
从这一节开始我们就正式进入flask一个重要的模块——模板了。
我们平时看的知乎平台就是Python开发的,可以看到他的很多页面布局都是一样的,比如你现在搜“如何自学Python”,去知乎看他的页面是这样的:
你该搜如何找工作,它的布局仍然是这样:
不用说,知乎的大神们不可能每个页面都做一个.html
的页面吧?!那样累死他们他们也做不过来啊,其实他们用的都是一个模板,也就是说他们只写了一个页面,然后所有的页面都复用这一个页面,那么这个一直可以复用的页面就叫做模板啦~~今天我们要讲的就是这个内容~
可能你眉头一皱——发现事情并不简单
——因为这里要用到HTML的知识了。是的,不过没关系,船长对html也是一窍不通,所以大家跟着我一起写就好了,船长现学现卖,你就不能现看现学吗?废话不多说,开始这一节的内容:
新建一个flask项目,叫templateDemo
,如何新建flask项目之前已经讲过了:
先看一个最基本的代码:
# coding: utf-8
from flask import Flask
app = Flask(__name__) # type: Flask
app.debug = True
@app.route('/')
def hello_world():
return '<h1>这是标题</h1>'
if __name__ == '__main__':
app.run()
执行代码,页面可以看到显示的内容已经是html的页面了:
但是一般来说我们页面内容会很多,我们不可能把HTML内容放在这里乱七八糟的,所以我们可以新建一个HTML文件来存放HTML代码,我们已经知道是模板文件,所以把新建的HTML文件新建在templates文件夹下:
如上图所示,我们新建了一个名为index
的HTML文件在templates文件夹下。
然后按照下图编辑这个HTML文件:
可以看到<h1>这是....</h1>
是在body
标签里面哦。而且h1
标签你写了前面后面是会自动补全的。
现在我们写好了一个简单的HTML文件,回到主代码:
要想调用写好的模板,你需要从flask导入render_template
库,代码如下
# coding: utf-8
from flask import Flask, render_template
app = Flask(__name__) # type: Flask
app.debug = True
@app.route('/')
def hello_world():
return render_template('index.html')
if __name__ == '__main__':
app.run()
保存一下文件Ctrl+s
,然后去浏览器刷新页面(因为我们开启了debug,所以不需要重新运行代码了):
我们看到title
标签就是上面浏览器标签显示的内容,而body
里面的h1
标签显示的字体辣么大~
现在大家就简单的体验了一下模板的作用~
过了十二点了,再讲点吧~
刚才我们把`index.html`文件新建在了`templates`文件夹下,可是有同学不想放在这个文件夹下,那该怎么办呢?我们看一下`Flask`的源码:
可以看到在初始化的时候它规定了模板的文件夹就是templates
,所以现在改一下模板路径就很简单了——初始化的时候多传一个template_folder
参数即可:
上面我们的templates
文件夹下面已经没有文件了,保存代码刷新页面以后可以看到对应的HTML文件的显示。但是如果你去掉app = Flask(__name__, template_folder='static')
的template_folder='static'
,页面就会报找不到模板错误:
如果有同学用Chrome浏览器,刷新的时候可能会提示翻译:
这个时候删掉标签里面的lang="en"
然后重新执行代码,或者你点击那个一律不翻译英语的按钮就可以了。
- mac系统下搭建go语言环境
- Golang语言社区--【基础知识】入门
- Go语言的小细节--map
- RBD至FileStore之所见(原理篇)
- FileStore压缩存储(优化篇)
- 深入学习Golang—channel
- 当Python字符串遇上MySQL
- Spring Boot 2.0正式发布,升还是不升呢?
- Spring Cloud构建微服务架构:分布式服务跟踪(入门)
- Spring Cloud构建微服务架构:分布式服务跟踪(跟踪原理)
- Spring Cloud Gateway真的有那么差吗?
- Spring Cloud构建微服务架构:消息驱动的微服务(核心概念)【Dalston版】
- Golang语言社区--【基础知识】循环
- Spring Cloud构建微服务架构:消息驱动的微服务(消费组)【Dalston版】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java List.addAll()方法:添加所有元素到列表中
- HDFS的Shell操作(开发重点)
- 数据结构算法操作试题(C++/Python)——字符串相乘
- Java基础知识笔记四(详细)
- [推荐]Linux入门系列(三)Vim编辑器(Vim工作模式+代码演示)
- 机器学习性能评价指标汇总
- [推荐]Linux入门系列(四)系统用户账号管理(代码图文示例)
- 逆波兰表达式
- 字符串:替换空格
- 字符串:花式反转还不够!
- 字符串:反转个字符串还有这个用处?
- 字符串: KMP是时候上场了(一文读懂系列)
- 字符串:都来看看KMP的看家本领!
- 字符串:听说你对KMP有这些疑问?
- C++ gflags库使用说明