前后分离在项目中的应用

一、创新的主要内容
在南京老山生态廊道智慧信息系统项目中，引入了前后端分离策略。

项目一般采用Structs、Spring MVC 等后端MVC架构，出发点在后端。后端MVC 是个好的协作模式，从架构层面让开发者懂得什么代码应该写在什么地方。前端通过JSP，JS，HTML以及AJAX等技术来展示数据，主要由服务器端负责渲染（不全是）。这种模式有很多弊端：
1. 后台Service 越来越多，调用关系变复杂，前端搭建本地环境不再是一件简单的事。基本上都是前后端在一个工程目录里面，开发人员负责前后台代码编写。这对研发效率的影响其实大。

2. 如果是基于JSP来实现前台页面，JSP 等代码的可维护性会越来越差。JSP 非常强大，可以内嵌 Java 代码。这种强大使得前后端的职责不清晰，JSP 变成了一个灰色地带。经常为了赶项目，为了各种紧急需求，会在 JSP 里揉杂大量业务代码。积攒到一定阶段时，往往会带来大量维护成本。

3. 前后端职责纠缠不清。由于前后端都是一个人编写代码，这就导致前端混杂很多业务代码，前端缺乏对用户交互的关注度。

4. 前后端在一起编译，部署。不利于系统的拆分、前后端的负载均衡、前端调优、后端调优等。

为了避免上面的弊端，在南京老山项目开发过程中，引入了基于前端MVVM架构的Vue.js框架，采用REST架构风格，来实现前后端分离。

Vue.js是一个渐进式的JavaScript框架，用来构建用户交互界面，采用自底向上的增量开发的设计。官网：https://cn.vuejs.org/

REST架构风格：2000年，博士学位论文Architectural Styles and the Design of Network-based Software Architectures（中文《架构风格与基于网络的软件架构设计》），Fielding博士系统地、严谨地阐述了这套理论框架，并且使用这套理论框架推导出了一种新的架构风格，并且为这种架构风格取了一个名字“REST”——Representational State Transfer（表述性状态转移）的缩写。REST架构风格最重要的架构约束：
 客户-服务器（Client-Server）：通信只能由客户端单方面发起，表现为请求-响应的形式。
 无状态（Stateless）：通信的会话状态（Session State）应该全部由客户端负责维护。
 缓存（Cache）：响应内容可以在通信链的某处被缓存，以改善网络效率。
 统一接口（Uniform Interface）：通信链的组件之间通过统一的接口相互通信，以提高交互的可见性。
 分层系统（Layered System）：通过限制组件的行为（即，每个组件只能“看到”与其交互的紧邻层），将架构分解为若干等级的层。
 按需代码（Code-On-Demand，可选）：支持通过下载并执行一些代码（例如Java Applet、Flash或JavaScript），对客户端的功能进行扩展。

南京老山项目开发过程中的RESTful API设计规则：
1. 将API的版本号放入URL（/v1/system/users/ids）

2. 每个网址代表一种资源（resource），所以网址中不能有动词，只能有名词，而且所用的名词往往与数据库中的表格名或实体对应。（/v1/activity/activity/id）

3. 对于资源的具体操作类型，由HTTP动词表示。
 GET（SELECT）：从服务器取出资源（一项或多项）。
 POST（CREATE）：在服务器新建一个资源。
 PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
 PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
 DELETE（DELETE）：从服务器删除资源。

4. 服务器向用户返回的状态码和提示信息，常见的有以下一些（方括号中是该状态码对应的HTTP动词）。
 200 OK - [GET]：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。
 201 CREATED - [POST/PUT/PATCH]：用户新建或修改数据成功。
 202 Accepted - [*]：表示一个请求已经进入后台排队（异步任务）
 204 NO CONTENT - [DELETE]：用户删除数据成功。
 400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。
 401 Unauthorized - [*]：表示用户没有权限（令牌、用户名、密码错误）
 403 Forbidden - [*] 表示用户得到授权（与401错误相对），但是访问是被禁止的。
 404 NOT FOUND - [*]：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
 406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
 410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。
 422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。
 500 INTERNAL SERVER ERROR - [*]：服务器发生错误，用户将无法判断发出的请求是否成功。

5. 针对不同操作，服务器向用户返回的结果应该符合以下规范。
 GET /collection：返回资源对象的列表（数组）
 GET /collection/resource：返回单个资源对象
 POST /collection：返回新生成的资源对象
 PUT /collection/resource：返回完整的资源对象
 PATCH /collection/resource：返回完整的资源对象
 DELETE /collection/resource：返回一个空文档

6. 前后台交互的数据格式，全部使用JSON。

7. URI统一使用小写字母

8. URI尽量使用“-”代替下划线“_”
后台使用Spring Boot作为开发框架。为了方便后台脱离前台独立调试后台API，在后台引入了可视化API调试工具swagger。具体如下：
1. 在项目POM文件中加入依赖

2. 在Spring Boot中配置swagger，并开启swagger支持。

3. 在代码中使用swagger注解。

4. 访问swagger管理界面（http://localhost:8080/swagger-ui.html#/）。

测试过程中，前台部署在172.17.2.97上，后台部署在172.17.2.98上。前台通过nginx反向代理找到后台API服务器。

二、创新的目的
在项目中引入前后分离，实现后台的开发人员专注写后台接口，前台开发人员专注页面上的事。前后开发同时进行，前后通过API实现连接。至少在开发模式上是一种新的模式，效率确实得到了提高。

三、成效如何
1. 开发效率得到很大提高。2. 前后分离的具体实践。 3. 项目成员熟悉掌握了前台框架Vue.js。

前后分离在项目中的应用

