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页面看到小红 小刚