Python 基于Flask的Web开发【1】【用户登录注册】

小鱼儿 2022-01-17 16:29 412阅读 0赞

## 实现目标 ##

基于Flask实现用户的登录/注册。

--------------------

## 设计思路 ##

*  前端  
    1.编写登录和注册表单  
    2.编写视图函数  
    3.编写相应的html文件  
    4.页面测试
 *  后台  
    1.创建数据库  
    2.修改配置文件  
    3.编写数据表类并生成数据表  
    4.修改视图函数，实现数据交互

--------------------

### 前端实现 ###

#### 1.编写登录和注册表单(/app/home/forms.py) ####

# 导入表单基类
    from flask_wtf import FlaskForm
    # 导入需要用到的表格类型
    from wtforms import StringField, PasswordField, SubmitField
    # 导入需要用的验证方式
    from wtforms.validators import DataRequired, EqualTo, Length, Email
    
    # 用户注册表单
    class RegisterForm(FlaskForm):
        # 用户名表框
        username = StringField(
            label= '用户名',    # 标签
            validators=[        # 验证方式
                DataRequired()  # 不能为空
            ]
        )
        # 密码表框
        password = PasswordField(
            label='密码',
            validators=[
                DataRequired(),
                Length(6,16,message='密码长度应在6-16位') # 密码长度必须在6-16，否则输出提示信息
            ]
        )
        # 邮箱表框
        email = StringField(
            label='邮箱',
            validators=[
                DataRequired(),
                Email(message='邮箱不合法')
            ]
        )
        # 注册按钮
        submit = SubmitField(
            label='注册'
        )
    
    # 登录表单
    class LoginForm(FlaskForm):
        username = StringField(
            label='用户名',
            validators=[
                DataRequired()
            ]
        )
    
        password = PasswordField(
            label='密码',
            validators=[
                Length(6, 16, message='密码长度应在6-16位')
            ]
        )
    
        submit = SubmitField(
            label='登录'
        )

--------------------

#### 2.编写视图函数(/app/home/views.py) ####

from . import home_bp # 导入蓝图
    from flask import render_template # 用于模板渲染
    
    @home_bp.route('/')
    def index():
        return render_template('index.html')
    
    @home_bp.route('/login/',methods =['GET','POST'])
    def login():
        from app.home.forms import LoginForm
        form = LoginForm()
        return render_template('login.html',form=form)
    
    @home_bp.route('/register/',methods =['GET','POST'])
    def register():
        from app.home.forms import RegisterForm
        form = RegisterForm()
        return render_template('register.html',form=form)

--------------------

#### 3.编写相应的html文件 ####

*  基模板(/app/templates/base.html)  
    为了统一页面风格，继承bootstrap/base.html，创建自己的基模板
 *  登录页面(/app/templates/login.html)  
    登录页面，继承自上面的base.html，并在content中生成登录表单
 *  注册页面(/app/templates/register.html)  
    注册页面，继承自上面的base.html，并在content中生成注册表单

--------------------

#### 4.测试效果 ####

![Python 基于Flask的Web开发【1】【用户登录 注册】][Python _Flask_Web_1_]  
![Python 基于Flask的Web开发【1】【用户登录 注册】][Python _Flask_Web_1_ 1]

--------------------

### 后台实现 ###

#### 1.创建数据库 ####

在mysql shell中创建数据库

![Python 基于Flask的Web开发【1】【用户登录 注册】][Python _Flask_Web_1_ 2]

--------------------

#### 2.修改配置文件 ####

在配置文件中添加代码如下：

# 数据库配置
    SQLALCHEMY_DATABASE_URI ="mysql://root:mysql@locallost/sentry" # 指定数据库
    SQLALCHEMY_TRACK_MODIFICATIONS = False # 关闭追踪

--------------------

#### 3.编写数据表类并生成数据表 ####

在models.py中编写数据表结构如下：

from app import db
    
    # 用户数据表
    class User(db.Model):
        id = db.Column(db.Integer,primary_key=True,autoincrement=True)
        name = db.Column(db.String(30),unique=True)
        password = db.Column(db.String(300))
        email = db.Column(db.String(40),unique=True)
    
        def __repr__(self):
            return "<User %s>"%self.name

在__init__.py中利用SQLAlchemy实例化数据库对象

from flask_sqlalchemy import SQLAlchemy
    import pymysql
    
    # 数据库报错问题
    pymysql.install_as_MySQLdb()
    # 读取配置文件的配置信息
    app.config.from_pyfile('../config.py')
    db = SQLAlchemy(app)

在manage.py中添加代码如下：

from app import db # 导入数据库对象
    from werkzeug.security import generate_password_hash  # 哈希加密
    from app.models import User # 导入数据表类
    
    @manager.command  # 使函数可以作为命令在shell中直接执行
    def db_init():
        db.drop_all() # 删除已有数据表
        db.create_all() # 创建新数据表
        admin = User(name='admin', password=generate_password_hash('admin')) # 实例化一个用户对象
        db.session.add(admin) # 添加入session
        db.session.commit() # 提交给数据库
        print("数据库初始化成功")

在python shell 中执行 python manage.py db_init 即可完成数据库初始化
        在mysql中查看

![Python 基于Flask的Web开发【1】【用户登录 注册】][Python _Flask_Web_1_ 3]

--------------------

#### 4.修改视图函数，实现数据交互 ####

from werkzeug.security import generate_password_hash # 哈希加密
    
    from app import db
    from . import home_bp # 导入蓝图
    from flask import render_template, redirect, request, flash, session, url_for
    
    @home_bp.route('/')
    def index():
        return render_template('index.html')
    
    # 登录
    @home_bp.route('/login/',methods =['GET','POST'])
    def login():
        from app.home.forms import LoginForm
        from app.models import User
        form = LoginForm()
        if form.validate_on_submit():
            # 获取表单中的数据
            username = form.username.data
            password = form.password.data
            # 在数据库中查找
            user = User.query.filter_by(name = username).first()
            # 用户名和密码匹配成功时
            if user and user.verify_password(password):
                # 登陆成功将用户信息添加到session信息中去
                session['user']=user.name
                session['id']= user.id
                flash('登录成功')
                return redirect(url_for('home.index'))
            flash('用户名或密码错误')
    
        return render_template('login.html',form=form)
    
    # 注册
    @home_bp.route('/register/',methods =['GET','POST'])
    def register():
        from app.home.forms import RegisterForm
        from app.models import User
        form = RegisterForm()
        if form.validate_on_submit():
            # 获取表单中的数据
            name = form.username.data
            password = form.password.data
            email = form.email.data
            if User.query.filter_by(name=name).first():
                flash('用户名已存在')
                return redirect(url_for('home.register'))
            if User.query.filter_by(email=email).first():
                flash('邮箱已占用')
                return redirect(url_for('home.register'))
            # 密码进行哈希加密
            user = User(name=name,password=generate_password_hash(password),email=email)
            db.session.add(user)
            db.session.commit()
            flash('注册成功，请登录')
            return redirect(url_for('home.login'))
        return render_template('register.html',form=form)
    
    # 注销
    @home_bp.route('/logout/')
    def logout():
            # 清除session信息
        session.clear()
        return redirect(url_for('home.login'))

--------------------

### 部分测试结果 ###

![Python 基于Flask的Web开发【1】【用户登录 注册】][Python _Flask_Web_1_ 4]  
![Python 基于Flask的Web开发【1】【用户登录 注册】][Python _Flask_Web_1_ 5]

转载于:https://blog.51cto.com/13992211/2365893

[Python _Flask_Web_1_]: https://s1.51cto.com/images/blog/201903/20/ee08da840f6b77de661f5cafdb586cb4.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Python _Flask_Web_1_ 1]: https://s1.51cto.com/images/blog/201903/20/98414eccc97c58e35f23372a7c6e7cef.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Python _Flask_Web_1_ 2]: https://s1.51cto.com/images/blog/201903/20/582d390d8d37cc73dc4e9cc39e2320ff.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Python _Flask_Web_1_ 3]: https://s1.51cto.com/images/blog/201903/20/855975daf518ec4b713b5425c74cea1b.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Python _Flask_Web_1_ 4]: https://s1.51cto.com/images/blog/201903/20/73e13b342e77416ec8badb00c35f0ad3.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[Python _Flask_Web_1_ 5]: https://s1.51cto.com/images/blog/201903/20/2b331ad69f9e9c187162f8d3ce3fa1d6.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=