一、wtforms

类比Django的Form组件
Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证

flask的wtforms用法跟Form组件大同小异
参考文章：https://www.cnblogs.com/Zzbj/p/9966753.html

下载安装
pip install wtforms

1、wtforms使用介绍

1. wtforms支持的字段和验证函数
原文：https://blog.csdn.net/wuqing942274053/article/details/72510920

WTForms支持的HTML标准字段

字段类型 说明
StringField 文本字段
TextAreaField 多行文本字段
PasswordField 密码文本字段
HiddenField 隐藏文本字段
DateField 文本字段，值为datetime.date格式
DateTimeField 文本字段，值为datetime.datetime格式
IntegerField 文本字段，值为整数
DecimalField 文本字段，值为decimal.Decimal
FloatField 文本字段，值为浮点数
BooleanField 复选框，值为True和False
RadioField 一组单选框
SelectField 下拉列表
SelectMultipleField 下拉列表，可选择多个值
FileField 文件上传字段
SubmitField 表单提交按钮
FormField 把表单作为字段嵌入另一个表单
FieldList 一组指定类型的字段

WTForms验证函数

验证函数 说明
Email 验证电子邮件地址
EqualTo 比较两个字段的值，常用于要求输入两次密码进行确认的情况
IPAddress 验证IPv4网络地址
Length 验证输入字符串的长度
NumberRange 验证输入的值在数字范围内
Optional 无输入值时跳过其他验证函数
Required 确保字段中有数据
Regexp 使用正则表达式验证输入值
URL 验证URL
AnyOf 确保输入值在可选值列表中
NoneOf 确保输入值不在可选列表中

2. wtforms类的属性和方法
属性：
data
　　包含每个字段的数据的字典

errors
　　包含每个字段的错误列表的DECT。如果没有验证表单，或者没有错误，则为空。

meta
　　这是一个包含各种配置选项以及自定义表单行为的能力的对象。有关可以使用类元选项自定义的内容的更多信息，请参见类元文档。

方法：
validate():通过在每个字段上调用Value来验证表单，将任何额外的Form.Value_<field name>验证器传递给字段验证器。
populate_obj(obj):使用表单字段中的数据填充传递的obj的属性。
__iter__():按创建顺序迭代表单字段。
__contains__(name):如果指定的字段是此表单的成员，则返回True。

例如：

  1. form_obj = wtform(request.form)
  2. if form_obj.validate():
  3.     # 包含每个字段的数据的字典
  4.     print(form_obj.data)
  5.     # 这是一个包含各种配置选项以及自定义表单行为的能力的对象
  6.     print(form_obj.meta)
  7.     return "注册成功"
  8. # 包含每个字段的错误列表的DECT。如果没有验证表单，或者没有错误，则为空。
  9. print(form_obj.errors)

字段的基类：

label 字段的标签
validators 验证器 -验证的序列时要调用验证被调用
default 如果未提供表单或对象输入，则分配给字段的默认值
widget 如果提供，则覆盖用于呈现字段的窗口小部件
render_kw 设置字段的额外参数，提供一个字典
   
filters 按进程在输入数据上运行的一系列过滤器。
description 字段的描述，通常用于帮助文本
id 用于字段的id。表单设置了合理的默认值，您不需要手动设置。
   
_form 包含此字段的表单。在施工期间，它由表格本身传递。你永远不应该自己传递这个值。
_name 此字段的名称，由封闭表单在构造期间传递。你永远不应该自己传递这个值
_prefix 前缀为此字段的表单名称的前缀，在构造期间由封闭表单传递。
_translations 提供消息翻译的翻译对象。通常在施工期间通过封闭的形式通过。
_meta 如果提供，这是表单中的'meta'实例。你通常不会自己通过

2、基本的使用

