[ionic开源项目教程] - 第15讲 ionic用户个人中心登录注册的实现

第15讲 ionic用户个人中心登录注册的实现

这一讲包括登陆、注册、个人中心、个人资料页面的实现。

在一讲的改动有四个地方：

1. 在config.js里配置接口地址
2. 完善个人中心的服务层(service)
3. 完善个人中心的控制器部分(controller)
4. 完善个人中心的视图部分(view)
5. 登陆注册的视图部分(view)

[效果图]

1.在config.js里配置接口地址

var settings = {
    client_id: '122440',
    client_secret: '576ec4d35f1b59363ef51171bc95421a',
    rows: 10
}

var server = {
    domain: "http://www.tngou.net/api",
    imgUrl: "http://tnfs.tngou.net/image"
}

var urls = {
    info_show: server.domain + "/info/show?id=",
    login: server.domain + '/oauth2/login?callback=JSON_CALLBACK&client_id=' + settings.client_id + '&client_secret=' + settings.client_secret,
    reg: server.domain + '/oauth2/reg?callback=JSON_CALLBACK&client_id=' + settings.client_id + '&client_secret=' + settings.client_secret,
    user: server.domain + '/user?callback=JSON_CALLBACK',
    favorite: server.domain + '/my/favorite',
    favoriteAdd: server.domain + '/favorite/add',
    favoriteDelete: server.domain + '/favorite/delete',
}

var cache = {
    user: "_user",
    token: '_token'
}

说明：

1. client_id 开发者id
2. client_secert 请求凭证

2.完善个人中心的服务层(service)

.service('AccountService', function ($http) {
var $this = this;
// 获取缓存用户信息
this.getCacheUser = function () {
  return angular.fromJson(window.localStorage[cache.user]);
}

// 登陆
this.login = function (name, password, callback) {
  var url = urls.login + "&name=" + name + "&password=" + password;
  $http.jsonp(url).success(function (response) {
    if (response.status == true) {
      window.localStorage[cache.token] = response.access_token;
      $this.user(callback);
    } else {
      alert("用户名和密码不匹配！");
    }
  })
}
// 获取信息
this.user = function (callback) {
  var url = urls.user + "&access_token=" + window.localStorage[cache.token];
  $http.jsonp(url).success(function (response) {
    console.log(response);
    window.localStorage[cache.user] = angular.toJson(response);
    callback(response)
  })
}

// 注册
this.reg = function (account, email, password) {
  var url = urls.reg + "&account=" + account + "&email=" + email + "&password=" + password;
  $http.jsonp(url).success(function (response) {
    if (response.status == false) {
      alert(response.msg);
    } else {
      window.localStorage[cache.token] = response.access_token;
    }
  })
}

//获取收藏列表
this.getFavorites = function (page) {
  var url = urls.favorite + "?page=" + page + "&rows" + settings.rows + "&access_token=" + window.localStorage[cache.token];
  return $http.jsonp(url);
}
//删除收藏
this.deleteFav = function (id, type) {
  var url = urls.favoriteDelete + "?id=" + id + "&type=" + type + "&access_token=" + window.localStorage[cache.token]
  return $http.jsonp(url);
}
//添加收藏
this.addFav = function (id, type, title) {
  var url = urls.favoriteAdd + "?id=" + id + "&type=" + type + "&title=" + title + "&access_token=" + window.localStorage[cache.token]
  return $http.jsonp(url);
}
})

3.完善个人中心的控制器部分(controller)

