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来计算也是能够的。

云服务器整体来讲使用起来仍是比较方便的，但愿对你们有帮助。