实战：为Ant Design Pro提供后端接口
之前章节已经了解了Akka HTTP的路由定制、数据序列化等内容，是时候开始一个比较完整的Web应用示例了。这里我们将使用 Akka HTTP 来集成 Ant Design Pro ，Ant Design Pro是一个开箱即用的中台前端/设计解决方案，它由蚂蚁金服开发，官方地址：https://pro.ant.design/index-cn。
本文假定用户已经熟悉并会使用 Ant Design Pro，若还未接触过可以从官方文档开始：https://pro.ant.design/docs/getting-started-cn。
本文使用 Ant Design Pro 2.0版本
设置 Ant Design Pro
Ant Design Pro 已经是一个完整的后台前端应用，我们只需要使用 Akka HTTP 为其提供后端API接口服务支持和静态资源文件的HTTP获取功能。
创建API
Akka HTTP 的 Routing DSL 是从上到下一级一级的匹配路由的，当前一个路由不匹配时才判断下一个路由，这样一直到最后一个。利用这个特性，我们可以在整个路由定义的最后来设置返回React SPA需要的静态资源文件。
def route: Route = pathPrefix("api") { pathGet("currentUser") { complete(Mocks.apiCurrentUser) } ~ pathGet("fake_chart_data") { complete(Mocks.apiFakeChartData) } ~ pathGet("tags") { complete(Mocks.apiTags) } ~ pathGet("activities") { complete(Mocks.apiActivities) } ~ pathGet("fake_list") { parameter('count.as[Int]) { count => complete(Mocks.apiFakeList(count)) } } ~ pathPrefix("project") { pathGet("notice") { complete(Mocks.project.notice) } } } ~ notPathPrefixTest("api") { getFromResourceDirectory("dist") ~ getFromResource("dist/index.html") } 这里的重点在 notPathPrefixTest(api) { .... } 部分，这一块代码是用来返回 Ant Design Pro 静态资源的。首先它将判断请求URI不是以 /api 开头，若请求URI以/api开关则不进入里面的获取静态资源代码逻辑，而是直接返回一个预定义的指令：reject。通常，我们都会将API接口统一到 /api 这样的路径下，这样非 /api 开头的URI请求就可以交到下面的两句代码执行，来实现SPA应用在资源未找到时服务端默认返回 /index.html 的需求。
getFromResourceDirectory("dist") ~ getFromResource("dist/index.html") getFromResourceDirectory：根据URI请求路径从资源目录dist查找文件并返回getFromResource：直接返回 dist/index.html 资源文件
总体上，以上两个指令组合使用就可以实现类似 Nginx 的 try_files $uri /index.html; 效果
Mocks.scala，定义了API接口数据并组装成 HttpEntity 对象。
object project { def notice = toJsonEntity(Project.notice) } def apiCurrentUser = toJsonEntity(Api.currentUser) def apiFakeChartData = toJsonEntity(Api.fake_chart_data) def apiTags = toJsonEntity(Api.tags) def apiActivities = toJsonEntity(Api.activities) def toJsonEntity(str: String): HttpEntity.Strict = HttpEntity(ContentTypes.`application/json`, str) 这里为了演示Akka HTTP与Ant Design Pro的集成，我并未直接去实现后端接口数据模型的生成逻辑，比如：model定义、数据存储操作等。而是通过直接返回字符串形式的JSON数据来模拟：
val currentUser = """{"name":"羊八井","avatar":"https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png","userid":"00000001","email":"yangbajing@gmail.com","signature":"海纳百川，有容乃大","title":"一个好爸爸","group":"华龙海数－某某某事业群－某某平台部－某某技术部－Developer","tags":[{"key":"0","label":"很有想法的"},{"key":"1","label":"专注后端"},{"key":"2","label":"强~"},{"key":"3","label":"彪悍"},{"key":"4","label":"重庆崽儿"},{"key":"5","label":"海纳百川"}],"notifyCount":12,"country":"China","geographic":{"province":{"label":"重庆市","key":"330000"},"city":{"label":"渝北区","key":"402260"}},"address":"渝北区金开大道西段106号10栋移动新媒体产业大厦11楼","phone":"023-88888888"}""" 通过def toJsonEntity(str: String): HttpEntity.Strict = HttpEntity(ContentTypes.application/json, str)函数，将JSON字符串实例化为一个HttpEntity对象并设置Content-Type为application/json类型。
注意
这里只定义了Ant Design Pro的 dashboard 栏目下3个页面需要的接口，其它接口并未实现，因为对于这个示例它们并不是重点。
添加webpack proxy支持
修改 ant-design-pro/web/config/config.js 文件，在末尾右大括号（}）上方添加 proxy 设置API代理访问路径路径。这样所有的前端Ajax请求（请求/api开始的路径）都会被路由到Akka HTTP提供的API服务上。
proxy: { '/api': { target: 'http://localhost:22222', changeOrigin: true, }, }, 使用 start:no-mock 启动Ant Design Pro
npm run start:no-mock 打开浏览器，访问 http://localhost:8000 地址：
这时还未启动Akka HTTP后端服务，看到在请求后端API /api/currentUser时报504网关超时错误。这代表我们设置的 webpack.proxy 已经生效，接下来让我们启动Akka HTTP后端服务。
启动Akka HTTP Server
Main.scala
object Main extends App with StrictLogging { implicit val system = ActorSystem() implicit val materializer = ActorMaterializer() import system.dispatcher val bindingFuture = Http().bindAndHandle(handler = new Routes().route, interface = "0.0.0.0", port = 22222) bindingFuture.onComplete { case Success(binding) ⇒ sys.addShutdownHook(system.terminate()) logger.info(s"启动Akka HTTP Server成功，绑定地址: $binding") case Failure(e) ⇒ logger.error(s"启动Akka HTTP Server失败：${e.getMessage}", e) system.terminate() } } 可以看到，编程启动Akka HTTP服务非常简单。我们执行Main.scala即可启动Akka HTTP服务。看到类似输出就代表服务已经启动成功：
10:59:13.659 [default-akka.actor.default-dispatcher-4] INFO scalaweb.ant.design.pro.Main$ - 启动Akka HTTP Server成功，绑定地址: ServerBinding(/0:0:0:0:0:0:0:0:22222) 打包、部署
Ant Design Pro 的 Akka HTTP集成已经完成，我们也在开发模式下分别启动了Webpack Dev Server和Akka HTTP Server来看到我们集成的效果。要把集成的成果部署到服务器上怎么办？非常的简单，执行如下的几行命令就可以生成一个同时提供后端API接口和HTTP静态资源渲染的独立可执行jar包。不需要使用Nginx/Apache的代理静态资源，这样部署更加简洁。当然，你也可以继续使用用Nginx/Apache来代理静态资源，如果需要的话。
pushd ant-design-pro/web yarn install yarn run build popd rm -rf ant-design-pro/src/main/resources/dist/* cp ant-design-pro/web/dist/* ant-design-pro/src/main/resources/dist/ sbt "project ant-design-pro" assembly - 首先编译 Ant Design Pro，在
dist目录生成静态资源。 - copy所有静态资源到
resources/dist目录，这样Akka HTTP可以在生成的jar里通过Java资源文件机制访问到它们。 - 使用
sbt assembly命令打包。 - 使用
java -jar命令执行可执行jar包文件。
运行程序
java -jar ant-design-pro/target/scala-2.12/ant-design-pro-assembly-1.0.0.jar 打开浏览器访问 http://localhost:22222/ 即可看到 Ant Design Pro 的界面。
示例效果
总结
我们通过一个简单的实战示例：ant-desigin-pro，将之前几章所讲知识串起来通过Akka HTTP技术实现了一个较为完整的Web应用。
本章源码在：https://github.com/yangbajing/scala-web-development/tree/master/ant-design-pro
The source code for this page can be found here.
本文节选自《Scala Web开发》，原文链接：https://www.yangbajing.me/scala-web-development/data/data.ant-design-pro.html
来源：oschina
链接：https://my.oschina.net/u/124262/blog/2239751