1. MyForms.py 定义Form表单的类

  1. from wtforms import Form, widgets
  2. from wtforms.fields import simple, core, html5
  3.  
  4. # 使用wtforms的类必须要继承它的Form类
  5. # simple：普通字段   core：核心字段   html5：H5新增的字段
  6.  
  7. class RegisterForm(Form):
  8.     username = simple.StringField(
  9.         label='用户名',
  10.         # 给这个字段添加样式
  11.         render_kw={'class': 'form-control'},
  12.         # widget插件，可以把这个字段设置成其他type类型
  13.         widget=widgets.TextArea()
  14.     )
  15.     pwd = simple.PasswordField(
  16.         label='密码',
  17.         # 给这个字段添加样式
  18.         render_kw={'class': 'form-control'}
  19.     )
  20.     re_pwd = simple.PasswordField(
  21.         label='确认密码',
  22.         # 给这个字段添加样式
  23.         render_kw={'class': 'form-control'},
  24.  
  25.     )

2. 视图

  1. from flask import Blueprint, render_template
  2. from FlaskPlug.utils.MyForms import RegisterForm
  3.  
  4. userBlue = Blueprint("userBlue", __name__)
  5.  
  6. @userBlue.route('/register')
  7. def register():
  8.     # 实例化form
  9.     form_obj = RegisterForm()
  10.     return render_template('register.html', form_obj=form_obj)

3. HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>注册</title>
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10.     <div class="row">
  11.         <div class="col-md-4 col-md-offset-4">
  12.             <h2 style="margin-top: 50px;margin-bottom: 30px;text-align: center">欢迎注册</h2>
  13.             <form action="" method="POST" novalidate class="form-horizontal">
  14.                 {% for field in form_obj %}
  15.                 <div class="form-group">
  16.                     {{ field.label }}
  17.                     {{ field }}
  18.                 </div>
  19.                 {% endfor %}
  20.                 <button type="submit"  class="btn btn-success">提交</button>
  21.             </form>
  22.         </div>
  23.     </div>
  24. </div>
  25.  
  26. </body>
  27. </html>

3、验证

3-1、基本验证

步骤
　　1. 在Form类中增加验证信息
　　2. 在视图中做数据的校验 并且页面展示错误信息

1. MyForms.py 定义Form表单的类

  1. from wtforms import Form, widgets, validators
  2. from wtforms.fields import simple, core, html5
  3.  
  4. class RegisterForm(Form):
  5.     username = simple.StringField(
  6.         label='用户名',
  7.         # 给这个字段添加样式
  8.         render_kw={'class': 'form-control'},
  9.         # 可以定义多个校验规则
  10.         validators=[
  11.             # DataRequired字段必填
  12.             validators.DataRequired(message='用户名不能为空'),
  13.             # length字段的长度限制
  14.             # message:用户填写错误时的错误信息
  15.             validators.length(min=2, max=8, message='长度必须在2-8之间')
  16.         ],
  17.         # widget=widgets.TextArea()
  18.     )
  19.     pwd = simple.PasswordField(
  20.         label='密码',
  21.         # 给这个字段添加样式
  22.         render_kw={'class': 'form-control'},
  23.         validators=[
  24.             validators.DataRequired(message='密码不能为空'),
  25.             validators.length(min=8, max=16, message='长度必须在8-16之间')
  26.         ],
  27.     )
  28.     re_pwd = simple.PasswordField(
  29.         label='确认密码',
  30.         # 给这个字段添加样式
  31.         render_kw={'class': 'form-control'},
  32.         validators=[
  33.             validators.DataRequired(message='密码不能为空'),
  34.             validators.length(min=8, max=16, message='长度必须在8-16之间'),
  35.             # EqualTo：校验两个字段的值是否相等
  36.             validators.EqualTo('pwd', message='两次密码不一致')
  37.         ],
  38.     )
  39.     phone = simple.StringField(
  40.         label='手机号码',
  41.         validators=[
  42.             validators.Regexp(regex="^1[3-9][0-9]{9}$",message='手机格式不正确')
  43.         ]
  44.  
  45.     )

