登录功能完成：
- js:设置return
- html:设置
- form
- input
-
onclick="return fnLogin()"
- py:
- @app.route设置methods
- GET
- POST
- 读取表单数据
- 查询数据库
- 用户名密码对：
- 记住用户名
- 跳转到首页
- 用户名密码不对：
- 提示相应错误。
- 用户名密码对：
session：
- 从`flask`中导入`session`
- 设置`SECRET_KEY`
- 操作字典一样操作`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("登陆成功 ！") }