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

Web 架构之前后端分离

news 来源：原创 2025/8/12 1:10:57

文章目录

- 思维导图
- 一、引言
- 二、前后端分离的概念
- - 代码示例（简单的前后端分离交互）
  - - 后端（使用 Python Flask 框架）
    - 前端（使用 JavaScript 和 jQuery）
- 三、前后端分离的优势
- - 3.1 提高开发效率
  - 3.2 代码可维护性增强
  - 3.3 支持多端开发
- 四、前后端分离的实现方式
- - 4.1 基于 RESTful API
  - 4.2 前后端独立部署
- 五、常见问题及解决办法
- - 5.1 跨域问题
  - 5.2 接口文档管理问题
- 六、总结

思维导图

graph LRclassDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px;classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;A([Web 架构之前后端分离]):::startendA --> B(概念):::processA --> C(优势):::processA --> D(实现方式):::processA --> E(常见问题及解决办法):::processA --> F(总结):::processB --> B1(定义):::processB --> B2(交互方式):::processC --> C1(开发效率):::processC --> C2(可维护性):::processC --> C3(多端支持):::processD --> D1(RESTful API):::processD --> D2(独立部署):::processE --> E1(跨域问题):::processE --> E2(接口文档管理):::processE1 --> E11(CORS):::processE1 --> E12(代理服务器):::processE2 --> E21(Swagger):::processE2 --> E22(Postman):::process

在这里插入图片描述

一、引言

在传统的 Web开发模式中，前端页面和后端逻辑紧密耦合在一起，这使得开发效率低下、维护成本高。随着互联网技术的不断发展，前后端分离的开发模式应运而生，它极大地提高了开发效率和代码的可维护性。本文将详细介绍前后端分离的相关知识，包括概念、优势、实现方式以及常见问题的解决办法。

二、前后端分离的概念

前后端分离是一种将 Web 应用的前端和后端开发过程分离开来的架构模式。前端负责处理用户界面和交互逻辑，而后端则专注于业务逻辑和数据处理。前后端通过接口进行通信，前端通过调用后端提供的 API 来获取数据并展示给用户。

代码示例（简单的前后端分离交互）

后端（使用 Python Flask 框架）

from flask import Flask, jsonify# 创建 Flask 应用实例
app = Flask(__name__)# 定义一个 API 接口，返回 JSON 数据
@app.route('/api/data', methods=['GET'])
def get_data():data = {"message": "Hello, this is data from the backend!","status": 200}return jsonify(data)if __name__ == '__main__':# 启动 Flask 应用，监听本地 5000 端口app.run(debug=True, port=5000)

注释：

Flask 是一个轻量级的 Python Web 框架，用于快速搭建 Web 应用。
@app.route('/api/data', methods=['GET']) 是一个装饰器，用于定义一个 API 接口，当客户端发送 GET 请求到 /api/data 时，会调用 get_data 函数。
jsonify 函数用于将 Python 字典转换为 JSON 格式的响应。