2. 视图

  1. from flask import Blueprint, render_template, request
  2. from FlaskPlug.utils.MyForms import RegisterForm
  3. from FlaskPlug.models import User
  4.  
  5. userBlue = Blueprint("userBlue", __name__)
  6.  
  7. @userBlue.route('/register', methods=['GET', 'POST'])
  8. def register():
  9.     # 实例化form
  10.     form_obj = RegisterForm()
  11.     if request.method == "POST":
  12.         # 把用户提交上来的数据放入Form表单中实例化
  13.         form_obj = RegisterForm(request.form)
  14.         # validate方法会去校验用户提交上来的数据
  15.         if form_obj.validate():
  16.             # 验证通过可以写入数据库，这里演示，不写入
  17.             # 验证通过的数据都保存在data这个大字典里面
  18.             # username = form_obj.data.get('username')
  19.             # password = form_obj.data.get('pwd')
  20.             # user_obj = User(username=username, password=password)
  21.             # db.session.add(user_obj)
  22.             # db.session.commit()
  23.             # db.session.close()
  24.             return "注册成功"
  25.     return render_template('register.html', form_obj=form_obj)

3. HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>注册</title>
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10.     <div class="row">
  11.         <div class="col-md-4 col-md-offset-4">
  12.             <h2 style="margin-top: 50px;margin-bottom: 30px;text-align: center">欢迎注册</h2>
  13.             <form action="" method="POST" novalidate class="form-horizontal">
  14.                 {% for field in form_obj %}
  15.                 <div class="form-group">
  16.                     {{ field.label }}
  17.                     {{ field }} <span style="color: red">{{ field.errors[0] }}</span>
  18.                 </div>
  19.                 {% endfor %}
  20.                 <button type="submit"  class="btn btn-success">提交</button>
  21.             </form>
  22.         </div>
  23.     </div>
  24. </div>
  25.  
  26. </body>
  27. </html>
3-2、自定义校验规则
  1. from wtforms import Form, validators, ValidationError
  2. from wtforms.fields import simple
  3.  
  4. def check_username(form, field):
  5.     if len(field.data) < 2:
  6.         raise ValidationError('错了，嘿嘿')
  7.  
  8. class TestForm(Form):
  9.     username = simple.StringField(
  10.         label='用户名',
  11.         validators=[check_username, ]
  12.     )
3-3、利用钩子函数进行校验
  1. 局部钩子函数： validate_字段名，接收两个参数(form, field)，后端调用validate()校验函数的时候触发
  2. form: wtforms类的实例
  3. field: 字段对象,可以通过field.data获取前端传过来的该字段的数据，不是字典
  4.  
  5. 全局钩子函数：validate, 接收self参数，self.data代表前端表单传过来的所有数据，是一个字典
  6.  
  7. from wtforms import Form, validators, ValidationError
  8. from wtforms.fields import simple
  9.  
  10. class TestForm(Form):
  11.     username = simple.StringField(
  12.         label='用户名',
  13.     )
  14.     password = simple.PasswordField(
  15.         label='密码',
  16.         validators=[
  17.             validators.DataRequired(message='密码不能为空'),
  18.             validators.length(min=8, max=16, message='长度必须在8-16之间')
  19.         ]
  20.     )
  21.  
  22.     # 局部钩子函数
  23.     def validate_username(form, field):
  24.         print(field.data)  # 张三
  25.         if len(field.data) < 2:
  26.             raise ValidationError('用户名至少两位字符')
  27.  
  28.     # 全局钩子函数
  29.     def validate(self):
  30.         print(self.data)  # {'username': '张三', 'password': '12345678'}
  31.         for key, value in self.data.items():
  32.             print(value)

