完成登录功能，用session记住用户名

登录功能完成：

1. js:设置return

js代码

function fnLogin() {
    var oUname = document.getElementById("uname")
    var oUpass = document.getElementById("upass")
    var oError = document.getElementById("error_box")
    var isError = true;
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        oError.innerHTML = "用户名请输入6-20位字符";
        isError = false;
        return isError;
    }else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
        oError.innerHTML = "首字符必须为字母";
         isError = false;
         return isError;
    }else {
        for (var i = 0; i < oUname.value.length; i++) {
            if ((oUname.value.charCodeAt(i) < 48) || (oUname.value.charCodeAt(i) > 57) && (oUname.value.charCodeAt(i) < 97) || (oUname.value.charCodeAt(i) > 122)) {
                oError.innerHTML = "必须为字母跟数字组成";
                isNotError = false;
                return isError;
            }
        }
    }
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "密码请输入6-20位字符"
        isError = false;
        return isError;
    }
    window.alert("登录成功");
    return isError;
}

 

1. html:设置
   1. form
   2. input

html代码:

{% extends'myweb.html' %}
{% block logintitle %}登录页面{% endblock %}


{% block loginhead %}
    <link rel="stylesheet" type="text/css" href="../static/css/component.css"/>
    <script src="../static/js/login.js"></script>
{% endblock %}

{% block loginbody %}

    <div class="logo_box">
        <h3 style="text-align: center">欢迎你</h3>
        <form action="{{ url_for('login') }}" method="post">
            <div class="input_outer">
                <span class="u_user"></span>
                <input id="uname" class="text" style="color: wheat" type="text" placeholder="请输入账号" name="username">
            </div>
            <div class="input_outer">
                <span class="us_uer"></span>
                <input id="upass" class="text" style="color:wheat ; position:absolute; z-index:100;"
                       value="" type="password" placeholder="请输入密码" name="password">
            </div>
            <div class="errorText" id="error_box" style="color: red"><br></div>
            <div>
                <button onclick="return fnLogin()" class="lb1" style="color:black">登录</button>
            </div>
        </form>
    </div>
{% endblock %}

 

1. py:
   1. @app.route设置methods
   2. GET
   3. POST
      1. 读取表单数据
      2. 查询数据库
         1. 用户名密码对：
            1. 记住用户名
            2. 跳转到首页
         2. 用户名密码不对：
            1. 提示相应错误。

py代码：

session：

1. 从`flask`中导入`session`
2. 设置`SECRET_KEY`
3. 操作字典一样操作`session`：增加用户名`session['username']=`username

from flask import Flask, render_template, url_for, redirect, request,session
from flask_sqlalchemy import SQLAlchemy

import config

app = Flask(__name__)  # 创建Flask对象
app.config.from_object(config)  # 关联config.py文件进来
db = SQLAlchemy(app)  # 建立和数据库的关系映射


class User(db.Model):  # 创建类User
    __tablename__ = 'user'  # 类对应的表名user
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)  # autoincrement自增长
    username = db.Column(db.String(20), nullable=False)  # nullable是否为空
    password = db.Column(db.String(20), nullable=False)
    nickname = db.Column(db.String(20), nullable=True)

db.create_all()  # 测试是否连接成功

# 增加
# user = User(username='tan1997',password='19961021')
# db.session.add(user)
# db.session.commit()

# 查询
# user = User.query.filter(User.username == 'tan1997').first()
# print(user.username,user.password)

# 修改
# user=User.query.filter(User.username == 'tan1997').first()
# user.password=1234567
# db.session.commit()

# 删除
# user=User.query.filter(User.username == 'tan1997').first()
# db.session.delete(user)
# db.session.commit()

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


@app.route('/login/', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template("login.html")
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        user = User.query.filter(User.username == username).first()
        if user:
            session['user'] = username  # 利用session添加传回来的值username
            session.permanent = True
            if user.password == password:
                return redirect(url_for('myweb'))
            else:
                return '密码错误'
        else:
            return '用户名不存在'



@app.route('/regist/', methods=['GET', 'POST']   )#注册跳转
def regist():
    if request.method == 'GET':
        return render_template("regist.html")
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        nickname = request.form.get('nickname')
        user = User.query.filter(User.username == username).first()
        if user:
            return ' 用户名已存在'
        else:
            user = User(username=username, password=password, nickname=nickname)  # 将对象接收的数据赋到User类中,即存到数据库
            db.session.add(user)  # 数据库，添加操作
            db.session.commit()
            return redirect(url_for('login'))


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


if __name__ == '__main__':
    app.run(debug=True)

congfig:

import os
DEBUG = True

SECRET_KEY = os.urandom(24)

DIALECT = 'mysql'
DRIVER = 'mysqldb'
USERNAME = 'root'
PASSWORD = 'ROOT'
HOST = '127.0.0.1'
DATABASE = 'mytest'


SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:123456@127.0.0.1:3306/mytest?charset=utf8'
SQLALCHEMY_TRACK_MODIFICATIONS = False

截图：

 

 

 登陆成功：

用户名不存在：