到底什么是前后端分离

news2024/12/23 14:24:59

目录

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】直接拿走就好了

各位想获取资料的朋友请点赞 + 评论 + 收藏,三连!

三连之后我会在评论区挨个私信发给你们~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/797432.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

“云上新气象”,VDI+IDV混合部署,麒麟信安云正式上线某市气象局!

阴晴冷暖,风云变幻,气象与人们的生活密切相关,气象局信息系统的智慧高效运营对于提升灾害防御能力、城市气象观测等方面具有重要作用,随着气象业务范围的不断扩展,气象局的信息化建设与数字化转型也亟需提上日程。 走…

【Solr】Solr搜索引擎使用

文章目录 一、什么是Solr?二 、数据库本身就支持搜索啊,干嘛还要搞个什么solr?三、如果我们想要使用solr那么首先我们得安装它 一、什么是Solr? 其实我们大多数人都使用过Solr,也许你不会相信我说的这句话,但是事实却是如此啊 ! 每当你想买自己喜欢的东东时,你可能会打开某…

Python入门准备

安装并配置Python 1、想要更新终端里Python的版本: 在python.org官网上下载最新版,下载安装以后,在终端输入python3进行询问。 2、完成Python环境的安装(Linux:操作系统,基于Cent0S7) 在Linux系统上安装Python需要…

中小学分班查询系统如何制作?这个方法3分钟轻松搞定

暑假一过完,新学年即将开始,学校面临着一个重要的任务:学生分班。无论是新生入学还是低年级升高年级,都需要进行分班工作。这对负责分班的老师们来说,增加了相当大的工作量和挑战。 在开学前,如何快速搞定…

Pure Admin 图标篇

1. 官方图标讲解地址 B站搜索:vue-pre-admin之图标篇,作者“乐于分享的程序员小铭” 2. 实操 1. iconify官网 Icon Sets • Iconify 2. 在build->optimize.ts 中,配置所用的Iconify icon包 如: "iconify-icons/ep&quo…

LNK 2001 问题的一种解决办法

问题: 可能有这样的报错,error LNK 2001: 无法解析的外部符号" protected: virtual void __thiscall testing::Test::SetUp(void)"。 解决办法: 换了各编译器就好了,从第二个换到了第一个。 猜测:这里是因…

开江县“五社联动 关爱一老一小“主题活动之银龄爱齿健康关爱计划

为进一步宣传和推动“五社联动”关爱“一老一小”的社工服务理念,近日,开江县网格员社会工作服务中心携手彭州市葡萄树社会工作服务中心链接爱心单位(夜郎古酒)捐赠的1440支牙膏(合和泰品牌牙膏)&#xff0…

Electron从构建到打包程exe应用

Electron从构建到打包程exe应用 Electron文档搭建网页装载到 BrowserWindow中定义全局对象进程之间通信打包应用程序对代码进行签名 Electron文档 搭建 创建一个文件夹,在根目录执行以下几个命令 1.npm init 2.npm install electron --save-dev 3.根目录新增main…

route_group时调整routing rule via array大小

使用route_group secondary pg pin时需要multi via/double via,可以使用如下办法。 用create_routing_rule -vias {{via_def_name array_size NR/R} {xx xx xx}} R和NR就是能不能旋转 set_routing_rule net_name -rule rule_name -max_routing_layers MEx -max_la…

RHCSA(一)

1、在VMware上创建虚拟机以及安装Linux操作系统,使用ssh进行远程连接 1.创建虚拟机 2.安装Linux系统 3.使用Xshell进行远程ssh连接终端 进入了Linux系统,打开终端输入ifconfig回车得到了虚拟网卡的IP地址为192.168. 163.128 打开Xshell远程连接软件…

Longhorn vs Rook vs OpenEBS vs Portworx vs IOMesh:细说 5 款 K8s 持久化存储产品优劣势

云原生时代下,越来越多的企业开始使用 Kubernetes(K8s)承载数据库、消息中间件等“生产级”有状态工作负载。由于这些应用对数据持久保存、性能、容量扩展和快速交付具有较高的要求,企业往往需要采用专为 Kubernetes 环境设计的持…

入侵检测——IDS概述、签名技术

1. 什么是IDS? IDS(intrusion detection system)入侵检测系统,是一种对网络传输进行即时监视,在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备。它会对系统的运行状态进行监视,发现各种攻击企…

力扣959. 由斜杠划分区域

题目描述: 在由 1 x 1 方格组成的 n x n 网格 grid 中,每个 1 x 1 方块由 /、\ 或空格构成。这些字符会将方块划分为一些共边的区域。 给定网格 grid 表示为一个字符串数组,返回 区域的数量 。 请注意,反斜杠字符是转义的&…

乐维监控 | 如何快速关闭网络设备所有端口

在运维监控实践中,由于不同的运维人员可能会关注不同的监控指标,因此乐维监控在监控网络设备时,会默认开启所有的端口,尽可能多的覆盖监控指标,避免遗漏重要指标。但是,这样又会带来新的问题,在…

ITIL4—服务管理的四个维度

服务管理的四个维度 上一章概述了对服务管理至关重要的概念。一个组织的目标是为其利益相关者创造价值,这是通过提供和消费服务来实现的。ITIL SVS描述了组织的各个组成部分协同工作创造该价值的方式。但是,在进一步探讨之前,必须首先介绍服…

嵌入式工程师有发展前途吗?

如果你是真的喜欢嵌入式,那鼓励你顺从内心指引。毕竟人生不仅仅是向钱看的。根据马斯洛需求模型,在物质条件基本满足后就会进而强调精神需求,当然现今消费主义社会,你可以选择砸钱下猛药感官刺激来安抚虚无的内心,但这…

麒麟信安携手航天紫光发布 “自主操作系统+国产数据库”联合解决方案

数据库是计算、存储和管理数据信息的重要“仓库”,国产操作系统则为各项业务系统的运行提供安全可靠的底座支撑,操作系统、数据库等基础软件实现自主可控,对于我国信息安全和数字经济发展具有重要意义。为满足当前各大行业用户海量数据高并发…

OBS直播如何实现竖屏直播(OBS配置竖屏直播)

OBS直播如何实现竖屏直播(OBS配置竖屏直播) 第1步:安装好OBS直播软件; 第2步:打开OBS,点击右下角“设置 --> 视频” 》配置 竖屏直播的分辨率,比如900x1600、1080x1920的分辨率;…

Vue2.0 使用 echarts

目录 1. 配置 渲染2. 数据渲染 1. 配置 渲染 安装 echarts 依赖 npm install echarts -Smain.js,引入 echarts import * as echarts from echarts// 在import的后面,echarts的前面加一个 * as Vue.prototype.$echarts echarts从 echarts 官网直接复制…

【学习笔记】目标跟踪领域SOTA方法比较

目录 前言方法1 TraDeS:2 FairMOT:3 SMILEtrack:4 ByteTrack: 前言 常用于行人跟踪的多目标跟踪数据集包括:MOT 15/16/17/20、PersonPath22等… 为更好比较现有SOTA算法的检测性能,本博客将针对在各数据集上表现较优的算法模型进行介绍。(表…