前后端分离的好处

前后端分离后整个项目的开发权重往前移,实现真正的前后端解耦,动态资源和静态资源分离,提高了性能和扩展性。主要表现在一下几个方面:

  • 传统的JSP、FreeMarker等技术实现的页面渲染会导致前端页面代码相当复杂和难以维护,代码格式也很乱很杂(一个文件包含JSP、Java、Html、CSS、JS的代码)
  • 无法单纯的使用JSP、FreeMarker等技术实现页面的局部刷新,页面的局部刷新还是需要Ajax+Jquery配合服务端的HTTP接口实现
  • 传统的JSP、FreeMarker等技术无法实现前端UI组件化,现在的React、Vue等前端技术已经相当成熟,它们都支持UI组件化,甚至有很多成熟功能强大的开源组件
  • 传统的JSP、FreeMarker等技术会消耗大量服务器资源(服务端渲染页面),以及服务器网络带宽(页面可能有100K,数据才1K)

前端静态化

  • 前端有且仅有静态内容,再明确些,只有HTML/CSS/JS
  • 其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装(JSP、FreeMarker、等等)
  • 前端内容的运行环境和引擎完全基于浏览器本身

后端数据化

  • 后端可以用任何语言,技术和平台实现
  • 遵循一个原则:只提供数据,不提供任何和界面表现有关的内容
  • 统一API接口,接口完全可以共用
  • 提供的数据可以用于任何其他客户端(如IOS,安卓,pc,微信小程序等)
  • 通过一些代码重构,就可以大量复用接口,提升效率

平台无关化

  • 前端三大技术(HTML/CSS/JS)本身就是平台无关的
  • 后台链接部分的本质是实现合适的RESTful接口和交互JSON数据,就这两者而言,任何技术和平台都可以实现
  • 前后端交给不同的人来编写,明确划分职责,发现bug的时候可以快速定位
  • vue、React等框架编写前端的时候,会比之前写Jquery更简单快捷

架构分离化

  • 前端架构完全基于HTML/CSS/JS的发展和js框架的演变,由于前台是纯静态内容,大型架构方面可以考虑向CDN方向发展
  • 后端架构几乎可以基于任何语言和平台的任何解决方案,大型架构方面,RESTful Api可以考虑负载均衡,而数据,业务实现等可以考虑数据库优化和分布式
  • 在大并发情况下,可以同时水平扩展前后端服务器
  • 即使后端服务器暂时超时或者宕机,前端页面也会正常访问,只是数据刷新不出来而已,当然现在一般是服务器集群,少有出现这种现象

前后端流量大幅减少

  • 减少后端服务器的兵法压力,除了接口以外的其他所有http请求全部转移到前端服务器上
  • 页面不再是全部刷新,而是异步加载,局部刷新,减轻压力

表现性能的提高

  • 页面性能,第一次获取的确会有所损失
  • 后续使用这个页面,性能优势就完全体现了,页面的绝大部分内容都是本地缓存直接加载,远程获取的仅仅是1-2个10k的内容,其加载时间百毫秒内,这和本地页面几无区别,其前端加载和相应速度得到非常大的提高

安全性方面的集中优化

  • 前端静态以后,一些注入式攻击在分离模式下被很好的规避
  • 而后端安全问题集中化了,主要考虑处理RESTful接口安全
  • 安全架设和集中优化变得更明确和便利

前后端分离实现

读到这里相信你已经完全了解的项目前后端分离的好处了,那么下面我开始讲解如何实现落地一个项目前后端分离,前提是你需要掌握一下技术:

  • RESTful API规范
  • HTML + CSS + JS + Jquery/Vue/React + NodeJs

RESTful API规范

HTTP请求规范

