Http查詢?cè)诠俜轿臋n中是英雄之南的最后一部分郑藏。要實(shí)現(xiàn)http功能，最好的工程實(shí)踐方式是將功能劃分為：實(shí)體層瘩欺，服務(wù)層必盖，和應(yīng)用層拌牲。和Spring boot Jpa的實(shí)現(xiàn)還是很類似的。
各部分的功能劃分：
- 實(shí)體層： 定義對(duì)象模型的實(shí)體信息
- 服務(wù)層： 實(shí)現(xiàn)http接口并返回可觀察對(duì)象數(shù)組
- 應(yīng)用層： 調(diào)用服務(wù)接口并解析可觀察數(shù)據(jù)
實(shí)現(xiàn)過(guò)程
第一步：新建一個(gè)導(dǎo)出實(shí)體對(duì)象
export class FinanceDailyOverview {
date: Date;
income: number;
month: number;
outlay: number
remark: string;
year: number;
}
第二步：實(shí)現(xiàn)服務(wù)層接口
導(dǎo)入實(shí)體類和
Http模塊需要的類
Http模塊不包含在core模塊中歌粥，一般為了省事都是直接全部導(dǎo)入塌忽。需要注意的是，需要導(dǎo)入可觀察對(duì)象類及map功能失驶。
// 加入http的依賴
import { Http, HttpModule, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs';
- 創(chuàng)建自己的請(qǐng)求函數(shù)土居，并返回可觀察對(duì)象
可觀察對(duì)象支持泛型，其對(duì)應(yīng)http請(qǐng)求的返回值類型突勇。如果返回值是List，可以用數(shù)組的形式實(shí)現(xiàn)坷虑。例如：
getFinanceDailyOverviewByMonth(year: number, month: number): Observable<FinanceDailyOverview[]> {
let url: string = `http://localhost:8080/getdailyoverviewbymonth/` + year + `/` + month;
return this.http.get(url).map(res => res.json() as FinanceDailyOverview[]);
}
使用
http對(duì)象之前甲馋，為了解耦程序，最好不要采用new的方式創(chuàng)建對(duì)象實(shí)例迄损，比較推薦的做法是通過(guò)構(gòu)造函數(shù)進(jìn)行實(shí)例的注入定躏。這樣就不再需要顯示的進(jìn)行構(gòu)建。
第三步： 在應(yīng)用層注入服務(wù)并使用
這一層有點(diǎn)類似Spring Boot中的Controller的感覺(jué)芹敌。使用前面服務(wù)層返回的可觀察對(duì)象的方法如下：
- 導(dǎo)入服務(wù)并在構(gòu)造函數(shù)中進(jìn)行注入痊远，形成一個(gè)服務(wù)實(shí)例。
注意服務(wù)提供商的問(wèn)題
- 導(dǎo)入實(shí)體對(duì)象并聲明一個(gè)對(duì)象或者對(duì)象數(shù)組用于接收解析服務(wù)層的結(jié)果氏捞。
// 接收并存儲(chǔ)每日財(cái)務(wù)收支匯總明細(xì)
financeDailyOverviewList: FinanceDailyOverview[] = [];
- 訂閱服務(wù)返回值并進(jìn)行解析
this.financeService.getFinanceDailyOverviewByMonth(2017, 6)
.subscribe(res => {
res.forEach(item => {
this.financeDailyOverviewList.push(item);
})
})
- 之后就可以在頁(yè)面中使用應(yīng)用層接收到的數(shù)據(jù)了碧聪。
多說(shuō)一句
通常ng2做前端，必然涉及到調(diào)用后端應(yīng)用的問(wèn)題液茎，此時(shí)需要考慮跨域逞姿。如果你和我一樣（前端ng2，后端spring boot）捆等，必然會(huì)遇到跨域的問(wèn)題滞造。解決方案或者修改服務(wù)端程序，或者修改服務(wù)器（tomcat/nginx配置）栋烤。推薦的做法是修改Spring boot的服務(wù)端程序谒养。如下：
在Application中添加下列代碼
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
/**
* 跨域過(guò)濾器
* @return
*/
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
