【前后端分离与不分离的区别】

Web 应用的开发主要有两种模式:

前后端不分离

前后端分离

理解它们的区别有助于我们进行对应产品的测试工作。

前后端不分离

在早期,Web 应用开发主要采用前后端不分离的方式,它是以后端直接渲染模板完成响应为主的一种开发模式。以前后端不分离方式开发的 Web 应用的架构图如下:

图片

浏览器向服务器发起请求,服务器接收到请求后去数据库中获取数据,然后渲染 HTML 模板并返回渲染后的 HTML 数据,或者返回一个重定向。绝大部分工作都在后端进行处理,客户端(浏览器)只负责页面的展示和用户交互。

这种开发方式有如下特点:

  • 一般一个应用只需要一个后台服务器

  • 客户端只需要请求不同的页面,服务器会完成页面上的所有数据逻辑,所以 http 请求次数较少

  • 每个请求都是一个 HTML,会有大量的冗余数据

  • 开发时,前后端代码耦合高,出了问题责任不明确

  • 在开发单纯的网站时,效率非常高

  • 响应数据是 HTML,只能适应单一客户端,当需要多端支持时如要单独开发

图片

图片

前后端分离

随着 AJAX 技术的出现,可以在不刷新页面向服务器发送 http 请求,所以又出现了前后端分离的开发模式。

后端只要开发接口即可,前端可以通过发起 AJAX 请求,拿到后端的数据,渲染和怎样调用接口的事情,交给前端。以前后端分离方式开发的 Web 应用的结构图如下:

图片

这种开发方式有如下特点:

  • 是目前 Web 开发的主流模式

  • 需要静态文件服务器和后端接口服务器

  • 后台服务器只提供的数据接口的服务,响应的往往是 JSON 数据

  • 开发时,前后端责任分工明确

  • 前后端解耦合,可以同时开发,提高开发效率

  • 一个后台即可满足网站、app、小程序等多种应用的需要

图片

图片

总结

对于前后端不分离的应用,一般只需要进行功能测试。对于前后端分离的应用,既需要进行功能测试,还需要进行接口测试,并且在进行功能测试时还需要分析 bug 是前端还是后端的问题。

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

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

相关文章

【华为GAUSS数据库】IDEA连接GAUSS数据库方法

背景:数据库为华为gauss for opengauss 集中式数据库 IDEA提供了丰富的各类型数据库驱动,但暂未提供Gauss数据库。可以通过以下方法进行连接。 连接后, 可以自动检查xml文件中的sql语句是否准确,表名和字段名是否正确还可以直接在…

转转交易猫自带客服多模板全开源完整定制版源码

商品发布; 请在后台商品添加成功后, 再点击该商品管理,可重新编辑当前商品的所有信息及配图以及支付等等相关信息 可点击分享或者跳转,将链接地址进行发布分享 请在手机端打开访问 访问商品主要模板文件路径目录 咸鱼&#…

【实操】基于 GitHub Pages + Hexo 搭建个人博客

《开发工具系列》 【实操】基于 GitHub Pages Hexo 搭建个人博客 一、引言二、接入 Node.js2.1 下载并安装 Node.js2.2 环境变量配置 三、接入 Git3.1 下载并安装 Git3.2 环境变量配置 四、接入 Hexo4.1 安装 Hexo4.2 建站4.3 本地启动服务器 五、接入 GitHub Pages5.1 初识 G…

Java--类继承

文章目录 主要内容一.学生类1.源代码代码如下(示例): 2.结果 二.交通工具类1.源代码代码如下(示例): 2.结果 三.圆类1.源代码代码如下(示例): 2.结果 总结 主要内容 学生类交通工具类圆类 一.学生类 具有…

ChatGLM vs ChatGPT

所有的NLP大模型 都是transformer结构 1.Mask attention 的策略不同 2.训练任务目标不同 国内大模型nb公司:百度、清华智谱 一、主流大模型 粉色:Encoder-only。 绿色:Encoder-Decoder,尽头智谱ChatGLM。 蓝色:…

【MongoDB】下载安装、指令操作

目录 1.下载安装 2.指令 2.1.基础操作指令 2.2.增加 2.3.查询 2.4.修改 2.5.删除 前言: 关于MongoDB的核心概念请移步: 【文档数据库】ES和MongoDB的对比-CSDN博客 1.下载安装 本文以安装Windows版本的mongodb为例,Linux版本的其实…

三、arcgispro二次开发创建第一个工程

忙了几天,总算可以创建第一工程了。 步骤一: 步骤二: 工具介绍: 项目创建成功:项目目录在解决方案资源管理器中,整个工具都是动态可调整的,如下图: 想把窗口放哪里就把鼠标移到红…

Linux重定向:深入理解与实践