4、拓展字段core/html5

  1. from wtforms import Form, widgets, validators
  2. from wtforms.fields import simple, core, html5
  3.  
  4. class RegisterForm(Form):
  5.     username = simple.StringField(
  6.         label='用户名',
  7.         # 给这个字段添加样式
  8.         render_kw={'class': 'form-control'},
  9.         # 可以定义多个校验规则
  10.         validators=[
  11.             # DataRequired字段必填
  12.             validators.DataRequired(message='用户名不能为空'),
  13.             # length字段的长度限制
  14.             # message:用户填写错误时的错误信息
  15.             validators.length(min=2, max=8, message='长度必须在2-8之间')
  16.         ],
  17.         # widget=widgets.TextArea()
  18.     )
  19.     pwd = simple.PasswordField(
  20.         label='密码',
  21.         # 给这个字段添加样式
  22.         render_kw={'class': 'form-control'},
  23.         validators=[
  24.             validators.DataRequired(message='密码不能为空'),
  25.             validators.length(min=8, max=16, message='长度必须在8-16之间')
  26.         ],
  27.     )
  28.     re_pwd = simple.PasswordField(
  29.         label='确认密码',
  30.         # 给这个字段添加样式
  31.         render_kw={'class': 'form-control'},
  32.         validators=[
  33.             validators.DataRequired(message='密码不能为空'),
  34.             validators.length(min=8, max=16, message='长度必须在8-16之间'),
  35.             # EqualTo：校验两个字段的值是否相等
  36.             validators.EqualTo('pwd', message='两次密码不一致')
  37.         ],
  38.     )
  39.     phone = simple.StringField(
  40.         label='手机号码',
  41.         validators=[
  42.             validators.Regexp(regex="^1[3-9][0-9]{9}$",message='手机格式不正确')
  43.         ]
  44.  
  45.     )
  46.     # H5新增的标签email
  47.     email = html5.EmailField(
  48.         label='邮箱',
  49.         validators=[
  50.             validators.DataRequired(message='邮箱不能为空.'),
  51.         ],
  52.         widget=widgets.TextInput(input_type='email'),
  53.     )
  54.     # 核心字段core,单选框
  55.     gender = core.RadioField(
  56.         label='性别',
  57.         choices=((1, '男'), (2, '女')),
  58.         # 前端传过来的数据是字符串类型，coerce可以把穿过来的数据转换类型
  59.         # 因为数据库存的1是int类型，前端选择"男"，传过来的是字符串1
  60.         coerce=int,
  61.         default=1
  62.     )
  63.     # 单选下拉菜单
  64.     city = core.SelectField(
  65.         label='城市',
  66.         choices=(('sz', '深圳'), ('gz', '广州'), )
  67.     )
  68.     # 多选下拉菜单
  69.     hobby = core.SelectMultipleField(
  70.         label='爱好',
  71.         choices=(
  72.             (1, '美女'),
  73.             (2, 'xiong'),
  74.         ),
  75.     )
  76.     favor = core.SelectMultipleField(
  77.         label='喜好',
  78.         choices=(
  79.             (1, '篮球'),
  80.             (2, '足球'),
  81.         ),
  82.         # 把多选下拉菜单设置成列表
  83.         widget=widgets.ListWidget(prefix_label=False),
  84.         option_widget=widgets.CheckboxInput(),
  85.         coerce=int,
  86.         default=[1, 2]
  87.     )
  88.  
  89.     def __init__(self, *args, **kwargs):
  90.         super(RegisterForm, self).__init__(*args, **kwargs)
  91.         # 从数据库获取数据 做到实时更新
  92.         # self.favor.choices = ORM操作
  93.         # 这里演示一下更改
  94.         self.favor.choices = ((1, '篮球'), (2, '足球'), (3, '羽毛球'))

5、实现csrf_token

