前后端知识

Entropy Lv4

开发模式

前后端分离已成为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小程序

基于不同的渲染方式又可以引出SPAMPA

SPA和MPA

SPA单页面应用模式

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

MPA多页面应用模式

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

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

  • 标题: 前后端知识
  • 作者: Entropy
  • 创建于 : 2022-12-18 17:40:47
  • 更新于 : 2023-04-01 07:55:52
  • 链接: https://www.entropy-tree.top/2022/12/18/font-back-end/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
此页目录
前后端知识