彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 彩世界平台官方网址 2019-11-28 06:15 的文章
当前位置: 彩世界开奖app官网 > 彩世界平台官方网址 > 正文

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

一、从URL中提取参数 有下列字符串: var linkURL = ''; 对于一个真实的URL地址,可以用js来读取location中的相关信息来获得某些信息,下面列举一些: 复制代码 代码如下: location.origin : location.pathname : /project_js/Javascript/js_basic/demo/String/string_6.html location.host : localhost location.hostname : localhost location.port : location.search : ?name=xesam location.hash : #age location.href : location.protocol : http 其中,与从URL中提取参数主要是用到location.search。不过为了通用,我们不去读取location.search,直接处理字符串。 提取字符串查询字符串之后,转化为对象的形式。 先讨论几种查询字符串的情况: ?昵称=小西山子&age=24#id1 -->{昵称:'小西山子',age:'24'} ?昵称&age=24#id1'; -->{昵称:undefined,age:'24'} ?=小西山子&age=24#id1 -->{age:'24'} ?昵称=小西山子=又一个&age=24&age=24#id1 -->{昵称:'小西山子=又一个',age:['24','24']} 复制代码 代码如下: function toQueryParams(){ var search = this.replace.replace.match;//提取location.search中'?'后面的部分 if{ return {}; } var searchStr = search[1]; var searchHash = searchStr.split; var ret = {}; for(var i = 0, len = searchHash.length; i < len; i ){ //这里可以调用each方法 var pair = searchHash[i]; if((pair = pair.split{ var key = decodeURIComponent; var value = pair.length > 1 ? pair.join : pair[0]; console.log() if{ value = decodeURIComponent; } if{ if(ret[key].constructor != Array){ ret[key] = [ret[key]]; } ret[key].push; }else{ ret[key] = value; } } } return ret; } console.dir(toQueryParams.call; 上面基本就是Prototype中toQueryParams的实现,上面又一个步骤是用'='分割参数,然后在value中再拼接。另外可以用substring来实现: 复制代码 代码如下: function toQueryParams(){ var search = this.replace.replace.match; if{ return {}; } var searchStr = search[1]; var searchHash = searchStr.split; var ret = {}; searchHash.forEach{ var temp = ''; if(temp = [0]){ var key = decodeURIComponent; var value = pair.substring; if{ value = decodeURIComponent; } if{ if(ret[key].constructor != Array){ ret[key] = [ret[key]]; } ret[key].push; }else{ ret[key] = value; } } }); return ret; } console.dir(toQueryParams.call; 一、对象转换为URL查询参数 对象转换为URL查询参数就麻烦一点。不过由于是转换成查询参数形式,因此只能处理单层嵌套的对象,子对象就不能处理了。其原理就是toQueryParams的反向操作。 复制代码 代码如下: function toQueryPair { if (typeof value == 'undefined'){ return key; } return key '=' encodeURIComponent(value === null ? '' : String; } function toQueryString { var ret = []; for{ key = encodeURIComponent; var values = obj[key]; if(values && values.constructor == Array){//数组 var queryValues = []; for (var i = 0, len = values.length, value; i < len; i ) { value = values[i]; queryValues.push(toQueryPair; } ret = ret.concat; }else{ //字符串 ret.push(toQueryPair; } } return ret.join; } console.log(toQueryString({ name : 'xesam', age : 24 })); //name=xesam&age=24 console.log(toQueryString({ name : 'xesam', age : [24,25,26] })); //name=xesam&age=24&age=25&age=26 真实源码中用的是inject方法,不过在Enumerable部分,因此上面作了替换。

1、在app.module.ts引用HttpModul,并在imports内引用。截图如下:

彩世界平台官方网址 1

顶部引用

彩世界平台官方网址 2

ngModule内引用

8、在login.ts上面引入服务,截图如下:

彩世界平台官方网址 3

http服务

彩世界平台官方网址 4

http服务

10、在login.ts新建login()方法,获取用户提交的参数userObj.??,与数据接口的参数匹配,截图如下:

彩世界平台官方网址 5

后台数据与前台输出数据对接

5、在app目录下,新建app.config.ts用于定义全局变量、域名等信息(注意:这个ts文件不需要在app.module.ts引入),截图如下:

彩世界平台官方网址 6

后台数据接口的域名

7、在providers目录下的http-service.ts写入获取的数据接口

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

彩世界平台官方网址 7

登录接口

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=小军&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=小军&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));
}

6、在http-service.ts引入app.config.ts,截图如下:

彩世界平台官方网址 8

引入config

4、将http-service.ts引入到app.module.ts里面,并声明,截图如下:

彩世界平台官方网址 9

顶部引用

彩世界平台官方网址 10

声明

11、判断是否获取成功,若成功进行下一步操作,否则弹出错误信息,截图如下:

彩世界平台官方网址 11

判断获取数据是否成功

有写的不对或是不理解的地方欢迎大家留言评论,一起学习ionic2。
了解更多前端开发音乐乐趣欢迎来我的个人主页

9、登录提交数据表单验证:
  • Login.html的表单,需要用户提交的信息,截图如下:

彩世界平台官方网址 12

ionic2表单验证

  • Login.ts写入对应表单的信息验证,截图如下:

彩世界平台官方网址 13

ionic2表单验证

本文由彩世界开奖app官网发布于彩世界平台官方网址,转载请注明出处:ionic2 Angular2:套接口明细步骤,以登录功能为例彩

关键词: 脚本 参数 之家 转换为 前端程