文章目录
Flask案例开源地址简介一、环境搭建1.1 canda常用命令1.2 创建虚拟环境1.3 安装flask1.4 导入flaskdemo项目
二、项目配置2.1 开启DEBUG2.2 配置数据库连接参数2.3 安装项目依赖2.4 修改flaskdemo中的错误
三、组件3.1 flash3.2 pagination3.3 table3.4 nav3.5 form3.6 搜索框
四、Ajax4.1 定义4.2 jQuery Ajax语法4.3 jQuery Ajax函数参数4.4 基本Ajax请求方法
五、echarts5.1 简单demo5.2 Echarts结合flask5.3 Echarts结合Ajax
Flask案例
开源地址
https://github.com/854771076/flaskdemo
简介
Flask是一个非常小的PythonWeb框架，被称为微型框架；只提供了一个稳健的核心，其他功能全部是通过扩展实现的；意思就是我们可以根据项目的需要量身定制，也意味着我们需要学习各种扩展库的使用。
一、环境搭建
1.1 canda常用命令
获取版本号conda -Vconda --version获取帮助conda -hconda --help获取环境相关命令的帮助conda env -h所有 --单词 都可以用 -单词首字母来代替比如 -version 可以用 -V来代替，只不过有的是大写，有的可能是小写
创建环境conda create -n environment_name创建指定python版本下包含某些包的环境conda create -n environment_name python=3.7 numpy scipy进入环境conda activate environment_name退出环境conda deactivate删除环境conda remove -n yourname --all列出环境conda env list / conda info -e复制环境conda create --name new_env_name --clone old_env_name指定目录下生成环境yml文件conda env export > 目录/environment.yml从yml文件创建环境conda env create -n env_name -f environment.yml
安装包conda instal package_name查看当前环境包列表conda list查看指定环境包列表conda list -n environment_name查看conda源中包的信息conda search package_name更新包conda update package_name删除包conda remove package_name清理无用的安装包conda clean -p清理tar包conda clean -t清理所有安装包及cacheconda clean -y --all更新anacondaconda update annaconda
1.2 创建虚拟环境
conda create -n flaskdemo python=3.8
1.3 安装flask
#进入flask虚拟环境
conda activate flaskdemo
#虚拟环境安装flask
pip install flask
1.4 导入flaskdemo项目
打开flaskdemo项目 配置项目启动项 选择app文件和环境
二、项目配置
2.1 开启DEBUG
#config.py
DEBUG='on'
2.2 配置数据库连接参数
#config.py
user = 'root'
#数据库用户名
password = '123456'
#数据库密码
database = ''
#数据库名
host = '127.0.0.1'
#数据库ip
port = '3306'
#数据库端口
2.3 安装项目依赖
#安装python第三方库
pip install flask_sqlalchemy
pip install bootstrap_flask
pip install flask_wtf
2.4 修改flaskdemo中的错误
#app_bootstrap.py
#index函数
pagination = Astock.query.paginate(page=page, per_page=20)
#test_pagination函数
pagination = Astock.query.paginate(page=page, per_page=10)
#修改完成后即可运行项目，项目里面是bootstrap-flask的各种组件模板
三、组件
这里基于flaskdemo里面的组件模板进行解释，了解更多请看[bootstrap-flask官方文档](Bootstrap-Flask — Bootstrap-Flask 2.2.x 文档)
了解更多bootstrap知识，请看Bootstrap中文网 (bootcss.com)
3.1 flash
flash组件用于消息的提醒，该demo中列举了许多例子如下图
在视图函数中可定义flash组件的样式
#app_bootstrap.py
#flash组件模板视图
@app.route('/flash', methods=['GET', 'POST'])
def test_flash():
#flash函数第一个参数是消息内容，第二个参数则是消息的类型(默认类型为primary)
#消息的类型主要有primary、secondary、success、danger、warning、info、light、dark
flash('A simple default alert—check it out!')
flash('A simple primary alert—check it out!', 'primary')
flash('A simple secondary alert—check it out!', 'secondary')
flash('A simple success alert—check it out!', 'success')
flash('A simple danger alert—check it out!', 'danger')
flash('A simple warning alert—check it out!', 'warning')
flash('A simple info alert—check it out!', 'info')
flash('A simple light alert—check it out!', 'light')
flash('A simple dark alert—check it out!', 'dark')
#Markup函数使消息内部的HTML标签能够转义
flash(Markup('A simple success alert with an example link. Give it a click if you like.'),'success')
return render_template('bootstrap_flash.html')
模板文件加载flash
#xxx.html
{% from 'bootstrap4/utils.html' import render_messages %}
#dismissible是是否开启关闭按钮的选项
{{ render_messages(container=False, dismissible=True) }}
可关闭的flash组件
#base.html
#因为base.html中只载入了bootstrap的css文件，需要在head中载入bootstrap的js文件后，点击消息的x按钮就可以关闭消息框
#导入js
{{ bootstrap.load_js() }}
#开启可关闭选项
{{ render_messages(container=False, dismissible=True) }}
3.2 pagination
该demo列举了两种分页器样式
分页功能视图函数
#app_bootstrap.py
@app.route('/pagination', methods=['GET', 'POST'])
def test_pagination():
#定义一个变量page来获取前端翻页按钮传来的GET请求参数page
page = request.args.get('page', 1, type=int)
#对数据库对象Astock进行分页，page是页数，per_page是每一页的条数
pagination = Astock.query.paginate(page=page, per_page=10)
#获取分页后当前页的数据
messages = pagination.items
#将分页器对象和分页数据返回到模板
return render_template('bootstrap_pagination.html', pagination=pagination, messages=messages)
分页器模板
#xxx.html
#导入组件
{% from 'bootstrap4/pagination.html' import render_pager, render_pagination %}
#分页器样式一(只有上一页，下一页)
{{ render_pager(pagination) }}
#分页器样式二
{{ render_pagination(pagination) }}
3.3 table
视图函数
#app_bootstrap.py
@app.route('/table')
def test_table():
#同分页器
page = request.args.get('page', 1, type=int)
pagination = Astock.query.paginate(page=page, per_page=20)
messages = pagination.items
#表格需要显示的字段名,格式为(数据库字段名,表格显示字段名)
titles = [('id', '#'), ('stockid', '股票代码'), ('stockname', '股票名称'), ('company', '公司名称'), ('createtime', '上市时间'),('category', '行业分类'), ('desc', '主营业务')]
#将数据、表头、数据库对象返回至前端模板
return render_template('bootstrap_table.html', messages=messages, titles=titles, Astock=Astock)
表格模板
#xxx.html
#导入组件
{% from 'bootstrap4/table.html' import render_table %}
#判断是否有数据传入
{% if messages %}
#messages是后端查询到的表格数据，titles是表头，table_classes是表格的样式，show_actions是是否显示操作列，model是数据库模型，view_url是详细页按钮，参数格式为(视图函数名, [(请求参数名, :数据库字段名)])
{{ render_table(messages, titles, table_classes='table-responsive table-striped',
header_classes='thead-dark',
show_actions=True, model=Astock,
view_url=('view_message', [('message_id', ':stockid')])
)}}
{% endif %}
3.4 nav
该demo有两种nav 视图函数
#app_bootstrap.py
@app.route('/nav', methods=['GET', 'POST'])
def test_nav():
return render_template('bootstrap_nav.html')
导航模板
#xxx.html
#导入组件
{% from 'bootstrap4/nav.html' import render_nav_item, render_breadcrumb_item %}
#bootstrap官网copy的样式
3.5 form
表单类定义
#form.py
#导包
from flask_bootstrap import SwitchField
from wtforms import Form, StringField,BooleanField,SubmitField, ValidationError,PasswordField
from flask_wtf import FlaskForm
from wtforms.fields import *
from wtforms.validators import DataRequired, Length, Regexp
#表单类需要继承FlaskForm
class ExampleForm(FlaskForm):
#定义表单字段
#description 添加字段描述
#render_kw 可添加HTML属性(如class、id、placeholder等)
date = DateField(description="We'll never share your email with anyone else.")
datetime = DateTimeField(render_kw={'placeholder': 'this is a placeholder'})
datetime_local = DateTimeLocalField()
time = TimeField()
floating = FloatField()
integer = IntegerField()
decimal_slider = DecimalRangeField()
integer_slider = IntegerRangeField(render_kw={'min': '0', 'max': '4'})
email = EmailField()
url = URLField()
search = SearchField()
telephone = TelField()
#validators 设置验证属性
image = FileField(render_kw={'class': 'my-class'}, validators=[Regexp('.+\.jpg$')])
#choices 添加表单元素的可选项
option = RadioField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
select = SelectField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
select_multiple = SelectMultipleField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
bio = TextAreaField()
title = StringField()
secret = PasswordField()
remember = BooleanField('Remember me')
submit = SubmitField()
表单模板
#xxx.html
{% from 'bootstrap4/form.html' import render_form, render_field, render_form_row %}
#render_form 直接打印整个表单，有三个常用参数(表单模型,处理url,请求方法)
{{ render_form(form,'/form','get') }}
#表示用get请求的方式将表单传递给/form路由对于的视图函数处理
#render_field打印单个表单元素
{{ render_field(form.username) }}
#render_form_row打印一行表单元素
{{ render_form_row([form.username, form.password]) }}
表单视图
#app_bootstrap.py
@app.route('/form', methods=['GET', 'POST'])
def test_form():
form = HelloForm()
#验证表单
if form.validate_on_submit():
flash('Form validated!')
#通过验证则返回index路由
return redirect(url_for('index'))
return render_template(
'bootstrap_form.html',
#返回表单对象到模板
form=form,
telephone_form=TelephoneForm(),
contact_form=ContactForm(),
im_form=IMForm(),
button_form=ButtonForm(),
example_form=ExampleForm()
)
3.6 搜索框
表单对象
class Search(FlaskForm):
LIST=[('','不限'),
('A','A'),
('B','B'),
('C','C'),
('D','D'),
('E','E'),
]
grade=SelectField(render_kw={'class': 'grade'},choices=LIST)
name=SearchField(render_kw={'class': 'name','placeholder':'企业名'})
查询 = SubmitField()
视图函数
#app.py
@app.route('/', methods=['GET', 'POST'])
def index():
#获取查询对象
company=companyInfo.query
if request.method=='GET':
s=Search(request.args)
name=request.args.get('name','')
grade=request.args.get('grade','')
else:
s=Search(request.form)
name=request.form.get('name','')
grade = request.form.get('grade','')
if grade!='':
company=company.filter(companyInfo.等级==grade)
if name!='':
company=company.filter(companyInfo.name.like(f'%{name}%'))
#分页
page = request.args.get('page', 1, type=int)
pagination = company.paginate(page=page, per_page=20)
messages = pagination.items
#表头
titles = [ ('id', '#'),('name', '企业名'), ('法人', '法人'), ('类型', '类型'), ('等级', '等级')]
return render_template('index.html', pagination=pagination, messages=messages, companyInfo=companyInfo, titles=titles,Search=s,name=name,grade=grade)
模板
{% from 'bootstrap4/form.html' import render_form %}
{{ render_form(Search,'/') }}
四、Ajax
4.1 定义
异步 JavaScript 和 XML，或 Ajax 本身不是一种技术，而是一种将一些现有技术结合起来使用的方法，包括：HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 对象。当使用结合了这些技术的 Ajax 模型以后，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。
尽管 Ajax 中的 X 代表 XML，但是 JSON 才是首选，因为它更加轻量，而且是用 JavaScript 编写的。在 Ajax 模型中，JSON 和 XML 都被用来包装信息。
4.2 jQuery Ajax语法
$.ajax({name:value, name:value, ... })
4.3 jQuery Ajax函数参数
名称值/描述async布尔值，表示请求是否异步处理。默认是 true。beforeSend(xhr)发送请求前运行的函数。cache布尔值，表示浏览器是否缓存被请求页面。默认是 true。complete(xhr,status)请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。contentType发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。context为所有 AJAX 相关的回调函数规定 “this” 值。data规定要发送到服务器的数据。dataFilter(data,type)用于处理 XMLHttpRequest 原始响应数据的函数。dataType预期的服务器响应的数据类型。error(xhr,status,error)如果请求失败要运行的函数。global布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。ifModified布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。jsonp在一个 jsonp 中重写回调函数的字符串。jsonpCallback在一个 jsonp 中规定回调函数的名称。password规定在 HTTP 访问认证请求中使用的密码。processData布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。scriptCharset规定请求的字符集。success(result,status,xhr)当请求成功时运行的函数。timeout设置本地的请求超时时间（以毫秒计）。traditional布尔值，规定是否使用参数序列化的传统样式。type规定请求的类型（GET 或 POST）。url规定发送请求的 URL。默认是当前页面。username规定在 HTTP 访问认证请求中使用的用户名。xhr用于创建 XMLHttpRequest 对象的函数。
4.4 基本Ajax请求方法
$.ajax({
url: '接口url',
dataType: "返回数据格式",
type: "请求方法",
success: function (data) {
.....
},
error: function (err) {
.....
}
})
五、echarts
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网Apache ECharts
5.1 简单demo
HTML代码
#导入jquery和echarts的js文件
#width和height必须设置
效果
5.2 Echarts结合flask
视图函数
@app.route('/chart', methods=['GET', 'POST'])
def test_chart():
xdata= ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
ydata=[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
return render_template('echarts.html',xdata=xdata,ydata=ydata)
模板
#导入jquery和echarts的js文件
#width和height必须设置
5.3 Echarts结合Ajax
视图函数
#后端设计api，返回json数据
@app.route('/api/analysis', methods=['GET', 'POST'])
def analysis():
data={}
try:
data['list']=[]
#这里有A、B、C、D、E五个等级，分别获取每个等级的企业数量
for i in ['A','B','C','D','E']:
data['list'].append({'count':companyInfo.query.filter(companyInfo.等级==i).count(),'等级':i})
status=200
msg='success'
except Exception as e:
status=500
msg=f'{e}'
datas={'data':data,'status':status,'msg':msg}
return jsonify(datas)
接口返回的数据
{
"data": {
"list": [
{
"count": 161246,
"等级": "A"
},
{
"count": 20809,
"等级": "B"
},
{
"count": 237,
"等级": "C"
},
{
"count": 3558,
"等级": "D"
},
{
"count": 108,
"等级": "E"
}
]
},
"msg": "success",
"status": 200
}
js代码
//该处代码利用Ajax访问后端接口获取数据，获取成功就调用echarts进行绘图
$.ajax({
url: '/api/analysis',
dataType: "text",
type: "get",
success: function (data) {
//将data解析为json对象(相当于python中的字典)
var data=JSON.parse(data)['data']['list']
var myChart = echarts.init(document.querySelector('#analysis'));
option = {
//表名
title: {
text: '评级分布图'
},
legend: {
top: 'bottom'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: '评级分布',
type: 'pie',
radius: [70, 150],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
//将api获取的数据填入
data: [
{ value: data[0]['count'], name: data[0]['等级'] },
{ value: data[1]['count'], name: data[1]['等级'] },
{ value: data[2]['count'], name: data[2]['等级'] },
{ value: data[3]['count'], name: data[3]['等级'] },
{ value: data[4]['count'], name: data[4]['等级'] },
]
}
]
};
//显示图表
myChart.setOption(option);
},
error: function (err) {
}
})
效果
精彩内容
您阅读本篇文章共花了：
发表评论