ionic3项目实战教程三（创建provider、http请求、图文列表、滑动列表）

前言：
- 从别人的博客中获取知识，将知识写成博客留与后来人。
- 写博客既是对知识的总结梳理，也方便以后需要用的时候随时来查看。

一、创建provider

1.ionic g provider storage 创建了一个名为storage的服务在src/providers里；会自动添加到app.module.ts中。
2.先来丰富一下这个服务吧

//storage.ts
import { Injectable } from '@angular/core';

@Injectable()
export class StorageProvider {

  constructor() {
    console.log('Hello StorageProvider Provider');
  }
  public setItem(key,value){
    localStorage.setItem(key,JSON.stringify(value))
  }
  public getItem(key){
    return JSON.parse(localStorage.getItem(key))
  }
  public removeItem(key){
    localStorage.removeItem(key)
  }
}

3.接下来开始使用了

//home.html
<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>{
  {msg}}</h2>
  <button ion-button class="btn-login" color="secondary" *ngIf="!isLogin" (click)="goLoginPage()">去登录页面</button>
  <button ion-button class="btn-login" *ngIf="isLogin" (click)="logout()">退出登录</button>
</ion-content>

//html.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from "../login/login";//引入页面
import { StorageProvider } from "../../providers/storage/storage";//引入服务

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  msg:string;//提示信息
  isLogin:boolean=false;//是否登录
  constructor(
    public navCtrl: NavController,
    public storage:StorageProvider,
  ) {
    this.init();
  }
  init(){
    //判断是否登录
    this.isLogin=this.storage.getItem('isLogin');
    let account=this.storage.getItem('account');
    if(account){
      this.msg=`欢迎你，${account}`;
    }else{
      this.msg=`还没登录呢，大兄弟。`;
    }
  }
  goLoginPage(){
    this.navCtrl.push(LoginPage);//路由跳转-前进
  }
  logout(){
    //删除localStorage里面的登录信息
    this.storage.removeItem('isLogin');
    this.storage.removeItem('account');
    this.init();
  }
}

//login.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TabsPage } from "../tabs/tabs"