基于flask的在线笔记共享管理系统【9】（注册与登录功能实现）

基于flask的在线笔记共享管理系统【9】（注册与登录功能实现）

1.注册：

代码实现

# 用户注册
@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegisterForm(request.form) # 实例化表单类
    if request.method == 'POST' and form.validate(): # 如果提交表单，并字段验证通过
        # 获取字段内容
        email = form.email.data
        username = form.username.data
        password = sha256_crypt.encrypt(str(form.password.data)) # 对密码进行加密

        db = MysqlUtil() # 实例化数据库操作类
        sql = "INSERT INTO users(email,username,password) \
               VALUES ('%s', '%s', '%s')" % (email,username,password) # user表中插入记录
        db.insert(sql)

        flash('您已注册成功，请先登录', 'success') # 闪存信息
        return redirect(url_for('login')) # 跳转到登录页面

    return render_template('register.html', form=form) # 渲染模板

HTML渲染

{% extends 'layout.html' %}

{% block body %}
   <div>
     <h1 class="title-center"> <img src = "../static/css/logo.png"  width="25%"  height="25%"  />  </h1>
     <h1 > <img src = "../static/css/denlu.png"  width="5%"  height="5%"  />  Cloud Notes <small> 欢迎使用 </small></h1>
<div class="content">
  <h1 class="title-center">用户注册</h1>
  {% from "includes/_formhelpers.html" import render_field %}
  <form method="POST" action="">
    <div class="form-group">
      {{render_field(form.email, class_="form-control")}}
    </div>
    <div class="form-group">
      {{render_field(form.username, class_="form-control")}}
    </div>
    <div class="form-group">
      {{render_field(form.password, class_="form-control")}}
    </div>
    <div class="form-group">
      {{render_field(form.confirm, class_="form-control")}}
    </div>
    <p><input type="submit" class="btn btn-primary" value="注册"></p>
  </form>
</div>
  <h1 class="title-center"> <img src = "../static/css/home2.png"  width="30%"  height="30%"  />  </h1>
    </div>
{% endblock %}

效果预览

2.登录

代码实现

# 用户登录
@app.route('/login', methods=['GET', 'POST'])
def login():
    if "logged_in" in session:  # 如果已经登录，则直接跳转到个人文章列表
        return redirect(url_for("dashboard"))

    if request.method == 'POST': # 如果提交表单
        # 从表单中获取字段
        username = request.form['username']
        password_candidate = request.form['password']
        sql = "SELECT * FROM users  WHERE username = '%s'" % (username) # 根据用户名查找user表中记录
        db = MysqlUtil() # 实例化数据库操作类
        result = db.fetchone(sql) # 获取一条记录
        if result : # 如果查到记录
            password = result['password']  # 用户填写的密码
            # 对比用户填写的密码和数据库中记录密码是否一致
            if sha256_crypt.verify(password_candidate, password): # 调用verify方法验证，如果为真，验证通过
                # 写入session
                session['logged_in'] = True
                session['username'] = username
                flash('登录成功！', 'success') # 闪存信息
                return redirect(url_for('dashboard')) # 跳转到控制台
            else:  # 如果密码错误
                error = '用户名和密码不匹配'
                return render_template('login.html', error=error) # 跳转到登录页，并提示错误信息
        else:
            error = '用户名不存在'
            return render_template('login.html', error=error)
    return render_template('login.html')

HTML渲染

{% extends 'layout.html' %}

{% block body %}
    <div>
        <h1 class="title-center"> <img src = "../static/css/logo.png"  width="25%"  height="25%"  />  </h1>
        <h1 > <img src = "../static/css/in.png"  width="10%"  height="10%"  />  Cloud Notes <small> 欢迎使用 </small></h1>
<div class="content" >
  <h1 class="title-center">用户登录</h1>
  <form action="" method="POST" onsubmit="return checkLogin()">
    <div class="form-group">
      <label>用户名</label>
      <input type="text" name="username" class="form-control" value={{request.form.username}}>
    </div>
    <div class="form-group">
      <label>密码</label>
      <input type="password" name="password" class="form-control" value="">
    </div>
    <button type="submit" class="btn btn-primary">登录</button>
  </form>
</div>
    <h1 class="title-center"> <img src = "../static/css/home2.png"  width="30%"  height="30%"  />  </h1>
    </div>
<script>
  function checkLogin(){
      var username = $("input[name='username']").val()
      var password = $("input[name='password']").val()
      // 检测用户名长度
      if ( username.length < 2  || username.length > 25){
        alert('用户名长度在2-25个字符之间')
        return false;
      }
      // 检测密码长度
      if ( username.length < 2  || username.length > 25){
        alert('密码长度在6-20个字符之间')
        return false;
      }
  }
</script>

{% endblock %}

效果