Flask 学习笔记-- 10

Version-11:

在导航栏设置login链接：

includes/_navbar.html中代码：

<ul class="nav navbar-right">
    <li class="active"><a href="/login">Login</a></li>
</ul>

网页中效果：

添加路由 简单的视图函数和login.html模板

路由和视图函数：

@app.route("/login",methods=['GET','POST'])
def login():
    if request.method == 'POST':
       return redirect(url_for('dashboard'))

    return render_template('login.html')

@app.route('/dashboard')
def dashboard():
    return render_template("dashboard.html")

login.html:
(这里没有用WTForms，直接用了html表单的操作)

{% extends 'layout.html' %}

{% block body %}
  <h1>Login</h1>
  <form action="", method="POST">
    <div class="form-group">
      <label>Username</label>
      <input type="text" name="username" class="form-control">
    </div>
    <div class="form-group">
      <label>Password</label>
      <input type="password" name="password" class="form-control">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
{% endblock %}

login页面：

点击Submit后，会返回到dashboard页面：
（这里只要点击Submit,都会跳转到dashboard页面）

Version-12:

登录页面，需要验证用户输入信息和注册时的信息是否一致

完整的login视图函数：

@app.route("/login",methods=['GET','POST'])
def login():
    if request.method == 'POST':
        # Get Form Fields
        username = request.form['username']
        password_candidate = request.form['password']

        # Create cursor
        cur = mysql.connection.cursor()

        # Get user by username
        result = cur.execute(
            "SELECT * FROM users WHERE username = %s", [username])

        if result > 0:
            # Get stored hash
            data = cur.fetchone()
            password = data['password']

            # Compare Passwords
            if sha256_crypt.verify(password_candidate, password):
                # Passed
                session['logged_in'] = True
                session['username'] = username

                flash('You are now logged in', 'success')
                return redirect(url_for('dashboard'))
            else:
                error = 'Please check your password.'
                return render_template('login.html', error=error)
            # Close connection
            cur.close()
        else:
            error = 'Username not found'
            return render_template('login.html', error=error)

    return render_template('login.html')

注：
1.request.form是用来接收表单递交来的数据，
username = request.form[‘username’]　语句将用户提交表单中的name=username 的数据存储在username变量里
password_candidate = request.form[‘password’] 一样，这里password是用户登录输入密码，变量名设置成了password_candidate，等下和数据库中的password对比，验证用户登录
2.cur = mysql.connection.cursor() 链接到mysql数据库，创建指针，等下会从mysql数据库中查询数据，上篇笔记有在flask中的基本配置，这里直接用就好了
3.result = cur.execute(
“SELECT * FROM users WHERE username = %s”, [username]) 查询username为用户输入用户名的数据

4.　if 条件语句判断查询结果，查询结果到相应的用户名，进行if语句后的代码块，否则，留在当前页面输出错误信息

if result > 0:
    ...

else:
    error = 'Username not found'
return render_template('login.html', error=error)

5.data = cur.fetchone()从数据库中选择第一条匹配的数据，保存在data变量里

password = data[‘password’] 从数据中取出password数据，存储在password变量里

6　验证登录密码，登录密码匹配，运行if条件语句之后的内容
用户名和密码不匹配，输出错误信息，留在当前页面

if sha256_crypt.verify(password_candidate, password):
    ...

else:
    error = 'Please check your password.'
    return render_template('login.html', error=error)

7.这里用了session，从flask模块中导入session类:
session allows you to store information specific to a user from one request to the next. This is implemented on top of cookies for you and signs the cookies cryptographically. What this means is that the user could look at the contents of your cookie but not modify it, unless they know the secret key used for signing.

1. session[‘logged_in’] = True
2. session[‘username’] = username，然后在dashboard.html中添加session.username生成欢迎个人的信息

<h2>Welcome {{session.username}}</h2>

用注册过的用户名和密码登录：

输出错误信息＆bootstrap警告框类型

最后，如果用户名不存在，用户名和密码不匹配，在includes/_messages.html中添加错误消息输出：

{% if error %}
  <div class="alert alert-danger">{{error}}</div>
{% endif %}

注：
1.{% … %} for Statements
{{ … }} for expressions to print to the template output
2.这里就是一个if 条件语句，如果发现错误，输出错误信息，jinja2语法，if he endif 成对出现
3.这里class 是bootstrap类型，有两个属性，alert 和alert-danger
4. alert 是警告框，alert-danger 是警告框类型不同的警告框类型颜色不一样

这里有不同的代码和网页效果：

1.alert

{% if error %}
  <div class="alert">{{error}}</div>
{% endif %}

2.class=”alert-danger”

{% if error %}
  <div class="alert-danger">{{error}}</div>
{% endif %}

3.class=”alert alert-danger”

{% if error %}
  <div class="alert alert-danger">{{error}}</div>
{% endif %}

4.class=”alert alert-success”

{% if error %}
  <div class="alert alert-success">{{error}}</div>
{% endif %}

5.class=”alert alert-info”

{% if error %}
  <div class="alert alert-info">{{error}}</div>
{% endif %}

6.class=”alert alert-warning”

{% if error %}
  <div class="alert alert-warning">{{error}}</div>
{% endif %}

代码放在了github中，不知道效果怎么样