基于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中实现界面布局：

 <ion-content  class="page-login">
 <ion-header>
   <ion-navbar>
     <button ion-button icon-only menuToggle >
       <ion-icon name="menu">ion-icon>
     button>
     <ion-title>Loginion-title>
   ion-navbar>
 ion-header>

 <ion-content>
   <form (submit)="processForm()" [formGroup]="form">
      <ion-img class="logo" width="180" height="180" src="assets/img/[email protected]">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()">Loginbutton>

       <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文件中添加界面样式：

 .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

 export class HttpClient {
       constructor(){
   }

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

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

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

6、在login.ts中：

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

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

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

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

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

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

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

 this.httpDelegate.getDataFromUrl('用自己的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调试是个事，我下篇博客研究研究。