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

登录功能完成：

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

session：

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

 

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

app = Flask(__name__)  
app.config.from_object(config)  
db = SQLAlchemy(app)  


class User(db.Model):  
    __tablename__ = 'user'  
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)  
    username = db.Column(db.String(20), nullable=False)  
    password = db.Column(db.String(20), nullable=False)
    nickname = db.Column(db.String(20), nullable=True)

db.create_all()  

'''

user = User(username='15',password='12')
db.session.add(user)
db.session.commit()


user=User.query.filter(User.username=="15").first()
print(user.username,user.password)


user=User.query.filter(User.username=="15").first()
user.password='888'
db.session.commit()

user=User.query.filter(User.username=="15").first()
db.session.delete(user)
db.session.commit()
'''




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


@app.route('/lin/')  
def lin():
    return 'lin'


@app.route('/denglu/', methods=['GET', 'POST'])  m
def denglu():
    if request.method == 'GET':
        return render_template('denglu.html')
    else:
        username = request.form.get('user')  
        password = request.form.get('pass')
        user = User.query.filter(User.username == username).first()   
        if user:   
            session['user'] = username  
            session.permanent = True
            if user.password == password:   
                return redirect(url_for('daohang'))
            else:
                return u'用户密码错误'
        else:
            return u'用户不存在,请先注册'


@app.route('/zhuce/', methods=['GET', 'POST'])  
def zhuce():
    if request.method == 'GET':
        return render_template('zhuce.html')
    else:
        username = request.form.get('user') 
        password = request.form.get('pass')
        nickname = request.form.get('nickname')
        user = User.query.filter(User.username == username).first()  
        if user:
            return u'该用户已存在'
        else:
            user = User(username=username, password=password, nickname=nickname)  
            db.session.add(user)  
            db.session.commit()
            return redirect(url_for('denglu'))  


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


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


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

import os
DEBUG = True

SECRET_KEY = os.urandom(24)

DIALECT = 'mysql'
DRIVER = 'mysqldb'
USERNAME = 'root'
PASSWORD = 'ROOT'
HOST = '127.0.0.1'
PORT = '3306'
DATABASE = 'mis_db'

# 配置和数据库的连接信息
SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:@localhost/mis_db?charset=utf8'
SQLALCHEMY_TRACK_MODIFICATIONS = False

denglu.js

function fnLogin() {
    var uSer = document.getElementById("user");
    var pAss = document.getElementById("pass");
    var oError = document.getElementById("error_box");
    var isError = true;

    oError.innerHTML = "<br>";

    
    if (uSer.value.length < 6 || uSer.value.length > 20) {
        oError.innerHTML = "用户名只能6-20位";
        isError = false;
        return isError;
    } else if ((uSer.value.charCodeAt(0) >= 48) && (uSer.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "用户名首字母不能是数字";
        isError = false;
        return isError;
    } else for (var i = 0; i < uSer.value.length; i++) {
        if ((uSer.value.charCodeAt(i) < 48) || (uSer.value.charCodeAt(i) > 57) && (uSer.value.charCodeAt(i) < 97) || (uSer.value.charCodeAt(i) > 122)) {
            oError.innerHTML = "用户名只能由数字和字母组成";
            isError = false;
            return isError;
        }
    }

    // 验证密码
    if (pAss.value.length < 6 || pAss.value.length > 20) {
        oError.innerHTML = "密码只能6-20位";
        isError = false;
        return isError;
    }
    // 验证弹框
    window.alert("登陆成功！");
    return true;
}


function fnRegistration() {
    var uSer = document.getElementById("user");
    var pAss = document.getElementById("pass");
    var aGain = document.getElementById("again");
    var oError = document.getElementById("error_box");
    var isError = true;

    oError.innerHTML = "<br>";

 
    if (uSer.value.length < 6 || uSer.value.length > 20) {
        oError.innerHTML = "用户名只能6-20位";
        isError = false;
        return isError;
    } else if ((uSer.value.charCodeAt(0) >= 48) && (uSer.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "用户名首字母不能是数字";
        isError = false;
        return isError;
    } else for (var i = 0; i < uSer.value.length; i++) {
        if ((uSer.value.charCodeAt(i) < 48) || (uSer.value.charCodeAt(i) > 57) && (uSer.value.charCodeAt(i) < 97) || (uSer.value.charCodeAt(i) > 122)) {
            oError.innerHTML = "用户名只能由数字和字母组成";
            isError = false;
            return isError;
        }
    }

   
    if (pAss.value.length < 6 || pAss.value.length > 20) {
        oError.innerHTML = "密码只能6-20位";
        isError = false;
        return isError;
    }

    if (aGain.value != pAss.value) {
        oError.innerHTML = "密码不一致";
        isError = false;
        return isError;
    }
   
    window.alert("注册成功");
    return true;
}

html

{% extends 'daohang.html' %}

{% block denglutitle %}登陆{% endblock %}
{% block dengluhead %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/denglu.css') }}">
    <script src="{{ url_for('static',filename='js/denglu.js') }}"></script>
{% endblock %}
{% block denglubody %}
    <div id="container" style="margin-left: auto;margin-right: auto">
        <div id="header"><h2 align="center">请登录</h2></div>
        <div id="content">
            <form action="{{ url_for('denglu') }}" method="post">
                Username：<input type="text" name="user" id="user" placeholder="请输入用户名">
                <br>
                Password：<input type="password" name="pass" id="pass" placeholder="请输入密码">
                <br>
                <input type="radio" name="r1" id="r1" value="stu">student
                <input type="radio" name="r2" id="r2" value="tea">teacher
                <br>
                <input type="checkbox" name="c1" id="c1" value="">记住我
                <br>
                <div id="error_box"><br></div>
                <input type="submit" value="login" onclick="return fnLogin()">&nbsp
                <button><a href="http://localhost:63342/untitled1/templates/lin2.html?_ijt=trea96c8krh54963ip8s1c8rso">registration</a>
                </button>
                &nbsp&nbsp&nbsp&nbsp<a href="">忘记密码？</a>

            </form>
        </div>
        <div id="footer"><p align="right">版权@jk
</p></div>
    </div>
{% endblock %}