flask第十七篇——模板【1】

从这一节开始我们就正式进入flask一个重要的模块——模板了。

我们平时看的知乎平台就是Python开发的，可以看到他的很多页面布局都是一样的，比如你现在搜“如何自学Python”，去知乎看他的页面是这样的：

你该搜如何找工作，它的布局仍然是这样：

不用说，知乎的大神们不可能每个页面都做一个.html的页面吧？！那样累死他们他们也做不过来啊，其实他们用的都是一个模板，也就是说他们只写了一个页面，然后所有的页面都复用这一个页面，那么这个一直可以复用的页面就叫做模板啦~~今天我们要讲的就是这个内容~

可能你眉头一皱——发现事情并不简单aaarticlea/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="" data-src="https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_13.png" data-ratio="1" data-w="20" />——因为这里要用到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"然后重新执行代码，或者你点击那个一律不翻译英语的按钮就可以了。

请关注公众号：自动化测试实战，关注文章最快更新动态