基于ionic2的跨平台项目（二）网络请求及使用实体类

 

基于ionic2的跨平台项目（二）网络请求及使用实体类

标签： 跨平台typescriptAngular2Ionic2

2017-03-08 11:51  73人阅读  评论(0)  收藏  举报

  分类：

跨平台（4） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

创建好Ionic2项目后，作为完全入门者，除了系统学习angular2、typescript语法之外，需要通过实现一些小功能来练习和熟悉项目的结构和angular2的思想，做一个简单的登录界面demo，实现基本的网络请求和数据使用。

1、首先，创建login目录，终端输入：

$ ionic g page login

2、在login.html中实现界面布局：

[html]  view plain  copy

 

1. <ion-content  class="page-login">  
2. <ion-header>  
3.   <ion-navbar>  
4.     <button ion-button icon-only menuToggle >  
5.       <ion-icon name="menu"></ion-icon>  
6.     </button>  
7.     <ion-title>Login</ion-title>  
8.   </ion-navbar>  
9. </ion-header>  
10.   
11. <ion-content>  
12.   <form (submit)="processForm()" [formGroup]="form">  
13.      <ion-img class="logo" width="180" height="180" src="assets/img/logoS@3x.png"></ion-img>  
14.       <ion-list>  
15.         <ion-item>  
16.           <ion-label>账号</ion-label>  
17.           <ion-input formControlName="account" type="text"></ion-input>  
18.         </ion-item>  
19.   
20.         <ion-item>  
21.           <ion-label>密码</ion-label>  
22.           <ion-input formControlName="password" type="password"></ion-input>  
23.         </ion-item>  
24.   
25.       </ion-list>  
26.     <div padding>  
27.       
28.       <button class="login" ion-button block type="submit" (click)="loginClick()">Login</button>  
29.   
30.       <div>  
31.         <ion-list>  
32.           <ion-row id="check">  
33.            <ion-checkbox checked="true"></ion-checkbox>  
34.             <ion-label>记住密码</ion-label>  
35.             <ion-checkbox color="secondary" checked="true"></ion-checkbox>  
36.             <ion-label>自动登录</ion-label>  
37.             <ion-label>忘记密码？</ion-label>  
38.           </ion-row>  
39.         </ion-list>  
40.   
41.         <p><span class="line"></span><span>设置服务器</span><span class="line"></span></p>  
42.       </div>  
43.   
44.     </div>  
45.   </form>  
46. </ion-content>  

3、在login.scss文件中添加界面样式：

[css]  view plain  copy

 

1. .page-login {  
2. .img-loaded{  
3.     background-color:#fff;  
4.     position: relative;  
5.     left: 50%;  
6.     margin-left: -90px;  
7.     top: 30px;  
8.   }  
9.   .login{  
10.     background-color:#f56723;  
11.     margin:20px 0;  
12.   }  
13.   p{  
14.     width: 100%;  
15.     margin-top: 120px;  
16.     color: #999;  
17.     text-align:center;  
18.   }  
19.   p span{  
20.      display: inline-block;  
21.      width: 80px;  
22.     font-family: "微软雅黑"  
23.   }  
24.   p .line{  
25.     width:80px;  
26.     height:1px;  
27.     background-color:#999;  
28.   }  
29.   .list-ios{  
30.     margin:-1px 0 32px 2px;  
31.     font-family: "微软雅黑"  
32.   }  
33.   .label-ios,.label-md{  
34.     margin: 0;  
35.   }  
36.   .list-ios > .item-block:first-child{  
37.     border-top:none;  
38.   }  
39.   .item-input ion-input{  
40.     height:45px;  
41.     line-height:45px;  
42.     color:#666;  
43.   }  
44.   .text-input-ios{  
45.     margin:0;  
46.   }  
47.   .item-ios{  
48.     width: 300px;  
49.     margin: 0 auto;  
50.   }  
51.   .list-ios > .item-block:last-child .item-inner{  
52.     border-bottom: 0.55px solid #c8c7cc;  
53.   }  
54.   .list-ios > .item-block:last-child{  
55.     border-bottom: none;  
56.   }  
57.   .label-ios{  
58.     color:#666;  
59.   }  
60. }  

4、添加网络请求工具类，水平有限，只做了简单抽取，这里用的是post，get肯定一样可以用，首先添加插件：

$ ionic plugin add cordova-plugin-http

[javascript]  view plain  copy

 

1. export class HttpClient {  
2.       constructor(){  
3.   }  
4.   
5.   getDataFromUrl(url: string, body: any, headers: any): Promise<TestModel> {  
6.       console.log('sendRequest')  
7.       return HTTP.post(url, body,headers).then(res => {  
8.           return JSON.parse(res.data)  
9.       }).catch(err => {  
10.           return err.error  
11.       })  
12.   }  
13. }  

5、添加模型（实体）类（到底该用class还是interface我也不清楚，还在学）：

[javascript]  view plain  copy

 

1. export interface TestModel {  
2.     id: string;  
3.     idCode: string;  
4.     peName: string;  
5. }  

6、在login.ts中：

[javascript]  view plain  copy

 

1. import { HttpClient } from '../../utils/HttpClient'  

之后就可以在点击事件方法里调用网络请求的工具类方法：

[javascript]  view plain  copy

 

1. this.httpDelegate.getDataFromUrl('自己写个url试试', data, {}).then(model => {  
2.     console.log(model.id)  
3. }).catch(err => {  
4.     console.log(err)  
5. })  

7、在login.ts已经能正常拿到转成模型的数据了，之后就可以为所欲为了。

8、工具类中指定模型名字不方便复用，听说可以用泛型，HttpClient.ts修改成这样：

[javascript]  view plain  copy

 

1. getDataFromUrl<T>(url: string, body: any, headers: any): Promise<T> {  
2.     console.log('sendRequest')  
3.     return HTTP.post(url, body,headers).then(res => {  
4.         return JSON.parse(res.data)  
5.     }).catch(err => {  
6.         return err.error  
7.     })  
8. }  

9、在调用方法时同样在函数名后面加上类型这个参数：

[javascript]  view plain  copy

 

1. this.httpDelegate.getDataFromUrl<TestModel>('用自己的url', data, {}).then(model => {  
2.     console.log(model.id)  
3. }).catch(err => {  
4.     console.log(err)  
5. })  

10、实现了复用，可以真的为所欲为了。

做这个demo过程中有几点心得：

1、我没想到ts语言json转模型这么简单，听说js有反射，所以可以直接转，搞不懂。

2、看官方文档是很有必要的：https://ionicframework.com/docs/v2/native/http/。

3、某些ES2015特性需要学，比如Promise咋用：http://www.cnblogs.com/lvdabao/p/es6-promise-1.html。

4、ionic2调试是个事，我下篇博客研究研究。