基于Bootstrap+Flask框架的demo
⼀、什么是Bootstrap
Bootstrap，来⾃ Twitter，是⽬前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
⼆、什么是Flask
Flask 是⼀个微型的 Python 开发的 Web 框架，基于Werkzeug WSGI⼯具箱和Jinja2 模板引擎。 Flask使⽤BSD授权。 Flask也被称为“microframework”，因为它使⽤简单的核⼼，⽤extension增加其他功能。Flask没有默认使⽤的数据库、窗体验证⼯具。然
⽽，Flask保留了扩增的弹性，可以⽤Flask-extension加⼊这些功能：ORM、窗体验证⼯具、⽂件上传、各种开放式⾝份验证技术。
三、为什么整合开发
主要看中Bootstrap响应式布局，⽅便简洁开发；还可以使⽤模板继承；组件丰富满⾜⼤部分需求。Flask轻量级开发迅速，可以根据产品需求，迅速产出demo，或是进⾏数据展⽰与交互。
四、整合⽰例
4.1 ⽬录结构
apps⽬录：根据功能或是业务进⾏的模块拆分，主⽬录下有个views模块作为视图汇总，在views中注册所有分功能下的蓝图。
core⽬录：主要负责存放业务抽象框架和常量定义的内容（⽬前空）。
ui⽬录：主要存放html和css等前端展⽰的⽂件
run：主要负责demo服务启动。
4.2 views整合蓝图
views代码如下：
# @Time : 2020/7/13
# @Author : ⼤太阳⼩⽩
# @Software: PyCharm
# @blog：blog.csdn/weixin_41579863
from flask import Flask
from apps.index.view import index_blueprint
from apps.form.view import form_blueprint
from apps.ui_fitures.view import fitures_blueprint
from apps.widgets.view import widgets_blueprint
from apps.charts.view import chart_blueprint
from apps.tables.view import table_blueprint
from apps.pages.view import pages_blueprint
app = Flask(__name__, template_folder="..\\ui\\templates", static_folder="..\\ui\\static") ister_blueprint(index_blueprint)
views汇总和注册了所有蓝图，并重新指定了模板和静态⽂件位置。
表格功能view代码如下：
# @Time : 2020/7/13
# @Author : ⼤太阳⼩⽩
# @Software: PyCharm
# @blog：blog.csdn/weixin_41579863
from flask import Blueprint
from flask import render_template
table_blueprint = Blueprint('table', __name__)
@ute('/table', methods=['GET', 'POST'])
def tables_components():
return render_template('basic_table.html', )
该view定义了蓝图和相应的映射
4.3 bootstrap继承
通⽤模块⽬录结构
header.html 定义了页⾯头部标题信息
footer.html 定义了页⾯尾部信息
sidebar.html 定义了页⾯左边⽬录信息
base.html 引⽤了上述三个页⾯模板，并增加css、js基础代码，在此基础上还定义了⾃定义区域。
base.html代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>{% block title %}demo{% endblock %}</title>
<!-- CSS -->
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/bootstrap-theme.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/elegant-icons-style.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/font-awesome.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/fullcalendar.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/jquery-jvectormap-1.2.2.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/jquery-ui-1.10.4.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/line-icons.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/owl.carousel.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style-responsive.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/widgets.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/xcharts.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='assets/fullcalendar/fullcalendar/fullcalendar.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css') }}" rel="stylesheet"> {% block css %}
{% endblock %}
<!-- JS -->
<script src="{{ url_for('static', filename='js/jquery.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery-ui-1.10.4.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery-1.8.3.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery-ui-1.9.2.custom.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery.scrollTo.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery.nicescroll.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery.sparkline.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/owl.carousel.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/fullcalendar.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/calendar-custom.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery.rateit.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery.customSelect.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/scripts.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/sparkline-chart.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/easy-pie-chart.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery-jvectormap-1.2.2.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery-jvectormap-world-mill-en.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/xcharts.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery.autosize.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery.placeholder.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/gdp-data.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/morris.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/sparklines.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/charts.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery.slimscroll.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/jquery.slimscroll.min.js')}}" type="text/javascript"></script>
{% block js %}
{% endblock %}
</head>
<body>
<section id="container">
{% include "common/header.html" %}<!--引⼊⽹页的头部模板-->
{% include "common/sidebar.html" %}<!--引⼊⽹页的侧边模板-->
{% block content %}<!--⾃定义模板区域-->
{% endblock %}
</section><!--/row-->
{% include "common/footer.html" %}<!--引⼊⽹页的底部模板-->
</body>
</html>
其他页⾯只需要继承base.html基础模板，然后在添加⾃定义区域的内容即可。
例如widgets.html 页⾯
{% extends "common/base.html" %}<!--继承基础模板-->
{% block content %}<!--⾃定义模板区域-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="icon_genius"></i> Widgets</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i><a href="index.html">Home</a></li>
<li><i class="icon_genius"></i>Widgets</li>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<section class="panel">
<header class="panel-heading">
Basic items
</header>
<ul class="list-group">
<li class="list-group-item">Lorem ipsum dolor sit amet</li>
<li class="list-group-item">Praesent tempus eleifend risus</li>
<li class="list-group-item">Praesent tempus eleifend risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</section>
</div>
<div class="col-lg-4">
<section class="panel">
<header class="panel-heading">
Linked items
</header>
<div class="list-group">
<a class="list-group-item " href="#">
Lorem ipsum dolor sit amet
</a>
<a class="list-group-item active" href="javascript:;">Praesent tempus eleifend risus</a> <a class="list-group-item" href="javascript:;">Praesent tempus eleifend risus</a>
<a class="list-group-item" href="javascript:;">Porta ac consectetur ac</a>
<a class="list-group-item" href="javascript:;">Porta ac consectetur ac</a>
<a class="list-group-item" href="javascript:;">Vestibulum at eros</a>
<a class="list-group-item" href="javascript:;">Vestibulum at eros</a>
</div>
</section>
</div>
<div class="col-lg-4">
<section class="panel">
<header class="panel-heading">
Custom content
</header>
<div class="list-group">
<a class="list-group-item " href="javascript:;">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a>
<a class="list-group-item active" href="javascript:;">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a>
<a class="list-group-item" href="javascript:;">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a>
</div>
</section>
</div>
</div>
<!-- page end-->
</section>
</section>
<!--main content end-->
</section>
<!-- container section end -->
{% endblock %}
4.4 数据交互
在pages⽬录的test页⾯中，实现了两种交互⽅式：
⼀种⽅式是页⾯请求时候直接将数据注⼊到页⾯变量⾥：
@ute('/pages/test', methods=['GET', 'POST'])
def test_service():
num = '-----'
hod == 'POST':
num = request.form['num']
data = ["从后台传来的数据"+num]jquery框架定义
return render_template('test.html', data=data)
前段只要解析data变量，就可以展⽰数据，形如：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论