什么是前后端分离的应用？
为了更好的简化应用开发，降低应用结构复杂度，把应用的前端(Web端)和服务器端业务和代码分离，由不同的技术去实现，由不同的人或小组开发。
前端使用JavaScript技术(当然可以是用Typescript开发了)，负责表现和用户交互。服务器端使用Java技术，负责核心业务逻辑和数据持久化。
分离之后，前后端完全解耦，两端只有REST风格的HTTP通信，用JSON作为数据传输格式。只要遵循确定要的REST API，前端可以选择自己合适的技术和框架(AngularReact)。服务器端也可以根据需要自由调整自己的架构，例如前期用单体(Monolithic)架构，后期由于业务复杂度的上升，调整为微服务(Microservices)架构。
那么我们之前的文章：
陈龙：从0开始,5分钟创建一个Spring Boot + Angular/React应用zhuanlan.zhihu.com
创建的应用，是前后端分离的应用吗？
是，因为符合我们上面的定义。但是这种分离并不明显。只做到了技术分离，没有做到结构分离，将来也不容易做到分离部署。
所以，最理想的前后端分离应该是：
- 程序结构分离。前端和服务器端分别存在于自己的工程里，不要混在一个工程内。
- 开发过程分离。前端和服务器端分别进入不同的版本库(repository)。方便不同的人或团队独立开发。
- 发布部署分离。前端和服务器端分别有自己的编译和发布过程，生成自己可以独立部署的结果。
下面就演示JHipster如何实现上面三条原则。我们先生成一个Angular实现的前端应用，然后生成一个Spring Boot的服务器端应用，最后再生成一个React的前端应用。两个前端和服务器端遵循同一套API。
下面创建前端和服务器端过程中的问题和选项，参见：
陈龙：jhipster创建app命令详解zhuanlan.zhihu.com
生成Angular前端应用
创建应用目录demo_client，并切换到应用目录下，然后运行jhipster，加上参数：
// 创建应用目录，并切换到应用目录下
mkdir demo_client && cd demo_client
// 运行jhipster加上参数
jhipster --skip-server --auth jwt --db sql
运行 jhipster --skip-server --auth jwt --db sql 开始界面
auth和db两个参数影响前端代码的生成，所以必须给出。
运行 jhipster --skip-server --auth jwt --db sql 成功后的界面
注意选择前端框架的时候选择Angular。
选择Angular
// 运行前端
npm start
生成Spring Boot的服务器端应用
创建和demo_client同级的目录 demo_server，并切换到应用目录下，然后运行jhipster，加上参数：
// 创建应用目录，并切换到应用目录下
mkdir demo_server && cd demo_server
// 运行jhipster加上参数
jhipster --skip-client
运行 jhipster --skip-client 开始界面
运行 jhipster --skip-client 成功后的界面
// 运行服务器端
./mvnw (on Mac OS X/Linux)
mvnw (on Windows)
生成React的前端应用
过程类似“生成Angular前端应用”。创建一个和demo_client同级的目录 demo_react，并切换到应用目录下，然后运行jhipster，加上参数。并且在选择前端框架的时候选择React。
选择React
由于我们要启动两个前端，所以修改这个React实现的前端的端口号。打开webpack.dev.js，找到两处9000，修改成9001或其他端口。
跨域
前后端分离以后，分别运行在不同的端口。前端是9090，服务器端是8080。这样就产生了跨域问题。在dev模式下，JHipster默认配置好了代理，来解决跨域。当然也可以用CORS的方式，在后续文章会详细介绍。
webpack.dev.js Line:18-39
总结
通过前面的步骤，我们
- 创建了一个Angular实现的前端应用，运行在9000端口。
- 创建了一个Spring Boot的服务器端应用，运行在8080端口。
- 创建了一个React实现的前端应用，运行在9001端口。
三个应用分别在同级的三个不同文件夹内，可以进入三个不同的代码库分别进行版本控制，也可以独立的启动、调试、单元测试、编译发布。服务器端用一套API分别向技术框架不同的两个前端提供服务。
