前后端知识

开发模式

前后端分离已成为web大型项目的标准开发方式, 主要解决了传统的前后端不分离所带来的一系列开发过程中的问题

概念

前后端不分离: 前后端代码放在一个工程下或同一个目录下, 前端页面中含有后端的代码(如典型的jsp页面内嵌java代码)。前后端代码以及前后端工作开发耦合度极高, 前后端需要同时协作才能完成开发

前后端分离: 前后端代码放在不同的工程下, 只需要提前约定好API数据规范, 前后端就可以各自独立开发。前端可以通过Mock技术模拟后端API服务来独立运行和测试; 后端也可以独立开发、运行、测试, 通过Swagger技术自动生成API文档提供给前端, 还能进行自动化接口测试API的可用性

前后端分离涉及的技术

1.Ajax、axios和json等基础交互技术

2.Http协议在同源策略下引发的跨域访问

3.Nodejs搭建中间层服务器以及前端Mock测试

对比

以一个SpringBoot项目为例

前后端不分离的情况下, 直接使用SpringBoot启动即可

• 需要考虑静态资源所存放的相对路径(例如需要存放在某个指定的静态资源static目录下)
• 在测试过程中遇到问题难以快速定位到问题位于前端还是后端
• 运行时出现问题会直接导致SpringBoot项目无法启动或者运行时无法正确地进行前后端交互测试
• 对于**SEO(Search Engine Optimization, 搜索引擎优化)**的支持较好

前后端分离的情况下, 后端使用SpringBoot启动, 前端使用Nodejs启动

• 不再需要考虑相对路径的限制
• 可以使用特定的技术来模拟前后端进行数据交互测试, 从而准确定位问题
• 会有跨域访问的限制
• 由于前端与后端分离导致服务端无法去渲染前端页面, 即一般情况下不支持SSR(Server-Side-Rendering，服务器端渲染)

渲染方式

渲染方式可分为SSR服务端渲染和CSR客户端渲染

SSR服务端渲染

• SSR拥有很好的SEO搜索引擎优化

• SSR的首屏优化很好, 即首屏时间短

• SSR加重了服务端的负载, 因为渲染需要在服务端完成

• SSR的页面交互性较差

• 使用SSR基本说明了前后端不分离

• SSR非常适合开发静态网站以及业务逻辑复杂的网站

CSR客户端渲染

• CSR不支持SEO搜索引擎优化, 因为数据是异步获取的, 很难被SEO收录

• CSR的首屏时间较长

• CSR减轻了服务器的负载, 因为渲染是在客户端完成的

• CSR的页面交互性非常好

• 使用CSR基本说明了前后端分离

• CSR非常适合开发对即时交互性要求较高的Web应用程序以及app小程序

基于不同的渲染方式又可以引出SPA和MPA

SPA和MPA

SPA单页面应用模式

• SPA模式只拥有一个主页面, 所有的静态资源都包含在主页面中, 只需要加载一次
• 所有的功能模块组件化, 通过刷新局部资源来实现功能
• 几乎不存在转发和重定向的概念
• 传统SPA通常都是CSR渲染, 也可以借助SSR渲染来优化SEO
• SPA的实现核心是前端路由, 前端路由的核心: 改变视图的同时不会向后端发出请求
• 单个vue+vite的工程就是典型的SPA模式

MPA多页面应用模式

• MPA模式拥有多个页面, 所有的静态资源都是公共资源, 每个页面都需要重新加载
• 所有的功能会划分到多个页面中, 通过转发和重定向页面来实现功能
• MPA通常都是SSR渲染, 基本不会使用CSR渲染, 因为逻辑较为复杂
• MPA中基本没有前端路由

目前大型Web项目开发可能更多的是使用MPA+SPA的混合模式