場景

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() {//清空請求結果的listthis.resultList = [];//get請求數據this.loadData();}

當前頁面加載完成后就會執行ngOnInit里面的代碼，首先會將存儲結果的list清空，然后執行請求數據的方法。

此塊的完整示例代碼

? resultList: any;?? // 保存結果數據的數組constructor(private http: HttpClient) {}ngOnInit() {//清空請求結果的listthis.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>

效果

?

示例代碼下載

代碼見下面文章末尾

Ionic+Angular+Express實現前后端交互使用HttpClient發送get請求數據并加載顯示(附代碼下載)

總結

以上是生活随笔為你收集整理的Ionic+Angular+Express实现前后端交互使用HttpClient发送get请求数据并加载显示(附代码下载)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。