到底什么是前后端分离
目录
Web 应用的开发主要有两种模式:
前后端不分离
前后端分离
总结
Web 应用的开发主要有两种模式:
前后端不分离
前后端分离
理解它们的区别有助于我们进行对应产品的测试工作。
前后端不分离
在早期,Web 应用开发主要采用前后端不分离的方式,它是以后端直接渲染模板完成响应为主的一种开发模式。以前后端不分离方式开发的 Web 应用的架构图如下:

浏览器向服务器发起请求,服务器接收到请求后去数据库中获取数据,然后渲染 HTML 模板并返回渲染后的 HTML 数据,或者返回一个重定向。绝大部分工作都在后端进行处理,客户端(浏览器)只负责页面的展示和用户交互。
这种开发方式有如下特点:
1、一般一个应用只需要一个后台服务器
2、客户端只需要请求不同的页面,服务器会完成页面上的所有数据逻辑,所以 http 请求次数较少
3、每个请求都是一个 HTML,会有大量的冗余数据
4、开发时,前后端代码耦合高,出了问题责任不明确
5、在开发单纯的网站时,效率非常高
6、响应数据是 HTML,只能适应单一客户端,当需要多端支持时如要单独开发

前后端分离
随着 AJAX 技术的出现,可以在不刷新页面向服务器发送 http 请求,所以又出现了前后端分离的开发模式。
后端只要开发接口即可,前端可以通过发起 AJAX 请求,拿到后端的数据,渲染和怎样调用接口的事情,交给前端。以前后端分离方式开发的 Web 应用的结构图如下:

这种开发方式有如下特点:
1、是目前 Web 开发的主流模式
2、需要静态文件服务器和后端接口服务器
3、后台服务器只提供的数据接口的服务,响应的往往是 JSON 数据
4、开发时,前后端责任分工明确
5、前后端解耦合,可以同时开发,提高开发效率
6、一个后台即可满足网站、app、小程序等多种应用的需要

总结
对于前后端不分离的应用,一般只需要进行功能测试。对于前后端分离的应用,既需要进行功能测试,还需要进行接口测试,并且在进行功能测试是还需要分析 bug 是前端还是后端的问题。
以下是我收集到的比较好的学习教程资源,虽然不是什么很值钱的东西,如果你刚好需要,可以评论区,留言【777】直接拿走就好了


