人生苦短,我用Python(五)—通过Flask结合Bootstrap框架快速搭建Web应用-2

写在前面:

Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架。Werkzeug用来处理Socket服务,其在Flask中被用于接受和处理http请求;Jinja2被用来对模板进行处理,将模板和数据进行渲染,返回给用户的浏览器。

Bootstrap是由Twitter推出的一个用于前端开发的开源工具包,给予HTML、CSS、JavaScriot,提供简洁、直观、强悍的前端开发框架,是目前最受环境的前端框架。

前面一篇文章已经讲到了,如何通过flask将不同URL的http请求,对应到不同的python函数、不同的html等。

那么下面我们来讲讲,怎么利用Bootstrap框架,快速提供我们想要的前端页面。

由于博主不是专门做这个的,所以下面的内容只是博主的一些理解和实际使用过程中的一些方法,并不能保证完全正确。


开始动手:

首先安装bootstrap扩展

pip install flask-bootstrap

模板的继承

安装完成后,我们可以看到在 \venv\Lib\site-packages\flask_bootstrap\templates\bootstrap路径下,看到bootstrap的一些基础模板

人生苦短,我用Python(五)—通过Flask结合Bootstrap框架快速搭建Web应用-2_第1张图片

直接通过浏览器打开,会看到html文本的内容,接下来需要将这些模板通过Flask 调用jinja2进行渲染(这一段为博主猜测)

在程序中,导入bootstrap并进行初始化

from flask_bootstrap import Bootstrap
from flask.ext.bootstrap import Bootstrap
bootstrap=Bootstrap(app)

在项目根目录的template目录中,创建html模板,并继承上文中bootstrap这个目录下的base.html

采用继承的这种模式,我们便可以使用在base.html中定义好的块

人生苦短,我用Python(五)—通过Flask结合Bootstrap框架快速搭建Web应用-2_第2张图片

在app.py中,设置URL“/test”返回该test模板

@app.route('/test')
def test():
return render_template('test.html')

程序运行试一下:

人生苦短,我用Python(五)—通过Flask结合Bootstrap框架快速搭建Web应用-2_第3张图片

这时可以看到,网页中什么都没有,这是因为我们在test.html文件中,没有使用任何块

我们看一下/bootstrap/base.html中有哪些块可以让我们使用:

{% block doc -%}


{%- block html %}

{%- block head %}
{% block title %}{{title|default}}{% endblock title %}
{%- block metas %}

{%- endblock metas %}
{%- block styles %}


{%- endblock styles %}
{%- endblock head %}


{% block body -%}
{% block navbar %}
{%- endblock navbar %}
{% block content -%}
{%- endblock content %}
{% block scripts %}


{%- endblock scripts %}
{%- endblock body %}

{%- endblock html %}

{% endblock doc -%}

由此,我们可以看到,我们可以使用包括head、style、metas、body、navbar、content等等

我们可以利用菜鸟教程网站的一些示例,尝试一下这些块的编写方法,

我们可以试一下导航元素 网址如下:https://www.runoob.com/bootstrap/bootstrap-navigation-elements.html

我们可以尝试,带有下拉菜单的标签页,复制菜鸟教程中的html代码,粘贴在{% block navbar %}{%- endblock navbar %}之间

人生苦短,我用Python(五)—通过Flask结合Bootstrap框架快速搭建Web应用-2_第4张图片

我们看一下效果:

人生苦短,我用Python(五)—通过Flask结合Bootstrap框架快速搭建Web应用-2_第5张图片

可以看到,这达到了我们想要的效果,依次类推,我们可以自己定义导航栏的内容,以及其他块的内容等等。

我们可以结合bootstrap网站上的实际案例,定制我们自己想要的网页效果

https://v3.bootcss.com/getting-started/#examples

下面看一下我最终的代码与实现的效果

{% extends "bootstrap/base.html"  %}
{%- block head %}
    网络自动化管理—欢迎页!
    
    
    
    
    
    
    

    {%- block styles %}
    
    
        
{#    #}
        
    
    
      
    
    {%- endblock styles %}
{%- endblock head %}
{% block body -%}
    {% block navbar %}


    {%- endblock navbar %}
    {% block content -%}
        

            
Generic placeholder image

信息展示

提供网络运维相关信息的展示;目前可提供IP地址查询、负载均衡对应关系查询、域名对应关系查询等

View details »

Generic placeholder image

信息收集

针对未进行集中统计的信息,提供定制化信息收集的功能;可提供设备配置收集、设备接口指标定期收集、设备性能指标定期收集、设备日志收集等功能

View details »

Generic placeholder image

配置执行

可针对网络设备,批量下发相关配置;该功能目前主要针对分行、网点、楼层网络设备开放

View details »

{%- endblock content %} {% block scripts %} {# #} {# #} {%- endblock scripts %} {%- endblock body %}

人生苦短,我用Python(五)—通过Flask结合Bootstrap框架快速搭建Web应用-2_第6张图片


总结

通过这篇文章,我们掌握到了基本的如何利用Bootstrap框架,快速高效的设计我们的网页

下一篇,我们讲讲如何将页面上的元素与后台应用程序进行联动

你可能感兴趣的:(python知识库)