.controller('AccountCtrl', function ($scope, $rootScope, $ionicPopup, $ionicModal, $state, $ionicTabsDelegate, $ionicSlideBoxDelegate, AccountService) {

    $rootScope.isLogin = false;
    $ionicModal.fromTemplateUrl('templates/tab-account-login.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    $scope.loginData = {
        name: '',
        password: ''
    }

    $scope.regData = {
        account: '',
        email: '',
        password: ''
    }

    $scope.user = {
        account: "未登陆"
    }
    $scope.login = function () {
        AccountService.login($scope.loginData.name, $scope.loginData.password, function (user) {
            //account avatar domain  email  gender id integral isemail isphone status time title weiboid
            $scope.user = user;
            $rootScope.isLogin = true;
            $scope.modal.hide();
        });
    }
    $scope.doRefresh = function () {
        AccountService.user(function (result) {
            if (result.status == false) {
                $ionicPopup.alert({
                    title: '提示',
                    template: result.msg
                });
            }
            $scope.user = result;
            $scope.$broadcast('scroll.refreshComplete');
        });
    }

    $scope.goDetails = function () {
        if ($rootScope.isLogin == false) {
            $scope.modal.show();
        } else {
            $state.go('tab.account-details');
            $ionicTabsDelegate.showBar(false);
        }
    }

    $scope.$on('$ionicView.beforeEnter', function () {
        console.log('已经成为活动视图');
        var user = AccountService.getCacheUser();
        if (user == undefined) {
            $rootScope.isLogin = false;
            $scope.user = {};
        } else {
            if (user.status != false) {
                $rootScope.isLogin = true;
                $scope.user = user;
            }
        }
        $ionicTabsDelegate.showBar(true);
    });

    var accountTab = $ionicTabsDelegate.$getByHandle('accountTab');
    var accountSlide = $ionicSlideBoxDelegate.$getByHandle('accountSlide');

    $scope.register = function () {
        AccountService.reg($scope.regData.account, $scope.regData.email, $scope.regData.password);
    }

    $scope.accountSelectedTab = function (index) {
        accountSlide.slide(index);
    }
    $scope.accountSlideChanged = function (index) {
        accountTab.select(accountSlide.currentIndex());
    };
})
.controller('AccountDetailsCtrl', function ($scope, $rootScope, $ionicHistory, AccountService) {
    // 注销登陆
    $scope.logout = function () {
        // 删除本地缓存
        window.localStorage.removeItem(cache.user);
        window.localStorage.removeItem(cache.token);
        $rootScope.isLogin = false;

        $ionicHistory.goBack();
    }
    $scope.user = AccountService.getCacheUser();
    $scope.doRefresh = function () {
        AccountService.user(function (user) {
            $scope.user = user;
            $rootScope.isLogin = true;
            $scope.$broadcast('scroll.refreshComplete');
        });
    }
})

说明 : 这里包含了account和accountdetails的controller。

4.完善个人中心的视图部分(view)

tab.account.html

<ion-view view-title="我">
<ion-content>
    <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
        <a class="item item-avatar item-icon-right" ng-click="goDetails()">
            <img src="img/ben.png" ng-src="{{user.avatar==undefind?'':imgUrl+user.avatar}}">
            <h2><span>{{user.account==undefind?'未登陆':user.account}}</span></h2>
            <p>积分：<span>{{user.integral}}</span></p>
            <i class="icon ion-ios-arrow-right"></i>
        </a>
        <ion-item class="item-divider item-gap">
        </ion-item>
        <div class="item item-icon-right">
            <span>我的收藏</span>
            <i class="icon ion-ios-arrow-right"></i>
        </div>
        <ion-item>
            当前版本
            <span class="item-note">1.0.0</span>
            <!--<span class="item-note" ng-bind="appVersion"></span>-->
        </ion-item>
        <ion-item>
            联系作者
            <span class="item-note">微信订阅号：TongeBlog</span>
        </ion-item>
        <ion-item onclick="window.open('https://git.oschina.net/tonge/TongeNewsApp', '_blank', 'location=yes')">
            此项目已开源
        </ion-item>
        <ion-item class="text-center">
            <img src="img/TongeBlog.jpg" width="120" /><br> @TongeBlog
        </ion-item>
    </ion-list>
</ion-content>
</ion-view>

tab-account.details.html

