ionic結合免費雲服務器leancloud的使用方法及Demo演示

 

LeadCloud雲服務器介紹

LeanCloud 是國內的移動應用一站式雲服務。LeanCloud提供了數據存儲、實時消息、統計分析以及多種擴展組件，全面涵蓋移動應用開發的需求，支持 iOS、Android、Web 等多平臺。它幫助開發者擺脫後端開發負擔以專一於產品創新，同時縮短開發週期、節省開發投入、快速進入市場。

比較知名的客戶有「知乎」、「暴走漫畫」、「丁香客」等，而我本身以前在作原生app開發的時候在服務器端也採用了LeanCloud，緣由很簡單，操做方便，功能齊全，其中封裝了不少的方法，而咱們只須要使用它提供的api就能夠實現功能。

而如今咱們主要使用ionic前端框架來開發WebApp，剛好leadCloud支持javaScript，因此我考慮能不能將ionic結合leancloud來使用，這裏寫了一個登錄的Demo，有興趣的能夠看下。

Demo界面展現

登錄界面：

註冊界面：

手機號登陸界面：

我的信息界面：

已實現功能

• 登陸 :若登陸失敗，則返回錯誤信息，如：用戶名不存在，密碼錯誤等。
• 註冊 :若是必填信息沒有填寫，則Toast提醒，其中，手機號和郵箱作了規範性處理。
• 惟一性 :用戶名與郵箱作了惟一性處理，即同一個用戶名和郵箱只能註冊一次
• 手機號登錄 :輸入你的手機號，若是該手機號在數據庫中存在，則系統將給此手機號發送一條短信，輸入短信中的驗證碼，覈對完成以後便可實現登陸。
• 記住密碼 :登陸時默認選中記住密碼，下次登陸時默認自動填寫用戶名和密碼，不然只保存當前用戶名。
• 重置密碼 :系統將發送一封郵件至當前登陸用戶的郵箱，在郵件中點開重置密碼的連接便可修改密碼，當即生效。

使用方法

1. 登陸 https://leancloud.cn/ ，建立一個項目，在我的應用列表中能夠看到項目。

2. 在index頁面中引入：

   <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.3.js"></ script>

3. 建立應用後，能夠在控制檯-應用設置中找到應用對應的id和key。

4. 進行代碼初始化，加入如下的代碼，就能夠進行相應的初始化操做。

   // 初始化 param1：應用 id、param2：應用 key
   AV.initialize('aCRbjvo2hjCETdDIABfWdze1', '597U1ilGI8m4sDKrqL9RIiYb');

5. 須要作什麼直接查詢官網提供的api便可.

開發細節

登陸

AV.User.logIn($scope.loginData.username, $scope.loginData.password, { //將用戶名和密碼post至雲服務器
                success: function(user) {
                    // 成功了，如今能夠作其餘事情了.
                    Toast.show('登陸成功', 'short');
                    console.log('登陸成功', 'short')
                    var ischecked = document.getElementById('checkboxId'); //判斷是否記住密碼
                    if (ischecked.checked == true) {
                        window.localStorage.test_username = $scope.loginData.username;
                        window.localStorage.test_password = $scope.loginData.password;
                    } else {
                        window.localStorage.name = $scope.loginData.username;
                        window.localStorage.password = '';
                    }
                    $state.go('personInfo') //登陸成功，進入我的詳情界面
                },
                error: function(user, error) {
                    // 失敗了.
                    console.log("Error: " + error.code + " " + error.message);
                    if (error.code == 211) {
                        $timeout(function() {
                            Toast.show('用戶名不存在');
                            return
                        }, 10)
                    }
                    if (error.code == 210) {
                        $timeout(function() {
                            Toast.show('密碼錯誤');
                            return
                        }, 10)
                    }
                }
            });

註冊

var user = new AV.User(); //初始化用戶
            user.set("username", $scope.registerData.username); //用戶名
            user.set("password", $scope.registerData.password); //密碼
            user.set("nickname", $scope.registerData.nickname); //暱稱
            user.set("email", $scope.registerData.email); //郵箱
            user.set("mobilePhoneNumber", $scope.registerData.tel); //電話
            user.set("qq", $scope.registerData.qq); //qq
            user.set("sex", $scope.registerData.sex); //性別
            user.signUp(null, {
                success: function(user) {
                    Toast.show('註冊成功');
                    window.localStorage.test_username = $scope.registerData.username;
                    window.localStorage.test_password = $scope.registerData.password;
                    $scope.goBack(); //回到主界面
                },
                error: function(user, error) {
                    // 失敗了
                    if (error.code == 214) {
                        $timeout(function() {
                            Toast.show('電話已存在'); //同一個電話數據庫中只運行存在一個
                            return
                        }, 10)
                    }
                    if (error.code == 202) {
                        $timeout(function() {
                            Toast.show('用戶名已存在'); //同一個用戶數據庫中只運行存在一個
                            return
                        }, 10)
                    }
                    if (error.code == 203) {
                        $timeout(function() {
                            Toast.show('郵箱已存在'); //同一個郵箱數據庫中只運行存在一個
                            return
                        }, 10)
                    }
                    Toast.show("Error: " + error.code + " " + error.message);
                    console.log("Error: " + error.code + " " + error.message)
                }
            });

發送短信

//在應用選項開啓 "啓用賬號無關短信驗證服務（針對 requestSmsCode 和 verifySmsCode 接口）"
            AV.Cloud.requestSmsCode($scope.telLoginData.tel).then(function() {
                發送成功
                console.log('發送成功')
                $timeout(function() {
                    Toast.show('發送成功');
                    return
                }, 10)
            }, function(err) {
                //發送失敗
                console.log('發送失敗')
            });

獲取我的信息

$scope.personInfo = AV.User.current()._serverData;

這裏只須要使用AV.User.current()就能夠獲取當前登陸用戶的全部信息，包括登陸時間等等不少詳細信息，其中_serverData保存的是用戶的基本信息。

特別說明

在我的信息界面，圓形頭像的定位：

1. 這裏，我使用的是一個方形頭像，而後使用border-radius：50%變成圓形
2. 因爲懸浮在div之上，須要設置postion:absolute，而後動態定位

3. 在controller加載的時候，使用

   $('#headPicId').css('top', $('#photoId').height() - 30);

   來動態定位圓形頭像的位置，不過使用calc來計算也是能夠的。

雲服務器整體來講使用起來仍是比較方便的，但願對你們有幫助。