一、首先是實現註冊功能
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頁面時,會提示用戶名誰誰誰登錄成功
這裏我們並沒用去驗證登錄的用戶名和密碼,如果想驗證的話,就需要添加數據庫這一功能,將註冊的用戶名和密碼存到數據庫中,然後再登錄界面上驗證。