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

Posted 2020-10-15 Niky7777

登录功能完成：

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

PY文件：

from flask import Flask, render_template, request, url_for, sessions, redirect
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)

#创建表格
# db.create_all()

#数据添加方法
# user=User(username=‘mis777789‘,password=‘g6666‘)
# db.session.add(user)
# db.session.commit()

# 数据的修改方法
# user = User.query.filter(User.username==‘mis777789‘).first
# user.password=‘0.0.0.0‘
# db.session.commit()

# 数据的删除方法
# user = User.query.filter(User.username==‘mis777789‘).first()
# db.session.delete(user)
# db.session.commit()

@app.route(‘/‘)
def index():
    return render_template("index.html")

@app.route(‘/login‘,methods=[‘GET‘,‘POST‘])
def login():
    if request.method == ‘GET‘:
        return render_template(‘login.html‘)
    else:
        username = request.form.get(‘id‘)  # 与html页面名字相同
        password = request.form.get(‘password‘)
        user = User.query.filter(User.username == username,User.password==password).first()
        if user:
            sessions[‘username‘]=username
            sessions.permanent=True
            return redirect(url_for(‘index‘))
        else:
            return ‘用户不存在‘


@app.route(‘/regis‘,methods=[‘GET‘,‘POST‘])
def register():
    if request.method==‘GET‘:

        return render_template(‘Zhuce.html‘)
    else:

        username=request.form.get(‘zcid‘)#与html页面名字相同
        password=request.form.get(‘zcpassword‘)
        user=User.query.filter(User.username==username).first()
        if user:
            return ‘exit‘
        else:
            user=User(username=username,password=password)
            db.session.add(user)
            db.session.commit()
            return redirect(url_for(‘login‘))



@app.route(‘/fankui‘)
def fankui():
    return render_template("page_fankui.html")

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

js文件：

function Login(){
            var un=document.getElementById("id");
            var us=document.getElementById("password");
            var er=document.getElementById("error_box");
            er.innerHTML = "<br>";
            if(un.value.length<6||un.value.length>20){
            er.innerHTML="用户名必须在6-20个字符之间";
            return false;
            }else if((un.value.charCodeAt(0))>=48 && un.value.charCodeAt(0)<=57){
                er.innerHTML = "首字母不能为数字"
                return false;
            }else for(var i=0;i<un.value.length;i++){
                if((un.value.charCodeAt(i)<48)||(un.value.charCodeAt(i)>57)&&(un.value.charCodeAt(i)<97)&&(un.value.charCodeAt(i)>122)){
                    er.innerHTML="用户名只能为数字和字母"
                    return false;
                }
            }
            if(us.value.length<6||us.value.length>20){
            er.innerHTML="密码必须在6-20个字符之间";
            return false;
            }
            return true;
        }
　　　　function Zhuce() {
        var un=document.getElementById("zcid");
        var us=document.getElementById("zcpassword");
        var rpa=document.getElementById("repassword");
        var er=document.getElementById("error_box1");
            er.innerHTML = "<br>";
            if(un.value.length<6||un.value.length>20){
            er.innerHTML="用户名必须在6-20个字符之间";
            return false;
            }else if((un.value.charCodeAt(0))>=48 && un.value.charCodeAt(0)<=57){
                er.innerHTML = "首字母不能为数字"
                return false;
            }else for(var i=0;i<un.value.length;i++){
                if((un.value.charCodeAt(i)<48)||(un.value.charCodeAt(i)>57)&&(un.value.charCodeAt(i)<97)&&(un.value.charCodeAt(i)>122)){
                    er.innerHTML="用户名只能为数字和字母"
                    return false;
                }
            }
            if(us.value.length<6||us.value.length>20){
                 er.innerHTML="密码必须在6-20个字符之间";
                 return false;
            }else for(var i=0;i<us.value.length;i++){
                if(us.value.charCodeAt(i)!=rpa.value.charCodeAt(i)){
                    er.innerHTML="密码不一致"
                    return false
                }
            }
            return true;
    }

html:

{% extends "base.html" %}

{% block title %}登陆{% endblock %}

{% block head %}
<link href="{{ url_for("static",filename="CSS/login_zhuce.css") }}" rel="stylesheet" type="text/css" charset="UTF-8">
<script src="{{ url_for("static",filename="JS/login_zhuce.js") }}"></script>
{% endblock %}

{% block main %}
<div class="center-block" id="loginbox">
    <div class="panel panel-primary" id="loginbox1_1">
        <div class="panel-heading">
            <h2 class="panel-title">登陆</h2>
        </div>
        <br>
        <form class="bs-example bs-example-form" role="form" action="{{ url_for(‘login‘) }}" method="post">
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" id="id" placeholder="请输入用户名" name="id">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password">
            </div>
            <div id="error_box">
                <br>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">记住我
                </label>
            </div>
            <br>
            <label><input type="submit" class="btn btn-default" onclick="Login()" value="登陆"></input></label>

        </form>
    </div>
</div>
{% endblock %}


</html>