1.Form类

  1. from flask import request
  2. from wtforms import Form
  3. from wtforms.csrf.core import CSRF
  4. from wtforms.fields import simple
  5. from wtforms import validators
  6. from wtforms import widgets
  7. from hashlib import md5
  8.  
  9. # 自定义CSRF类，重写CSRF的三个方法
  10. class MyCSRF(CSRF):
  11.     """
  12.     Generate a CSRF token based on the user's IP. I am probably not very
  13.     secure, so don't use me.
  14.     """
  15.  
  16.     def setup_form(self, form):
  17.         # 获取class Meta里设置的一些值
  18.         self.csrf_context = form.meta.csrf_context()
  19.         self.csrf_secret = form.meta.csrf_secret
  20.         # 调用父类的setup_form方法
  21.         return super(MyCSRF, self).setup_form(form)
  22.  
  23.     def generate_csrf_token(self, csrf_token):
  24.         # 使用md5加密，生成唯一token
  25.         gid = self.csrf_secret + self.csrf_context
  26.         token = md5(gid.encode('utf-8')).hexdigest()
  27.         return token
  28.  
  29.     def validate_csrf_token(self, form, field):
  30.         # 校验token
  31.         print(field.data, field.current_token)
  32.         if field.data != field.current_token:
  33.             raise ValueError('Invalid CSRF')
  34.  
  35. class RegisterForm(Form):
  36.     username = simple.StringField(
  37.         label='用户名',
  38.         render_kw={'class': 'form-control'},
  39.         widget=widgets.TextInput(),
  40.         validators=[
  41.             validators.DataRequired(message='用户名不能为空'),
  42.             validators.length(min=2, max=8, message='长度必须在2-8之间')
  43.         ]
  44.     )
  45.     password = simple.PasswordField(
  46.         label='密码',
  47.         render_kw={'class': 'form-control'},
  48.         validators=[
  49.             validators.DataRequired(message='密码不能为空'),
  50.             validators.length(min=8, max=16, message='长度必须在8-16之间')
  51.         ]
  52.     )
  53.     re_pwd = simple.PasswordField(
  54.         label='确认密码',
  55.         # 给这个字段添加样式
  56.         render_kw={'class': 'form-control'},
  57.         validators=[
  58.             validators.DataRequired(message='密码不能为空'),
  59.             validators.length(min=8, max=16, message='长度必须在8-16之间'),
  60.             validators.EqualTo('password', message='两次密码不一致')
  61.         ]
  62.     )
  63.     phone = simple.StringField(
  64.         label='手机号码',
  65.         validators=[
  66.             validators.Regexp(regex="^1[3-9][0-9]{9}$", message='手机格式不正确')
  67.         ]
  68.  
  69.     )
  70.  
  71.     class Meta:
  72.         # -- CSRF
  73.         # 是否自动生成CSRF标签
  74.         csrf = True
  75.         # 生成CSRF标签name
  76.         csrf_field_name = 'csrf_token'
  77.  
  78.         # 自动生成标签的值，加密用的csrf_secret
  79.         csrf_secret = '一库'
  80.         # 自动生成标签的值，加密用的csrf_context
  81.         csrf_context = lambda x: request.url
  82.         # 生成和比较csrf标签
  83.         csrf_class = MyCSRF
  84.  
  85.         # -- i18n
  86.         # 是否支持本地化
  87.         # locales = False
  88.         locales = ('zh', 'en')
  89.         # 是否对本地化进行缓存
  90.         cache_translations = True
  91.         # 保存本地化缓存信息的字段
  92.         translations_cache = {}

2.models

  1. class User(db.Model):
  2.     __tablename__ = 'user'
  3.  
  4.     id = db.Column(db.Integer, primary_key=True)
  5.     username = db.Column(db.String(32), nullable=False)
  6.     password = db.Column(db.String(32), nullable=False)
  7.     phone = db.Column(db.String(32))

3.视图

  1. from flask import request, views, session, render_template
  2. from flask_demo.home.models.home_model import *
  3. from flask_demo import db
  4. from flask_demo.home.forms.home_forms import RegisterForm
  5.  
  6. class RegisterView(views.MethodView):
  7.     def get(self):
  8.         form_obj = RegisterForm()
  9.         return render_template('register.html', form_obj=form_obj)
  10.  
  11.     def post(self):
  12.         form_obj = RegisterForm(request.form)
  13.         if form_obj.validate():
  14.             user_dict = {}
  15.             user_dict['username'] = form_obj.data.get('username')
  16.             user_dict['password'] = form_obj.data.get('password')
  17.             user_dict['phone'] = form_obj.data.get('phone')
  18.             user_obj = User(**user_dict)
  19.             db.session.add(user_obj)
  20.             db.session.commit()
  21.             db.session.close()
  22.             return "注册成功"
  23.         return render_template('register.html', form_obj=form_obj)

