0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AdminLTE Login验证页面例子

Posted at

Login验证页面例子

登陆验证页面后台输入项目定义

forms.py
"""
页面form定义
"""
from __future__ import absolute_import, print_function, unicode_literals

from flask_wtf import FlaskForm
import wtforms as wtf


class LoginForm(FlaskForm):
    """
    登陆页面入力项目的验证定义
    """

    email = wtf.StringField(
        'email:', validators=[
            wtf.validators.DataRequired(),
            wtf.validators.Length(min=6, max=35)])

    password = wtf.PasswordField(
        'password:', validators=[
            wtf.validators.DataRequired()])

登陆验证页面url定义

view_login.py
@app.route('/')
def view_login():
    """
    登陆页面

    登陆成功后,非表示
    """
    # 页面form设定取得
    form = forms.LoginForm(request.form)

    # 页面标题设置
    res = {
        'page_title': '登陆',
    }

    # 页面表示数据
    context = {
        'res': res,
        'form': form,
    }

    return render_template(
        'view_login.html',
        **context
    )

登陆按钮事件定义

view_login.py
@app.route('/login', methods=['POST'])
def view_login_action():

    # Formobj
    form = forms.LoginForm(request.form)

    # 页面标题设置
    res = {
        'page_title': '登陆结果',
    }

    # 页面表示数据
    context = {
        'res': res,
        'form': form,
    }

    # 输入验证
    for key, value in form.errors.items():
        form.errors[key] = form[key].error_class()

    if not form.validate():
        # 错误信息页面表示
        for key, value in form.errors.items():
            flash('{}: {}'.format(key, str(value)), 'error')

        return render_template(
            'view_login.html',
            **context,
        )

    # 邮件地址
    email = form.email.data
    # 密码
    password = form.password.data

    if not (email == 'aa@bb.cc' and password == '1234'):
        flash('输入信息有误!')
        return render_template(
            'view_login.html',
            **context,
        )

    return "login sucess"

前台html定义

view_login.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>{{res.page_title}}</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="{{ url_for('static', filename='fontawesome-free/css/all.min.css')}}" />
  <link rel="stylesheet" href="{{ url_for('static', filename='AdminLTE/css/adminlte.min.css')}}" />

</head>

<body class="hold-transition login-page">

  <div class="login-box">
    <div class="login-logo">
      <a href="{{ url_for('views.login.view_login') }}">{{res.page_title}}</a>
    </div>

    <div class="card">

      {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
          <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <p><i class="fas fa-exclamation"></i>登陆错误信息</p>
            {% for category, message in messages %}
            {{ message }}
            {% endfor %}
          </div>
        {% endif %}
      {% endwith %}

      <div class="card-body login-card-body">
        <p class="login-box-msg">Login</p>

        <form action="{{ url_for('views.login.view_login_action') }}" method="post">
          {{ form.csrf_token }}
          <div class="input-group mb-3">
            {{ form.email(class_="form-control", type="email", placeholder="Email") }}
            <div class="input-group-append">
              <span class="fa input-group-text"><i class="fas fa-envelope"></i></span>
            </div>
          </div>

          <div class="input-group mb-3">
            {{ form.password(class_="form-control", type="password", placeholder="Password") }}
            <div class="input-group-append">
              <span class="fa input-group-text"><i class="fas fa-lock"></i></span>
            </div>
          </div>

          <div class="row">
            <div class="col-8">
            </div>
            <div class="col-4">
              <button type="submit" class="btn btn-primary btn-block float-right">Login</button>
            </div>
          </div>

        </form>

      </div>
    </div>

  </div>

  <script type="text/javascript" src="{{ url_for('static', filename='jquery/jquery.min.js') }}"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>
</body>

</html>

参照

AdminLTE源代码

例子

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?