showWhen:什么设备显示就显示什么字段
报错较多:删除ts文件中的“@IonicPage()”类似的
在页面中无论使用了什么模块,都必须在app.module.ts中引入注册
与后台交互使用函数
新增providers文件夹,与app文件夹同级
在providers文件夹中增加rest文件夹,最后新增rest.ts文件
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx'
import { Response, Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
/*
Generated class for the RestProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class RestProvider {
constructor(public http: Http) {
// console.log('Hello RestProvider Provider');
}
//后台接口
//feed
private apiUrlFeeds = 'https://imoocqa.gugujiankong.com/api/feeds/get';
//account
private apiUrlRegister = 'https://imoocqa.gugujiankong.com/api/account/register';
private apiUrlLogin = 'https://imoocqa.gugujiankong.com/api/account/login';
private apiUrlUserInfo = 'https://imoocqa.gugujiankong.com/api/account/userinfo';
private apiUrlUpdateNickName = 'https://imoocqa.gugujiankong.com/api/account/updatenickname';
private apiGetUserQuestionList = "https://imoocqa.gugujiankong.com/api/account/getuserquestionlist";
//question
private apiUrlQuestionSave = 'https://imoocqa.gugujiankong.com/api/question/save';
private apiUrlQuestionList = 'https://imoocqa.gugujiankong.com/api/question/list?index=1&number=10';
private apiUrlGetQuestion = "https://imoocqa.gugujiankong.com/api/question/get";
private apiUrlGetQuestionWithUser = "https://imoocqa.gugujiankong.com/api/question/getwithuser";
private apiUrlAnswer = "https://imoocqa.gugujiankong.com/api/question/answer";
private apiUrlSaveFavourite = "https://imoocqa.gugujiankong.com/api/question/savefavourite";
//notification
private apiUrlUserNotifications = "https://imoocqa.gugujiankong.com/api/account/usernotifications";
//登录
//接收两个参数————mobile, password,返回————Observable
login(mobile, password): Observable<string[]> {
return this.getUrlReturn(this.apiUrlLogin + '?mobile' + mobile + "&password" + password);
}
/**
* 全局获取HTTP请求的方法
*
* @private
* @param {(Response | any)} error
* @returns
* @memberof RestProvider
*/
private getUrlReturn(url: string): Observable<string[]> {
return this.http.get(url)
.map(this.extractData)
.catch(this.handleError)
}
private extractData(res: Response) {
let body = res.json();
return JSON.parse(body) || {};
}
private handleError(error: Response | any) {
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`
} else {
errMsg = error.message ? error.message : error.toString()
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}
登录页所需函数
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, LoadingController, ToastController } from 'ionic-angular';
import { BaseUI } from '../../common/baseui';
import { RestProvider } from '../../providers/rest/rest'
/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage extends BaseUI {
mobile: any;
password: any;
errorMessage: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public viewCtrl: ViewController,
public loadingCtrl: LoadingController,
public rest: RestProvider,
public toastCtrl: ToastController) {
super(); //必须解释一下父类
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
login() {
let loading = super.showLoading(this.loadingCtrl, '登录中...')
this.rest.login(this.mobile, this.password)
.subscribe(
f => {
if (f["status"] == "OK") {
//处理登录成功的页面跳转
} else {
loading.dismiss();
super.showToast(this.toastCtrl, f["StatusContent"]);
}
},
error => this.errorMessage = <any>error);
}
dismiss() {
this.viewCtrl.dismiss()
}
}