当前位置：首页 > article >正文

web的分离不分离：前后端分离与不分离全面分析

article 2026/4/12 2:35:36

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

在这里插入图片描述

一、前后端分离

在这里插入图片描述

原理

前后端分离是指将前端（用户界面）和后端（服务器端逻辑）分开，独立开发、独立部署。前端通过API与后端进行通信，常见的通信方式是通过HTTP请求（如使用RESTful API或GraphQL）获取数据。

前端：负责页面展示、用户交互等，通常使用现代的JavaScript框架（如React、Vue、Angular）开发。
后端：负责业务逻辑处理和数据存储，使用常见的后端技术（如Node.js、Django、Flask、Spring等）开发。

前端和后端通过网络进行通信，前端通常通过AJAX请求（如fetch或axios）获取后端提供的数据，并渲染到页面上。

优点

前后端解耦：
- 前端和后端可以独立开发、独立部署，前后端开发人员不需要过多的互相配合，提升开发效率。
- 前后端分开后，可以使用不同的技术栈进行开发。前端开发专注于UI/UX和交互，后端专注于处理业务逻辑和数据存储。
技术栈灵活性：
- 前端可以使用现代的前端框架（如React、Vue等），提高开发体验和用户体验。
- 后端可以选择任意技术栈，只要能够提供API接口，前端可以通过API与之交互。
提高性能：
- 前后端分离后，前端可以做更多的页面优化，如懒加载、代码分割、SPA（单页应用），提高页面加载速度和响应速度。
- 后端只需要关注数据接口的响应，可以进行高效的数据处理。
更好的维护性：
- 因为前后端分离，前端和后端代码的耦合度降低，维护和扩展变得更容易。
- 前端和后端可以独立地进行更新，降低了相互依赖的风险。
支持多端应用：
- 一套后端API可以同时为Web、移动端（Android、iOS）等多个平台提供数据服务。

缺点

初期开发复杂度高：
- 前后端分离需要较高的前期架构设计，涉及API设计、跨域问题、接口文档等，开发和部署的复杂度增加。
- 因为前后端是分开开发的，需要保证API的稳定性和兼容性。
接口设计和维护困难：
- 需要明确API的设计标准，避免后端接口频繁变动影响前端。
- 一旦API出现问题，可能会导致前端应用无法正常工作，需要进行紧密的协作和调试。
开发协作的挑战：
- 前端和后端需要通过明确的接口契约进行协作，前端依赖后端提供的API进行开发，后端也需要配合前端的需求。
跨域问题：
- 前后端分离时，前端和后端通常处于不同的域，可能会遇到跨域请求的问题，需要使用跨域资源共享（CORS）来解决。

代码举例（前后端分离）：

在这里插入图片描述
前端（React + Axios）：

import React, { useEffect, useState } from 'react';
import axios from 'axios';function App() {const [data, setData] = useState(null);useEffect(() => {axios.get('http://localhost:5000/api/data').then(response => setData(response.data)).catch(error => console.error(error));}, []);return (<div>{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}</div>);
}export default App;

后端（Flask）：

from flask import Flask, jsonifyapp = Flask(__name__)@app.route('/api/data')
def get_data():data = {'message': 'Hello, World!'}return jsonify(data)if __name__ == '__main__':app.run(debug=True)

二、不分离（传统架构）

在这里插入图片描述

原理

不分离架构是指前端和后端代码在同一个项目中，前端和后端紧密结合，通常前端模板直接由后端渲染。

前端：可以使用传统的HTML、CSS、JavaScript，后端框架（如Django、Rails、ASP.NET等）直接渲染页面。
后端：不仅负责处理业务逻辑和数据，还负责渲染前端页面，后端和前端代码通常共享同一个项目。

优点

开发简单：
- 不需要额外设计和维护API接口，开发起来相对简单。
- 适合小型项目或者团队资源有限时使用，开发过程中的协作不复杂。
减少了跨域问题：
- 因为前端和后端处于同一域名下，所以不涉及跨域问题。
快速渲染：
- 后端直接渲染页面，用户请求后页面内容就直接返回，无需前端异步加载。
维护成本低：
- 前后端不分离，项目结构简单，维护起来比较容易，不需要额外处理前后端的分离逻辑。

缺点

