完成登录功能，用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,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))
db.create_all()

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

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

@app.route('/sign_in/',methods=['GET','POST'])
def sign_in():
    if request.method == 'GET':
        return render_template('denglu.html')
    else:
        usern = request.form.get('Username')
        passw = request.form.get('password')
        user=User.query.filter(User.Username==usern).first()
        if user:
             if user.password == passw:
                session['user']=usern
                return redirect(url_for('index'))
             else:
                    return u'password error.'
        else:
              return u'username is not existed'
@app.route('/sign_up/',methods=['GET','POST'])
def sign_up():
    if request.method=='GET':
        return render_template('zhuc.html')
    else:
        username = request.form.get('Username')
        nickname = request.form.get('nickname')
        password = request.form.get('password')
        user=User.query.filter(User.username==username).first()
        if user:
            return u'username existed.'
        else:
            user = User(username=username,password=password,nickname=nickname)
            db.session.add(user)
            db.session.commit()
            return redirect(url_for('denglu'))

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

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

html：

{% extends 'base.html' %}

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

{% block head %}
 <script src="{{ url_for('static',filename='js/ggg.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/vvv.css')}}">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
{% endblock %}

{% block main %}
<body>
<div class="div1">
    <div class="div2">登录</div>
    <div class="div3">
       <div class="iconfont ic-user"></div> 用户：<input id="username" type="text" placeholder="请输入用户名">
    </div>
    <div class="div3">
        密码：<input id="userpass" type="text" placeholder="请输入密码">
    </div>
    <div id="error_box"><br></div>
     <div class="div3">
        <button onclick="myLogin()">登陆</button>
    </div>
</div>
</body>
{% endblock %}
</html>

js：

function myLogin(){
            var uName=document.getElementById("username");
            var uError=document.getElementById("error_box");
            var upass = document.getElementById("userpass");
            uError.innerHTML = "<br>"
            //uname
            if(uName.value.length>20 || uName.value.length<6){
                uError.innerHTML="name;6-20";
                return false;
            }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){
                uError.innerHTML="first number.";
                return false;
            }else for(var i=0; i<uName.value.length;i++){
                if((uName.value.charCodeAt(i)<48 || uName.value.charCodeAt(i)>57)&&(uName.value.charCodeAt(i)<97 || uName.value.charCodeAt(i)>122 )){
                    uError.innerHTML = "only letter or number.";
                    return false;
                }
            }


            if(upass.value.length>20 || upass.value.length<6){
                uError.innerHTML="password;6-20";
                return false;
            }
            window.alert("登陆成功 ！")

        }

 

posted @ 2017-11-23 19:02  055刘柏坚  阅读(175)  评论(0)  编辑  收藏  举报