GET    (SELECT) 查询 - 从服务器取出资源(一项或多项)。
POST   (CREATE) 新增 - 在服务器新建一个资源。
PUT    (UPDATE) 覆盖/全部更新 - 在服务器更新资源(客户端提供改变后的完整资源)。
PATCHUPDATE) 更新 - 在服务器更新资源(客户端提供改变的属性)。
DELETEDELETE) 删除 - 从服务器删除资源。

HTTP状态码

200 :服务器成功返回用户请求的数据,该操作是幂等的(Idempotent)
3xx :重定向,为了完成请求,必须进一步执行的动作
400 :用户发出的请求有错误,服务器没有进行新建或修改数据的操作,该操作是幂等的
401 :表示用户没有权限(令牌、用户名、密码错误)
403 :表示用户得到授权(与401错误相对),但是访问是被禁止的
404 :用户发出的请求针对的是不存在的记录,服务器没有进行操作,该操作是幂等的
500 :服务器发生错误,用户将无法判断发出的请求是否成功
502 :网关错误
504 :网关超时

HTTP状态码具体使用
由于HTTP状态码太多而且过于详细,在项目大部分使用不到,目前我们使用以下规范:

200 :服务端处理成功
400 :请求参数错误
401 :未登录
403 :已登录但没有权限
404 :资源不存在
500 :服务器内部错误

URL规范

  • URL必须使用全小写,单词间使用下划线_ 分隔,如: /api/submit_order
  • 既然URL是名词,为了统一起见,建议都使用复数URL,如: GET /articles/2
  • URL层级大于或等于三层,则使用’?’带参数,例如: GET /authors/12/categories/2应该改为GET /authors/12?categories=2
  • 能使用URL路径变量就优先使用URL路径变量,例如: GET /api/orders/${order_code}
  • 在使用URL路径变量时需要确保路径变量数据不会有 /\. 等特殊字符(SpringBoot有坑),路径变量最好是整数

RESTful API规范的URL如下[参考: RESTful API最佳实践(阮一峰)]:

GET         /zoos:列出所有动物园
POST        /zoos:新建一个动物园
GET         /zoos/ID:获取某个指定动物园的信息
PUT         /zoos/ID:更新某个指定动物园的信息(提供该动物园的全部信息)
PATCH       /zoos/ID:更新某个指定动物园的信息(提供该动物园的部分信息)
DELETE      /zoos/ID:删除某个动物园
GET         /zoos/ID/animals:列出某个指定动物园的所有动物
DELETE      /zoos/ID/animals/ID:删除某个指定动物园的指定动物
DELETE      /zoos/ID/animals?id=:删除某个指定动物园的指定动物

前后端数据交互

后端统一使用Json数据返回给前端,前端请求接口严格使用RESTful API规范。服务端响应数据不要定义成一个固定模式,每个接口只返回与自己业务相关的数据,不要带上全局的类似success的字段,有些项目接口的返回值接口固定如下:

{
    "success": true,
    "msg": "",
    "data": {}
}

然后把当前接口需要返回的数据放到data字段。这里禁止服务端使用这种方式返回接口数据,因为判断接口调用是否成功在RESTful API规范里面是通过HTTP状态码来的,这里的这种做法会给服务的监控和运维带来很多坑!

前端技术

如果你对前端技术非常了解和熟悉(熟悉ECMAScript6、LESS、SASS、Webpack、React、Vue、…)那就推荐使用大前端技术来实现项目功能,否则推荐你使用大前端技术来实现项目功能。

传统前端技术

  • jquery、jquery各种插件、EasyUI(或者类似UI库)
  • art-template前端模板引擎(解决页面局部刷新的问题)

大前端技术

静态资源存放地址

  • 项目静态资源文件存放地址xxx-server/src/main/resources/static
  • 如果你使用的传统前端技术那么你需要把所有的前端页面代码和依赖库全部放放到static目录下面
  • 使用大前端技术的可以把打包之后的文件放到static目录下面,可也以使用nodejs单独部署前端项目,做到前端与服务端的彻底分离
文档更新时间: 2019-08-15 18:16   作者:lizw