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"然后重新执行代码,或者你点击那个一律不翻译英语的按钮就可以了。

原文发布于微信公众号 - 自动化测试实战(gh_839e78b6ba28)

原文发表时间:2018-03-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏freesan44

加载RAM磁盘编译Xcode项目

每次对Xcode iOS项目进行clean、build或者在iOS虚拟机上launch,Xcode都会在DeriveData文件夹中进行读写操作。换句话说,就是...

1112
来自专栏黑白安全

WordPress 4.9.6任意文件删除漏洞利用

WordPress是目前网络上最受欢迎的CMS。约有30%的网站都在使用它。这种广泛的采用,也使其成为了网络犯罪分子非常感兴趣的一个目标.RIPS团队在7个月前...

2645
来自专栏云+创业计划

静态网站在腾讯云上的托管

可以把静态网站中的各类资源,如图片、音视频、脚本文件等内容,可以存放至腾讯云对象存储(COS),把网站逻辑部署至腾讯云服务器(CVM)。当用户向网站发起访问时,...

1.8K2
来自专栏Python小屋

Python批量导出多个PPT/PPTX文件中每个幻灯片为独立JPG图片

为啥会有这样一篇文章呢? 是因为我正在陆续把自己3年来整理的1900页Python教学PPT免费分享出来给大家学习参考。前面已经分享了几章,见“相关阅读”。 但...

4028
来自专栏web前端-

初始vue

     vue是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,...

1083
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用Fail2Ban保护WordPress

WordPress是一个非常强大的内容管理系统(CMS),是免费和开源的。因为任何人都可以发表评论,创建一个帐户,并在WordPress上发帖,许多恶意行为者已...

1690
来自专栏前端吧啦吧啦

手把手教你全家桶之React(一)

4499
来自专栏LinXunFeng的专栏

Xcode8 最快最方便的安装插件方案

1105
来自专栏我和PYTHON有个约会

Django来敲门~第一部分【8.网页中的css/js/image处理】

通常情况下,网页开发时,页面中的样式是通过外部css样式进行处理的,外部的css文件加载在Django中,需要进行简单的处理

802
来自专栏deed博客

[代码参考]在html文件调用其它html文件的几种方法

2303

扫码关注云+社区

领取腾讯云代金券