前言:
上文中我们由于已经提及了如何使用flask框架搭建一个简单的服务器,并且响应特定的网络请求,但是显然出来的响应页面都很简陋,那么我们要如何美化这些界面呢,这里我们需要引入两个东西,一个是html模板概念和BootScrap框架。
学习过MVC框架的都知道,将数据层(M)、视图层(V)和控制层进行分离能够降低程序的耦合性,此处我们也使用了类似的概念:
1.将Python代码作为Web的C层;
2.让编辑好的html文件作为V层;
3.M层其实是由数据库(例如MongoDB)充当的。
一、使用html模板:
实际上在@route路由下返回的内容就是html字符串,既然如此,我们其实可以提前编辑好html文件,然后使用此文件作为路由的返回内容,例如:
test.html:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<p>人形时钟</p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="200" width="700">
<param name="src" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf"/>
<param name="quality" value="high"/>
<param name="allowscriptaccess" value="always"/>
<param name="allowfullscreen" value="true"/>
<param name="mode" value="transparent"/>
<embed type="application/x-shockwave-flash" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" height="200" width="700"/>
</object>
</p>
</body>
</html>
上述是一个比较新奇的人形时钟的实现方式html源码,在python中使用render_template来渲染html文件的内容,将编辑好的html文件放在与python脚本同一根目录或者是该目录的子目录下,这里我存放的位置就是templates子目录下:
python脚本中的使用方式如下:
# -*- coding: UTF-8 -*-
from flask import Flask,render_template
app = Flask(__name__) #创建一个flask实例
@app.route('/test')
def flask_test_html():
return render_template('test.html')
if __name__ == '__main__': #如果是已主程序的方式启动(不是以导入模块的方式),则运行flask实例
app.run() #app.run(debug=True),即可开启debug模式
第一步:引入render_template;
第二步:使用render_template指定html文件名;
第三步:在终端中输入“python flask_test.py”启动服务器;
第四步:访问地址:http://http://127.0.0.1:5000/test查看结果:
此外,使用render_template接口渲染html内容也可以传入参数,只要在原来的例子中稍加修改:
@app.route('/test/<name>')
def flask_test_html(name):
return render_template('test.html',name = name)
此时传入了一个参数name,它的值是路由中<name>的内容,那么在html页面中如何引用这个参数呢,其实很简单,如下:
<p>人形时钟{{name}}</p>
运行结果:
二、导入BootStrap框架:
1.BootStrap的安装
要根据当前使用的框架决定安装的bootscrap的版本,由于我们选择的框架是flask,所以要安装的插件其实是flask-bootstrap,在终端中运行以下指令:
sudo pip install flask-bootstrap
安装成功,如下:
2.BootStrap使用案例
首先是在python脚本中引入bootstrap变量:
from flask_bootstrap import Bootstrap
类似flask创建一个实例那样创建一个Bootstrap实例:
bootstrap = Bootstrap(app) #创建一个Bootstrap实例
在templates文件目录下创建一个模板html文件,假设命名为base.html:
{% extends "bootstrap/base.html" %}
{% block title %}Flask{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
这个
base.html模板将作为接下来显示页面的骨架,所以接下来设计的页面都继承自此骨架即可,里面的一些关键标签的意义需要解析一下:
1.{% extends "bootstrap/base.html" %}集成bootstrap原生的base.html骨架,在它的基础上进行添加内容;
2.标签中title、navbar、content等都是bootstrap/base.html中预定义好的板块,例如nabber是导航栏,这里它的作用就是添加Flasky和Home两项导航项;
3.page_content是用户自定义的内容块
接下来新建的html就是真正用于显示的页面内容,从上面我们知道它需要继承自base.html框架,这里我们创建一个新的html文件为:test_bootstrap.html:
{% extends "base.html" %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Hello, {{ name }}!</h1>
</div>
{% endblock %}
这里设置内容有:
1.{% extends "base.html" %} 使用base.hml模板;
2.title:即网页标签名称;
3.page_content:用户自定义模块的页面显示内容,这里只显示一个文本。
@app.route('/bootstrap/<name>')
def flask_bootstrap_test(name):
return render_template('test_bootstrap.html',name = name)
运行链接:http://127.0.0.1:5000/bootstrap/linshuhe,可以看到如下结果: