Flask学习笔记二--web模拟用户注册、登录

模拟用户注册、登录:
前提已经安装好mysql数据库,数据库信息在config.py中设置,对应项目中需要安装数据库插件。第一次执行时,在web-test.py中打开db.create_all()这一行,会自动在数据库中创建对应的表,然后在注释掉db.create_all()。
web-test.py代码如下:

from flask import Flask, request, flash, url_for, redirect, render_template
from flask_sqlalchemy import SQLAlchemy
import config
 
app = Flask(__name__)
#数据库配置
app.config.from_object(config)
app.config["SECRET_KEY"] = "12345678"
db = SQLAlchemy(app)
 
class LoginUsers(db.Model):
    id = db.Column('student_id', db.Integer, primary_key=True)
    regName = db.Column(db.String(100))
    pwd = db.Column(db.String(200))
    pwdRepeat = db.Column(db.String(200))
    email = db.Column(db.String(200))
 
    def __init__(self, regName, pwd, pwdRepeat, email):
        self.regName = regName
        self.pwd = pwd
        self.pwdRepeat = pwdRepeat
        self.email = email
 
@app.route('/',methods=['GET','POST'])
def login_test():
    if request.method == 'POST':
        regName = request.form['regName']
        pwd = request.form['pwd']
        loginUser = LoginUsers.query.filter_by(regName=regName).first()
        if not regName or not pwd:
            flash('输入信息不全,请重新输入', 'warning')
        elif not loginUser:
            flash('用户不存在', 'warning')
        else:
            if loginUser.pwd != pwd:
                flash('密码错误,请重新输入', 'warning')
            else:
                flash('登录成功!!')
                return redirect(url_for('login_success'))
    return render_template('login_test.html', users=LoginUsers.query.all())
 
@app.route('/zhuce/', methods=['GET', 'POST'])
def zhuce():
    if request.method == 'POST':
        regName = request.form['regName']
        pwd = request.form['pwd']
        pwdRepeat = request.form['pwdRepeat']
        email = request.form['email']
        loginUser = LoginUsers.query.filter_by(regName=regName).first()
        if not regName or not pwd or not pwdRepeat or not email:
            flash('信息输入不全,请重新输入', 'warning')
        elif loginUser:
            flash('用户已经存在', 'warning')
        else:
            user = LoginUsers(regName, pwd, pwdRepeat, email)
 
            db.session.add(user)
            db.session.commit()
            flash('用户添加成功')
            return redirect(url_for('login_test'))
    return render_template('zhuce.html')
 
@app.route('/login_success/',methods=['GET','POST'])
def login_success():
    return render_template('login_success.html')
    
#db.create_all()
 
if __name__ == '__main__':
    app.run(debug=None)

数据库配置信息config.py(config.py与web-test.py都在项目的根目录下):

DIALECT = 'mysql'  # 要用的什么数据库
DRIVER = 'pymysql' # 连接数据库驱动
USERNAME = 'root'  # 用户名
PASSWORD ='1111111'  # 密码
HOST = '127.0.0.1'  # 服务器
PORT ='3306' # 端口
DATABASE = 'flask_books' # 数据库名
 
SQLALCHEMY_DATABASE_URI = "{}+{}://{}:{}@{}:{}/{}?charset=utf8".format(DIALECT, DRIVER, USERNAME, PASSWORD, HOST, PORT, DATABASE)
SQLALCHEMY_TRACK_MODIFICATIONS = False

注:login-test.html、zhuce.html、login_success.html三个文件都在templates目录下。
登录界面login-test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎登录</title>
</head>
<body>
<!-- 以下是flask消息闪现在模板中接收消息,即flash()的消息会在此显示 -->
<b>
    {% with messages = get_flashed_messages() %}
   {% if messages %}
      {% for message in messages %}
         {{ message }}
      {% endfor %}
   {% endif %}
{% endwith %}
</b>
    <form method="post">
        <input type = "text" name = "regName" placeholder="您的账户名和登录名" /><br>
        <input type = "text" name = "pwd" placeholder="密码" /><br>
        <input type = "submit" value = "登&nbsp;&nbsp;&nbsp;&nbsp;录" />
    </form>
        <div class="item item-fore5">
            <a href="" class="" target="_blank">忘记密码</a>
        </div>
        <div class="item item-fore5">
            <a href="http://127.0.0.1:5000/zhuce/" >注&nbsp;&nbsp;&nbsp;&nbsp;册</a>
        </div>