前端（使用 JavaScript 和 jQuery）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前后端分离示例</title><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><button id="fetch-data">获取数据</button><div id="result"></div><script>$(document).ready(function () {// 为按钮添加点击事件监听器$('#fetch-data').click(function () {// 发送 AJAX 请求到后端 API$.ajax({url: 'http://localhost:5000/api/data',method: 'GET',success: function (response) {// 请求成功时，将响应数据显示在页面上$('#result').text(response.message);},error: function (error) {// 请求失败时，显示错误信息$('#result').text('请求出错：' + error.statusText);}});});});</script>
</body></html>

注释：

$(document).ready() 函数用于在文档加载完成后执行代码。
$.ajax() 函数用于发送异步 HTTP 请求，通过 url 指定请求的地址，method 指定请求方法，success 和 error 分别是请求成功和失败时的回调函数。

三、前后端分离的优势

3.1 提高开发效率

前端和后端开发人员可以并行开发，互不干扰。前端人员可以专注于页面的设计和交互，而后端人员可以专注于业务逻辑的实现。

3.2 代码可维护性增强

前后端代码分离，使得代码结构更加清晰，易于维护和扩展。当需要修改前端页面或后端逻辑时，不会影响到对方的代码。

3.3 支持多端开发

前后端分离的架构可以方便地支持多种客户端，如 Web 端、移动端等。只需要前端根据不同的客户端进行适配，后端提供统一的 API 接口即可。

四、前后端分离的实现方式

4.1 基于 RESTful API

RESTful API 是一种基于 HTTP 协议的 API 设计风格，它使用 URL 和 HTTP 方法来表示资源和操作。前端通过发送 HTTP 请求到后端的 RESTful API 来获取数据。

4.2 前后端独立部署

前端和后端可以独立部署到不同的服务器上，前端可以使用静态文件服务器（如 Nginx）来部署，后端可以使用应用服务器（如 Tomcat、Node.js 等）来部署。

五、常见问题及解决办法

5.1 跨域问题

由于浏览器的同源策略，当前端和后端部署在不同的域名或端口上时，会出现跨域问题。

解决办法：

后端设置 CORS（跨域资源共享）：在后端服务器中设置允许跨域访问的域名和请求方法。例如，在 Flask 中可以使用 flask_cors 扩展来实现：

from flask import Flask, jsonify
from flask_cors import CORSapp = Flask(__name__)
# 允许所有域名跨域访问
CORS(app)@app.route('/api/data', methods=['GET'])
def get_data():data = {"message": "Hello, this is data from the backend!","status": 200}return jsonify(data)if __name__ == '__main__':app.run(debug=True, port=5000)

使用代理服务器：在开发环境中，可以使用 Webpack 等工具的代理服务器来解决跨域问题。在生产环境中，可以使用 Nginx 作为反向代理服务器。

5.2 接口文档管理问题

随着项目的不断发展，接口数量会越来越多，接口文档的管理变得尤为重要。

解决办法：

使用 Swagger：Swagger 是一个开源的 API 文档生成工具，它可以根据后端代码自动生成接口文档，并提供在线测试功能。
使用 Postman：Postman 是一个强大的 API 测试工具，它可以方便地管理接口文档和进行接口测试。

六、总结

前后端分离的开发模式是 Web
开发的趋势，它可以提高开发效率、增强代码的可维护性和支持多端开发。在实际开发中，我们需要注意解决跨域问题和接口文档管理问题，以确保项目的顺利进行。

Web 架构之前后端分离

文章目录思维导图一、引言二、前后端分离的概念代码示例（简单的前后端分离交互）后端（使用 Python Flask 框架）前端（使用 JavaScript 和 jQuery） 三、前后端分离的优势3.1 提高开发效率3.2 代码可维护性增强…...

编程日记 2025/8/12 1:10:57

Pycharm安装后打开提示：此应用无法在你的电脑上运行，若要找到合适于你的电脑的版本，请咨询发布者

问题描述今天下载安装好社区版的pycharm之后双击运行出现提示：此应用无法在你的电脑上运行，若要找到合适于你的电脑的版本，请咨询发布者。首先我们需要查看Windows如何查看系统是ARM64还是X64架构在 cmd 命令窗中输入 systeminfo 即可&a…...

编程日记 2025/8/5 19:06:32

正则表达式实战指南：原理、口诀与高频场景案例

正则表达式实战指南：原理、口诀与高频场景案例正则表达式（Regular Expression）是程序员处理文本的瑞士军刀，被广泛应用于数据验证、日志分析、爬虫开发等领域。本文将从原理讲解、口诀速查到高频实战案例，带你系统掌…...

编程日记 2025/8/12 1:04:52

Spark缓存--persist方法

1. 功能本质 persist：这是一个通用的持久化方法，能够指定多种不同的存储级别。存储级别决定了数据的存储位置（如内存、磁盘）以及存储形式（如是否序列化）。 2. 存储级别指定 persist：可以通过传入…...

编程日记 2025/8/5 19:06:28

【LeetCode 热题 100】二叉树系列

📁 104. 二叉树的最大深度深度就是树的高度，即只要左右子树其中有一个不为空，就继续往下递归，知道节点为空，向上返回。 int maxDepth(TreeNode* root) {if(root nullptr)return 0;return max(maxDepth(root->lef…...

编程日记 2025/8/5 19:06:26

CTF之常见的文件头和文件尾

1、图片 JPEG 文件头：FF D8 FF 文件尾：FF D9TGA 未压缩的前4字节 00 00 02 00 RLE压缩的前5字节 00 00 10 00 00PNG 文件头：89 50 4E 47 0D 0A 1A 0A 文件尾：AE 42 60 82GIF 文件头：47 49 46 38 39(37) 61 文件尾&…...

编程日记 2025/8/11 4:06:30

软件设计师教程——第一章计算机系统知识（上）

前言在竞争激烈的就业市场中，证书是大学生求职的重要加分项。中级软件设计师证书专业性强、认可度高，是计算机相关专业学生考证的热门选择，既能检验专业知识，又有助于职业发展。本教程将聚焦核心重点，以点带面构建知…...

编程日记 2025/8/12 1:07:01

KRaft (Kafka 4.0) 集群配置指南（超简单，脱离 ZooKeeper 集群）还包含了简化测试指令的脚本！！！

docker-compose方式部署kafka集群 Kafka 4.0 引入了 KRaft 模式（Kafka Raft Metadata Mode），它使 Kafka 集群不再依赖 ZooKeeper 进行元数据管理。KRaft 模式简化了 Kafka 部署和管理，不需要额外配置 ZooKeeper 服务，…...

编程日记 2025/8/5 19:06:20

安全月演讲比赛活动讲话稿

同志们：在公司上下万众一心创建“无违章企业”的大形势下，由公司工会、团委举办的“安全与我”演讲比赛，经过紧张激烈的预赛，今天进行正式决赛。从预赛的38名选手中脱颖而出的10名选手，今天将再次登台献技&#xff0c…...

编程日记 2025/8/12 1:07:02

实时操作系统：航空电子系统的安全基石还是创新枷锁？

引言：航空电子系统的进化论在航空电子技术的漫长发展历程中，飞行器控制系统实现从机械仪表到数字计算机的跨越，这一进步具有深远意义。现代战机以超过 2 马赫的速度突破音障，无人机群在复杂电磁环境下完成自主编队，这…...

编程日记 2025/8/5 19:06:16

windows 部署 Kafka3.x KRaft 模式不依赖 ZooKeeper

1.下载 https://archive.apache.org/dist/kafka/3.9.0/kafka_2.12-3.9.0.tgz2.配置使用 KRaft 模式 2.1 修改 Kafka 的配置文件 cd D:\data\bigdata\kafka_2.12-3.9.0\config\kraft 修改 server.properties # 设置 Kafka 数据日志存储目录 log.dirsD:\\data\\bigdata\\kaf…...

编程日记 2025/8/11 21:45:22

SEMI E40-0200 STANDARD FOR PROCESSING MANAGEMENT(加工管理标准)-(一)

1 目的物料(例如晶圆)加工在设备中的自动化管理与控制是实现工厂自动化的关键要素。本标准针对半导体制造环境中与设备内部物料处理相关的通信需求进行了规范。本标准规定了在加工单元接收到的指定材料所应适用的加工方法(例如Etch腔室需要Run哪支Recipe)。它阐述了物料加工的…...

编程日记 2025/8/5 19:06:12

Web 架构之高可用基础

文章目录引言一、无状态服务设计（Session 托管至 Redis 集群）1. 概念与原理2. 代码示例（Python Flask 应用）3. 常见问题及解决办法二、数据库读写分离（MySQL 主从 ProxySQL 流量分发）1. 概念与原理2. 配…...

编程日记 2025/8/6 19:27:51

巧用python之--模仿PLC(PLC模拟器)

工作中用到了VM(VisionMaster4.3)有时候需要和PLC打交道,但是PLC毕竟是别人的,不方便修改别人的程序,这时候需要一个灵活的PLC模拟器是多么好呀! 先说背景: PLC型号汇川Easy521: Modbus TCP 192.168.1.10:502 在汇川Easy521中Modbus保持寄存器D寄存器 ,在modbus协议中 0-4区…...

编程日记 2025/8/5 19:06:07

Nginx +Nginx-http-flv-module 推流拉流

这两天为了利用云服务器实现 Nginx 进行OBS Rtmp推流，Flv拉流时发生了诸多情况，记录实现过程。环境 OS：阿里云CentOS 7.9 64位Nginx：nginx-1.28.0Nginx-http-flv-module：nginx-http-flv-module-1.2.12 安装Nginx编…...

编程日记 2025/8/5 19:06:05

DRF+Vue项目线上部署：腾讯云+Centos7.6

1.服务器选购和配置 1.1.服务器选购 1.2.防火墙/安全组配置 80是HTTP的端口，443是HTTPS的端口，22是远程连接的端口，3306是mysql的端口。 1.3.远程连接软件（tabby）配置下载：https://github.com/Eugeny/ta…...

编程日记 2025/8/5 19:06:01

大疆无人机（全系列，包括mini）拉流至电脑，实现直播

参考视频【保姆级教程】大疆无人机rtmp推流直播教程_哔哩哔哩_bilibili VLC使用教程： VLC工具使用指南-CSDN博客目录实现效果： 电脑端编辑编辑无人机端 VLC拉流分析实现效果： (实验机型：大疆mini4kRC-N2遥控器、大…...

编程日记 2025/8/5 19:05:59

Spring普通配置类 vs 自动配置类-笔记

1.简要版 Configuration和Bean，既可以用于普通配置类，也可以用于自动配置类。二者的区别和联系是什么呢？ 区别： Configuration和Bean是Spring框架本身的注解，用于定义配置类和生成Bean。而自动配置通常是Spring Boo…...

编程日记 2025/8/5 19:05:55

解决Ceph 14.2.22 Nautilus版本监视器慢操作问题的实践指南

解决Ceph Nautilus版本监视器慢操作问题的实践指南问题背景问题现象问题分析1. 确认监视器状态2. 检查慢操作详情3. 深入分析操作状态问题原因解决方案立即解决方法总结在生产环境中执行任何操作前，请确保已备份重要数据，并在测试环境中验证解决方案…...

编程日记 2025/8/5 19:05:53

Go使用Gin写一个对MySQL的增删改查服务

首先用SQL创建一个包含id、name属性的users表 create table users (id int auto_incrementprimary key,name varchar(255) null );查询所有用户信息： func queryData(db *sql.DB, w http.ResponseWriter) {rows, err : db.Query("SELECT * FROM users"…...

编程日记 2025/8/11 0:54:33

数字孪生医疗：构建患者特异性数字孪生体路径探析

引言数字孪生技术正逐渐成为医疗健康领域的一场革命性力量，它通过创建人体器官和系统的数字复制品，为疾病预测、诊断和个性化治疗开辟了前所未有的可能性。在心血管疾病领域，数字孪生技术的应用尤为引人注目，特别是对于扩张型心肌病（Dilated Cardiomyopathy，DCM）这一常…...

编程日记 2025/8/5 19:05:48

rust程序静态编译的两种方法总结

1. 概述经过我的探索，总结了两种rust程序静态编译的方法,理论上两种方法都适用于windows、mac os和linux(mac os未验证)，实测方法一性能比方法二好，现总结如下，希望能够帮到你. 2.方法一 2.1 添加配置文件在项目的同级文件夹下新…...

编程日记 2025/6/29 9:00:15

threejs 添加css3d标签 vue3

如图所示，给收费站标注标签。步骤如下： 一、引入 import {CSS3DRenderer,CSS3DObject, } from "three/examples/jsm/renderers/CSS3DRenderer"; 二、 //一、申明css3渲染器 const label3DRenderer ref()//二、创建css3d渲染器--将渲染器加…...

编程日记 2025/8/5 19:05:04

【git】git fsmonitor

git fsmonitor 是 Git 提供的一个特性，用于提高 Git 的性能，尤其是在处理文件状态检查（git status）时。它通过文件系统监控服务（如 Windows 上的 FileSystemWatcher 或 Linux 上的 inotify）来跟踪文件系统的…...

编程日记 2025/8/5 19:05:02

开源照片管理系统PhotoPrism的容器化部署与远程管理配置

文章目录前言1.关于PhotoPrism2.本地部署PhotoPrism3.PhotoPrism简单使用4. 安装内网穿透5.配置PhotoPrism公网地址6. 配置固定公网地址前言你是不是用手机拍照片的时候无所谓拍了多少张，但在整理的时候却要占用超多时间？别怕，今天给大家…...

编程日记 2025/8/5 19:05:00

macOS Python 环境配置指南

1. 检查现有 Python 环境 python3 --version # 检查 Python 3 版本 pip3 --version # 检查 pip 版本 2. 安装 pyenv（Python 版本管理工具） # 使用 Homebrew 安装 pyenvbrew install pyenv# 配置 pyenv 环境变量（添加到 ~/.zshrc&#…...

编程日记 2025/8/5 19:04:58

如何阅读、学习 Git 核心源代码？

学习 Git 核心源代码是一个深入理解版本控制系统底层原理的绝佳方式。以下是分阶段的系统性建议，结合了实践经验和学习路径设计： 一、前置知识储备 C语言进阶重点掌握指针操作（尤其是二级指针和函数指针）结构体嵌套与内存对齐…...

编程日记 2025/8/11 13:32:17

学习黑客 MAC 地址深入了解

在江湖之中，每位少侠既有“门派”加身，也需持有“令牌”通行。MAC地址便是我被师门铁订在骨血里的“先天武功心法”，铸于出厂之时，终身不变，只有破阵高手才能暗度陈仓才能改写；而IP地址则是我行走江湖的“后…...

编程日记 2025/8/9 14:18:55

长事务：数据库中的“隐形炸弹“——金仓数据库运维避坑指南

引言：凌晨三点的告警 "张工！生产库又告警了！"凌晨三点的电话铃声总是格外刺耳。运维团队发现数据库频繁进入单用户模式，排查发现某核心表的年龄值（Age）已突破20亿大关。经过一夜奋战&#xff0c…...

编程日记 2025/8/5 19:04:51

WTK6900C-48L：离线语音芯片重构玩具DNA，从“按键操控”到“声控陪伴”的交互跃迁

一：开发背景随着消费升级和AI技术进步，传统玩具的机械式互动已难以满足市场需求。语音控制芯片的引入使玩具实现了从被动玩耍到智能交互的跨越式发展。通过集成高性价比的语音识别芯片，现代智能玩具不仅能精准响应儿童指令，还能实…...

编程日记 2025/8/8 14:09:22

一文读懂Python之requests模块（36）

一、requests模块简介 requests模块是python中原生的一款基于网络请求的模块，功能强大，简单便捷且高效 ，该模块可以模拟浏览器发送请求，主要包括指定url、发起请求、获取响应数据和持久化存储，包括 GET、POST、PUT、…...

编程日记 2025/8/5 15:49:19

Java 异常

Java 异常的体系结构 java.lang.Throwable ├── Error（严重错误，程序无法处理） │ ├── OutOfMemoryError │ ├── StackOverflowError │ └── ... └── Exception（程序可以处理的异常）├── Check…...

编程日记 2025/8/11 11:15:15

智能外呼机器人的核心优势

随着人工智能技术的快速发展，智能外呼机器人已成为企业降本增效的重要工具。其通过整合语音识别（ASR）、自然语言处理（NLP）、语音合成（TTS）等技术，不仅替代了大量重复性人工劳动&…...

编程日记 2025/8/5 15:49:15

n8n - 开放灵活的智能自动化工作流平台

n8n - 开放灵活的智能自动化工作流平台在当今数字化转型的大潮中，自动化已成为众多企业提升效率、优化流程的关键手段。而在众多自动化工具中，n8n以其开放灵活且强大的功能脱颖而出，成为技术团队的可靠选择。今天，我们将深入了解n8n这个开源自动化工作流平台，探索其广泛…...

编程日记 2025/8/11 0:01:33

window 显示驱动开发-处理内存段(二)

KMD 不需要在其内存段中指定 GPU 可用的所有视频内存资源。但是，KMD 必须指定 VidMm 在系统上运行的所有进程中管理的所有内存资源。例如： 实现固定函数管道的顶点着色器微代码可以驻留在 GPU 地址空间中，但在 VidMm 管理的内存之外&#x…...

编程日记 2025/8/5 15:49:12

RSS 2025｜斯坦福提出「统一视频行动模型UVA」：实现机器人高精度动作推理

导读在机器人领域，让机器人像人类一样理解视觉信息并做出精准行动，一直是科研人员努力的方向。今天，我们要探讨的统一视频行动模型（Unified Video Action Model，UVA），就像给机器人装上了一个“…...

编程日记 2025/8/10 19:35:57

代码随想录算法训练营第60期第三十天打卡

大家好，今天我们要走进一个全新的章节，这一章叫做贪心算法，前面我们讲的是回溯算法，那究竟什么是贪心算法呢？我们一起走进今天的内容。第一部分贪心的理论基础其实大家看这个名字估计也会有一定了解，贪心…...

编程日记 2025/8/9 8:46:04

腾讯云：数字世界的“量子熔炉”与硅基文明引擎

一、算力拓扑学：重新定义空间的计算密度腾讯云的算力网络正在突破经典物理限制，其分布式架构通过“量子化”资源调度实现超维计算： 虚拟化跃迁：基于KVM的轻量级虚拟化技术，将单台物理服务器切割为百…...

编程日记 2025/8/5 15:49:06

Python Cookbook-7.7 通过 shelve 修改对象

任务你正在使用标准库模块shelve。你用shelve处理过的一些值是易变的对象(mutableobjects)，而且你需要修改这些对象。解决方案 shelve 模块提供了一种持久的字典——在强大的关系型数据库和简洁的 marshal、pickledbm 以及类似的文件格式之间，它有着…...

编程日记 2025/8/5 15:49:04

Baklib构建AI就绪知识管理体系

Baklib构建AI就绪知识体系在数字化转型加速的背景下，Baklib通过其AI就绪知识管理体系，为企业提供了从数据整合到智能应用的完整解决方案。该平台以知识中台为核心架构，依托自然语言处理与机器学习技术，对分散在企业文档系统、协…...

编程日记 2025/8/5 15:49:02

嵌入式开发学习日志Day16

一、指针函数函数的返回值为指针的函数； 注意：不能返回局部变量的地址； 可以返回静态变量的地址； 可以返回全局变量的地址； 1、动态内存分配 void *malloc(size_t size); //申请空间的函数 void free(*ptr); …...

编程日记 2025/8/5 15:49:00

SLAM文献之KernelGPA: A Globally Optimal Solution to Deformable SLAM in Closed-form

KernelGPA: A Globally Optimal Solution to Deformable SLAM in Closed-form 提出了一种在非刚性变形环境下求解 SLAM 问题的闭式全局最优解方法。下面是对其算法原理和核心推导过程的系统解析。一、算法背景与目标问题描述： 传统 SLAM 主要假设环境为刚性&am…...

编程日记 2025/8/5 19:04:47

C++之“继承”

继续开始关于C相关的内容。C作为面向对象的语言，有三大特性：封装，继承，多态。这篇文章我们开始学习：继承。一、继承的概念和定义 1. 继承的概念什么是继承呢？ 字面意思理解来看：继承就是…...

编程日记 2025/8/5 19:04:44

java集成telegram机器人

java集成telegram机器人最近项目需要集成telegram机器人，来实现消息推送功能，以此记录下。 1.创建telegram账号没有账号的可以去某宝上买一个，千万不要用自己的手机号86去注册，你懂得。 2. 打开BotFather对话创建机器人获取…...

编程日记 2025/8/7 9:26:26

从代码学习深度学习 - 单发多框检测（SSD）PyTorch版

文章目录前言工具函数数据处理工具 (`utils_for_data.py`)训练工具 (`utils_for_train.py`)检测相关工具 (`utils_for_detection.py`)可视化工具 (`utils_for_huitu.py`)模型类别预测层边界框预测层连接多尺度预测高和宽减半块基础网络块完整的模型训练模型读取数据集和初始化…...

编程日记 2025/8/5 19:04:40