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

登录功能完成：

  1. js:设置return
  2. html:设置
    1. form
    2. input
    3. onclick="return fnLogin()"
  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, redirect, url_for
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()

# @app.route('/')

# def hello_world():
# return 'Hello World!'

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


@app.route('/register/', methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        return render_template('register.html')
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        user = User.query.filter(User.username == username).first()
        if user:
            return 'username existed'
        else:
            user = User(username=username, password=password)
            db.session.add(user)
            db.session.commit()
            return redirect(url_for('login'))


@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:
        return 'username existed'
    else:
        user = User(username=username, password=password)
        db.session.add(user)
        db.session.commit()
        return redirect(url_for('index'))


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

html

{% extends'index.html' %}
{% block title %}
    login
{% endblock %}
    {% block head %}
<link href="{{ url_for('static',filename='css/login.css')}}" rel="stylesheet" >
<script src="../static/js/login.js"></script>
{% endblock %}
{% block main %}
<body>
<div class="box">
    <form>
    <h2>欢迎进入</h2>
    <h3>登录界面</h3>
        <div class="input_box">
            <input id="uname" type="text" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            <input id="upass" type="password" placeholder="请输入密码">
        </div>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="myLogin()">登陆</button>
        </div>
</form>
</div>
</body>
{% endblock %}
</html>

　js

function myLogin() {
             var oUname = document.getElementById("uname");
             var oError = document.getElementById("error_box");
             var oUpass=document.getElementById("upass");
             oError.innerHTML="<br>";
             //uname
             if (oUname.value.length<6 || oUname.value.length>12){
                  oError.innerHTML="用户名为6-12位";
                  return false;
                 }else if((oUname.value.charCodeAt(0)>48) && (oUname.value.charCodeAt(0)<=57)){
                      oError.innerHTML = "首字母不能是数字";
                      return false;
             }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 = "only letter or number";
                      return false;
                  }
             }
             //upass
             if(oUpass.value.length<6||oUpass.value.length>12){
                  oError.innerHTML="密码为6-12位"
                  return false;
             }
             if((oUname.value.length<6||oUname.value.length>12)&&(oUpass.value.length<6||oUpass.value.length>12)){
                 oError.innerHTML="用户名密码要求6-12位"
                 return false;
             }
             return true;
                window.alert("登陆成功！")
             }

　

posted on 2017-11-23 21:05  081肖妍  阅读(201)  评论(0)    收藏  举报

导航