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

最新推荐文章于 2024-03-18 23:09:06 发布

河乐不为

最新推荐文章于 2024-03-18 23:09:06 发布

阅读量4.2k

点赞数 3

分类专栏： Python Python 入门

本文链接：https://blog.csdn.net/linshuhe1/article/details/51742474

版权

Python 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

Python 入门

17 篇文章 8 订阅

订阅专栏

前言：

上文中我们由于已经提及了如何使用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，可以看到如下结果：

河乐不为

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Python Web 4 —— 让页面变好看点BootScrap插件

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

扫一扫