---
title: "02-前后端分离or不分离？"
created: 2025-12-02
tags:
  - 项目
aliases:
  - 前后端分离or不分离？
---
# 前后端分离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动态生成，服务器主要返回数据，这被称为“前后端分离”。

---

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