完成注册功能
- js文件： onclick函数return True时才提交表单，return False时不提交表单。
- html文件：
- <form>中设置 action和method="post"
- <input> 中设置 name
- 主py文件中：
- from flask import request, redirect, url_for
- @app.route('/regist/', methods=['GET', 'POST’])
def regist():
if request.method == 'GET':
return render_template('regist.html')
else:
username = request.form.get(‘username’)#获取form中的数据
判断用户名是否存在
存到数据库中
redirect重定向到登录页
py文件：
from flask import Flask,render_template,request,redirect,url_for,session from flask_sqlalchemy import SQLAlchemy import config app = Flask(__name__) # 创建Flask对象 app.config.from_object(config) #关联config.py文件进来 db=SQLAlchemy(app) #建立和数据库的关系映射 class User(db.Model): #创建类User __tablename__='user' #类对应的表名user id=db.Column(db.Integer,primary_key=True,autoincrement=True) #autoincrement自增长 username=db.Column(db.String(20),nullable=False) #nullable是否为空 password=db.Column(db.String(20),nullable=False) nickname = db.Column(db.String(20), nullable=True) db.create_all() #测试是否连接成功 ''' # 插入功能 user = User(username='15',password='12') db.session.add(user) db.session.commit() # 查询功能 user=User.query.filter(User.username=="15").first() print(user.username,user.password) # 修改功能 user=User.query.filter(User.username=="15").first() user.password='888' db.session.commit() # 删除功能 user=User.query.filter(User.username=="15").first() db.session.delete(user) db.session.commit() ''' # session会话连接 # filter()过滤器 # route制定路径和函数之间的关系 # def定义一个变量 @app.route('/') # 跳转首页 def daohang(): return render_template('daohang.html') @app.route('/lin/') # 跳转测试 def lin(): return 'lin' @app.route('/denglu/') # 跳转登陆 def denglu(): return render_template('denglu.html') @app.route('/zhuce/',methods=['GET','POST']) # 跳转注册,methods定义它有两种请求方式 def zhuce(): if request.method == 'GET': return render_template('zhuce.html') else: username = request.form.get('user') password = request.form.get('pass') nickname = request.form.get('nickname') user = User.query.filter(User.username == username).first() if user: return u'该用户已存在' else: user = User(username=username,password=password,nickname=nickname) db.session.add(user) db.session.commit() return redirect(url_for('denglu')) @app.route('/tupian/') # 跳转图片 def tupian(): return render_template('tupian.html') @app.route('/fabu/') # 跳转图片 def fabu(): return render_template('fabu.html') if __name__ == '__main__': app.run(debug=True)
denglu.js:
function fnLogin() { var uSer = document.getElementById("user"); var pAss = document.getElementById("pass"); var oError = document.getElementById("error_box"); oError.innerHTML = "<br>"; // 验证用户名 if (uSer.value.length < 6 || uSer.value.length > 20) { oError.innerHTML = "用户名只能6-20位"; return } else if ((uSer.value.charCodeAt(0) >= 48) && (uSer.value.charCodeAt(0) <= 57)) { oError.innerHTML = "用户名首字母不能是数字"; return } else for (var i = 0; i < uSer.value.length; i++) { if ((uSer.value.charCodeAt(i) < 48) || (uSer.value.charCodeAt(i) > 57) && (uSer.value.charCodeAt(i) < 97) || (uSer.value.charCodeAt(i) > 122)) { oError.innerHTML = "用户名只能由数字和字母组成"; return } } // 验证密码 if (pAss.value.length < 6 || pAss.value.length > 20) { oError.innerHTML = "密码只能6-20位"; return } // 验证弹框 window.alert("登陆成功！") } function fnRegistration() { var uSer = document.getElementById("user"); var pAss = document.getElementById("pass"); var aGain = document.getElementById("again"); var oError = document.getElementById("error_box"); var isError = true; oError.innerHTML = "<br>"; // 验证用户名 if (uSer.value.length < 6 || uSer.value.length > 20) { oError.innerHTML = "用户名只能6-20位"; isError = false; return isError; } else if ((uSer.value.charCodeAt(0) >= 48) && (uSer.value.charCodeAt(0) <= 57)) { oError.innerHTML = "用户名首字母不能是数字"; isError = false; return isError; } else for (var i = 0; i < uSer.value.length; i++) { if ((uSer.value.charCodeAt(i) < 48) || (uSer.value.charCodeAt(i) > 57) && (uSer.value.charCodeAt(i) < 97) || (uSer.value.charCodeAt(i) > 122)) { oError.innerHTML = "用户名只能由数字和字母组成"; isError = false; return isError; } } // 验证密码 if (pAss.value.length < 6 || pAss.value.length > 20) { oError.innerHTML = "密码只能6-20位"; isError = false; return isError; } // 验证再次输入的密码 if (aGain.value != pAss.value) { oError.innerHTML = "密码不一致"; isError = false; return isError; } // 验证弹框 window.alert("注册成功！"); return true }
zhuce.html:
{% extends 'daohang.html' %} {% block zhucetitle %}注册{% endblock %} {% block zhucehead %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/denglu.css') }}"> <script src="{{ url_for('static',filename='js/denglu.js') }}"></script> {% endblock %} {% block zhucebody %} <div id="container" style="margin-left: auto;margin-right: auto"> <div id="header"><h2 align="center">注册</h2></div> <div id="content"> <form action="{{ url_for('zhuce') }}" method="post"> <p align="center">Username：</p> <p align="center"> <input type="text" name="user" id="user" placeholder="请输入用户名"> </p> <p align="center">Password：</p> <p align="center"> <input type="password" name="pass" id="pass" placeholder="请输入密码"> </p> <p align="center">Lnput again：</p> <p align="center"> <input type="password" name="again" id="again" placeholder="再次输入密码"> </p> <p align="center"> <input type="radio" name="r1" id="r1" value="stu">student <input type="radio" name="r2" id="r2" value="tea">teacher </p> <div id="error_box"><br></div> <p align="center"> <input type="submit" value="registration" onclick="return fnRegistration()"> </p> </form> </div> <div id="footer"><p align="right">版权@lin</p></div> </div> {% endblock %}