<!-- 以下是将添加的用户信息显示在浏览器中 -->
      <table>
         <thead>
            <tr>
               <th>Name</th>
               <th>密码</th>
               <th>密码2</th>
               <th>邮箱</th>
            </tr>
         </thead>
 
         <tbody>
            {% for user in users %}
               <tr>
                  <td>{{ user.regName }}</td>
                  <td>{{ user.pwd }}</td>
                  <td>{{ user.pwdRepeat }}</td>
                  <td>{{ user.email }}</td>
               </tr>
            {% endfor %}
         </tbody>
      </table>
</body>
</html>

注册界面zhuce.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人用户注册</title>
</head>
<body>
<h3>个人用户注册</h3>
    <hr/>
        <div class="logo-con w clearfix">
            <div class="logo-title">欢迎注册</div>
            <div class="have-account">已有账号? <a href="http://127.0.0.1:5000/">请登录&gt;</a></div>
        </div>
<b>
    {% with messages = get_flashed_messages() %}
   {% if messages %}
      {% for message in messages %}
         {{ message }}
      {% endfor %}
   {% endif %}
{% endwith %}
</b>
 
        <form  method = "post">
     <label for = "regName">用 户 名</label>
     <input type = "text" name = "regName" placeholder="您的账户名和登录名" /><br>
     <label for = "password">设 置 密 码</label>
     <input type = "text" name = "pwd" placeholder = "建议使用两种或两种以上字符组合" /><br>
     <label for = "pwdRepeat">确 认 密 码</label>
     <input type = "text" name = "pwdRepeat" placeholder = "请再次输入密码" /><br>
     <label for = "email">邮 箱</label>
     <input type="text" name="email" autocomplete="off" maxlength="50" placeholder="请输入邮箱" ><br>
     <input type = "submit" value = "立即注册" />
    </form>
</body>
</html>

登录成功页面login_success.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
</head>
<body>
<b>
    {% with messages = get_flashed_messages() %}
   {% if messages %}
      {% for message in messages %}
         {{ message }}
      {% endfor %}
   {% endif %}
{% endwith %}
</b>
<br>
<p>Hello,登录成功界面</p>
<a href="http://127.0.0.1:5000/">退出</a>
</body>
</html>

运行效果图截图
登录界面:
image.png

注册界面:
image.png

登录成功界面:
image.png

4 声望
1 粉丝
0 条评论
推荐阅读
【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.7k评论 1

封面图
23个css动画效果,持续更新中...
代码github仓库:[链接]使用方式看名称效果图,有没有和自己想要的效果类似的有的话,复制粘贴代码使用也可以自己修改一下css效果并不是特别难,只是有时候我们可能想不到笔者空闲时间,会继续更新的哦,点赞关注...

水冗水孚9阅读 1.3k

封面图
两行CSS让页面提升了近7倍渲染性能!
对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢,你的用户很可能会因此离你而去。所以页面性能对于前端开发者来...

南玖9阅读 2k

封面图
你可能不知道的dialog弹窗
想必大家都知道 HTML5 中有 dialog 这样一个标签,顾名思义,就是“弹窗”。除了有良好的语义外,随着浏览器的不断更新迭代,还出现了许多你可能不知道的特性,快速了解一下吧~

XboxYan8阅读 559

封面图
那些你不知道的 CSS 自定义形状网格布局 3
基于CSS自定义网格已发布第一部分和第二部分,本文将开始第三部分探讨更多的奇特自定义形状,与之前的文章一样,核心还是基于CSS grid,clip 和 mask来自定义网格形状布局。

南城FE6阅读 1.3k

封面图
4 声望
1 粉丝
宣传栏