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

Posted 2020-10-15 袁颖琳

登录功能完成：

1. js:设置return

   function fnLogin() {
       var oUname = document.getElementById("uname")
       var oError = document.getElementById("error_box")
       var oUpass = document.getElementById("upass")
       var isError=true;
       oError.innerhtml = "<br>"
   
       if (oUname.value.length < 6 || oUname.value.length > 12) {
           oError.innerHTML = "用户名为6到12位";
           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 < 6) || (oUpass.value.length > 20)) {
           oError.innerHTML = "密码为6到20位";
           return
       }
       return true;
       //window.alert("登录成功！！")
   }

    

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

      <div class="box" >
          <h2 >LOGIN</h2>
           <form action="{{url_for(‘login‘) }}" method="post">
              <div class="input_box">
                  账户：<input id="uname" type="text" placeholder="请输入用户名" name="username">
              </div>
              <div class="input_box">
                  密码：<input id="upass" type="password" placeholder="请输入密码" name="password">
              </div>
              <div id="error_box"><br></div>
              <div class="input_box">
                  <button onclick="fnLogin()">登录</button>
              </div>
          </form>
          </div>

       

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

               @app.route(‘/login/‘,methods=[‘GET‘,‘POST‘])
               def login():
                   # if request.method == ‘GET‘:
                   #     return render_template(‘1031.html‘)
                   # else:
                   #     usern = request.form.get(‘username‘)  # 获取form中的数据
                   #     passw = request.form.get(‘password‘)
                   #     user = User.query.filter(User.username == usern).first()  # 判断用户名是否存在
                   #     if user:
                   #         if user.password ==passw:
                   #             return redirect(url_for(‘index‘))
                   #         else:
                   #             return ‘password error‘
                   #     else:
                   #         return ‘username is not existed‘

                

session：

1. 从`flask`中导入`session`

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

    

2. 设置`SECRET_KEY`

   import os
   
   DEBUG =True
   
   SECRET_KEY = os.urandom(24)
   
   DIALECT =‘mysql‘
   DRIVER =‘mysqldb‘
   USERNAME=‘root‘
   PASSWORD=‘‘
   HOST=‘localhost‘
   PORT=‘3306‘
   DATABASE=‘Y_db‘
   
   # SQLALCHEMY_DATABASE_URI = ‘mysql+pymysql://root:@127.0.0.1:3306/yuan_db?charset=utf8‘
   SQLALCHEMY_DATABASE_URI = ‘mysql+pymysql://root:@localhost:3306/Y_db?charset=utf8‘
   SQLALCHEMY_TRACK_MODIFICATIONS = False

    

3. 操作字典一样操作`session`：增加用户名`session[‘username‘]=`username

   @app.route(‘/login/‘,methods=[‘GET‘,‘POST‘])
   def login():
       if request.method == ‘GET‘:
           return render_template(‘1031.html‘)
       else:
           usern = request.form.get(‘username‘)
           passw = request.form.get(‘password‘)
           user = User.query.filter(User.username == usern).first()
           # 判断用户名是否存在
           if user:
               session[‘user‘] = usern
               session.permanent = True
               if user.password == passw:
                   return redirect(url_for(‘shouye‘))
               else:
                   return ‘password error‘ 
           else:
               return ‘username is not existed‘