wex5 教程 之 圖文講解 登陸,註冊,頁面跳轉
一.效果預覽:
登陸頁面 首頁用windowContainer裝載
註冊頁面
登陸成功後,跳轉至主題頁面
二 設計思路及程式碼實現:
1.資料庫設計:
建立使用者相關欄位
建立baas服務,並繫結到baasdata元件上
2.門戶頁設計:
注意事項:1.var ShellImpl = require('$UI/system/lib/portal/shellImpl') 引入shellimpl ,必不可少。
2.contentsXid : "pages" 頁面中必須建立contents頁面集合容器,並與此xid對應。
3.登陸頁面邏輯設計
登陸頁面載入,同時初如化model,model接收註冊頁面引數。如果使用者注測成功,將帳號密碼同時帶回到登陸頁面,不必再次手動輸入。
首先判斷登陸者,是否是admin.如果是管理員帳號,進入管理員頁面。用shell.showPage跳轉。
如果不是管理員,則用手機號作為帳號進行判斷。
var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;-------------手機號正則表示式
---------驗證手機號碼格式,不正確提示重新輸入
用data.setFilter方法,過濾資料。注意過濾條件拼接方法:"phone = '" + phoneInput + "'",前後+號表示變數,驗證資料庫中帳號是否存在(即是否已經註冊)
如果存在,繼 續判斷帳號與密碼是否同時存在。仍然用data.setFilter方法過濾。如果存在,說明帳號和密碼同時驗證正確,跳轉到主頁面,並將帳號作為引數傳入。同時將日期,狀態等資訊同步寫入資料庫。
關於資料過濾,這裡只作演示思路,真正專案開發,可以用非同步上傳的方式,用md5加密後的帳號和密碼提交到後臺,由後臺對資料庫過濾驗證後,將資訊反回到前臺。
記住密碼單選框,取值判斷,如果選中,用localStorage.setItem方法儲存到本地,否則用removeItem方法清除本地儲存。
點選註冊,進入註冊頁面,並將輸入的手機號作為引數傳遞到註冊頁面。
4.註冊頁面邏輯設計
先取出登陸頁面的引數,並儲存。
手機帳號驗證,密碼複雜程度用正則表示式進行驗證。
兩次密碼輸入驗證一致,通過,並newData,建立一條新資料,寫入資料庫,否則提示。
儲存成功後,自動跳轉到登陸頁,並將帳號密碼傳參。