浅谈前后分离在项目中的应用

目录

一、创新的主要内容

二、创新的目的

三、成效如何

---

一、创新的主要内容

在苏州股权融资平台(www.szgq.suzhou.gov.cn)项目中，引入了前后端分离策略。

项目一般采用 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 框架，用来构建用户交互界面，采用自底向上的增量开发的设计。官网：Vue.js

REST 架构风格： 2000 年，博士学位论文 Architectural Styles and the Design of Network-based  Software  Architectures（中文《架构风格与基于网络的软件架构设计》），Fielding 博士系统地、严谨地阐述了这套理论框架，并且使用这套理论框架推导出了一种新的架构风格， 并且为这种架构风格取了一个名字“REST”——Representational State

Transfer（表述性状态转移）的缩写。REST 架构风格最重要的架构约束：

1. 客户-服务器（Client-Server）：通信只能由客户端单方面发起，表现为请求-响应的形式。
2. 无状态（Stateless）：通信的会话状态（Session State）应该全部由客户端负责维护。
3. 缓存（Cache）：响应内容可以在通信链的某处被缓存，以改善网络效率。
4. 统一接口（Uniform  Interface）：通信链的组件之间通过统一的接口相互通信，以提高交互的可见性。
5. 分层系统（Layered  System）：通过限制组件的行为（即，每个组件只能“看到”与其交互的紧邻层），将架构分解为若干等级的层。
6. 按需代码（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。