Flask—03-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>

​