4.HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>注册</title>
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10.     <div class="row">
  11.         <div class="col-md-4 col-md-offset-4">
  12.             <h2 style="margin-top: 50px;margin-bottom: 30px;text-align: center">欢迎注册</h2>
  13.             <form action="" method="POST" novalidate class="form-horizontal">
  14.                 {{ form_obj.csrf_token }}
  16.                 <div class="form-group">
  17.                     {{ form_obj.username.label }}
  18.                     {{ form_obj.username }}
  19.                     <span style="color: red">{{ form_obj.username.errors[0] }}</span>
  20.                 </div>
  21.                 <div class="form-group">
  22.                     {{ form_obj.password.label }}
  23.                     {{ form_obj.password }}
  24.                     <span style="color: red">{{ form_obj.password.errors[0] }}</span>
  25.                 </div>
  26.                 <div class="form-group">
  27.                     {{ form_obj.re_pwd.label }}
  28.                     {{ form_obj.re_pwd }}
  29.                     <span style="color: red">{{ form_obj.re_pwd.errors[0] }}</span>
  30.                 </div>
  31.                 <div class="form-group">
  32.                     {{ form_obj.phone.label }}
  33.                     {{ form_obj.phone }}
  34.                     <span style="color: red">{{ form_obj.phone.errors[0] }}</span>
  35.                 </div>
  36.                 <button type="submit" class="btn btn-success">提交</button>
  37.             </form>
  38.         </div>
  39.     </div>
  40. </div>
  41. </body>
  42. </html>

二、基于Flask的文件上传Demo

  1. """
  2. 文件上传完后，进行代码的统计
  3. app.config.root_path: 项目的根路径
  4. os.walk:
  5.     遍历你给的路径下的所有文件(会递归遍历)
  6.     每次循环的根文件夹的路径，文件夹的名字组成的列表，和文件组成的列表
  7.     dirpath, dirnames, filenames
  8. zipfile: 压缩解压文件的模块
  9. shutil: 也是压缩解压文件的模块，还能移动啥的
  10. """
  11.  
  12. from flask import Blueprint, request, render_template
  13. from flask import current_app as app
  14. import shutil
  15. from uploadCode.models import CodeRecord
  16. from uploadCode import db
  17. import os
  18. import time
  19.  
  20. uploadBlue = Blueprint('uploadBlue', __name__)
  21.  
  22. # zip包上传
  23. @uploadBlue.route('/upload', methods=['GET', 'POST'])
  24. def upload():
  25.     if request.method == "GET":
  26.         return render_template("upload.html", error="")
  27.     # 先获取前端传过来的文件
  28.     file = request.files.get("zip_file")
  29.     # 判断是否是zip包
  30.     zip_file_type = file.filename.rsplit(".", 1)
  31.     if zip_file_type[-1] != "zip":
  32.         return render_template("upload.html", error="文件必须是zip包")
  33.     # 解压路径
  34.     upload_path = os.path.join(app.config.root_path, "files", zip_file_type[0]+str(time.time()))
  35.     print(upload_path)
  36.     # 解压前端传过来的文件file到upload_path这个路径
  37.     shutil._unpack_zipfile(file, upload_path)
  38.     # 遍历保存的文件夹得到所有.py文件
  39.     file_list = []
  40.     for (dirpath, dirnames, filenames) in os.walk(upload_path):
  41.         for filename in filenames:
  42.             file_type = filename.rsplit(".", 1)
  43.             if file_type[-1] != "py":
  44.                 continue
  45.             file_path = os.path.join(dirpath, filename)
  46.             file_list.append(file_path)
  47.     # 打开每个文件读取行数
  48.     sum_num = 0
  49.     for path in file_list:
  50.         with open(path, mode="rb") as f:
  51.             for line in f:
  52.                 if line.strip().startswith(b"#"):
  53.                     continue
  54.                 sum_num += 1
  55.     # 得到总行数去保存数据库
  56.     return str(sum_num)