前后端耦合度高：
- 前端和后端的耦合度较高，改动一方时，另一方也需要做相应的修改，导致扩展性差。
- 随着业务的复杂度增加，维护困难。
扩展性差：
- 不分离的架构不容易适应多个前端平台（如移动端和Web端）的需求。
- 如果需要扩展到多个客户端，后端需要做大量的定制化开发。
开发效率低：
- 前端和后端的开发人员需要紧密协作，修改一方可能导致另一方的工作受影响，开发周期较长。
难以进行前端优化：
- 无法像前后端分离模式下那样进行前端的独立优化（如懒加载、SPA等）。

代码举例（不分离）：

后端（Django）：

from django.shortcuts import renderdef index(request):data = {'message': 'Hello, World!'}return render(request, 'index.html', data)

在这里插入图片描述
前端（HTML）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Page</title>
</head>
<body><h1>{{ message }}</h1>
</body>
</html>

三、总结

在这里插入图片描述

比较项	前后端分离	不分离
开发复杂度	高，前后端需要协作并设计API	低，前后端同一项目，开发协作简单
技术栈灵活性	高，前端后端技术栈独立，可以使用不同的技术栈	低，前端和后端技术栈耦合
性能	由于SPA等优化，性能通常较好	页面由后端直接渲染，可能会导致性能瓶颈
维护	由于分离，维护更加方便	由于耦合，维护难度较大
可扩展性	高，适合多个客户端使用同一API	低，适用于单一平台

最终选择哪种架构取决于项目的规模、复杂度以及团队的技术栈。在大规模、长期维护的项目中，前后端分离往往是更好的选择；而对于小型项目或者快速开发的场景，不分离架构可能会更加高效。
在这里插入图片描述

web的分离不分离：前后端分离与不分离全面分析

让我们一起走向未来 🎓作者简介：全栈领域优质创作者 🌐个人主页：百锦再新空间代码工作室 📞工作室：新空间代码工作室（提供各种软件服务） 💌个人邮箱：[1504566…...

编程日记 2026/4/7 2:36:40

记录一个ES分词器不生效的解决过程

问题背景商城项目,其中商品查询检索使用的是ES, 但存在某些商品查询不到的问题例如:某商品名包含AA_BBB这样的关键词,但是搜索"AA"不能查询到该商品,但是将商品名修改为AA BBB后就能查询到了. 怀疑是分词的问题,但看代码,在创建ES索引时在对应字段上也定义了分词器…...

编程日记 2026/4/10 9:31:58

高性能内存对象缓存Memcached详细实验操作

目录前提准备： cache1，2： 客户端cache-api（一定得是LAMP环境） memcache实现主主复制以及高可用(基于以上完成) cache1,2: memcachekeepalived(基于以上完成) cache1,2: 前提准备： 1. 准备三台cent…...

编程日记 2026/4/8 7:01:17

css之display：grid布局改块级元素布局

1.问题： div是块级元素，一个div元素占一行，但是，今天测试样式时，总是会有两个div并占一行，很困惑，结果发现是app这个样式在main.css里 #app样式布局在main.ts里被应用 2.原因以及样式分析 im…...

编程日记 2026/4/8 17:40:51

高效率：转换效率高达 96%，可有效减少能源损耗

WD5030 的特点高效率：转换效率高达 96%，可有效减少能源损耗，降低设备发热，提高能源利用效率，延长电池供电设备的续航时间135。精准输出电压：内置可调线路补偿和可调输出电压功能，输出电压精度…...

编程日记 2025/11/5 14:52:21

第2章深入理解Thread构造函数

Thread的构造函数。 2.1 线程的命名在构造一个Thread时可以为其命名。 2.1.1 线程的默认命名下面构造函数中，并没有为线程命名。 Thread() Thread(Runnable target) Thread(ThreadGroup group, Runnable target)打开源码会看到 public Thread(Runnable targe…...

编程日记 2026/4/7 10:16:45

node 使用 Redis 缓存

缓存是什么？ 高并发下，一个项目最先出问题的，并不是程序本身，而是数据库最先承受不住。在数据库上我们可以做很多优化，例如优化 SQL 语句，优化索引，如果数据量大了，还可以分库、分表…...

编程日记 2026/4/7 20:36:30

PMBOK第7版整体架构全面详解

1. 引言 7月1日对于项目管理从业者和研究者而言，是个非凡意义的一个时间，这一天，翘首以待的《项目管理知识体系指南》（PMBOK）第七版终于发布了。总体而言，PMBOK第七版集百家之所长，成一…...

编程日记 2026/4/9 0:07:06

【Scrapy】Scrapy教程6——提取数据

前一小节我们拿到了页面的数据，那页面中那么多内容，我们想要其中的部分内容，该如何获取呢？这就需要对我们下载到的数据进行解析，提取出来想要的数据，这节就讲讲如何提取数据。引入我们编辑保存下来的shouye.html文件看下，发现这是什么鬼，全是如下图的代码。没错…...

编程日记 2026/4/7 10:52:19

golang panic信息捕获

背景我们的日志接入阿里云sls平台，但是，日志是以json的格式存储在阿里云sls平台上，程序中产生的error,info等日志都可以实现以json的格式打印。但是，golang程序中产生的panic信息本身不是以json的格式输出，这就导致p…...

编程日记 2026/4/8 10:00:14

一周学会Flask3 Python Web开发-http响应状态码

锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在Flask程序中，客户端发出的请求触发相应的视图函数，获取返回值会作为响应的主体，最后生成…...

编程日记 2026/4/5 14:47:02

goland无法debug项目

1、其实个原因是因为正在使用的Delve调试器版本太旧，无法兼容当前的Go语言版本1.2。Delve是Go语言的一个调试工具，用于提供源码级别的调试功能。Go语言每隔一段时间会发布新版本，而相应的调试器Delve也可能会更新以提供新的特性或修复已知问题…...

编程日记 2026/4/8 3:34:47

迪威模型网：免费畅享 3D 打印盛宴，科技魅力与趣味创意并存

还在为寻找优质3D打印模型而发愁？快来迪威模型网（https://www.3dwhere.com/），一个集前沿科技与无限趣味于一体的免费3D打印宝藏平台！ 踏入迪威模型网，仿佛开启一场未来科技之旅。其“3D打印”专区&#xff…...

编程日记 2026/2/22 7:38:33

Python VsCode DeepSeek接入

Python VsCode DeepSeek接入创建API key 首先进入DeepSeek官网，https://www.deepseek.com/ 点击左侧“API Keys”，创建API key，输出名称为“AI” 点击“创建"，将API key保存，复制在其它地方。在VsCode中下载…...

编程日记 2026/4/9 10:40:21

Java中JDK、JRE，JVM之间的关系

Java中的JDK、JRE和JVM是三个核心概念，其关系可概括为JDK > JRE > JVM，具体如下： 一、定义与作用 JDK（Java Development Kit） 定义：Java开发工具包，用于开发和编译Java程序。包含内容&…...

编程日记 2026/2/17 1:51:07

Ubuntu22.04.6如何固定ip地址

Ubuntu22.04.6如何固定ip地址主要参见这篇博客 ubuntu 桌面版如何设置固定IP地址_ubuntu桌面版如何修改ip-CSDN博客 1.先查看一下当前的IP是多少...

编程日记 2026/4/10 5:23:25

腿足机器人之十- SLAM地图如何用于运动控制

腿足机器人之十- SLAM地图如何用于运动控制腿足机器人SLAM地图的表示与处理全局路径规划：地形感知的路径搜索基于A*的三维路径规划基于RRT*的可行步态序列生成局部运动规划：实时步态调整与避障动态窗口法的腿足适配模型预测控制（MPC&#x…...

编程日记 2026/4/10 22:15:16

毕业项目推荐：基于yolov8/yolov5/yolo11的果蔬检测识别系统（python+卷积神经网络）

文章目录概要一、整体资源介绍技术要点功能展示：功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出（xls格式）功能6 支持切换检测到的目标查看二、数据集三、算法介绍1. YO…...

编程日记 2026/4/10 2:41:33

pyside6学习专栏(二):程序图像资源的加载方式

pyside6中的QLabel控件可以加载图像和gif动画，可以直接从外部文件加载，也可以从QRC类型的文件(实际是一脚本文件)经编绎生成对应的资源.PY模块文件(就是将qrc文本中指定的资源文件的16制内容写入.py文件)来使用，本文对两种方式作了一简单的示…...

编程日记 2026/4/10 10:53:08

vue2和vue3的按需引入的详细对比通俗易懂

以下是 Vue2 与 Vue3 按需引入的对比详解，用最简单的语言和场景说明差异： 一、按需引入的本质目标：只打包项目中实际用到的代码（组件、API），减少最终文件体积。类比：去餐厅点餐，只…...

编程日记 2026/4/1 6:14:57

JAVA：Gson：序列化和反序列化

Gson 是 Google 提供的一个用于在 Java 中方便地进行 JSON 与对象互相转换的库。 Gson 并不是 Android Studio（AS）专用的库，它是一个通用的 Java JSON 解析库，可以在任何 Java 项目中使用。基本用法如下： 1. 把 Ja…...

编程日记 2025/11/24 19:46:43

如何在 VS Code 中快速使用 Copilot 来辅助开发

在日常开发中，编写代码往往是最耗时的环节之一。而 GitHub Copilot，作为一款 AI 编码助手，可以帮助开发者自动补全代码、生成代码片段，甚至直接编写完整的函数，大幅提升编码效率。那么，如何在 VS Code 中快…...

编程日记 2026/4/4 15:10:09

PyCharm 中的 %reset -f 功能：一键重置控制台变量

在 PyCharm 的日常使用中，我们经常需要在控制台中测试和运行各种代码片段。随着时间的推移，控制台中会积累大量的变量和输出，这可能会使得环境变得混乱，影响我们的开发效率。为了解决这个问题，IPython 提供了一个非常有…...

编程日记 2026/2/22 4:36:22

DeepSeek-R1论文阅读及本地调用

前言 DeepSeek已经火了一段时间了，对于这项“国运级”的技术成果，即便研究的不是这个方向，也不免好奇前来看看。本文将先解析一下DeepSeek-R1这篇论文，再对DeepSeek的本地部署使用进行研究配置。论文标题：DeepSeek-…...

编程日记 2026/4/9 12:28:33

自然语言处理:第九十二章 chatBI 经验(转载)

本人项目地址大全：Victor94-king/NLP__ManVictor: CSDN of ManVictor 原文连接: 一文分享 ChatBI 实践经验写在前面: 笔者更新不易，希望走过路过点个关注和赞，笔芯!!! 写在前面: 笔者更新不易，希望走过路过点个关注和赞&#x…...

编程日记 2026/4/9 6:46:26

体验用ai做了个python小游戏

体验用ai做了个python小游戏写在前面使用的工具2.增加功能1.要求增加视频作为背景。2.我让增加了一个欢迎页面。3.我发现中文显示有问题。4.我提出了背景修改意见，欢迎页面和结束页面背景是视频，游戏页面背景是静态图片。5.提出增加更多游戏元素。总结…...

编程日记 2026/4/7 6:26:32

sql server 从库创建的用户名登录后访问提示数据库无权限

在主副本库创建登录名并且用户映射赋权指定的数据库权限，副副本库也创建登录名，主副本有权限访问数据库的权限，但是副副本没有权限访问数据库。解决方案： 检查数据库用户是否映射到登录名如果数据库用户已存在，但…...

编程日记 2025/12/25 3:22:01

懒人精灵本地离线卡密验证系统教程(不联网、安全稳定、省钱、永久免费、无任何限制)

1.合集懒人精灵本地离线卡密验证系统教程(不联网、安全稳定、省钱、永久免费、无任何限制)：https://www.bilibili.com/video/BV1M6rdYEEog/ 备注： 1.本地离线卡密采用最安全的非对称加解密技术，设备id采用最安全多重混合加密不可逆技术生成&…...

编程日记 2026/4/11 5:19:32

Git LFS介绍（Large File Storage）大文件扩展，将大文件存储在外部存储，仓库中只记录文件的元数据（大文件的指针，类似一个小的占位符文件）

文章目录 LFS的功能？如何使用LFS？将大文件存储在外部系统是什么意思？具体是如何运作的？为什么要这样做？ 对开发者的影响？1. **性能和效率**2. **协作体验**3. **版本管理差异**4. **额外的工具和配置** LFS…...

编程日记 2025/12/5 2:44:55

让我们一起走向未来

目录

一、前后端分离

原理

优点

缺点

代码举例（前后端分离）：

二、不分离（传统架构）

原理

优点

缺点

代码举例（不分离）：

三、总结

相关文章：