Tornado之抽屉实战(3)--注册
2024-08-30 23:06:47
知识点应用:标签绑定事件,jQuery获取用户值--》AJAX发送数据--》后台路由系统--》业务逻辑处理--》ORM数据操作--》write返回--》AJAX回调函数接收--》页面效果显示
第一步:我们要给前端的获取验证码按钮绑定一个onclick事件--发送邮件验证码
- 找到views下home index.html找到标签,onclick=SendCode(this)
- 定义事件,获取邮箱,发送ajax请求
jQuery代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function SendCode(this){ var email = $( #xiang).val(); $.ajax({ url: '/send_code' , type : 'POST' , data:{em:email}, success:function(arg){ console.log(arg); }, error:function(){ } }) } |
- 发送请求后,后台就要接收数据了,首先要先到路由系统里配置url
- 配置好后,接下来就是业务逻辑,找到controllers account编写SendCodeHandler类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
class SendCodeHandler(BaseRequestHandler): def post( self , * args, * * kwargs): #定制信息 ret = { "status" : True , "data" :" "," error ":" "} email = self .get_argument( 'em' , None ) if email: #如果有值,生成随机验证码,并发送邮箱 code = commons.randon_code() message.email([email,],code) #创建session连接 conn = chouti_orm.session() #生成临时表对象,并写入到临时表 obj = chouti_orm.SendCode(email = email,code = code,stime = datetime.datetime.now()) conn.add(obj) conn.commit() self .write(json.dumps(ret)) else : #如果没有,就改变False状态,加上错误信息 ret[ "status" ] = False ret[ "error" ] = "邮箱格式错误" self .write(json.dumps(ret)) |
在上面这个过程中,由于用到临时存储的临时表,所以我们要在chouti_orm.py定义一个SendCode类做为临时表
1
2
3
4
5
6
7
8
9
10
11
|
class SendCode(Base): __tablename__ = "sendcode" #注册时验证码信息 nid = Column(Integer, primary_key = True , autoincrement = True ) email = Column(String( 32 ),index = True ) code = Column(String( 6 )) # status = Column(Integer) #状态码,0表示未注册,1成功,2拉黑 #验证码的有效时间 stime = Column(TIMESTAMP) #发送时间 |
- ajax的回调函数接收到数据后,js处理把应有的效果显示到页面上
第二步:点击注册,携带填写信息进行验证
- 给注册的标签绑定SubmitRegister事件,并且给要提交信息的标签绑定一个特定的class
- 事件里,注册状态的变更,发送ajax请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
function SubmitRegister(ths){ $(ths).children( ':eq(0)' ).addClass( 'hide' ); $(ths).addClass( 'not-allow' ).children( ':eq(1)' ).removeClass( 'hide' ); / / 发送Ajax请求 / / 获取用户输入的所有内容(定义一个特定的 class 或自定义属性) var post_dict = {} $( ".regiter_temp" ).each(function(){ var input_val = $(this).val(); var name_val = $(this).attr( "name" ); post_dict[name_val] = input_val; }) console.log(post_dict); / / 发送ajax请求 $.ajax({ url: "/register" , type : "POST" , data:post_dict, success:function(arg){ console.log(arg); / / arg是字符串 var obj = JSON.parse(arg); if (obj.status){ / / 注册成功 - - - 跳转(已登录状态 - - session实现) location.href = "/index" ; } else { alert(obj.error); } } }) / / 完成之后 $(ths).removeClass( 'not-allow' ).children( ':eq(1)' ).addClass( 'hide' ); $(ths).children( ':eq(0)' ).removeClass( 'hide' ); } |
- 根据用户提交过来的信息到临时表(验证码表)里进行筛选,注册成功就session保存登陆状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
class RegisterHandler(BaseRequestHandler): def post( self , * args, * * kwargs): ret = { "status" : True , "data" :" "," error ":" "} #获取用户输入的所有内容 #code = sendcode 匹配 邮箱 #注册 #conn.add(obj) #conn.commit() conn = chouti_orm.session() #创立连接 #根据用户提交过来的验证码和邮箱 到 临时表里去筛选 r = conn.query(chouti_orm.SendCode). filter (code = 123 ,email = '111' ).first() if not r: #如果没有,返回错误信息 ret[ 'status' ] = False ret[ "error" ] = "邮箱验证码错误" self .write(json.dumps(ret)) else : #临时表里有,就注册成功,实例用户信息对象,跟新到userinfo表里 obj = chouti_orm.UserInfo() conn.add(obj) conn.commit() #session保存用户登陆状态 self .session[ "is_login" ] = True #保存用户 self .session[ 'username' ] = '用户输入的用户名' self .write(json.dumps(ret)) |
- ajax回调函数接收数据,注册成功就跳转到首页,并显示登陆状态
你们可能有疑问,好像注册时没对邮箱是否已经注册进行验证,对吧,这里可以在填邮箱的标签定义onblur事件--发送ajax请求,到后台去userinfo表进行检测并且返回结果就可以了
最新文章
- C#面向对象设计模式纵横谈——4.Builder 生成器模式(创建型模式)
- PyCharm创建virtualenv方法
- 网卡ifcfg-eth0配置
- Linux链接库三(C跟C++之间动态库的相互调用)
- CentOS 6.6 FTP install
- 【Sum Root to Leaf Numbers】cpp
- MySQL主从复制的原理及配置
- hadoop2.2原理:分析HDFS的文件读写
- iOS DES 加密转base64
- Flex开发小结(1)如何使用AdvancedDataGrid
- JavaScript 保留关键字
- SQL Server一些常见却不太记得住的命令
- CocoaChina 第四个测试
- mysql的部分基础知识....
- 【从汉字中提取数字】不用公式,不用VBA,如此简单的方法你是否用过?
- thinkphp 5.0 命名空间
- Win 7/10 安装Oracle 11g
- mui getJSON实现jsonp跨域
- Boss Bo (主席树)
- zk特性和场景