Python Flask web 開發中的註冊與登錄功能實現

一、首先是實現註冊功能

1、我們先創建一個存儲表單信息的py文件,叫做form.py。然後寫一個註冊類的表單,用Flask-WTF這個類來實現,具體代碼如下:

form.py文件內容

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, IntegerField
from wtforms.validators import DataRequired, EqualTo, Length
class RegisterForm(FlaskForm):
    """定義表單類"""
    username = StringField(label=u"用戶名", validators=[DataRequired(u"用戶名不能爲空")])
    password = PasswordField(label=u"密碼", validators=[DataRequired(u"密碼不能爲空"), Length(8, 128)])
    password1 = PasswordField(label=u"驗證密碼", validators=[DataRequired(u"驗證密碼不能爲空"), EqualTo("password", u"兩次密碼不一樣")])
    phone = IntegerField('手機號', validators=[DataRequired()])
    submit = SubmitField(label=u"提交")

2、然後我們需要在templates這個文件裏創建一個註冊的html頁面,叫做register.html,內容如下

{% block content_title %}<h1 align="center" >歡迎來到註冊頁面</h1>{% endblock %}
{% block content %}
    <form method="post">
       {{ form.csrf_token }}
    <div class="form-group">
        {{ form.username.label }}
        {{ form.username(class='form-control') }}
    </div>
    <div class="form-group">
        {{ form.password.label }}
        {{ form.password(class='form-control') }}
    </div>
     <div class="form-group">
        {{ form.password1.label }}
        {{ form.password1(class='form-control') }}
    </div>
     <div class="form-group">
        {{ form.phone.label }}
        {{ form.phone(class='form-control') }}
    </div>
    {{ form.submit(class='btn btn-primary') }}
    </form>
{% endblock %}

3、最後在主文件裏(以我的爲例app.py)寫註冊路由和視圖函數,在前端頁面上渲染register.html頁面,代碼如下:

app.py 文件內容

# 註冊用戶信息
from form import RegisterForm, LoginForm, RichTextForm
from flask import Flask, render_template, redirect, url_for, session, flash, request, abort
from flask_moment import Moment

from flask_wtf import Form
# 這裏是設置一個密鑰,對數據進行簽名以加密數據
app.config["SECRET_KEY"] = "abcdefgh12344ijklmn904opq"
@app.route("/register", methods=["GET", "POST"])
def register():
    form = RegisterForm()
    if form.validate_on_submit():
        print(request.method)
        print(form.validate_on_submit())
        """驗證通過"""
        username = form.username.data
        # password = form.password.data
        # passwor1d = form.password1.data
        session["username"] = username
        return redirect(url_for("login"))
    # else:
    #     flash("歡迎註冊!")
    return render_template("register.html", form=form)

這時候我們運行代碼,在前端網頁上輸入127.0.0.1:5000/register時,如下圖所示(我這裏用了bootstrap風格,會美化前端頁面)

當我們寫好用戶名、密碼、驗證密碼、手機號時(對了,密碼在表單時,要求是8位數字以上),點提交時,會跳轉到登錄頁面。所以第二步寫登錄功能

二、登錄功能的實現

1、在form.py文件內容里加上登錄的表單,代碼如下:

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, IntegerField
from wtforms.validators import DataRequired, EqualTo, Length
class LoginForm(FlaskForm):
    """定義用戶登錄表單類"""
    username = StringField(label=u"用戶名", validators=[DataRequired(u"用戶名不能爲空")])
    password = PasswordField(label=u"密碼", validators=[DataRequired(u"密碼不能爲空")])
    submit = SubmitField(label=u"提交")

2、然後我們需要在templates這個文件裏創建一個登錄的html頁面,叫做login.html,內容如下:

{% block content_title %}<h1 align="center" >歡迎來到登錄頁面</h1>{% endblock %}
{% block content %}
    <form method="post">
       {{ form.csrf_token }}
    <div class="form-group">
        {{ form.username.label }}
        {{ form.username(class='form-control') }}
    </div>
    <div class="form-group">
        {{ form.password.label }}
        {{ form.password(class='form-control') }}
    </div>
    {{ form.submit(class='btn btn-primary') }}
    </form>
{% endblock %}

3、最後在主文件裏(以我的爲例app.py)寫登錄路由和視圖函數,在前端頁面上渲染register.html頁面,代碼如下:

@app.route("/login", methods=["GET", "POST"])
def login():
    form = LoginForm()
    # print(form.validate_on_submit())
    # print(request.method)
    if form.validate_on_submit():
        print(request.method)
        print(form.validate_on_submit())
        """驗證通過"""
        username = form.username.data
        password = form.password.data
        
        session["username"] = username
        return redirect(url_for("welcome"))
    # else:
    #     flash("歡迎登錄!")
    return render_template("login.html", form=form)
@app.route("/welcome")
def welcome():
    username = session.get("username", "Stranger")
    return "%s 登錄成功!" % username

這時候我們運行代碼,在前端網頁上輸入127.0.0.1:5000/login時,如下圖所示(我這裏用了bootstrap風格,會美化前端頁面)

當我們寫好用戶名、密碼時,點提交時,會跳轉welcome頁面時,會提示用戶名誰誰誰登錄成功

這裏我們並沒用去驗證登錄的用戶名和密碼,如果想驗證的話,就需要添加數據庫這一功能,將註冊的用戶名和密碼存到數據庫中,然後再登錄界面上驗證。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章