前后端分离or不分离？

• 请求的过程

  打开网页时，浏览器向服务器发送了一个URL请求。这个URL可以携带参数和数据（通过查询参数、路径参数、或者请求体等形式）。服务器接收到请求后，根据请求路径和参数处理请求，并生成一个响应内容。通常情况下，这个响应内容是一个字符串（HTML、JSON等）。

• 前后端的分离和不分离

  “好像本质上就是调用了一个函数”这个理解非常贴切。服务器端接收请求，执行某种逻辑处理，返回结果。这种思路可以用来理解前后端是否分离。

  • 前后端不分离：

    在这种模式下，服务器生成并返回的主要是完整的HTML页面。浏览器请求一个URL时，服务器会处理这个请求，将整个HTML页面（作为一个字符串）直接发送回来。服务器端负责生成完整的页面内容，包括HTML、数据、页面的布局和样式等。

    • 这种模式的优点是实现简单，服务器端的逻辑集中，页面在服务器端生成，所以浏览器端的负担较轻。
    • 缺点是每次请求都需要从服务器端获取完整的页面，用户体验上刷新较多，效率较低。

  • 前后端分离：

    前后端分离意味着前端和后端的职责明确分开。服务器端主要负责处理业务逻辑和数据处理，前端则负责用户界面展示和交互逻辑。

    1. 初次加载：当用户第一次访问网页时，服务器返回的主要是前端的静态资源（HTML、CSS、JavaScript），这些资源在前端（浏览器）中负责展示页面的框架和基础内容。
    2. 数据请求：前端加载完框架后，通过JavaScript向服务器发送AJAX（Asynchronous JavaScript and XML）请求，服务器只返回所需的具体数据，通常是JSON格式的数据。
    3. 动态渲染：前端接收到数据后，再通过JavaScript将数据填充到页面中，动态生成内容。
    • 这种模式的优点是提高了用户体验，数据和页面内容的更新更加灵活，前后端的开发可以并行进行，开发效率更高。
    • 缺点是前端开发的复杂度增加，需要使用框架（如React、Vue、Angular等）来进行前端开发。

• 总结

  • 如果HTML代码是在服务器端生成的并直接返回给浏览器，这被称为“前后端不分离”。
  • 如果HTML代码在浏览器端通过JavaScript动态生成，服务器主要返回数据，这被称为“前后端分离”。

项目分区导航： 关于架构 ⬅️ | 02-前后端分离or不分离？ | ➡️ 注解（了解）