Flask：03-你离最美的web只差一个：bootstrap与表单

bootstrap与表单

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷. Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的BreakingNews都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

flask-boostrap

  • 说明：在flask中使用bootstrap，可以通过该扩展库完成。
  • 安装：pip install flask-bootstrap
  • 使用： 
    from flask_bootstrap import Bootstrap

bootstrap = Bootstrap(app)
  • 模板 
    {# 继承自bootstrap基础模板 #}
{% extends ‘bootstrap/base.html‘ %}

{% block title %}标题{% endblock %}

{% block content %}
    <div class="container">默认内容</div>
{% endblock %}
  • bootstrap基础模板中的block

    | block | 说明 |
    | ———- | —————- |
    | doc | 整个HTML文档 |
    | html | 整个html标签 |
    | head | 整个head标签 |
    | metas | 一组meta标签 |
    | styles | 一组link标签 |
    | body | 整个body标签 |
    | navbar | 导航条 |
    | content | 页面内容 |
    | scripts | 一组scripts标签 |

    提示：当重写一个block后，原来的显示效果全没了，很可能是因为没有写{{ super() }}

加载静态资源

  • flask中静态资源默认存放在static目录下，因此目录结构如下：

    project/        # 项目目录
    manage.py            # 启动控制文件
    templates/            # 模板文件目录
    static/                # 静态资源目录
        img/                # 图片
        css/                # css文件
        js/                    # js文件
        favicon.ico            # 收藏夹图标
  • 加载静态资源文件 
    {# 继承自自定义的基础模板 #}
{% extends ‘base.html‘ %}

{% block title %}用户登录{% endblock %}

{% block page_content %}
    <h1>欢迎登录...</h1>
    <div class="test"></div>
    {# 加载图片资源 #}
    {# 静态资源加载的目录static,提前在img文件夹保存一个图片xxx.jpg #}
    <img width="300" src="{{ url_for(‘static‘, filename=‘img/xxx.jpg‘) }}">
{% endblock %}

{% block styles %}
    {{ super() }}
    {# 加载CSS文件:css文件可以从bootstrap中粘贴一个过来 #}
    <link href="{{ url_for(‘static‘, filename=‘css/common.css‘) }}" type="text/css" rel="stylesheet" />
{% endblock %}

{% block head %}
    {{ super() }}
    {# 加载网站收藏夹小图标:ico文件自行从百度下载一个ico文件 #}
    <link rel="icon" type="image/x-icon" href="{{ url_for(‘static‘, filename=‘favicon.ico‘) }}" />
{% endblock %}

{% block scripts %}
    {{ super() }}
    {# 加载JS文件:js文件可以从bootstrap中粘贴一个过来 #}
    <script type="text/javascript" src="{{ url_for(‘static‘, filename=‘js/common.js‘) }}"></script>
{% endblock %}

原生表单

  • 准备模板文件

    <form method="get" action="{{ url_for(‘check‘) }}">
    用户名：<input name="username" /><br />
    <input type="submit" />
</form>
  • 添加视图函数，渲染模板文件 
    @app.route(‘/login/‘)
def login():
    return render_template(‘login.html‘)
  • 校验提交的请求 
    @app.route(‘/check/‘, methods=[‘GET‘, ‘POST‘])
def check():
    # args：所有的GET参数
    # return request.args.get(‘username‘, ‘提交失败‘)
    # form：所有的POST参数
    # return request.form.get(‘username‘, ‘提交失败‘)
    # values：所有的GET/POST参数
    return request.values.get(‘username‘, ‘提交失败‘)
  • 一个路由可以接收多种请求 
    @app.route(‘/login/‘, methods=[‘GET‘, ‘POST‘])
def login():
    if request.method == ‘POST‘:
        return request.form.get(‘username‘, ‘登录失败‘)
    return render_template(‘login.html‘)

flask-wtf

  • 说明：表单处理的扩展库，提供了CSRF、字段校验等实用功能，实用非常方便。
  • 安装：pip install flask-wtf
  • 使用：
    • 创建表单类：
    # 导入表单类的基类
from flask_wtf import FlaskForm
# 导入字段类型
from wtforms import StringField, SubmitField
# 导入相关验证器
from wtforms.validators import Length

# 创建表单类
class NameForm(FlaskForm):
    # name = StringField(‘用户名‘)
    # submit = SubmitField(‘提交‘)
    name = StringField(‘用户名‘, validators=[Length(3, 6, message=‘用户名必须是3~6个字符‘)])
    submit = SubmitField(‘提交‘)
    • 添加视图函数，创建表单对象，并分配的模板中
      @app.route(‘/‘, methods=[‘GET‘, ‘POST‘])
  def index():
      # 创建表单对象
      form = NameForm()
      # 判断是否是有效的提交
      if form.validate_on_submit():
          return form.name.data
      # 在模板文件中渲染表单,form.html可以自己写一个，也可以百度一个
      return render_template(‘form.html‘, form=form)
  • 原生渲染表单 
    {# 原生渲染 #}
<form method="post">
    {# CSRF字段 #}
    {{ form.hidden_tag() }}
    {# name字段 #}
    {{ form.name.label() }}{{ form.name(id=‘xx‘, class=‘yy‘) }}
    {% for e in form.name.errors %}
        <div>{{ e }}</div>
    {% endfor %}
    {# 提交按钮 #}
    {{ form.submit() }}
</form>
  • 使用bootstrap进行渲染 
    {% extends ‘bootstrap/base.html‘ %}

{# 导入快速渲染表单的宏 #}
{% from ‘bootstrap/wtf.html‘ import quick_form %}

{% block title %}bootstrap渲染表单类{% endblock %}

{% block content %}
    <div class="container">
        {# 在合适的位置渲染表单 #}
        {{ quick_form(form) }}
    </div>
{% endblock %}
  • POST重定向到GET：浏览器会记录最后的请求状态，若最后请求时POST，点击刷新时会提示再次提交表单。 
    @app.route(‘/‘, methods=[‘GET‘, ‘POST‘])
def index():
    # 创建表单对象
    form = NameForm()
    # 判断是否是有效的提交
    if form.validate_on_submit():
        session[‘name‘] = form.name.data
        return redirect(url_for(‘index‘))
    name = session.get(‘name‘)
    # 在模板文件中渲染表单
    return render_template(‘form2.html‘, form=form, name=name)
  • 常见字段类型：请自行测试

    | 字段类型 | 说明 |
    | ——————- | —————————- |
    | StringField | 普通文本 |
    | SubmitField | 提交按钮 |
    | PasswordField | 密文文本 |
    | HiddenField | 隐藏字段 |
    | RadioField | 单选框 |
    | BooleanField | 复选框 |
    | SelectField | 下拉框 |
    | FileField | 文件上传 |
    | TextAreaField | 文本域 |
    | IntegerField | 文本字段，值为整数 |
    | FloatField | 文本字段，值为浮点数 |
    | DateField | datetime.date类型 |
    | DateTimeField | datetime.datetime类型 |

  • 常见验证器：请自行测试

    | 验证器 | 说明 |
    | —————— | —————————- |
    | Length | 规定字符长度 |
    | DataRequired | 确保字段有值(提示信息与所写的不一致) |
    | Email | 邮箱格式 |
    | IPAddress | IP地址 |
    | NumberRange | 数值的范围 |
    | URL | 统一资源定位符格式 |
    | EqualTo | 验证两个字段的一致性 |
    | Regexp | 正则校验 |

  • 自定义字段验证函数 
    # 创建表单类
class NameForm(FlaskForm):
      。。。
    # 字段校验函数：‘validate_字段名‘
    def validate_name(self, field):
        if len(field.data) < 6:
            raise ValidationError(‘用户名不能少于6个字符‘)

消息闪烁

  • 说明：

    当用户发出请求后，状态发生了改变，需要系统给出警告提示等信息时，通常都是弹出一条消息，指示用户下一步的操作，用户可以手动关闭或自动消失，整个过程不会影响页面的正常显示。

  • 使用：
    • 在需要闪烁消息时，使用flash函数保存闪烁消息
    @app.route(‘/‘, methods=[‘GET‘, ‘POST‘])
def index():
    # 创建表单对象
    form = NameForm()
    # 判断是否是有效的提交
    if form.validate_on_submit():
        # 最后一次提交的名字
        last_name = session.get(‘name‘)
        # 如果存在最后提交的名字，且最后提交的名字与之前保存的名字不相同时
        if last_name and last_name != form.name.data:
            flash(‘大哥，又换名字了^_^‘)
        session[‘name‘] = form.name.data
        return redirect(url_for(‘index‘))
    name = session.get(‘name‘)
    # 在模板文件中渲染表单
    return render_template(‘form2.html‘, form=form, name=name)
    • 在模板文件中提供get_flashed_messages函数获取闪烁消息并渲染：
    {% for message in get_flashed_messages() %}
{# 闪烁消息文件可以从bootstrap中粘贴一个过来 #}
<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button>
    {{ message }}
</div>
{% endfor %}

    说明：上面是从bootstrap粘贴的可消失的警告框。

flask-moment

  • 说明：专门负责数据本地化显示的扩展库，使用非常方便。
  • 安装：pip install flask-moment
  • 使用：
    • python代码：
    from flask_moment import Moment

moment = Moment(app)

@app.route(‘/moment/‘)
def mom():
    from datetime import datetime, timedelta
    current_time = datetime.utcnow() + timedelta(seconds=-360)
    return render_template(‘mom.html‘, current_time=current_time)
    • 模板文件：
    {# 加载jQuery：依赖 #}
{{ moment.include_jquery() }}

{# 加载moment #}
{{ moment.include_moment() }}

{# 设置语言 #}
{{ moment.locale(‘zh-CN‘) }}

{# 简单的格式化时间显示 #}
<div>时间：{{ moment(current_time).format(‘LLLL‘) }}</div>
<div>时间：{{ moment(current_time).format(‘LLL‘) }}</div>
<div>时间：{{ moment(current_time).format(‘LL‘) }}</div>
<div>时间：{{ moment(current_time).format(‘L‘) }}</div>

{# 自定义格式化时间显示：如2018-05-20 01:03:14 #}
<div>自定义：{{ moment(current_time).format(‘YYYY-MM-DD HH:mm:ss‘) }}</div>

{# 显示时间差 #}
<div>发表于：{{ moment(current_time).fromNow() }}</div>

?

原文地址：https://www.cnblogs.com/swjblog/p/9726797.html

时间： 2024-10-29 04:14:37

Flask：03-你离最美的web只差一个：bootstrap与表单的相关文章

Web标准：九、CSS表单设计

Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验 1)改变文本框和文本域样式 文本框标签:<input type="text" value="" class=""> 给这些文本框增加css样式,改变他们的样式: 最终显示效果如下: 文本域标签:<textarea id="" class="" r

web前端框架之自定义form表单验证

h3 { background-color: palegreen } 自定义form验证初试 1 1.在后端创建一个类MainForm,并且在类中自定义host ip port phone等,然后写入方法,在post方法中创建MainForm对象,并且把post方法中的self(这里的self指代 的前端的ip,端口等)传入到这个MainForm方法中,在check_valid方法中定义一个参数handler代指传入的self,然后遍历MainForm对象中的属性,然后用handler.get_

WEB前端开发学习----3.HTML表单form标签

什么是表单? 表单就是用来搜集不同类型的用户输入.比如我们登录时输入的登录名,密码.再比如我们点击登录按钮,删除按钮等等都算是表单. 表单是一个包含表单元素的区域,包括文本域,下拉菜单,复选框,单选框等等. 在html文档中,我们使用<form></form>标签来包含表单元素. form标签有两个属性需要注意下,一个是action, 另一个是method. action ="目的地"   表示将用户输入的数据将被传送到指定位置.比如一个网页. method=&

web前端之HTML中的表单和输入

表单 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素. 表单使用表单标签(<form>)定义. 输入 多数情况下被用到的表单标签是输入标签(<input>).输入类型是由类型属性(type)定义的. 程序演示: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <

Web开发——HTML基础（HTML表单）

参考:http://www.w3school.com.cn/html/html_forms.asp HTML 表单用于搜集不同类型的用户输入. 1.<form> 元素 HTML 表单用于收集用户输入. <form> 元素定义 HTML 表单: 1.1 <input> 元素 <input> 元素是最重要的表单元素. <input> 元素有很多形态,根据不同的 type 属性. 这是本章中使用的类型: 类型 描述 text 定义常规文本输入. rad

Flask学习之三——Web表单

1. CSRF 保护 from flask import Flask app = Flask(__name__) app.config['SECRET_KEY'] = 'secret_key string' app.config字典可用来存储框架.扩展和程序本身的配置变量.使用标准的字典语法就能把配置值添加到app.config对象中SECRET_KEY配置变量是通用密钥 ps:为了增强安全性,密钥不应该直接写入代码,而要保存在环境变量中 2.  表单类 When using Flask-WTF

基于Extjs的web表单设计器 第六节——界面框架设计

基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计 基于Extjs的web表单设计器 第七节——取数公式设计 基于Extjs的web表单设计器 第八节——表单引擎设计 这一节我给大家介绍一下表单设

【Flask】 WTForm表单编程

WTForm表单编程 在网页中,为了和用户进行信息交互总是不得不出现一些表单.flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据.WTForm中最重要的几个概念如下: Form类,开发者自定义的表单必须继承自Form类或者其子类.Form类最主要的功能是通过其所包含的Field类提供对表单内数据的快捷访问方式. 各种Field类,即字段.一般而言每个Field类都对应一个input的HTML标签.比如WTForm自带的一些Field类比如BooleanField就对应

美图WEB开放平台环境配置

平台环境配置 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的crossdomain.xml文件放在您保存图片或图片来源的服务器根目录下,比如: http://example.com.cn,那么crossdomain.xml的路径为:http://example.com.cn/crossdomain.xml.需要注意的是crossdomain.xml必须部署于站点根目录下才有效, crossdomain.xml的目的是授权来自美图域下的flash向