<ion-view view-title="个人中心">
<ion-content bindonce="user">
    <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
        <a class="item item-avatar" href="#">
            <img src="img/ben.png" ng-src="{{imgUrl+user.avatar}}">
            <h2><span>{{user.account}}</span></h2>
            <p>积分：<span>{{user.integral}}</span></p>
        </a>
        <ion-item>
            邮箱
            <span class="item-note">{{user.email}}</span>
        </ion-item>
        <ion-item>
            性别
            <span class="item-note">{{user.gender | toSex :user.gender}}</span>
        </ion-item>
        <ion-item>
            出生年月
            <span class="item-note">{{user.birth}}</span>
        </ion-item>
        <ion-item>
            省份
            <span class="item-note">{{user.province}}</span>
        </ion-item>
        <ion-item>
            城市
            <span class="item-note">{{user.city}}</span>
        </ion-item>
        <ion-item>
            个性签名
            <span class="item-note">{{user.signature}}</span>
        </ion-item>
        <ion-item>
            电话
            <span class="item-note">{{user.phone}}</span>
        </ion-item>
        <ion-item>
            QQ
            <span class="item-note">{{user.qq}}</span>
        </ion-item>
        <ion-item>
            微博
            <span class="item-note">{{user.weibo}}</span>
        </ion-item>
        <ion-item>
            注册时间
            <span class="item-note">{{user.time}}</span>
        </ion-item>
        <ion-item>
            <button ng-click="logout()" class="button button-full button-positive">注销
            </button>
        </ion-item>
    </ion-list>
</ion-view>

说明：这里包含了个人中心tab-account.html和个人资料页tab-account-details.html。

5. 登陆注册的视图部分(view)

<ion-modal-view title="登陆">
<div class="bar-balanced  bar bar-header item-input-inset">
    <h2 class="title">登陆</h2>
    <button class="button button-clear" ng-click="modal.hide()">关闭</button>
</div>
<ion-content class="has-header">
    <ion-slide-box class="has-header" delegate-handle="accountSlide" show-pager="false" on-slide-changed="accountSlideChanged($index)">
        <ion-slide>
            <div class="list list-inset login-hover">
                <div class="text-center">
                    <img src="img/TongeLog.png" height="38%" width="38%" />
                </div>
                <label class="item item-input">
                 <i class="ion-ios-person-outline"></i>&nbsp;&nbsp;&nbsp;
            <input type="text" ng-model="loginData.name" placeholder="账号">
        </label>
                <label class="item item-input">
                 <i class="ion-ios-locked-outline"></i>&nbsp;&nbsp;&nbsp;
            <input type="password" ng-model="loginData.password" placeholder="密码">
        </label>
                <div class="text-center">
                </div>
                <div class="item text-center">
                    <button class="button button-balanced" ng-click="login()">登陆</button>
                </div>
            </div>
        </ion-slide>
        <ion-slide>
            <div class="list list-inset login-hover">
                <div class="text-center">
                    <img src="img/TongeLog.png" height="38%" width="38%" />
                </div>
                <label class="item item-input">
                 <i class="ion-ios-person-outline"></i>&nbsp;&nbsp;&nbsp;
            <input type="text" ng-model="regData.account" placeholder="账号">
        </label>
                <label class="item item-input">
                 <i class="ion-ios-email-outline"></i>&nbsp;&nbsp;&nbsp;
            <input type="text" ng-model="regData.email" placeholder="邮箱">
        </label>
                <label class="item item-input">
                 <i class="ion-ios-locked-outline"></i>&nbsp;&nbsp;&nbsp;
            <input type="password" ng-model="regData.password" placeholder="密码">
        </label>
                <div class="text-center">
                </div>
                <div class="item text-center">
                    <button class="button button-balanced" ng-click="register()">确认注册</button>
                </div>
            </div>

        </ion-slide>
    </ion-slide-box>
</ion-content>
<ion-tabs delegate-handle="accountTab"  class="tabs-striped tabs-top">
    <ion-tab on-select="accountSelectedTab(0)" title="登陆"></ion-tab>
    <ion-tab on-select="accountSelectedTab(1)" title="注册"></ion-tab>
</ion-tabs>
</ion-modal-view>

说明：登陆注册页面放在一个.html使用slide-box里实现的。

备注：所有的代码都已开源，并上传至OSC，开源地址在订阅号中回复"开源地址"获取。