Ionic+Angular+Express实现前后端交互使用HttpClient发送get请求数据并加载显示(附代码下载)

场景

Ionic介绍以及搭建环境、新建和运行项目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166

在上面搭建起来项目的基础上，实现请求后台服务端数据并加载显示。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

项目根模块app.module.ts中引入模块

打开app.module.ts

import {HttpClient, HttpClientModule} from '@angular/common/http';

并添加声明

  imports: [BrowserModule,
     IonicModule.forRoot(),
      AppRoutingModule,
      HttpClientModule

    })
    ],

在需要使用的组件中引入

比如这里要在tab2这个组件中使用HttpClient请求数据，那么在tab2.page.ts中引入

import { HttpClient } from '@angular/common/http';

并声明

constructor(private http: HttpClient) {}

实现页面初始化后加载数据

为了实现当前tab2页面加载完成后就请求数据，所以在tab2.page.ts中添加生命周期方法

  ngOnInit() {
    //清空请求结果的list
    this.resultList = [];
    //get请求数据
    this.loadData();
  }

当前页面加载完成后就会执行ngOnInit里面的代码，首先会将存储结果的list清空，然后执行请求数据的方法。

此块的完整示例代码

  

resultList: any;   // 保存结果数据的数组

  constructor(private http: HttpClient) {}

  ngOnInit() {
    //清空请求结果的list
    this.resultList = [];
    //get请求数据
    this.loadData();
  }

然后在加载数据的方法loaData中

 public loadData() {
    this.getResult().then((res: any) => {
        console.log(res);
        // 把结果数据压入结果数组列表中。
        res.forEach((element: never) => {
          this.resultList.push(element);
        });
     
    }).catch(err => {
      console.error(err);
    });
  }

将getResult方法的返回结果存储到当前页面的resultList中，那么方法getResult方法就是具体请求数据的方法

  public getResult() {
    const url = "http://localhost:3000/news";
    const method = 'GET';
    const options = { params: { 'badao': '霸道的程序猿'} };
    return this.http.request(method, url, options).toPromise();
  }

url:请求数据的后台服务端地址

method:标识是GET请求还是POST请求

options:设置请求参数等，这里传递了一个badao参数

前端搭建完成。

运行项目

ionic serve

打开浏览器输入：

http://localhost:8100

然后点击下面导航栏的tab2

搭建Expres后台服务端程序

前面前端请求后台的url是http://localhost:3000/news

请求结果是返回一个数组。

新建一个文件夹nodeServe，然后在此文件夹下新建app.js和package.json两个文件

package.json

{
  "dependencies": {
    "ejs": "^2.5.6",
    "express": "^4.15.3",
    "socket.io": "^2.0.3",
    "body-parser": "~1.17.1"
  }
}

app.js

var express = require('express');

var app= express();

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

/*express允许跨域*/

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    if(req.method=="OPTIONS") res.send(200);
    else  next();
});

 


//app.use(express.static(path.join(__dirname, 'public')));

app.get('/',function(req,res){

 res.send('首页');

})

app.post('/dologin',function(req,res){

 console.log(req.body);

  res.json({"msg":'post成功'});

 

})

app.get('/news',function(req,res){

 //console.log(req.body);
 //res.jsonp({"msg":'这是新闻数据'});
 console.log("接收到的参数为："+req.query.badao);
 res.send(["公众号：霸道的程序猿","关注推送编程教程","欢迎关注"])

})

 


app.listen(3000,'127.0.0.1');

运行后台服务端

在上面的nodeServe文件夹下打开命令行，确保电脑上已经安装node

安装依赖

npm install

或者

cnpm install

运行服务端程序

node app.js

然后打开浏览器输入：

http://localhost:3000

如果出现以下页面则是运行成功

然后输入上面请求的地址查看返回的数据

重新运行前端ionic项目然后点击tab2,查看服务端的控制台，已经接受到传递的参数。

然后在前端loadData中打断点查看获取的数据

此时打开tab2.page.html将获取的后端数据显示

<ion-content [fullscreen]="true">
  <ul>
    <li *ngFor="let item of resultList">{{item}}</li>
  </ul>
</ion-content>

效果

示例代码下载

代码见下面文章末尾

https://mp.weixin.qq.com/s/Od7GWw25GUf4piQxvW3nWg