抽屜之Tornado實戰（3）--註冊

                           

 

知識點應用：標籤綁定事件，jQuery獲取用戶值--》AJAX發送數據--》後臺路由系統--》業務邏輯處理--》ORM數據操做--》write返回--》AJAX回調函數接收--》頁面效果顯示

 

第一步：咱們要給前端的獲取驗證碼按鈕綁定一個onclick事件--發送郵件驗證碼

• 找到views下home  index.html找到標籤，onclick=SendCode（this）
• 定義事件，獲取郵箱，發送ajax請求

　　jQuery代碼以下：

        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類

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類作爲臨時表
  

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請求

        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保存登錄狀態

 

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表進行檢測而且返回結果就能夠了