Python之flask结合Bootstrap框架快速搭建Web应用

最新推荐文章于 2024-07-28 22:59:55 发布

慕城南风

最新推荐文章于 2024-07-28 22:59:55 发布

阅读量1.2w

点赞数 7

分类专栏： flask 文章标签： bootstrap 前端 python

原文链接：https://blog.csdn.net/sinat_17736151/article/details/83752483

版权

flask 专栏收录该内容

9 篇文章 10 订阅

订阅专栏

前言

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

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

先看看几种流行的前端框架：BootStrap, React, Vue。

BootStrap容易上手，学习成本低，它提供了一些常用的css和js，拿来就能用。
React是数据单向响应的，数据发生变化时，前端UI即可随之变化。React可管理Dom树的变化，使页面呈现更快。
Vue站在了React的肩膀上, 许多方面更出色，如数据的双向绑定，速度更快，组件化，方便打包和发布等等，但相对来说上手的难度较大。

长远考虑, 建议使用Vue+node.js. 短期简单使用，BootStrap是个不错的选择。因此在这里选择了Bootstrap。

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

安装bootstrap扩展

pip install flask-bootstrap

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

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

模板的继承

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

from flask_bootstrap import Bootstrap  #python3.x导入方式
from flask.ext.bootstrap import Bootstrap  #python2.x导入方式
bootstrap=Bootstrap(app)

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

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

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

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

程序运行试一下：

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

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

{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
<head>
{%- block head %}
<title>{% block title %}{{title|default}}{% endblock title %}</title>
{%- block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- endblock metas %}
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
</head>
<body{% block body_attribs %}{% endblock body_attribs %}>
{% block body -%}
{% block navbar %}
{%- endblock navbar %}
{% block content -%}
{%- endblock content %}
{% block scripts %}
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{%- endblock scripts %}
{%- endblock body %}
</body>
{%- endblock html %}
</html>
{% endblock doc -%}

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

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

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

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

编辑test.html文件：

{% extends "bootstrap/base.html" %}

{% block title %}Flask{% endblock %}

{% block navbar %}
<p>带有下拉菜单的标签</p>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>

{% endblock %}

我们看一下效果：

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

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

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

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

{% extends "bootstrap/base.html"  %}
{%- block head %}
    <title>网络自动化管理—欢迎页！</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
 
    {%- block styles %}
    <!-- Bootstrap -->
    <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
        <!-- Bootstrap core CSS -->
{#    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">#}
        <!-- bb——这里是通过下载网页上的css文件，保存在static目录下即可-->
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
      <!-- bb——这里是通过下载网页上的css文件，保存在static目录下即可-->
    <link href="static/css/carousel.css" rel="stylesheet">
    {%- endblock styles %}
{%- endblock head %}
{% block body -%}
    {% block navbar %}
<div class="navbar-wrapper">
      <div class="container">
 
        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="#">功能导航</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="/welcome">首页</a></li>
                <li><a href="/InformationDispaly">信息展示</a></li>
                <li><a href="/IndexCollect">信息收集</a></li>
                <li><a href="/NetAutoRun">配置执行</a></li>
                <li><a href="/contact">联系我</a></li>
{#                <li class="dropdown">#}
{#                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>#}
{#                  <ul class="dropdown-menu">#}
{#                    <li><a href="#">Action</a></li>#}
{#                    <li><a href="#">Another action</a></li>#}
{#                    <li><a href="#">Something else here</a></li>#}
{#                    <li role="separator" class="divider"></li>#}
{#                    <li class="dropdown-header">Nav header</li>#}
{#                    <li><a href="#">Separated link</a></li>#}
{#                    <li><a href="#">One more separated link</a></li>#}
{#                  </ul>#}
{#                </li>#}
              </ul>
            </div>
          </div>
        </nav>
 
      </div>
    </div>
 
    {%- endblock navbar %}
    {% block content -%}
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="https://img-blog.csdnimg.cn/2022010611080255497.gif" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>CCIE的转变由此开始</h1>
{#              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>#}
              <p>这是一个完全由一名网络工程师独立建立的网站</p>
              <p>如果你也是一名网络工程师，并同样期待改变，你可以从这里开始</p>
              <p><a class="btn btn-lg btn-primary" href="https://blog.csdn.net/sinat_17736151" role="button">我的CSDN博客</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="https://img-blog.csdnimg.cn/2022010611080255497.gif" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One Step</h1>
              <p>首先，你应该构建符合自身职业规划的技术能力栈</p>
              <p>如果你也是一名网络工程师，你可以参考我的想法</p>
              <p><a class="btn btn-lg btn-primary" href="/stack" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="https://img-blog.csdnimg.cn/2022010611080255497.gif" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Move on</h1>
              <p>在这里，你可以看到我下一步的规划和打算</p>
              <p>或许能够对你有所帮助</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->
 
            <div class="container marketing">
 
      <!-- Three columns of text below the carousel -->
      <div class="row">
        <div class="col-lg-4">
          <img class="img-circle" src="https://img-blog.csdnimg.cn/2022010611080370654.gif" alt="Generic placeholder image" width="140" height="140">
          <h2>信息展示</h2>
          <p>提供网络运维相关信息的展示；目前可提供IP地址查询、负载均衡对应关系查询、域名对应关系查询等</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="https://img-blog.csdnimg.cn/2022010611080482412.gif" alt="Generic placeholder image" width="140" height="140">
          <h2>信息收集</h2>
          <p>针对未进行集中统计的信息，提供定制化信息收集的功能；可提供设备配置收集、设备接口指标定期收集、设备性能指标定期收集、设备日志收集等功能</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="https://img-blog.csdnimg.cn/2022010611080466215.gif" alt="Generic placeholder image" width="140" height="140">
          <h2>配置执行</h2>
          <p>可针对网络设备，批量下发相关配置；该功能目前主要针对分行、网点、楼层网络设备开放</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->
 
    {%- endblock content %}
 
{% block scripts %}
    <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
    <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
     <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
{#    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>#}
    <script src="/static/js/jquery.min.js"></script>
 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
{#    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>#}
    <script src="/static/js/bootstrap.min.js"></script>
 
 
{%- endblock scripts %}
 
{%- endblock body %}