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

前后端对接

news 来源：原创 2025/9/17 4:19:55

前端与后端的对接主要通过接口进行数据交互，具体流程和方式如下：

1. 明确需求与接口定义

前后端协商：确定需要哪些接口、接口的功能、请求参数和返回格式。
接口文档：使用工具（如 Swagger、Postman、Apifox）编写接口文档，明确以下内容：
- 请求方法（GET、POST、PUT、DELETE 等）
- 请求 URL
- 请求参数（Query、Body、Header 等）
- 返回数据格式（通常是 JSON）
- 错误码和错误信息

2. 前后端开发

前端：根据接口文档，使用 HTTP 请求库（如 fetch、axios）调用接口，获取数据并渲染页面。
后端：根据接口文档实现接口逻辑，处理数据并返回结果。

3. 接口调用方式

前端通过 HTTP 请求与后端交互，常见的请求方式包括：

（1）GET 请求（获取数据）

用于从后端获取数据。

示例：

fetch('https://api.example.com/data?id=123').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

（2）POST 请求（提交数据）

用于向后端提交数据。

示例：

fetch('https://api.example.com/submit', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ name: 'John', age: 30 })
}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

（3）PUT 请求（更新数据）

用于更新后端的数据。

示例：

fetch('https://api.example.com/update/123', {method: 'PUT',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ name: 'Jane', age: 25 })
}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

（4）DELETE 请求（删除数据）

用于删除后端的数据。

示例：