各位想获取资料的朋友请点赞 + 评论 + 收藏,三连!
三连之后我会在评论区挨个私信发给你们~
相关文章:
到底什么是前后端分离
目录 Web 应用的开发主要有两种模式: 前后端不分离 前后端分离 总结 Web 应用的开发主要有两种模式: 前后端不分离 前后端分离 理解它们的区别有助于我们进行对应产品的测试工作。 前后端不分离 在早期,Web 应用开发主要采用前后端不…...
【React】精选5题
第1题:简述下 React 的生命周期?每个生命周期都做了什么? React 组件的生命周期可以分为三个阶段:挂载阶段、更新阶段和卸载阶段。每个生命周期方法都有特定的目的和功能。 挂载阶段: constructor:组件的构…...
MUR2080CT- ASEMI二极管的特性和应用
编辑-Z 本文将详细介绍MUR2080CT二极管的特性和应用。首先,将介绍MUR2080CT二极管的基本结构和工作原理。然后,将探讨MUR2080CT二极管的特性,包括正向电压降、反向漏电流和反向恢复时间等。接下来,将介绍MUR2080CT二极管在电源、…...
安全测试国家标准解读——资源管理和内存管理
下面的系列文章主要围绕《GB/T 38674—2020 信息安全技术 应用软件安全编程指南》进行讲解,该标准是2020年4月28日,由国家市场监督管理总局、国家标准化管理委员会发布,2020年11月01日开始实施。我们对该标准中一些常见的漏洞进行了梳理&…...
3D元宇宙游戏,或许能引爆新的文娱消费增长点
从去年开始,在互联网上,一个名为【神念无界-源起山海】的元宇宙游戏项目火了。除了可以在游戏内体验独战、团队式作战等3D古风经典游戏场景和玩法,还有钓鱼增加能量、情侣姻缘一线牵,结婚等多元化逼真效果与玩法,这令很…...
(学习笔记-IP)IP基础知识
基本认识 IP在TCP/IP参考模型中处于第三层,也就是网络层。 网络层的主要作用是:实现主机与主机之间的通信,也叫点对点的通信。 网络层与数据链路层的关系: MAC的作用是实现直连的两个设备之间通信,而IP负责没有直连的…...
神经数据库:用于使用 ChatGPT 构建专用 AI 代理的下一代上下文检索系统 — (第 2/3 部分)
书接上回理解构建LLM驱动的聊天机器人时的向量数据库检索的局限性 - (第1/3部分)_阿尔法旺旺的博客-CSDN博客 其中我们强调了(1)嵌入生成,然后(2)使用近似近邻(ANN)搜索…...
一文6个概念从0到1带你成功入门自动化测试【0基础也能看懂系列】
自动化测试有以下几个概念: 单元测试集成测试E2E 测试快照测试测试覆盖率TDD 以及 BDD 等 简述 项目开发过程中会有几个经历。 版本发布上线之前,会有好几个小时甚至是更长时间对应用进行测试,这个过程非常枯燥而痛苦代码的复杂度达到了一…...
C++OpenCV(5):图像模糊操作(四种滤波方法)
🔆 文章首发于我的个人博客:欢迎大佬们来逛逛 🔆 OpenCV项目地址及源代码:点击这里 文章目录 图像模糊操作均值滤波高斯滤波中值滤波双边滤波 图像模糊操作 关于图片的噪声:指的是图片中存在的不必要或者多余的干扰数…...
关于质数筛——数论
埃式筛法 #include <bits/stdc.h> using namespace std; bool vis[100000010]; //标记数组 int n; int main(){scanf("%d",&n);vis[0]vis[1]1;for(int i2;i*i<n;i){ //优化1 if(vis[i]!1){for(int ji*i;j<n;ji){ //优化2 vis[j]1; //0是质数&#…...
Spring Boot 应用程序生命周期扩展点妙用
文章目录 前言1. 应用程序生命周期扩展点2. 使用场景示例2.1 SpringApplicationRunListener2.2 ApplicationEnvironmentPreparedEvent2.3 ApplicationPreparedEvent2.4 ApplicationStartedEvent2.5 ApplicationReadyEvent2.6 ApplicationFailedEvent2.7 ApplicationRunner 3. 参…...
【Nodejs】操作mongodb数据库
1.简介 Mongoose是一个让我们可以通过Node来操作MongoDB的模块。Mongoose是一个对象文档模型(ODM)库,它对Node原生的MongoDB模块进行了进一步的优化封装,并提供了更多的功能。在大多数情况下,它被用来把结构化的模式应用到一个MongoDB集合,并…...
SQL-每日一题【619.只出现一次的最大数字】
题目 MyNumbers 表: 单一数字 是在 MyNumbers 表中只出现一次的数字。 请你编写一个 SQL 查询来报告最大的 单一数字 。如果不存在 单一数字 ,查询需报告 null 。 查询结果如下例所示。 示例 1: 示例 2: 解题思路 1.题目要求我…...
紫光FPGA试用--软件篇
目录 一 软件安装启动 二 如何打开IP核?查看/修改现有IP核参数? 三 如何定义引脚? 四 如何下载code进入FPGA? 1. 下载到FPGA芯片内: 2.下载到外部FLASH中 五 如何进入在线调试模式,调试步骤 操作步骤ÿ…...
PDF添加水印以及防止被删除、防止编辑与打印
方法记录如下: 1、添加水印; 2、打印输出成一个新的pdf; 3、将pdf页面输出成一张张的图片:(福昕pdf操作步骤如下) 4、将图片组装成一个新的pdf:(福昕pdf操作步骤如下)…...
el-tree转换为表格样式的记录2
上一篇文章记录的是自己将树状数据转换为表格形式。但是出现了一个小bug,点击子节点时候会选中父节点,这个是正常需求没问题。但是我点击父节点时候取消所有子节点,父节点 选择也会失去,这是我不想要执行的。例如一个页面里面有主…...
MS1826B HDMI 1进4出 视频拼接芯片
MS1826B 是一款多功能视频处理器,包含 4 路独立 HDMI 音视频输出通道、1 路 HDMI 音视 频输入通道以及 1 路独立可配置为输入或者输出的 SPDIF、I2S 音频信号。支持 4 个独立的字库定 制型 OSD;可处理隔行和逐行视频或者图形输入信号;有四路独…...
Spring之注解
SpringIOC注解 组件添加标记注解: Component:该注解标记类表示该类为一个普通类,表示为IOC中的一个组件bean Repository:该注解用于将数据访问层(Dao层)的类标识为Spring中的Bean Service&…...
【UniApp开发小程序】悬浮按钮+出售闲置商品+商品分类选择【基于若依管理系统开发】
文章目录 界面效果界面实现悬浮按钮实现商品分类选择界面使元素均匀分布 闲置商品描述信息填写界面价格校验 界面效果 【悬浮按钮】 【闲置商品描述信息填写界面】 【商品分类选择界面】 【分类选择完成】 界面实现 悬浮按钮实现 悬浮按钮漂浮于页面之上,等页面…...
一百三十三、Hive——Hive外部表加载含有JSON格式字段的CSV文件数据
一、目标 在Hive的ODS层建外部表,然后加载HDFS中的CSV文件数据 注意:CSV文件中含有未解析的JSON格式的字段数据,并且JSON字段中还有逗号 二、第一次建外部表,直接以,分隔行字段,结果JSON数据只显示一部分…...
基于 Kinova Gen3 机械臂的家庭人机交互安全算法研究
随着服务机器人逐步进入家庭场景,人机交互(HRI)的安全性成为影响机器人普及的关键因素。相较于工业环境,家庭空间布局多变、人员活动随机,对机械臂的感知、规划与控制提出了更高要求。本文以7自由度Kinova Gen3机械臂为…...
DeepSeek-OCR-2开发者案例:集成至RAG系统实现图文混合检索增强
DeepSeek-OCR-2开发者案例:集成至RAG系统实现图文混合检索增强 1. 项目背景与需求 最近在做一个智能文档问答系统,客户的需求很明确:他们有很多PDF文档,里面既有文字又有图片,用户提问时,系统要能同时理解…...
EmbeddingGemma-300m在Mathtype公式的语义理解中的应用
EmbeddingGemma-300m在Mathtype公式的语义理解中的应用 1. 引言 数学公式的语义理解一直是自然语言处理领域的挑战性任务。传统的文本嵌入模型在处理复杂的数学表达式时往往力不从心,无法准确捕捉公式背后的数学含义和逻辑关系。EmbeddingGemma-300m作为Google最新…...
nli-distilroberta-base企业应用:HR简历筛选中‘要求’与‘经历’逻辑匹配系统
nli-distilroberta-base企业应用:HR简历筛选中要求与经历逻辑匹配系统 1. 项目背景与价值 在人力资源招聘流程中,简历筛选是最耗时的工作环节之一。传统的人工筛选方式面临两大核心痛点: 效率低下:HR需要逐份阅读简历ÿ…...
数智驱动 人才筑基——拔尖创新人才与卓越工程师培养论坛举行
3月22日,第二届高等院校新工科人才培养暨产教融合发展大会在北京举行。大会以“科技创新 智造未来”为主题,来自全国各地的本科院校、职业院校、行业企业以及媒体等1000余位嘉宾参会。22日下午,数智驱动 人才筑基——拔尖创新人才与卓越工程师…...
[260326] x-cmd v0.8.10:跨 Shell 统一配置命令短名;自动装好依赖运行 WhisperLiveKit 实时语音转写
[260326] x-cmd v0.8.10:跨 Shell 统一配置命令短名;自动装好依赖运行 WhisperLiveKit 实时语音转写 开放 shortcut 内部模块,配置命令短名,支持跨 Shell 统一使用whisper 模块新增 livekit 命令,自动装好依赖&#x…...
像素幻梦工坊实战落地:数字艺术教育机构像素创作课AI教具部署
像素幻梦工坊实战落地:数字艺术教育机构像素创作课AI教具部署 1. 项目背景与教育价值 在数字艺术教育领域,像素艺术作为入门门槛较低但创意空间广阔的艺术形式,正受到越来越多教育机构的青睐。然而传统像素艺术教学面临两大挑战:…...
Qwen3.5-4B-Claude-Opus实际作品:正则表达式语法树构建与匹配逻辑推演
Qwen3.5-4B-Claude-Opus实际作品:正则表达式语法树构建与匹配逻辑推演 1. 模型能力概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是一个专注于逻辑推理和结构化分析的轻量级AI模型。作为Qwen3.5-4B的蒸馏版本,它在处理代码解释、算法分析…...
英雄联盟智能助手:5个提升游戏体验的核心技巧
英雄联盟智能助手:5个提升游戏体验的核心技巧 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾经在英雄联盟游…...
告别复杂配置:SDXL 1.0电影级绘图工坊开箱即用体验
告别复杂配置:SDXL 1.0电影级绘图工坊开箱即用体验 1. 为什么选择SDXL 1.0电影级绘图工坊 在AI绘图领域,Stable Diffusion XL(SDXL)1.0代表了当前最先进的文本到图像生成技术。然而,对于大多数非技术背景的创作者来说…...
