Python:Flask-Bootstrap 框架
2.5、Flask-Bootstrap 框架
2.5.1、Flask-Bootstrap框架的简单了解
参考博文链接:https://blog.csdn.net/linshuhe1/article/details/51742474
前端开源框架 Bootstrap, 使用Bootstrap可以去创建简洁、美观的页面。
在前面,我们已经使用了 Python + Flask 去创建一个简单的线性回归模型预测 web,使用html模板进行页面展示。在这里,为了更好的展示,引入了一个简化在 Flask 项目中集成前端开源框架 Bootstrap 的Flask扩展 ,一个插件 flask-bootstrap 。
安装这个插件库: flask-bootstrap:
pip install flask-bootstrap
在python脚本中导入 Bootstrap 库,创建一个 Bootstrap 实例:
from flask_bootstrap import Bootstrapapp = Flask(__name__)bootstrap = Bootstrap(app)if __name__ == '__main__':app.run()
在该python文件 *.py 同级别下的 templates 文件目录下创建一个 前端模板文件 html 文件,名为 base.html ,建议名称就写为 base.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 作为一个基础模板,一个骨架。对于其它的前端模板,可以直接继承这个 base.html的 页面渲染效果, 相当于base.html 集成了一个前端页面, 然后其他的页面继承它, 在这个基础上 进行修改 重载 重写 就可以完成新的页面, 可以加快页面的编写, 尤其对于我这种不熟悉前端框架的疼来讲。 便于开发
其中的标签的意义:
- {% extends “bootstrap/base.html” %}集成 bootstrap 原生的 base.html 骨架,在它的基础上进行添加内容;
- 标签中title、navbar、content等都是 bootstrap/base.html 中预定义好的板块,例如nabber是导航栏,这里它的作用就是添加Flasky和Home两项导航项; 【里面的内容 自己当然可以再自行进行添加和修改】
- page_content是用户自定义的内容块
创建一个页面 html, 用于真正显示的页面的内容, 在代码中 直接去继承这个 base.html 基础模板即可。创建的文件名字为:test_bootstrap.html:
- {% extends “base.html” %} 当前的页面 继承了 base.html 模板
- 标签中的 title 标题修改为: linearRegression
- page_content 是用户自己的内容模块
{% extends "base.html" %} {% block title %}linearRegression{% endblock %} {% block page_content %}
<div class="page-header"> <h1>Hello, {{ name }}!</h1>
</div>
{% endblock %}
后端的代码:
from flask_bootstrap import Bootstrap
from flask import Flask, render_templateapp = Flask(__name__)bootstrap = Bootstrap(app)@app.route('/bootstrap/<name>')
def flask_bootstrap_test(name):return render_template('test_bootstrap.html',name = name)if __name__ == '__main__':app.run()
运行代码进行测试:http://127.0.0.1:5000/bootstrap/alzn
结果如下所示:
可以发现,这个 Flasky 和 Home 导航栏 , 集成了 Bootstrap 框架的插件 flask-bootstrap
2.5.2、 上传文件 web demo
后端的代码:
# -*- coding: utf-8 -*-
from flask_bootstrap import Bootstrap
from flask import Flask, render_template, request, redirect, url_for, jsonify
from werkzeug.utils import secure_filename
import os
import timeapp = Flask(__name__)
bootstrap = Bootstrap(app)@app.route('/bootstrap/<name>')
def flask_bootstrap_test(name):return render_template('test_bootstrap.html',name = name)UPLOAD_FOLDER = 'upload'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER # 设置文件上传的目标文件夹
basedir = os.path.abspath(os.path.dirname(__file__)) # 获取当前项目的绝对路径
ALLOWED_EXTENSIONS = set(['txt', 'png', 'xlsx']) # 允许上传的文件后缀# 判断文件是否合法
def allowed_file(filename):return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS# 具有上传功能的页面
@app.route('/')
def upload_test():return render_template('api_upload_bootstrap.html')@app.route('/api/upload', methods=['POST'], strict_slashes=False)
def api_upload():print("有开始执行吗?")file_dir = os.path.join(basedir, app.config['UPLOAD_FOLDER']) # 拼接成合法文件夹地址if not os.path.exists(file_dir):os.makedirs(file_dir) # 文件夹不存在就创建f = request.files['myfile'] # 从表单的file字段获取文件,myfile为该表单的name值if f and allowed_file(f.filename): # 判断是否是允许上传的文件类型fname = f.filenameext = fname.rsplit('.', 1)[1] # 获取文件后缀f.save(os.path.join(file_dir, fname)) # 保存文件到upload目录#return jsonify({"errno": 0, "errmsg": "上传成功"})return render_template('api_upload_bootstrap.html')else:return jsonify({"errno": 1001, "errmsg": "upload fail"})if __name__ == '__main__':app.run()
对于用户自己定义的页面: api_upload_bootstrap.html :
{% extends "base.html" %} {% block title %}DSCAnalysisWeb{% endblock %}{% block page_content %} <h1>文件上传示例</h1>
<!-- <form action="/api/upload" enctype='multipart/form-data' method='POST'>-->
<!-- <input type="file" name="file">-->
<!-- <input type="submit" value="上传">-->
<!-- </form>-->
<form id="form1" method="post" action="/api/upload" enctype="multipart/form-data"><div><input id="File1" type="file" name="myfile"/> <!--后台代码中获取文件是通过form的name来标识的--><input type="submit">上传</input></div>
{% endblock %}<!--
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>文件上传示例</h1>
<!-- <form action="/api/upload" enctype='multipart/form-data' method='POST'>-->
<!-- <input type="file" name="file">-->
<!-- <input type="submit" value="上传">-->
<!-- </form>-->
<form id="form1" method="post" action="/api/upload" enctype="multipart/form-data"><div><input id="File1" type="file" name="myfile"/> <!--后台代码中获取文件是通过form的name来标识的--><input type="submit">上传</input></div>
</body>
</html>
--!
运行测试界面:
Python:Flask-Bootstrap 框架相关推荐
- API接口开发其实特简单,Python Flask Web 框架教程来了
大家好,日常工作中,无论你是数据工程师.数据挖掘工程师,甚至数据分析人员,都不可避免的与他人进行数据交互,API接口提供数据是最常见的形式. 今天我给大家分享 Python Flask Web 框架教 ...
- 比我的脸还干的gan货——Python Flask Web 框架入门
Flask是一个轻量级的基于Python的web框架. 本文适合有一定HTML.Python.网络基础的同学阅读. 1. 简介 这份文档中的代码使用 Python 3 运行. 是的,所以读者需要自己在 ...
- python Flask web 框架 (十七)
Flask 0.Flask简介 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收ht ...
- Python Flask Web框架教程 1 Hellow, World!
原文 Installing Python 如果你的计算机上没有安装Python,请立即安装.如果你的操作系统没有为你提供Python包,你可以从Python官方网站下载安装程序.如果你将Microso ...
- Python Flask Web 框架入门
人生苦短 我用python 这期非常非常干货!!!
- 比入赘还简单的——Python Flask Web 框架入门
嗨害大家好鸭!我是小熊猫
- Taffy自动化测试框架Web开发,Python Flask实践详解
1. 前言 最近为Taffy自动化测试框架写了个页面,主要实现了用例管理.执行,测试报告查看管理.发送邮件及配置等功能. 本页面适用所有基于taffy/nose框架编写的自动化测试脚本,或基于unit ...
- python flask框架教程_Flask框架从入门到实战
Flask简介: Flask是一个使用 Python 编写的轻量级 Web 应用框架,基于 WerkzeugWSGI工具箱和 Jinja2模板引擎.使用 BSD 授权. Flask也被称为 " ...
- 全栈Python Flask教程-建立社交网络
Learn how to build a basic social platform with the Python Flask web framework. 了解如何使用Python Flask网络 ...
- Python之flask结合Bootstrap框架快速搭建Web应用
目录 前言 安装bootstrap扩展 模板的继承 总结 前言 Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Soc ...
最新文章
- 难以想象!未来十年,颠覆性技术将带来这些社会变革……
- python一般用什么编译器-Python常用编译器原理及特点解析
- springboot+mybatis测试时遇到java.lang.NullPointerException
- Android调用蓝牙打印机
- 趣学python3(5)-数字,字符串,列表(2)
- 微信v3app支付php,php微信支付之APP支付方法_php技巧
- ajax给data赋值,vue 2.0 methods 里ajax生成的数据,怎么赋值给data
- Linux主机系统加固
- JavaScript 验证表单不为空和获取select下拉列表的值和文本
- Linux内核精选文章向读者汇报 | 相遇Linux
- CF558E-A Simple Task-线段树+计数排序
- Lotus Domino服务器及其应用系统的高级管理(2)
- Android Unrecognized Android Studio (or Android Support plugin for IntelliJ IDEA) version ‘202.7660.
- PHP实现简单的注册页面(正则表达式练习)
- 国内视频监控芯片方案分析
- 苹果好用的测试软件,四款主流苹果设备管理软件横向评测
- 数据库实验一 熟悉数据库管理系统环境及SQL定义语言
- oracle实例恢复 redo,ORACLE不完全恢复之current或active状态redo损坏(二)
- 给众多IT行业开发者的一个建议,要注意避开黑心的培训机构
- 电池战争:“新石油”与中欧分野