2017年1月10日 星期二

Ajax+Devise+Foundation實作Popup註冊頁面

寫在開始之前

這次的主題是想搭配devise gem做出popup式的註冊頁面,效果可以參考Airbnb。而其中的實作又會涉及到ajax的使用,這樣的做法是希望將使用者輸入的資料透過javascript進行非同步傳送至後端,再將結果回傳至前端讓我們判斷下一步要做什麼,例如成功註冊就將會員導至首頁,註冊失敗就顯示出失敗的訊息。
看完這份教學,你會了解:
  1. 用現成的foundation gem快速產生popup頁面(gem裡面稱做Reveal)
  2. Hack原本devise gem的預設controller、方法與頁面(這部分比較麻煩ˊ ˋ)
  3. 使用Ajax傳資料、塞資料
  4. 使用Rails-i18n gem搭配model翻譯訊息
註1:devise gem很強大,他從頭到尾幫你把整套使用者認證包好了,也就是說註冊、登入都是使用他預設的頁面,成功或失敗後會做什麼事情也是他幫你預設好。這部分就是我們要去hack的地方,將頁面、行為客製化,改成符合我們需求的樣子。
註2:ajax最重要的就是資料的拿取跟傳送,當你能拿到對的資料,基本上就已經完成九成了。
註3:Rails-i18n,太重要的一個功能!能幫我們翻譯訊息成中文,對於資料驗證後的錯誤訊息顯示有很大的幫助。