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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://linsh-tech.blog.csdn.net/article/details/51742474

前言:

        上文中我们由于已经提及了如何使用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:用户自定义模块的页面显示内容,这里只显示一个文本。


        在python中控制显示此页面:
@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,可以看到如下结果:

        



展开阅读全文

没有更多推荐了,返回首页