1. upload.py

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <form action="" method="post" enctype="multipart/form-data">
  9.     请上传你的代码： <input type="file" name="zip_file">
  10.     <button type="submit">提交</button>
  11.     {{error}}
  12. </form>
  13.  
  14. </body>
  15. </html>

2. HTML代码

三、柱状图

参考文档Echarts：http://echarts.baidu.com/

1、使用Echarts步骤

1. 下载它需要的依赖包
2. 点击某个Demo-->Download
3. 参考着Demo去实现你的需求

2、注意

从后端传数据到前端的时候，因为展示的柱状图需要后端的数据，
而如果把数据直接在JS中使用，会出现一些问题，
因此，我们可以使用一个标签，给这个标签设置属性从而获取从后端传过来的数据，
然后在JS中获取这个标签的属性值，就可以拿到后端的数据了，
但是从属性获取的数据已经被转化成字符串了，我们这时可以使用eval()方法，
把数据类型重新转换回来。

3、Demo

  1. from flask import Blueprint, request, render_template
  2. from uploadCode.models import CodeRecord
  3. from uploadCode import db
  4.  
  5. # 柱状图
  6. @uploadBlue.route("/")
  7. def index():
  8.     # 展示用户提交代码柱状图
  9.     queryset = db.session.query(CodeRecord).all()
  10.     date_list = []
  11.     num_list = []
  12.     for obj in queryset:
  13.         date_list.append(str(obj.upload_date))
  14.         num_list.append(obj.code_nums)
  15.     return render_template("index.html", date_list=date_list, num_list=num_list)

1. Demo.py

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="/static/echarts.common.min.js"></script>
  7. </head>
  8. <body>
  9.     <div id="container" style="height: 400px"></div>
  10.     <!--用一个标签获取从后端传过来的数据-->
  11.     <div id="info" date_list="{{date_list}}" num_list="{{num_list}}"></div>
  12.     <script>
  13.         var dom = document.getElementById("container");
  14.         var myChart = echarts.init(dom);
  15.         var app = {};
  16.         let infoEle = document.getElementById("info");
  17.         let date_list = infoEle.getAttribute("date_list");
  18.         let num_list = infoEle.getAttribute("num_list");
  19.         option = null;
  20.         app.title = '坐标轴刻度与标签对齐';
  21.  
  22.         option = {
  23.             color: ['#3398DB'],
  24.             tooltip : {
  25.                 trigger: 'axis',
  26.                 axisPointer : {            // 坐标轴指示器，坐标轴触发有效
  27.                     type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  28.                 }
  29.             },
  30.             grid: {
  31.                 left: '3%',
  32.                 right: '4%',
  33.                 bottom: '3%',
  34.                 containLabel: true
  35.             },
  36.             xAxis : [
  37.                 {
  38.                     type : 'category',
  39.                     data : eval(date_list),
  40.                     axisTick: {
  41.                         alignWithLabel: true
  42.                     }
  43.                 }
  44.             ],
  45.             yAxis : [
  46.                 {
  47.                     type : 'value'
  48.                 }
  49.             ],
  50.             series : [
  51.                 {
  52.                     name:'直接访问',
  53.                     type:'bar',
  54.                     barWidth: '60%',
  55.                     data: eval(num_list)  // 重新计算一下这个字符串，转成原本的数据类型
  56.                 }
  57.             ]
  58.         };
  59.         ;
  60.         if (option && typeof option === "object") {
  61.             myChart.setOption(option, true);
  62.         }
  63.     </script>
  64. </body>
  65. </html>

2. HTML代码(根据官方Demo修改一下)