fetch('https://api.example.com/delete/123', {method: 'DELETE'
}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

4. 数据格式

请求数据格式：
- application/json：JSON 格式（常用）。
- multipart/form-data：文件上传。
- application/x-www-form-urlencoded：表单提交。

返回数据格式：

通常是 JSON 格式，例如：

{"code": 200,"message": "Success","data": {"id": 1,"name": "John"}
}

5. 跨域问题

问题：前端和后端在不同域名或端口时，浏览器会阻止跨域请求。
解决方案：
- CORS：后端设置 Access-Control-Allow-Origin 头部。
- 代理服务器：前端通过代理服务器转发请求（如使用 webpack-dev-server 或 Nginx）。
- JSONP：仅适用于 GET 请求（不推荐）。

6. 认证与授权

JWT（JSON Web Token）：
- 用户登录后，后端返回一个 Token，前端将其存储在本地（如 localStorage），并在每次请求时通过 Authorization 头部发送。
- 示例：
```
fetch('https://api.example.com/protected', {method: 'GET',headers: { 'Authorization': 'Bearer ' + token }
});
```
OAuth 2.0：适用于第三方登录（如 Google、GitHub）。

7. 错误处理

HTTP 状态码：
- 200：请求成功。
- 400：请求参数错误。
- 401：未授权。
- 404：资源未找到。
- 500：服务器内部错误。
自定义错误信息：
- 后端返回 JSON 格式的错误信息，例如：
```
{"code": 400,"message": "Invalid input"
}
```

8. 实时通信

WebSocket：

用于实时双向通信（如聊天室、实时通知）。

示例：

const socket = new WebSocket('wss://api.example.com/socket');
socket.onmessage = function(event) {console.log('Received:', event.data);
};
socket.send('Hello Server');

9. 文件上传与下载

文件上传：

使用 multipart/form-data 格式上传文件。

示例：

const formData = new FormData();
formData.append('file', fileInput.files[0]);
fetch('https://api.example.com/upload', {method: 'POST',body: formData
});

文件下载：
- 后端返回文件 URL，前端通过 <a> 标签或编程方式下载。

10. 联调与测试

联调：前后端开发完成后，进行接口联调，确保数据交互正常。
测试工具：
- Postman：手动测试接口。
- Mock 数据：前端使用 Mock 数据模拟后端接口。
- 自动化测试：使用 Jest、Cypress 等工具进行测试。

总结

前端与后端的对接主要依赖接口，通过 HTTP 请求（如 GET、POST）进行数据交互。关键点包括：

清晰的接口文档。
统一的请求和返回格式（通常是 JSON）。
处理跨域、认证、错误等问题。
使用工具进行联调和测试。

通过良好的协作和规范，可以确保前后端高效对接。

前后端对接

前端与后端的对接主要通过接口进行数据交互，具体流程和方式如下： 1. 明确需求与接口定义前后端协商：确定需要哪些接口、接口的功能、请求参数和返回格式。接口文档：使用工具（如 Swagger、Postman、Apifox&#xff…...

编程日记 2025/9/17 4:19:55

深入浅出 SQLSugar：快速掌握高效 .NET ORM 框架

SQLSugar 是一个高效、易用的 .NET ORM 框架，支持多种数据库（如 SQL Server、MySQL、PostgreSQL 等）。它提供了丰富的功能，包括 CRUD 操作、事务管理、动态表名、多表联查等，开发者可以通过简单的链式操作实现复杂的数…...

编程日记 2025/9/15 13:45:06

计算机专业知识【深入理解子网中的特殊地址：为何 192.168.0.1 和 192.168.0.255 不能随意分配】

在计算机网络的世界里，IP 地址是设备进行通信的关键标识。对于常见的子网，如 192.168.0.0/24，我们可能会疑惑为何某些地址不能分配给主机使用。接下来，我们就以 192.168.0.0/24 为例，详细解释为何 192.168.0.1 和 192.…...

编程日记 2025/9/15 14:55:00

网络安全与措施

🍅 点击文末小卡片 ，免费获取网络安全全套资料，资料在手，涨薪更快 # 网络安全问题概述 1) 数据安全访问（授权访问）；存储（容灾、备份或异地备份等） 2) 应用程序不能…...

编程日记 2025/9/11 19:54:08

复刻Dummy机械臂保姆教程

一直想复刻稚晖君的Dummy机械臂，24年11月底终于开始行动，上网学习、材料准备、组装调试前后耗时1个多月，终于在春节前顺利完工，正好用它给大家拜个年。很多同学在咨询细节，这里就整理一份保姆式教程，其中学…...

编程日记 2025/9/14 12:15:35

|网络安全|网络安全学习方法

1、先网络后安全很多初学者还没搞定网络看懂网络拓扑，就急着研究防火墙或VPN，其实这样就不清楚整个网络架构是如何安全演进的。正确的流程是：先通过网络协议和拓扑设计的学习，能独立搭建一个企业网/校园网，再引入局域…...

编程日记 2025/9/10 9:19:17

内外网隔离文件传输解决方案｜系统与钉钉集成+等保合规，安全提升70%

一、背景与痛点在内外网隔离的企业网络环境中，员工与外部协作伙伴（如钉钉用户）的文件传输面临以下挑战： 1. **安全性风险**：内外网直连可能导致病毒传播、数据泄露。 2. **操作繁琐**：传统方式需频繁切…...

编程日记 2025/9/14 18:17:57

EasyRTC：轻量化SDK赋能嵌入式设备，开启智能硬件音视频通讯新篇章

在智能硬件与物联网飞速发展的今天，嵌入式设备的音视频通讯能力正变得愈发重要。然而，受限于硬件资源，尤其是Flash存储空间的不足，传统音视频通讯方案往往难以在嵌入式设备上实现高效集成。EasyRTC凭借其轻量级SDK和先进的技术架构…...

编程日记 2025/9/14 8:21:40

如何使用3D高斯分布进行环境建模

使用3D高斯分布来实现建模，主要是通过高斯分布的概率特性来描述空间中每个点的几何位置和不确定性。具体来说，3D高斯分布被用来表示点云数据中的每一个点或体素（voxel）的空间分布和不确定性，而不是单纯地存储每个点的坐…...

编程日记 2025/9/14 1:10:39

Java 大视界 -- 总结与展望：Java 大数据领域的新征程与无限可能（96）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/9/11 11:01:15

从零开始：VirtualBox安装Ubuntu 24.04.1 LTS

博客系列：Ubuntu虚拟机搭建与Python开发环境配置全攻略第一篇：从零开始：VirtualBox安装Ubuntu 24.04.1 LTS（当前）第二篇：解决VirtualBox卡顿问题：配置优化和常见错误排查第三篇：轻…...

编程日记 2025/9/16 4:00:54

使用大语言模型（Deepseek）构建一个基于 SQL 数据的问答系统

GitHub代码仓库架构从高层次来看，这些系统的步骤如下： 将问题转换为SQL查询：模型将用户输入转换为SQL查询。执行SQL查询：执行查询。回答问题：模型根据查询结果响应用户输入。样本数据下载样本数据&#xf…...

编程日记 2025/8/16 16:54:57

记录此刻：历时两月，初步实现基于FPGA的NVMe SSD固态硬盘存储控制器设计！

背景为满足实验室横向项目需求，在2024年12月中下旬导师提出基于FPGA的NVMe SSD控制器研发项目。项目核心目标为：通过PCIe 3.0 x4接口实现单盘3000MB/s的持续读取速率。实现过程调研花了半个月的时间查阅了一些使用FPGA实现NVME SSD控制器的论文、…...

编程日记 2025/9/10 22:00:19

【mysql】核心参数，SHOW VARIABLES

核心参数分类解析 SET GLOBAL slow_query_log = ON; 修改参数设置一、核心参数分类解析 1. 连接和线程配置 max_connections (200)：允许的最大并发连接数，超过会拒绝新连接。 wait_timeout (28800秒)：非交互式连接的空闲超时时间（默认8小时）。 interactive_timeout (…...

编程日记 2025/9/14 9:10:59

jdk: Java Archive Downloads - Java SE 17.0.12 and earlier CentOS安装JDK17教程（完整版） - 秦胜飞 - 博客园 sudo yum update wget https://download.oracle.com/java/17/archive/jdk-17.0.3.1_linux-x64_bin.rpm yum install ./jdk-17.0.3.1_linux…...

编程日记 2025/9/9 3:28:36

【OS安装与使用】part5-ubuntu22.04基于conda安装pytorch+tensorflow

文章目录一、待解决问题1.1 问题描述1.2 解决方法二、方法详述2.1 必要说明2.2 应用步骤2.2.1 明确pytorch安装依赖2.2.2 conda创建虚拟环境2.2.3 安装pytorch2.2.4 验证pytorch安装2.2.5 安装Tensorflow2.2.6 验证Tensorflow安装三、疑问四、总结一、待解决问题 1.1 问题…...

编程日记 2025/9/16 11:56:20

SVM 支持向量机

Owner: 潘达斯奈基 #数据科学/机器学习/SVM 一支持向量机简介支持向量机（Support Vector Machine， SVM）是一个二元分类算法，是对感知器算法模型的一种拓展，现在的SVM算法支持线性分类和非线性分类应用&#xff0c…...

编程日记 2025/9/14 4:17:23

第1章大型互联网公司的基础架构——1.9 LSM Tree

**LSM Tree（Log-Structured Merge Tree）是一种对高并发写数据非常友好的键值存储模型，同时兼顾了查询效率。**LSMTree是我们下面将要介绍的NoSQL数据库所依赖的核心数据结构，例如BigTable.、HBase、 Cassandra、TiDB 等。 1.9.1 …...

编程日记 2025/9/15 11:57:48

053 性能压测单机锁 setnx

文章目录性能压测-压力测试索引thymeleafnginx减少数据库查询（代码有bug）缓存安全单机锁（防止缓存击穿）setnx pom.xml 性能压测-压力测试 1 响应时间（Response Time: RT）：响应时间指用户从客…...

编程日记 2025/9/14 16:00:02

眼见不一定为实之MySQL中的不可见字符

目录前言一、问题的由来 1、需求背景 2、数据表结构二、定位问题 1、初步的问题 2、编码是否有问题 3、依然回到字符本身三、深入字符本身 1、回归本质 2、数据库解决之道 3、代码层解决四、总结前言在开始今天的博客内容之前，正在看博客的您先…...

编程日记 2025/9/14 15:33:24

【Java 面试八股文】JVM 虚拟机篇

JVM 虚拟机篇 1. JVM组成1.1 JVM由那些部分组成，运行流程是什么？1.2 什么是程序计数器？1.3 你能给我详细的介绍Java堆吗?1.4 Java 虚拟机栈1.4.1 Java Virtual machine Stacks (java 虚拟机栈)1.4.2 栈和堆的区别1.4.3 垃圾回收是否涉及栈内…...

编程日记 2025/9/14 22:31:17

达梦数据库学习笔记@1

目录达梦数据库学习笔记一、表空间管理（一）默认表空间（二）相关数据字典（三）表空间操作（四）临时表空间管理二、重做日志管理（一）系统视图（二&…...

编程日记 2025/9/15 18:03:43

条款23：宁以non-member、non-friend替换member函数

1.使用场景举例网络浏览器类当然这一功能也可以由一个non-menber函数（更好的封装，本条款的核心立意）提供： 面向对象守则要求数据应该尽可能的被封装，然而与直观相反地，member函数clearEverything带来的封…...

编程日记 2025/9/14 3:35:54

代码审计初探

学会了基础的代码审计后，就该提高一下了，学一下一些框架的php代码审计先从一些小众的、已知存在漏洞的cms入手 phpems php的一款开源考试系统源码下载 https://down.chinaz.com/soft/34597.htm 环境部署 windows审计，把相关文件放到phps…...

编程日记 2025/9/15 20:54:15

2025前端框架最新组件解析与实战技巧：Vue与React的革新之路

作者：飞天大河豚引言 2025年的前端开发领域，Vue与React依然是开发者最青睐的框架。随着Vue 3的全面普及和React 18的持续优化，两大框架在组件化开发、性能优化、工程化支持等方面均有显著突破。本文将从最新组件特性、使用场景和编码技巧三…...

编程日记 2025/9/13 17:23:57

Eclipse自动排版快捷键“按了没有用”的解决办法

快捷键按了没有用，通常是因为该快捷键方式被其他软件占用了，即别的软件也设置了这个快捷键，导致你按了之后电脑不知道该响应哪个软件。解决办法：1.将当前软件的这个快捷键改了；2.找到占用的那个软件，把那…...

编程日记 2025/9/16 2:17:29

小型字符级语言模型的改进方向和策略

小型字符级语言模型的改进方向和策略一、回顾小型字符级语言模型的处理流程前文我们已经从零开始构建了一个小型字符级语言模型，那么如何改进和完善我们的模型呢？有哪些改进的方向？我们先回顾一下模型的流程：图1 小型字符级语言模型的处理流程（1）核心模块交互过程：…...

编程日记 2025/9/16 2:17:32

请简述一下Prefab（预制体）的本质是什么？

在 Unity 中，Prefab（预制体）是一种非常重要的资产类型。 Prefab 本质上是一个可重复使用（开发者可以在场景中多次实例化同一个预制体）的游戏对象模板（预制体就像一个模板，对预制体本身的修改会…...

编程日记 2025/9/13 17:29:47

【开源项目】分布式文本多语言翻译存储平台

分布式文本多语言翻译存储平台地址： Gitee：https://gitee.com/dreamPointer/zza-translation/blob/master/README.md 一、提供服务分布式文本翻译服务，长文本翻译支持流式回调（todo）分布式文本多语言翻译结果存储服…...

编程日记 2025/9/15 17:56:18

使用GPU训练模型

1.说明本地训练模型可以用CPU和GPU，但是GPU的性能比CPU要好得多，所以如果有独立显卡的，尽量还是用GPU来训练模型。使用GPU需要安装Cuda和Cudnn 2.安装Cuda 安装cuda之前，首先看一下显卡支持的cuda版本，在命…...

编程日记 2025/9/8 13:46:27

DPVS-3: 双臂负载均衡测试

测试拓扑双臂模式， 使用两个网卡，一个对外，一个对内。 Client host是物理机， RS host都是虚拟机。 LB host是物理机，两个CX5网卡分别在两个子网。配置文件用dpvs.conf.sample作为双臂配置文件，其中…...

编程日记 2025/9/9 13:43:55

Spring Security+JWT+Redis实现项目级前后端分离认证授权

1. 整体概述权限管理包括用户身份认证和授权两部分，简称认证授权。对于需要访问控制到资源，用户首先经过身份认证，认证通过后用户具有该资源的访问权限方可访问。 1.1 认证概述认证是确认用户身份的过程，确保用户是谁。 1.1.1 …...

编程日记 2025/9/11 10:20:23

马斯克宣布Grok语音模式正式上线：早期测试版本可能有一些问题

快科技2月23日消息，据报道，马斯克旗下xAI团队近期动作频频，继2月18日直播发布Grok最新版本Grok3后，马斯克又在社交平台X上宣布，Grok语音模式早期测试版现已在Grok应用程序上线，并对其表现给予了高度评价。 …...

编程日记 2025/9/12 8:47:07

P9631 [ICPC 2020 Nanjing R] Just Another Game of Stones Solution

Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1,a2,⋯,an)，有 m m m 个操作分两种： chmax ⁡ ( l , r , k ) \operatorname{chmax}(l,r,k) chmax(l,r,k)：对每个 i ∈ [ l , r ] i \in [l,r] i∈[l,…...

编程日记 2025/9/14 10:12:19

请求go构建缓存，go clean -cache

go clean -cache go 构建时会产生很多缓存， 一般是目录：/Users/xxx/Library/Caches/go-build 此目录README： This directory holds cached build artifacts from the Go build system. Run "go clean -cache" if the directory …...

编程日记 2025/9/9 0:09:58

安全面试4

文章目录给的源码是ThinkPHP框架的话，审计起来和没有使用框架的有什么不同，从流程上或者从关注的点上有什么不同框架代码审计的流程无框架代码审计的流程反序列的时候，unserialize()反序列一个字符串的时候，对象会有一些魔术方法…...

编程日记 2025/9/13 20:18:01

HTML之JavaScript DOM操作元素（1）

HTML之JavaScript DOM操作元素（1） 3.对元素进行操作1.操作元素的属性元素名.属性名 ""2.操作元素的样式元素.style.样式名 "" 样式名 "-" 要进行驼峰转换3.操作元素的文本元素名.innerText 只识别文本元素名…...

编程日记 2025/9/8 12:31:05

SpringBoot+Vue+微信小程序的猫咖小程序平台（程序+论文+讲解+安装+调试+售后）

感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，我会一一回复，希望帮助更多的人。系统介绍在当下这个高速发展的时代，网络科技正以令人惊叹的速度不断迭代更新。从 5G …...

编程日记 2025/9/14 21:20:10

【十一】Golang 指针

💢欢迎来到张胤尘的开源技术站 💥开源如江河，汇聚众志成。代码似星辰，照亮行征程。开源精神长，传承永不忘。携手共前行，未来更辉煌💥 文章目录指针指针定义指针初始化& 操作符new 函数初始…...

编程日记 2025/9/16 0:26:37

“conda”不是内部或外部命令，也不是可运行的程序或批处理文件

有的时候，我们发现在cmd黑框中输入conda时，cmd会显示“conda”不是内部或外部命令，也不是可运行的程序或批处理文件，那这时候该怎么解决呢？ Step01：我们找到Anconda的安装目录。然后找到里面的bin文件夹&am…...

编程日记 2025/9/8 0:29:29

通过LM Studio本地私有化部署DeepSeek-R1模型，无网络也能用

打开LM Studio官网https://lmstudio.ai/ 选择适合自己的操作系统，下载LM Studio安装包本地电脑安装成功后运行LM Studio，顶部文本框输入deepseek，点击搜索模型在搜索结果中选择7B参数模型， 如上图右侧提示“No result found”说…...

编程日记 2025/9/14 1:47:58

GPU和FPGA的区别

GPU（Graphics Processing Unit，图形处理器）和 FPGA（Field-Programmable Gate Array，现场可编程门阵列）不是同一种硬件。我的理解是，虽然都可以用于并行计算，但是GPU是纯计算的硬件…...

编程日记 2025/9/11 10:34:59

CMake管理依赖实战：多仓库的无缝集成

随着软件复杂度的增加，单个项目可能需要依赖多个外部库或模块。这些依赖项可能是来自不同的代码仓库，如ATest和BTest。为了实现高效的依赖管理，CMake提供了多种方式来处理这种多仓库的情况。下面我们将详细介绍几种常见的方法，并通…...

编程日记 2025/9/16 2:32:42

Windows系统第一次运行C语言程序，环境配置，软件安装等遇到的坑及解决方法

明确需要编辑器和编译器，并选择自己要用什么（我选的编辑器是VSCode：Visual Studio Code；编译器是gcc）下载VSCode并配置环境变量（这里没啥问题），安装C/C的拓展安装Cygwin，…...

编程日记 2025/9/11 4:06:01

2025最新版！Fiddler抓包实战：深度解析短视频评论采集技术

2025最新版！Fiddler抓包实战：深度解析短视频评论采集技术（脱敏） 声明： 本文仅供学习交流使用，请勿用于非法用途。导语： 短视频数据采集又有新突破！你是否好奇如何安全、高效地获…...

编程日记 2025/9/15 0:33:02

Linux信号

目录 1. 信号的概念搞定（输出结论，支撑我们的理解） 补充知识 2.信号的产生补充知识 3.信号的保存 4.阻塞信号 1. 信号其他相关常见概念 2. 在内核中的表示 3. sigset_t 4. 信号集操作函数 sigprocmask sigpending 5. 信号的…...

编程日记 2025/9/13 22:23:57

git,bash - 从一个远端git库只下载一个文件的方法

文章目录 git,bash - 从一个远端git库只下载一个文件的方法概述笔记写一个bash脚本来自动下载get_github_raw_file_from_url.shreanme_file.shfind_key_value.sh执行命令 END git,bash - 从一个远端git库只下载一个文件的方法概述 github上有很多大佬上传了电子书库&#xf…...

编程日记 2025/9/15 13:43:56