前后端分离实践

前言

这里指的前后端分离是把web端的页面从后端服务渲染变成一个静态页面。

分离之前：用户访问一个页面，后端把这个页面上需要的数据都注入进了页面，然后把页面呈现给用户。

分离后：用户访问一个页面，服务器直接返回了这个静态页面，静态页面里是js再请求后端接口拿到这个页面需要的数据，再呈现给用户。

 

咋一看，分离后明明多了一次用户请求呀，但是因为这个静态页面不用注入数据，用户看到这个页面的时间会减少，从而减少了白屏的时间。实际上，很多成熟的分离方案是其实还是在服务器上把初始数据注入页面（这个操作由前端中间件完成）。

 

为什么要分离？

从笔者实践来看有一下几个优点：

1. 前端开发能充分利用好前端生态进行开发，不需要关心后端生态问题。
2. 前端部署可以完全静态化，提高性能和可用性。
3. 前后端交互完全API化，能聚合稳定清晰的API接口，便于业务快速开展（比如新页面可能只需要前端参与，利用之前的API就能实施新的业务）。

 

作为开发者，其实最关心的还是开发和部署，只有开发着能舒服的开发和部署，才能更有活力和激情开发业务，完善业务。

 

怎么分离？

1、梳理前端业务

面向用户的前端业务，主要是呈现和用户行为。可以按照模块进行业务梳理，确定每个模块的范围，在SPA流行的时代，一个模块是一个SPA页面是一个比较好的选择。比如一个读书应用。用户登录一个页面，用户购买一个页面，用户读书一个页面。

• 确定业务模块
• 每个模块构建一个SPA页面（根据实际情况选择）

 

2、确定后端需要提供的API接口

在后端注入页面数据，渲染页面的时候。数据往往会比较分散，或者冗余。如果把所有数据都通过API接口获得，需要前后端共同梳理清楚一个模块包含哪些实体，为这些实体提供合适的接口（稳定长期有效的接口，比如获得用户信息，书籍信息等等）。然后再针对具体业务提供特定的接口，比如买2本书送代金劵。

• 确定稳定，长期不容易改变的API
• 分离具体业务类，可能会经常迭代的API
• 统一API格式

 

3、前端处理各种登录、验证跳转

在后端渲染页面的时候，后端可以做权限验证，用户登录等操作。把页面弄成静态页面以后，这些操作在页面返回之前都做不了了。必须等页面在前端开始渲染的时候才能实施，实施的方式就是请求后端接口，然后后端判断权限，根据后端返回的判断信息前端再做操作，可能会实施重定向，可能弹出登录框等等。

• 梳理前后端所有跳转的URL，分离以后页面路径可能会变更
• 调用API接口后，前端需要处理权限问题，前端跳转