Flask插件wtforms、Flask文件上传和Echarts柱状图的更多相关文章

  1. 【Flask】 结合wtforms的文件上传表单

    表单中的文件上传 基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的. ...

  2. flask插件系列之flask_uploads上传文件

    前言 flask可以实现上传文件和下载文件的基本功能,但如果想要健壮的功能,使用flask_uploads插件是十分方便的. 安装 pip install flask_uploads 基本使用 # e ...

  3. 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  4. HTML5文件上传器，纯脚本无插件的客户端文件上传器---Uploader 文件上传器类

    概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由 ...

  5. ajaxFileUpload.js插件支持多文件上传的方法

    前提条件:ajaxFileUpload.js插件多文件上传步骤:1.修改源码,(源码只支持单个文件的上传):复制代码 代码如下: //修改前代码------- //var oldElement = j ...

  6. BootStrap FileInput 插件实现多文件上传前端功能

    <!DOCTYPE html> <html> <head> <title>文件上传</title> <meta charset=&qu ...

  7. 使用flask实现简单的文件上传

    from flask import Flask, redirect, render_template, request, url_forfrom werkzeug.utils import secur ...

  8. ajax+php (jquery.form插件)实现异步文件上传

    <!DOCTYPE html> <html lang="CN"> <head> <title>upload model</ti ...

  9. flask完成文件上传功能

    在使用flask定义路由完成文件上传时,定义upload视图函数 from flask import Flask, render_template from werkzeug.utils import ...

随机推荐

  1. js之正则的坑

    首先给一个神奇的图: 我的反应,精分吧!一会儿true一会儿false的... 后来发现,把g去掉后就正常了,那这是为什么呢??lastIndex惹得鬼! 正文: lastIndex 全局正则表达是, ...

  2. 小tips：JS之for in、Object.keys()和Object.getOwnPropertyNames()的区别

    for..in循环 使用for..in循环时,返回的是所有能够通过对象访问的.可枚举的属性,既包括存在于实例中的属性,也包括存在于原型中的实例.这里需要注意的是使用for-in返回的属性因各个浏览器厂 ...

  3. #WEB安全基础 : HTML/CSS | 0x5a标签拓展和class、id属性的使用

    a标签不只是能链接到其他网页,也能链接到网页中的元素 class属性让你用CSS对特定的元素进行修饰 这些是一个网页设计者的有力武器 这节课还是一个index.html文件   以下是代码 <h ...

  4. arcgis api 3.x for js 入门开发系列十叠加 SHP 图层（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. Numpy数组数据文件的读写

    一.引言 读写数据文件的重要性就不必多说了. 二.读取列表形式数据的文件 1.我们写几行CSV格式(列表形式,两值之间逗号隔开)的数据. id,height,age 1,175,20 2,168,18 ...

  6. 从.Net到Java学习第六篇——SpringBoot+mongodb&Thymeleaf&模型验证

    SpringBoot系列目录 SpringBoot整合mongodb MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.如果你没用过Mong ...

  7. jupyter notebook安装、登录

    pip install jupyter 提示pip需要升级(本人装的是anaconda) 输入:python -m pip install --upgrade pip 安装完成. 运行jupyter ...

  8. 解决 winform打开网页 和WebBrowser打开链接360误报拦截的问题

    以下方法我已经在自己电脑上验证通过,其他电脑并未测试,请广大读者自行验证并反馈,如果有更好的方法请指教. 在winform中如果使用这种方法弹出网页,例如这样 Process.start(" ...

  9. Tomcat安装教程

    Tomcat安装教程 文档下载:https://files-cdn.cnblogs.com/files/yocichen/Tomcat安装教程.rar 注意:本教程适用Windows平台安装Tomca ...

  10. 如何让EasyUI的Tree或者ComboTree节点不显示图标？

    版本:jQuery EasyUI 1.3.2 通过测试,只需把节点的state属性设置为null即可使EasyUI的Tree或者ComboTree控件的节点不显示图标.