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

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'}

.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);}})

.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'); }); }})

<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>

<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>

<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>