一、创新的主要内容
在南京老山生态廊道智慧信息系统项目中，引入了前后端分离策略。

项目一般采用Structs、Spring MVC 等后端MVC架构，出发点在后端。后端MVC 是个好的协作模式，从架构层面让开发者懂得什么代码应该写在什么地方。前端通过JSP，JS，HTML以及AJAX等技术来展示数据，主要由服务器端负责渲染（不全是）。这种模式有很多弊端：
1. 后台Service 越来越多，调用关系变复杂，前端搭建本地环境不再是一件简单的事。基本上都是前后端在一个工程目录里面，开发人员负责前后台代码编写。这对研发效率的影响其实大。

2. 如果是基于JSP来实现前台页面，JSP 等代码的可维护性会越来越差。JSP 非常强大，可以内嵌 Java 代码。这种强大使得前后端的职责不清晰，JSP 变成了一个灰色地带。经常为了赶项目，为了各种紧急需求，会在 JSP 里揉杂大量业务代码。积攒到一定阶段时，往往会带来大量维护成本。

3. 前后端职责纠缠不清。由于前后端都是一个人编写代码，这就导致前端混杂很多业务代码，前端缺乏对用户交互的关注度。

4. 前后端在一起编译，部署。不利于系统的拆分、前后端的负载均衡、前端调优、后端调优等。

为了避免上面的弊端，在南京老山项目开发过程中，引入了基于前端MVVM架构的Vue.js框架，采用REST架构风格，来实现前后端分离。

Vue.js是一个渐进式的JavaScript框架，用来构建用户交互界面，采用自底向上的增量开发的设计。官网：https://cn.vuejs.org/

REST架构风格：2000年，博士学位论文Architectural Styles and the Design of Network-based Software Architectures（中文《架构风格与基于网络的软件架构设计》），Fielding博士系统地、严谨地阐述了这套理论框架，并且使用这套理论框架推导出了一种新的架构风格，并且为这种架构风格取了一个名字“REST”——Representational State Transfer（表述性状态转移）的缩写。REST架构风格最重要的架构约束：
 客户-服务器（Client-Server）：通信只能由客户端单方面发起，表现为请求-响应的形式。
 无状态（Stateless）：通信的会话状态（Session State）应该全部由客户端负责维护。
 缓存（Cache）：响应内容可以在通信链的某处被缓存，以改善网络效率。
 统一接口（Uniform Interface）：通信链的组件之间通过统一的接口相互通信，以提高交互的可见性。
 分层系统（Layered System）：通过限制组件的行为（即，每个组件只能“看到”与其交互的紧邻层），将架构分解为若干等级的层。
 按需代码（Code-On-Demand，可选）：支持通过下载并执行一些代码（例如Java Applet、Flash或JavaScript），对客户端的功能进行扩展。

南京老山项目开发过程中的RESTful API设计规则：
1. 将API的版本号放入URL（/v1/system/users/ids）

2. 每个网址代表一种资源（resource），所以网址中不能有动词，只能有名词，而且所用的名词往往与数据库中的表格名或实体对应。（/v1/activity/activity/id）

3. 对于资源的具体操作类型，由HTTP动词表示。
 GET（SELECT）：从服务器取出资源（一项或多项）。
 POST（CREATE）：在服务器新建一个资源。
 PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
 PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
 DELETE（DELETE）：从服务器删除资源。

4. 服务器向用户返回的状态码和提示信息，常见的有以下一些（方括号中是该状态码对应的HTTP动词）。
 200 OK - [GET]：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。
 201 CREATED - [POST/PUT/PATCH]：用户新建或修改数据成功。
 202 Accepted - [*]：表示一个请求已经进入后台排队（异步任务）
 204 NO CONTENT - [DELETE]：用户删除数据成功。
 400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。
 401 Unauthorized - [*]：表示用户没有权限（令牌、用户名、密码错误）
 403 Forbidden - [*] 表示用户得到授权（与401错误相对），但是访问是被禁止的。
 404 NOT FOUND - [*]：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
 406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
 410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。
 422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。
 500 INTERNAL SERVER ERROR - [*]：服务器发生错误，用户将无法判断发出的请求是否成功。

5. 针对不同操作，服务器向用户返回的结果应该符合以下规范。
 GET /collection：返回资源对象的列表（数组）
 GET /collection/resource：返回单个资源对象
 POST /collection：返回新生成的资源对象
 PUT /collection/resource：返回完整的资源对象
 PATCH /collection/resource：返回完整的资源对象
 DELETE /collection/resource：返回一个空文档

6. 前后台交互的数据格式，全部使用JSON。

7. URI统一使用小写字母

8. URI尽量使用“-”代替下划线“_”
后台使用Spring Boot作为开发框架。为了方便后台脱离前台独立调试后台API，在后台引入了可视化API调试工具swagger。具体如下：
1. 在项目POM文件中加入依赖

2. 在Spring Boot中配置swagger，并开启swagger支持。

3. 在代码中使用swagger注解。

4. 访问swagger管理界面（http://localhost:8080/swagger-ui.html#/）。

测试过程中，前台部署在172.17.2.97上，后台部署在172.17.2.98上。前台通过nginx反向代理找到后台API服务器。

二、创新的目的
在项目中引入前后分离，实现后台的开发人员专注写后台接口，前台开发人员专注页面上的事。前后开发同时进行，前后通过API实现连接。至少在开发模式上是一种新的模式，效率确实得到了提高。

三、成效如何
1. 开发效率得到很大提高。2. 前后分离的具体实践。 3. 项目成员熟悉掌握了前台框架Vue.js。

附件列表：

1.   pdf-.pdf