360SDN.COM

首页/Ionic/列表

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

来源:  2018-04-16 15:49:25    评论:0点击:



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

1、首先,创建login目录,终端输入:

$ ionic g page login

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

[html] view plain copy
 在CODE上查看代码片派生到我的代码片

    <ion-content  class="page-login">  
    <ion-header>  
      <ion-navbar>  
        <button ion-button icon-only menuToggle >  
          <ion-icon name="menu"></ion-icon>  
        </button>  
        <ion-title>Login</ion-title>  
      </ion-navbar>  
    </ion-header>  
      
    <ion-content>  
      <form (submit)="processForm()" [formGroup]="form">  
         <ion-img class="logo" width="180" height="180" src="assets/img/logoS@3x.png"></ion-img>  
          <ion-list>  
            <ion-item>  
              <ion-label>账号</ion-label>  
              <ion-input formControlName="account" type="text"></ion-input>  
            </ion-item>  
      
            <ion-item>  
              <ion-label>密码</ion-label>  
              <ion-input formControlName="password" type="password"></ion-input>  
            </ion-item>  
      
          </ion-list>  
        <div padding>  
          
          <button class="login" ion-button block type="submit" (click)="loginClick()">Login</button>  
      
          <div>  
            <ion-list>  
              <ion-row id="check">  
               <ion-checkbox checked="true"></ion-checkbox>  
                <ion-label>记住密码</ion-label>  
                <ion-checkbox color="secondary" checked="true"></ion-checkbox>  
                <ion-label>自动登录</ion-label>  
                <ion-label>忘记密码?</ion-label>  
              </ion-row>  
            </ion-list>  
      
            <p><span class="line"></span><span>设置服务器</span><span class="line"></span></p>  
          </div>  
      
        </div>  
      </form>  
    </ion-content>  

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

[css] view plain copy
 在CODE上查看代码片派生到我的代码片

    .page-login {  
    .img-loaded{  
        background-color:#fff;  
        position: relative;  
        left: 50%;  
        margin-left: -90px;  
        top: 30px;  
      }  
      .login{  
        background-color:#f56723;  
        margin:20px 0;  
      }  
      p{  
        width: 100%;  
        margin-top: 120px;  
        color: #999;  
        text-align:center;  
      }  
      p span{  
         display: inline-block;  
         width: 80px;  
        font-family: "微软雅黑"  
      }  
      p .line{  
        width:80px;  
        height:1px;  
        background-color:#999;  
      }  
      .list-ios{  
        margin:-1px 0 32px 2px;  
        font-family: "微软雅黑"  
      }  
      .label-ios,.label-md{  
        margin: 0;  
      }  
      .list-ios > .item-block:first-child{  
        border-top:none;  
      }  
      .item-input ion-input{  
        height:45px;  
        line-height:45px;  
        color:#666;  
      }  
      .text-input-ios{  
        margin:0;  
      }  
      .item-ios{  
        width: 300px;  
        margin: 0 auto;  
      }  
      .list-ios > .item-block:last-child .item-inner{  
        border-bottom: 0.55px solid #c8c7cc;  
      }  
      .list-ios > .item-block:last-child{  
        border-bottom: none;  
      }  
      .label-ios{  
        color:#666;  
      }  
    }  

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

$ ionic plugin add cordova-plugin-http


 在CODE上查看代码片派生到我的代码片

    export class HttpClient {  
          constructor(){  
      }  
      
      getDataFromUrl(url: string, body: any, headers: any): Promise<TestModel> {  
          console.log('sendRequest')  
          return HTTP.post(url, body,headers).then(res => {  
              return JSON.parse(res.data)  
          }).catch(err => {  
              return err.error  
          })  
      }  
    }  

5、添加模型(实体)类(到底该用class还是interface我也不清楚,还在学):


 在CODE上查看代码片派生到我的代码片

    export interface TestModel {  
        id: string;  
        idCode: string;  
        peName: string;  
    }  

6、在login.ts中:


 在CODE上查看代码片派生到我的代码片

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

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


 在CODE上查看代码片派生到我的代码片

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

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

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

 在CODE上查看代码片派生到我的代码片

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

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


 在CODE上查看代码片派生到我的代码片

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

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调试是个事,我下篇博客研究研究。


来源: https://blog.csdn.net/CuiShunJian/article/details/70143397
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权