码迷,mamicode.com
首页 > 其他好文 > 详细

ionic2+Angular2:套接口明细步骤,以登录功能为例

时间:2017-10-04 14:12:13      阅读:658      评论:0      收藏:0      [点我收藏+]

标签:ports   后台   shu   ram   ica   response   form   top   pac   

1、在app.module.ts引用HttpModul,并在imports内引用。截图如下:
技术分享
 
技术分享
2、在src目录下新建http服务。命令行:ionic g provider HttpService
3、http-service.ts的代码如下:
import { Injectable } from ‘@angular/core‘;
import { Http, Response, Headers, RequestOptions } from ‘@angular/http‘;
import ‘rxjs/add/operator/toPromise‘;
@Injectable()
export class HttpService {
private rootUrl: string;
constructor(private http: Http) {
this.rootUrl = AppConfig.appUrl();
}
public get(url: string, paramObj: any) {
return this.http.get(url + this.toQueryString(paramObj))
.toPromise()
.then(res => this.handleSuccess(res.json()))
.catch(error => this.handleError(error));
}
public post(url: string, paramObj: any) {
let headers = new Headers({‘Content-Type‘: ‘application/x-www-form-urlencoded‘});
return this.http.post(url, this.toBodyString(paramObj), new RequestOptions({headers: headers}))
.toPromise()
.then(res => this.handleSuccess(res.json()))
.catch(error => this.handleError(error));
}
public postBody(url: string, paramObj: any) {
let headers = new Headers({‘Content-Type‘: ‘application/json‘});
return this.http.post(url, paramObj, new RequestOptions({headers: headers}))
.toPromise()
.then(res => this.handleSuccess(res.json()))
.catch(error => this.handleError(error));
}
private handleSuccess(result) {
if (result && !result.success) {//由于和后台约定好,所有请求均返回一个包含success,msg,data三个属性的对象,所以这里可以这样处理
console.log(result.msg);//这里使用ToastController
}
return result;
}
private handleError(error: Response | any) {
let msg = ‘请求失败‘;
if (error.status == 0) {
msg = ‘请求地址错误‘;
}
if (error.status == 400) {
msg = ‘请求无效‘;
console.log(‘请检查参数类型是否匹配‘);
}
if (error.status == 404) {
msg = ‘请求资源不存在‘;
console.error(msg+‘,请检查路径是否正确‘);
}
console.log(error);
console.log(msg);//这里使用ToastController
return {success: false, msg: msg};
}
/**
* @param obj 参数对象
* @return {string} 参数字符串
* @example
* 声明: var obj= {‘name‘:‘小军‘,age:23};
* 调用: toQueryString(obj);
* 返回: "?name=%E5%B0%8F%E5%86%9B&age=23"
/
private toQueryString(obj) {
if(obj == null){
return "";
}
let ret = [];
for (let key in obj) {
key = encodeURIComponent(key);
let values = obj[key];
if (values && values.constructor == Array) {//数组
let queryValues = [];
for (let i = 0, len = values.length, value; i < len; i++) {
value = values[i];
queryValues.push(this.toQueryPair(key, value));
}
ret = ret.concat(queryValues);
} else { //字符串
ret.push(this.toQueryPair(key, values));
}
}
return ‘&‘ + ret.join(‘&‘);
}
/*
*
* @param obj
* @return {string}
* 声明: var obj= {‘name‘:‘小军‘,age:23};
* 调用: toQueryString(obj);
* 返回: "name=%E5%B0%8F%E5%86%9B&age=23"
*/
private toBodyString(obj) {
let ret = [];
for (let key in obj) {
key = encodeURIComponent(key);
let values = obj[key];
if (values && values.constructor == Array) {//数组
let queryValues = [];
for (let i = 0, len = values.length, value; i < len; i++) {
value = values[i];
queryValues.push(this.toQueryPair(key, value));
}
ret = ret.concat(queryValues);
} else { //字符串
ret.push(this.toQueryPair(key, values));
}
}
return ret.join(‘&‘);
}
private toQueryPair(key, value) {
if (typeof value == ‘undefined‘) {
return key;
}
return key + ‘=‘ + encodeURIComponent(value === null ? ‘‘ : String(value));
}
4、将http-service.ts引入到app.module.ts里面,并声明,截图如下:
技术分享
 
技术分享
5、在app目录下,新建app.config.ts用于定义全局变量、域名等信息(注意:这个ts文件不需要在app.module.ts引入),截图如下:
技术分享
6、在http-service.ts引入app.config.ts,截图如下:
技术分享
7、在providers目录下的http-service.ts写入获取的数据接口

(注意:this.rootUrl在app.config.ts设置了本地域名,压缩提交前,需要修改成外网域名),截图如下:

技术分享
8、在login.ts上面引入服务,截图如下:
技术分享
 
技术分享
9、登录提交数据表单验证:
  • Login.html的表单,需要用户提交的信息,截图如下:
技术分享
  • Login.ts写入对应表单的信息验证,截图如下:
技术分享
10、在login.ts新建login()方法,获取用户提交的参数userObj.??,与数据接口的参数匹配,截图如下:
技术分享
11、判断是否获取成功,若成功进行下一步操作,否则弹出错误信息,截图如下:
技术分享

ionic2+Angular2:套接口明细步骤,以登录功能为例

标签:ports   后台   shu   ram   ica   response   form   top   pac   

原文地址:http://www.cnblogs.com/luciahuang/p/7625442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!