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

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

news 2026/2/9 14:11:50

让我们一起走向未来

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

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2026/2/6 5:38:46

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/2/1 19:26:16

Opencv中的addweighted函数

一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

如何理解 IP 数据报中的 TTL？

目录前言理解前言面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...

编程新知 2026/2/4 18:09:49

Mac下Android Studio扫描根目录卡死问题记录

环境信息操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...

编程新知 2026/2/6 1:00:00

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决问题背景在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...

编程新知 2026/2/9 4:25:05

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...

编程新知 2026/1/26 2:22:24

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/2/2 16:55:46

让我们一起走向未来

目录

一、前后端分离

原理

优点

缺点

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

二、不分离（传统架构）

原理

优点

缺点

代码举例（不分离）：

三、总结

相关文章：