🎬慕斯主页:修仙—别有洞天 ♈️今日夜电波:晴る—ヨルシカ 0:20━━━━━━️💟──────── 4:30 🔄 ◀️ ⏸ ▶️ ☰ &…

RHEL - 更新升级软件或系统

《OpenShift / RHEL / DevSecOps 汇总目录》 文章目录 小版本软件更新yum update 和 yum upgrade 的区别升级软件和升级系统检查软件包是否可升级指定升级软件使用的发行版本方法1方法2方法3方法4 查看软件升级类型更新升级指定的 RHSA/RHBA/RHEA更新升级指定的 CVE更新升级指定…

L1-069 胎压监测(Java)

小轿车中有一个系统随时监测四个车轮的胎压,如果四轮胎压不是很平衡,则可能对行车造成严重的影响。 让我们把四个车轮 —— 左前轮、右前轮、右后轮、左后轮 —— 顺次编号为 1、2、3、4。本题就请你编写一个监测程序,随时监测四轮的胎压&…

Java中的包、类、接口说明

写在开头 包、类、接口、方法、变量、参数、代码块,这些都是构成Java程序的核心部分,即便最简单的一段代码里都至少要包含里面的三四个内容,这两天花点时间梳理了一下,理解又深刻了几分。 Java中的包 Java 定义了一种名字空间,称之为包:package。一个类总是属于某个包…

Servlet系列:两种创建方式(xml,注解)

一、使用web.xml的方式配置(Servlet2.5之前使用) 在早期版本的Java EE中,可以使用XML配置文件来定义Servlet。在web.xml文件中,可以定义Servlet的名称、类名、初始化参数等。然后,在Java代码中实现Servlet接口&#x…

wayland(xdg_wm_base) + egl + opengles 最简实例

文章目录 前言一、ubuntu 下相关环境准备1. 获取 xdg_wm_base 依赖的相关文件2. 查看 ubuntu 上安装的opengles 版本3. 查看 weston 所支持的 窗口shell 接口种类二、xdg_wm_base 介绍三、egl_wayland_demo1.egl_wayland_demo2_0.c2.egl_wayland_demo3_0.c3. xdg-shell-protoco…

Chatopera 云服务支持大语言模型对话(LLM),定制您的聊天机器人

2024 年,Chatopera 云服务继续不断完善,为开发者提供最好的定制聊天机器人的工具。在过去的一年,用户们反映最多的建议是 Chatopera 云服务内置大语言模型的对话,今天 Chatopera 云服务完成了产品升级,满足了这个诉求。…

HCIP-BGP选路实验

一.实验拓扑图 二.详细配置 R1 interface GigabitEthernet0/0/0 ip address 12.1.1.1 255.255.255.0interface LoopBack0 ip address 1.1.1.1 255.255.255.0interface LoopBack1 ip address 10.1.1.1 255.255.255.0bgp 1 router-id 1.1.1.1 peer 12.1.1.2 as-number 2ipv4-fa…

0基础开发EtherNet/IP:协议格式,JAVA、C#、C++处理

经过一阵倒腾,把CIP、Ethernet/ip协议搞到手 协议的概念和理论就不提及了,上网随便一搜索EtherNet/IP遍地都是。 直接将协议关键点列举出来吧。 更多协议资料 www.jngbus.com 通讯软件群 30806722 这里讲解的是TCP和UDP协议的格式,EtherN…

如何本地部署虚拟数字克隆人 SadTalker

环境: Win10 SadTalker 问题描述: 如何本地部署虚拟数字克隆人 SadTalker 解决方案: SadTalker:学习逼真的3D运动系数,用于风格化的音频驱动的单图像说话人脸动画 单张人像图像🙎 ♂️音频&#x1f3…

伊恩·斯图尔特《改变世界的17个方程》傅里叶变换笔记

主要是课堂的补充(yysy,我觉得课堂的教育模式真有够无聊的,PPT、写作业、考试,感受不到知识的魅力。 它告诉我们什么? 空间和时间中的任何模式都可以被看作不同频率的正弦模式的叠加。 为什么重要? 频率分量…

【图解数据结构】顺序表实战指南:手把手教你详细实现(超详细解析)

🌈个人主页:聆风吟 🔥系列专栏:图解数据结构、算法模板 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 一. ⛳️线性表1.1 🔔线性表的定义1.2 🔔线性表的存储结构 二. ⛳️顺序表…

论文阅读_CogTree_推理的认知树

英文名称: From Complex to Simple: Unraveling the Cognitive Tree for Reasoning with Small Language Models中文名称: 从复杂到简单:揭示小型语言模型推理的认知树链接: http://arxiv.org/abs/2311.06754v1代码: https://github.com/alibaba/EasyNLP作者: Junbi…