文章目录

  1. 1. 前后端分离是什么
  2. 2. 为什么需要前后端分离
  3. 3. 前后端分离,最佳实践
    1. 3.1. 简单分离模式
    2. 3.2. 服务端渲染模式
      1. 3.2.1. 方式一,JSP渲染
      2. 3.2.2. 方式二,静态页渲染
    3. 3.3. Node.js渲染模式
  4. 4. 总结

前后端分离,可以让各端变得更专注。今天的话题,结合我之前的项目场景,重新思考“前后端”的定义,并讨论下《前后端分离,最佳实践》。

前后端分离是什么

我们来回顾下传统的 MVC 模式,客户端发送 AJAX 请求,服务端接受到该请求并返回 JSON 数据返回给客户端,客户端解析 JSON 进行页面渲染。

现在,为了提高开发效率,细化职责,前后端分离的需求越来越被重视,服务端负责业务/数据接口,前端负责展现/交互逻辑。如果将浏览器这一端视为前端,而服务器这一端视为服务端的话,可以将以上的 MVC 模式,进行改造成前后端分离模式。

为什么需要前后端分离

有了前后端分离模式,前端人员更加关注界面展现/交互逻辑,服务端人员更加关注业务/数据接口,分工明确,职责清晰。

  • 前端职责:页面UI,页面展示、交互、渲染,用户体验等。
  • 后端职责:数据存储,业务逻辑,RESTful 接口,性能、可用性、伸缩性、扩展性、安全性等。

此外,当我们的存在多端场景,例如,一个服务端RESTful API,按照这种方式 Web/iOS/Android/PC/U3D 五个前端对于后端来说就无差别了,这是多么棒的设计啊。

前后端分离,最佳实践

简单分离模式

我们采用的方案是 REST 服务这个轻量级的 Web 服务,客户端发送 AJAX 调用服务端 RESTFul API 接口请求,服务端收到请求后将 JSON 格式的响应结果发送给客户端,这样就完成了一次交互。

服务端渲染模式

这种模式,基本可以满足我们一般产品的需求。然而,对于需要做SEO的产品,这种方式就有点力不从心了。因为,重要内容都在前端进行异步组装,这样是无法被搜索引擎收录的,所以必须要考虑服务端渲染才可以被SEO。

服务端渲染模式,结合我之前的项目场景,列举两种方式。

方式一,JSP渲染

通过JSP进行渲染。这个方式,实际上,就是在前端项目中加入Java代码,通过JSP作为模板渲染。

方式二,静态页渲染

通过FreeMarker生成静态页进行渲染。这个方式,需要考虑动静分离,CDN分发等场景。

Node.js渲染模式

对于上面的方案,存在一个重要的问题,前端人员需要涉及Java技术,无法达到前后端解耦。随着Node.js技术的普及,我们把渲染的工作从服务端抽出来到前端,明确的前后端职责划分。

总结

从传统的 MVC 模式,演变到前后端分离模式,可以让各端变得更专注。今天的话题,结合我之前的项目场景,主要简单介绍了简单分离模式,JSP渲染模式,静态页渲染模式,Node.js渲染模式。

(完)

微信公众号

文章目录

  1. 1. 前后端分离是什么
  2. 2. 为什么需要前后端分离
  3. 3. 前后端分离,最佳实践
    1. 3.1. 简单分离模式
    2. 3.2. 服务端渲染模式
      1. 3.2.1. 方式一,JSP渲染
      2. 3.2.2. 方式二,静态页渲染
    3. 3.3. Node.js渲染模式
  4. 4. 总结