Python Web 4 —— 让页面变好看点BootScrap插件

前言：

        上文中我们由于已经提及了如何使用flask框架搭建一个简单的服务器，并且响应特定的网络请求，但是显然出来的响应页面都很简陋，那么我们要如何美化这些界面呢，这里我们需要引入两个东西，一个是html模板概念和BootScrap框架。

        学习过MVC框架的都知道，将数据层（M）、视图层（V）和控制层进行分离能够降低程序的耦合性，此处我们也使用了类似的概念：

        1.将Python代码作为Web的C层；

        2.让编辑好的html文件作为V层；

        3.M层其实是由数据库（例如MongoDB）充当的。

一、使用html模板：

        实际上在@route路由下返回的内容就是html字符串，既然如此，我们其实可以提前编辑好html文件，然后使用此文件作为路由的返回内容，例如：

test.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/')
def flask_test_html(name):
    return render_template('test.html',name = name)

        此时传入了一个参数name，它的值是路由中的内容，那么在html页面中如何引用这个参数呢，其实很简单，如下：

 
人形时钟{{name}}

        运行结果：

        

二、导入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 %}

    

        

            
                Toggle navigation
                
                
                
            
            Flasky
        
        

            

                
Home
            
        
    

{% endblock %}

{% block content %}

  {% block page_content %}{% endblock %}

{% 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 %}  
  
    
Hello, {{ name }}!
  
  
{% endblock %} 

        这里设置内容有：

1.{% extends "base.html" %}  使用base.hml模板；

2.title：即网页标签名称；

3.page_content：用户自定义模块的页面显示内容，这里只显示一个文本。

        在python中控制显示此页面：

@app.route('/bootstrap/')
def flask_bootstrap_test(name):
    return render_template('test_bootstrap.html',name = name)

        运行链接：http://127.0.0.1:5000/bootstrap/linshuhe，可以看到如下结果：