（终极篇章 二）实战中服务器通讯细节（http&webSocke）

马上就写完了，后期还要有大量更改，有看不懂的地方，直接评论。—— 马丁路德.东

给get请求添加请求数据

因为我们得到原始搜索条件和渲染数据的组件不是一个，我们选用一个公共服务作为中间人。

（一）我们在公共服务中添加方法，（完成得到数据和发起请求的功能）

1.定义搜索条件的格式

export class  ProductSearchParams{
  constructor(
    public title: string,
    public price: number,
    public category: string
  ){}
}

2.发起HTTP请求

 search(params: ProductSearchParams): Observable<Product[]>{
    return this.http.get('/api/products', {search:this.encodeParams(params)}).map(res => res.json());
  }

3.整理搜索条件(es6新语法)

private encodeParams(params: ProductSearchParams) {
    return Object.keys(params)
      .filter(key => params[key])
      .reduce((sum: URLSearchParams, key:string) => {
        sum.append(key, params[key]);
        return sum;
      }, new URLSearchParams());
  }

4.在服务中定义一个事件流，以供双方使用

searchEvent:EventEmitter<ProductSearchParams> = new EventEmitter();

（二）在需要渲染数据的地方，订阅此流(使用查询参数调取搜索方法，得到数据)

export class ProductComponent implements OnInit {
  private products: Observable<Product[]>;
   constructor( private  productService: ProductService) { }

  ngOnInit() {
 this.products=this.productService.getProducts();
    this.productService.searchEvent.subscribe(  params => this.products = this.productService.search(params)
    );
  }

}

（三）表单组建发送事件(表单得到的数据类型，和http所需要的查询参数格式，是完全一致的)

onSearch(){
    if(this.formModel.valid){
      console.log(this.formModel.value);
      this.productServecie.searchEvent.emit(this.formModel.value);
    }
  }

(四)服务器端代码思想实现搜索(“-1”代表所有类型)

app.get('/api/products',(req,res)=>{
    let result = products;
    console.log("服务器已经接受到了商品列表请求");
    let params = req.query;
    if(params.title){
        result = result.filter((p) => p.title.indexOf(params.title) !== -1)
    }
    if(params.price && result.length){
        result = result.filter((p) => p.price <=parseInt(params.price));
    }
    console.log(params.category);

    if(params.category !== "-1" && result.length){
        result = result.filter((p) => p.categories.indexOf(params.category) !== -1)
    }
    res.json(result);
});