Ionic請求後臺數據簡單示例

nodejs服務器端express後臺

• 在項目文件下新建models文件夾，models下新建api文件夾，api文件夾新建data.js來存放數據

data.js（所有數據必須符合json格式）

var info=[
	{
		"name":"小紅"
	},
	{
		"name":"小剛"
	}
];

modules.exports=info;

• 在項目下的routes文件夾中新建api文件夾（用來專門存放api接口文件）
  apiuser.js

const express=require('express'),
      info=require('../../models/data'),
      router=express.Router();

router.get('/user',(req,res,next)=>{
	res.status(200);
	res.json(info);
});
module.exports=router;

• 然後你就可以在app.js裏引入，然後掛載

//引入
var apiuser=require('./routes/api/apiuser');
//掛載
app.use('/api/',apiuser);

• 命令行執行DEBUG=項目名稱:* npm start，然後打開瀏覽器訪問http://虛擬機ip地址:端口號/api/user就會看到顯示在屏幕上的數據了（我的後臺是在虛擬機上運行的）

前臺ionic項目

• 先配置ionic.config.json，添加如下

"proxies":[
    {
      "path":"/api",
      "proxyUrl":"http://IP地址:端口號/api"
    }
  ]

• src下新建provider文件夾，provider下新建api.ts
  api.ts:

import { Http,Headers,Response} from '@angular/http';
import { Injectable} from '@angular/core';

@Injectable()

export class ApiProvider{
    //定義post請求需要的頭部
    public headers=new Headers({'Content-Type':'application/json'});
    constructor(public http:Http){
        console.log('Hello ApiProvider provider');
    }
    
	//使用接口
    url:string="/api";
    api(){
        return new Promise((resolve,reject)=>{
            this.http.get(this.url+"/user")
                .subscribe(res=>{
                    resolve(res.json());
                },err=>{
                    reject(err);
                })
        })
    }
}

• 隨便選一個頁面
  xx.html

<ion-list *ngFor="let item of listData">

    <ion-item>
  
    <!-- ?是Angular特定語法，相當於判斷數據是否存在，有則顯示無則不顯示 -->
  
     {{item?.name}}
  
    </ion-item>
  
   </ion-list>

xx.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ApiProvider} from '../../provider/api';


/**
 * Generated class for the InformationPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-information',
  templateUrl: 'information.html',
})
export class InformationPage {
   //聲明變量
  listData: Object;
  constructor(public navCtrl: NavController, public navParams: NavParams,public api:ApiProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad InformationPage');
    //在這裏寫要調用的函數
    this.getInfo();
  }
  getInfo(){
    this.api.api().then(data=>{
      this.listData=data;
      console.log("listdata----->",this.listData)
    },err=>{
      console.log(err);
    })
  }

}

• 我的ionic運行在主機，後臺運行在虛擬機，在後臺開着的情況下，在本地命令行執行ionic serve，你就可以在xx.html頁面看到小紅 小剛