Angular2-项目实战（续）-与服务端通信
介绍
本文是基于我的上一篇文章Angular2 项目实战来写的。就是用那个种子工程来作为脚手架来开发一个工作中的应用（不用的内容全部删掉）。主要介绍服务端Spring REST API的开发，到前端数据显示的整个过程，以及使用webpack的proxy，前后端分离就靠它了，前端使用它代理地址，有两个好处，（1）解决开发时候的跨域问题；（2）改改代理的ip和端口方面以后切换各种环境，如本机环境，开发，测试，预生产等环境。
知识点涵盖
【Angular2-项目实战（续）-与服务端通信】1 Spring REST API开发；
2 webpack-dev-serve proxy
3 angular2 HTTP
4 ngFor
准备
（1）两台电脑，一台做API的服务器，一台做web服务器。（其实在一台上面改下端口就行了）
（2）用种子工程搭建好一个项目；
Spring REST API
文章图片
api 哈哈哈，这个好简单，我随便写了两句，有兴趣的读者可以持久化到数据库。
我的“服务器” 端口是8080，ip地址如下图
文章图片
服务器ip地址 配置webpack-dev-server 的proxy代理 
文章图片
webpack-dev-server代理 根据我的服务器ip地址和端口，这里配置target。注意，我们这里要匹配一些使用代理的api，这里配置凡是 /api/** 这样的都会转发到这个http://192.168.0.120:8080上，为什么要这么个匹配？因为我们还有很多资源包括页面，css，图片等都在我们的web服务器上（就是本机上的东西），如果配置成／* 那么一切都去我们的后台服务器去找了，所以这里要理解。注意到了没，我的后端api是/api/table 与之是相应匹配的。
Angular2的HTTP
这个是文章的核心才对，建立model
文章图片
获取数据的service
文章图片
文章图片
dashboard中调用service，service通过HTTP模块发起get请求，请求api，返回的结果赋值给tableData。稍后页面进行遍历。
文章图片
html使用*ngFor进行便利，两重便利。[hidden]="searchCell&&cell.indexOf(searchCell)<0"是为了配合上面的[(ngModel)]="searchCell" 实现页面的搜索功能，当searchCell输入时，cell包含上面的内容时，显示。
看下结果展示
文章图片
这正是我们从服务器获取的数据，
搜索功能验证：
文章图片
输入a，结果age和name都显示，id不显示，正是我们要的结果。
作者寄语：
angular2真是妙不可言，大家多多跟我交流。
推荐阅读
- 17|17 关山松 第二课作业#公众号项目# D20
- RxJava|RxJava 在Android项目中的使用（一）
- 《机器学习实战》高清中文版PDF英文版PDF+源代码下载
- Hacking|Hacking with iOS: SwiftUI Edition - SnowSeeker 项目（一）
- --木木--|--木木-- 第二课作业#翼丰会（每日一淘6+1实战裂变被动引流# 6+1模式）
- 靠QQ月入上万灰色暴利偏门的项目
- spring|spring boot项目启动websocket
- 2020-07-29《吴军·阅读与写作50讲》24实战才能转化效能
- vuex|vuex 基础结构
- 区块链开发平台（以太坊）