Ng2调用后台http查询

Http查询在官方文档中是英雄之南的最后一部分。要实现http功能，最好的工程实践方式是将功能划分为：实体层，服务层，和应用层。和Spring boot Jpa的实现还是很类似的。

各部分的功能划分：

实体层：定义对象模型的实体信息
服务层：实现http接口并返回可观察对象数组
应用层：调用服务接口并解析可观察数据

实现过程

第一步：新建一个导出实体对象

    
    export class FinanceDailyOverview {
        date: Date;
        income: number;
        month: number;
        outlay: number
        remark: string;
        year: number;
    }

第二步：实现服务层接口

导入实体类和Http模块需要的类
Http模块不包含在core模块中，一般为了省事都是直接全部导入。
需要注意的是，需要导入可观察对象类及map功能。

        
        // 加入http的依赖
        import { Http, HttpModule, Response } from '@angular/http';
        import 'rxjs/add/operator/map';
        import { Observable } from 'rxjs';

创建自己的请求函数，并返回可观察对象
可观察对象支持泛型，其对应http请求的返回值类型。如果返回值是List，可以用数组的形式实现。例如：


        getFinanceDailyOverviewByMonth(year: number, month: number): Observable {
            let url: string = `http://localhost:8080/getdailyoverviewbymonth/` + year + `/` + month;
            return this.http.get(url).map(res => res.json() as FinanceDailyOverview[]);
          }

使用http对象之前，为了解耦程序，最好不要采用new的方式创建对象实例，比较推荐的做法是通过构造函数进行实例的注入。这样就不再需要显示的进行构建。

第三步：在应用层注入服务并使用

这一层有点类似Spring Boot中的Controller的感觉。使用前面服务层返回的可观察对象的方法如下：

导入服务并在构造函数中进行注入，形成一个服务实例。

注意服务提供商的问题

导入实体对象并声明一个对象或者对象数组用于接收解析服务层的结果。

    
      // 接收并存储每日财务收支汇总明细
      financeDailyOverviewList: FinanceDailyOverview[] = [];

订阅服务返回值并进行解析

        
         this.financeService.getFinanceDailyOverviewByMonth(2017, 6)
              .subscribe(res => {
                res.forEach(item => {
                   this.financeDailyOverviewList.push(item);
                })
              })

之后就可以在页面中使用应用层接收到的数据了。

多说一句

通常ng2做前端，必然涉及到调用后端应用的问题，此时需要考虑跨域。如果你和我一样（前端ng2，后端spring boot），必然会遇到跨域的问题。解决方案或者修改服务端程序，或者修改服务器（tomcat/nginx配置）。推荐的做法是修改Spring boot的服务端程序。如下：

在Application中添加下列代码


    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }

    /**
     * 跨域过滤器
     * @return
     */
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }