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

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

news 2026/2/9 17:11:07

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[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…...

编程日记 2025/2/22 4:17:17

MobileSal:极其高效的RGB-D显著性物体检测模型

摘要问题一：什么叫做MobileSal？ MobileSal 是指一种用于移动设备上的显著性检测（Saliency Detection）方法，通常是针对在资源受限的环境（如智能手机）上运行的视觉模型。问题二：什…...

编程日记 2025/2/22 4:15:04

【个人总结】1. 开发基础工作三年的嵌入式常见知识点梳理及开发技术要点（欢迎指正、补充）

【个人总结】1. 开发基础工作三年的嵌入式常见知识点梳理及开发技术要点（欢迎指正、补充） 工作快三年以来分别进行了嵌入式MCU及外设开发、RTOS、传感器、文件系统及USB、Linux、GUI、通讯协议、毫米波雷达、少量的DSP和物联网开发。特此总结&#x…...

编程日记 2025/2/22 4:11:58

硬核技术组合！用 DeepSeek R1、Ollama、Docker、RAGFlow 打造专属本地知识库

文章目录一、引言二、安装Ollama部署DeepSeekR1三、安装Docker四、安装使用RAGFlow4.1 系统架构4.2 部署流程4.3 使用RAGFlow4.4 在RAGFlow中新增模型4.5 创建知识库4.6 创建私人助理使用RGA 一、引言本地部署DeepSeek R1 Ollama RAGFlow构建个人知识库，通过将…...

编程日记 2025/2/22 4:08:49

MySQL官网驱动下载(jar包驱动和ODBC驱动)【详细教程】

1.打开MySQL的官网，选择下载(Download) MySQL[这里是图片001]https://www.mysql.com/cn/ 2.往下划点击MySQL Community(GPL)Downloads 3.要下载MySQL的jar包的选择Connector/J 4.进入后，根据自己的需求选择相应的版本 5.下载完成后，进行解压…...

编程日记 2025/2/22 4:07:46

idea 2019.3常用插件

idea 2019.3常用插件文档 idea 2019.3常用插件idea 2023.3.7常用插件 idea 2019.3常用插件插件名称插件版本说明1AceJump3.5.9AceJump允许您快速将插入符号导航到编辑器中可见的任何位置。只需按“ctrl；”，键入一个字符，然后在Ace Jump…...

编程日记 2025/2/22 4:00:25

对CSS了解哪些？

CSS（Cascading Style Sheets，层叠样式表）是用来描述HTML文档外观和布局的语言。以下是对CSS的常见了解范围： 1. CSS 基础选择器：如通用选择器 (*)、类型选择器、类选择器 (.class)、ID选择器 (#id)、后代选择器、伪类…...

编程日记 2025/2/22 3:57:44

TikTok账户安全指南：如何取消两步验证？

TikTok账户安全指南：如何取消两步验证？ 在这个数字化的时代，保护我们的在线账户安全变得尤为重要。TikTok，作为全球流行的社交媒体平台，其账户安全更是不容忽视。两步验证作为一种增强账户安全性的措施，虽…...

编程日记 2025/2/22 3:53:20

从零到一：构建现代 React 应用的完整指南

1. create-react-app (CRA) 简介： create-react-app 是官方推荐的 React 项目脚手架工具，提供了一个开箱即用的开发环境，帮助开发者快速启动 React 应用。它会自动配置 Webpack、Babel、ESLint 等工具，让你专注于开发而不需要手动配置工具链。特点：零配置：CRA 自动配…...

编程日记 2025/2/22 3:50:58

【Python爬虫(26)】Python爬虫进阶：数据清洗与预处理的魔法秘籍

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取&#xff…...

编程日记 2025/2/22 3:41:36

机器学习数学基础：28.卡方检验

卡方检验教程一、引言在统计学的广阔领域中，卡方检验（Chi - Square Test）宛如一把锐利的手术刀，能够精准剖析数据背后隐藏的关系与模式。它主要用于两大核心任务：一是深入分析两个及两个以上分类变量之间错综复杂的…...

编程日记 2025/2/22 3:39:30

【工具插件类教学】实现运行时2D物体交互的利器Runtime2DTransformInteractor

目录编辑 1. 插件核心功能 1.1 基础变换操作 1.2 高级特性 2. 安装与配置 2.1 导入插件 2.2 配置控制器参数 2.3 为物体添加交互功能 3. 使用示例 3.1 基础操作演示 3.2 多选与批量操作 3.3 自定义光标与外观 4. 高级配置技巧 4.1 动态调整包围框控件尺寸 4.…...

编程日记 2025/2/22 3:34:51

回调处理器

文章目录什么是回调处理器回调处理器的工作流程回调处理器的使用自定义链组件中的回调内置回调处理器自定义回调处理器在编程领域中，回调是一个非常重要的概念。简而言之，回调是一种特殊的函数或方法，它可以被传递给另一个函数作为参数&am…...

编程日记 2025/2/22 3:30:32

Redis-03高级篇中-多级缓存：

说明： 分布式缓存和多级缓存的视频，与springcloud高级篇redis的一模一样。这里就不在重复学习了，如果后面用到关于redis的配置，直接到springcloud模块安装的redis中学习即可。多级缓存 0.学习目标 1.什么是多级缓存传统的缓…...

编程日记 2025/2/22 3:27:08

Spring Boot ShardingJDBC分库分表(草稿)

ShardingJDBC分库分表 1.Maven 引用 <dependency><groupId>org.apache.shardingsphere</groupId><artifactId>sharding-jdbc-spring-boot-starter</artifactId><version>4.1.1</version></dependency><dependency><…...

编程日记 2025/2/22 3:24:55

Jenkins 环境搭建---基于 Docker

前期准备提前安装jdk、maven、nodeJs（如果需要的话） 创建 jenkins 环境目录，用来当做挂载卷 /data/jenkins/ 一：拉取 Jenkins 镜像 docker pull jenkins/jenkins:lts 二：设置 Jenkins挂载目录 mkdir -p ~/jen…...

编程日记 2025/2/22 3:23:42

如何在自定义组件中使用v-model实现双向绑定

在 Vue 2 中，v-model 是双向数据绑定的语法糖，它默认将 value 作为 prop 传入组件，并通过监听 input 事件来更新父组件的数据。若要在自定义组件中实现 v-model 的双向绑定，需遵循以下步骤： 1. 基本实现：va…...

编程日记 2025/2/22 3:17:21

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_pool_t 类型

ngx_pool_t 定义在 src/core/ngx_core.h typedef struct ngx_pool_s ngx_pool_t; ngx_pool_s 定义在 src/core/ngx_palloc.h struct ngx_pool_s {ngx_pool_data_t d;size_t max;ngx_pool_t *current;ngx_chain_t *chain;ng…...

编程日记 2025/2/22 3:09:39

如何在 ubuntu 上使用 Clash 与 docker 开启代理拉起

如何在 ubuntu 上使用 Clash https://github.com/doreamon-design/clash/releases上面是clash 的地址 clash_2.0.24_linux_386.tar.gz 下载 386 的如果你的电脑是inter tar -xzvf clash_2.0.24_linux_386.tar.gz 启动 ./clash 然后会在电脑上生成一个config的文件 /home/xxx/…...

编程日记 2025/2/22 3:03:27

linux tcpdump抓包

参数说明: -i 指定网卡 -w 指定保存文件 -s0 完整抓包 -G 指定间隔时长(秒) -C 指定每个文件大小(M) 用法1: 指定端口输出到指定文件 tcpdump -i em3 -w 182910.pcap 用法2: 指定端口每10分钟输出到不同文件 tcpdump -i em3 -s0 -G 600 -w %Y_%m%d_%H%M_%S.pcap 用法3: 指…...

编程日记 2025/2/22 3:00:18

【力扣数据库知识手册笔记】索引

索引索引的优缺点优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...

编程新知 2026/1/25 4:36:37

YSYX学习记录（八）

C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...

编程新知 2026/1/24 14:31:01

2025盘古石杯决赛【手机取证】

前言第三届盘古石杯国际电子数据取证大赛决赛最后一题没有解出来，实在找不到，希望有大佬教一下我。还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字不要使用 Kotlin 的任何硬关键字作为方法的名称或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/8 0:33:04

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议，专门用于在数字音频设备之间传输数字音频数据。它由飞利浦（Philips）公司开发，以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2026/2/1 2:08:53

Oracle11g安装包

Oracle 11g安装包适用于windows系统，64位下载路径 oracle 11g 安装包...

编程新知 2025/9/13 16:14:04

Python 高效图像帧提取与视频编码：实战指南

Python 高效图像帧提取与视频编码：实战指南在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...

编程新知 2025/8/31 18:02:53

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性随着Vue3的稳定发布和Composition API的广泛采用，前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率，还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库（Naive UI、Element …...

编程新知 2026/2/6 13:40:23

对象回调初步研究

_OBJECT_TYPE结构分析在介绍什么是对象回调前，首先要熟悉下结构以我们上篇线程回调介绍过的导出的PsProcessType 结构为例，用_OBJECT_TYPE这个结构来解析它，0x80处就是今天要介绍的回调链表，但是先不着急，先把目光…...

编程新知 2026/1/26 18:44:47

STL 2迭代器

文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器？ 1.迭代器…...

编程新知 2025/10/2 23:42:13

让我们一起走向未来

目录

一、前后端分离

原理

优点

缺点

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

二、不分离（传统架构）

原理

优点

缺点

代码举例（不分离）：

三、总结

相关文章：