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

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

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

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

在config.js里配置接口地址

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

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

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

登陆注册的视图部分(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'
}

说明：

client_id 开发者id

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，开源地址在订阅号中回复"开源地址"获取。

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

[ionic开源项目教程] - 第14讲 ionic解决跨域问题
[ionic开源项目教程] 第14讲使用jsonp解决跨域问题相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...
[ionic开源项目教程] - 第12讲医疗模块的实现以及Service层loadMore和doRefresh的提取封装
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现tab2[医疗]模块,[医疗]模块跟tab1[健康]模块类似. [ionic开源项目教程] - 第12讲医疗 ...
[ionic开源项目教程] - 第11讲封装BaseController实现controller继承
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...
[ionic开源项目教程] - 第10讲新闻详情页的用户体验优化
目录 [ionic开源项目教程] 第1讲前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...
[ionic开源项目教程] - 第9讲新闻详情页的实现
目录 [ionic开源项目教程] 第1讲前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...
[ionic开源项目教程] - 第8讲根据菜单分类加载数据(重要)
[ionic开源项目教程] - 第8讲根据菜单分类加载数据(重要) [效果图] 注意今天遇到一个比较棘手的问题,就是左右滑动菜单的设计不合理性,所以tab1.html对应的视图层和control ...
[ionic开源项目教程] - 第13讲 Service层优化，提取公用Service，以及生活和农业两大模块的实现
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现生活和农业两大模块的实现,在这个过程中,对service层提取出一个公用的BaseService. 这一讲分为 ...
[ionic开源项目教程] - 第1讲前言,技术储备,环境搭建,常用命令
前言这是一个系列文章,将持续更新到项目完结,从环境搭建开始讲解,包括实战开发中遇到的各种问题的解决方案,都将毫无保留的分享给大家. 技术储备开始本项目之前,请确保自己对以下技术点都有所了解. ht ...
[ionic开源项目教程] - 第2讲新建项目,配置app.js和controllers.js搭建基础视图
新建项目由项目功能架构图选择合适的页面架构,这里选用Tab,ionic新建项目,默认的模板就是tab. $ ionic start TongeNews Creating Ionic app in f ...

随机推荐

#!--->hashbang技术
url中的#! URL 中的 # 本来的用途是跳转到页内锚点.一个 URL 中 # 后的值 (hash tag) 不影响所访问网页的内容,所以搜索引擎在处理仅仅 hash tag 不同的多个 URL ...
CentOS用yum安装X Window
安装X图形界面系统 yum list 列出所有可安装的软件包可以通过 yum grouplist 来查看可能批量安装哪些列表先装X windows #yum groupinstall 'X Win ...
ZOJ 1115 Digital Roots（简单，字符串与数）
题目 //好一道水水题,可是我居然也错了那么多次,后来百度来发现是因为数据数位可能很长很长,要用字符串数组... //简单 //有坑啊——数据可能很大很大,要用字符串表示! #include<s ...
POJ 1325
#include<iostream> #include<stdio.h> #define MAXN 105 using namespace std; int _m[MAXN][ ...
ExtJs之单选及多选框
坚持 <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-eq ...
[你必须知道的.NET]第三十四回，object成员，不见了！
发布日期:2009.10.30 作者:Anytao © 2009 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. 在.NET世界了,object是公认的造物主,其麾下的7大成员, ...
js:字符串(string)转json
第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...
spring_150802_resource
接口Service: package com.spring.service; public interface DogPetService { public void queryAllDogPets( ...
lintcode:买卖股票的最佳时机 I
买卖股票的最佳时机假设有一个数组,它的第i个元素是一支给定的股票在第i天的价格.如果你最多只允许完成一次交易(例如,一次买卖股票),设计一个算法来找出最大利润. 样例给出一个数组样例 [3,2,3 ...
查看服务器硬件配置信息（cpu/内存）
1.查看cpu情况: 方法一: Linux下CPU相关的参数保存在 /proc/cpuinfo 文件里 cat /proc/cpuinfo |more 方法二: 采用命令 dmesg ...

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

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

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

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

随机推荐

热门专题