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