到底什么是前后端分离

目录

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.mzph.cn/news/13502.shtml

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

相关文章

linux系统下(centos7.9)安装Jenkins全流程

一、卸载历史版本 # rpm卸载 rpm -e jenkins# 检查是否卸载成功 rpm -ql jenkins# 彻底删除残留文件 find / -iname jenkins | xargs -n 1000 rm -rf二、环境依赖安装 yum -y install epel-releaseyum -y install daemonize三、安装Jenkins Jenkins官网传送带: …

《零基础入门学习Python》第071讲:GUI的终极选择:Tkinter8

虽然我们能用 tkinter 设计不少东西了,但是不少同学还是感觉对这个界面编程掌控得还不够多,说白了,就是我们现在还没办法随心所欲的去绘制我们想要的界面,但是不瞒你说,今天的这一节课将会给你的人生乃至人生观带来翻天…

苍穹外卖-day07

苍穹外卖-day07 本项目学自黑马程序员的《苍穹外卖》项目,是瑞吉外卖的Plus版本 功能更多,更加丰富。 结合资料,和自己对学习过程中的一些看法和问题解决情况上传课件笔记 视频:https://www.bilibili.com/video/BV1TP411v7v6/?sp…

Rust vs Go:常用语法对比(五)

题图来自 Rust vs Go 2023[1] 81. Round floating point number to integer Declare integer y and initialize it with the rounded value of floating point number x . Ties (when the fractional part of x is exactly .5) must be rounded up (to positive infinity). 按规…

KWP2000协议和OBD-K线

KWP2000最初是基于K线的诊断协议, 但是由于后来无法满足越来越复杂的需求,以及自身的局限性,厂商又将这套应用层协议移植到CAN上面,所以有KWP2000-K和KWP2000-CAN两个版本。 这篇文章主要讲基于K线的早期版本协议,认…

零售企业信息化系统建设与应用解决方案

导读:原文《零售企业信息化系统建设与应用解决方案ppt》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。 完整版领取方式 如需获取完整的电子版内容参考学习…

基于Kaggle训练集预测的多层人工神经网络的能源消耗的时间序列预测(Matlab代码实现)

目录 💥1 概述 📚2 运行结果 🌈3 Matlab代码实现 🎉4 参考文献 💥1 概述 本文为能源消耗的时间序列预测,在Matlab中实现。该预测采用多层人工神经网络,基于Kaggle训练集预测未来能源消耗。 &am…

使用镜像搭建nacos集群

安装并配置 docker 1 先安装docker //1.查看操作系统的发行版号 uname -r//2.安装依赖软件包 yum install -y yum-utils device-mapper-persistent-data lvm2//3.设置yum镜像源 //官方源(慢) yum-config-manager --add-repo http://download.docker.co…

第十二章:priority_queue类

系列文章目录 文章目录 系列文章目录前言priority_queue的介绍priority_queue的使用容器适配器什么是容器适配器STL标准库中stack和queue的底层结构 总结 前言 priority_queue是容器适配器,底层封装了STL容器。 priority_queue的介绍 priority_queue文档介绍 优先…

IDEA中文UT方法执行报错问题、wps默认保存格式

wps默认保存格式、IDEA中文UT方法执行报错问题 背景 1、wps修改文件后,编码格式从UTF-8-bom变成UTF-8(notepad可以查看); 2、IDEA中文UT执行报错: 解决方案 1、语言设置中不要勾选 “Beta版。。。。” 2、cmd中执…

layui框架学习(33:流加载模块)

Layui中的流加载模块flow主要支持信息流加载和图片懒加载两部分内容,前者是指动态加载后续内容,示例的话可以参考csdn个人博客主页,鼠标移动到页面底部时自动加载更多内容,而后者是指页面显示图片时才会延迟加载图片信息。   fl…

RocketMQ 行业分享

5.0的架构发生了重大调整,添加了一层rocketmq-proxy,可以通过grpc的方式接入。 参考 https://juejin.cn/post/7199413150973984827

UE5 关于MRQ渲染器参数

最佳参数: Spatial Sample Count:使用奇数样本时临时抗锯齿会收敛 Temporal Sample Count:超过2之后,采样过大会造成TAA效果不佳 TSR:UE5最好的抗锯齿方案

AI聊天GPT三步上篮!

1、是什么? CHATGPT是OpenAI开发的基于GPT(Generative Pre-trained Transformer)架构的聊天型人工智能模型。也就是你问它答,根据网络抓去训练 2、怎么用? 清晰表达自己诉求,因为它就是一个AI助手&#…

CF1837 A-D

A题 题目链接:https://codeforces.com/problemset/problem/1837/A 基本思路: 要求计算蚂蚱到达位置 x最少需要多少次跳跃,并输出蚂蚱的跳跃方案。因为每次可以向左或向右跳跃一定距离(距离必须为整数),但是…

Web自动化测试高级定位xpath

高级定位-xpath 目录 xpath 基本概念xpath 使用场景xpath 语法与实战 xpath基本概念 XPath 是一门在 XML 文档中查找信息的语言XPath 使用路径表达式在 XML 文档中进行导航XPath 的应用非常广泛XPath 可以应用在UI自动化测试 xpath 定位场景 web自动化测试app自动化测试 …

联想拯救者笔记本切换独显直连游戏体验翻倍、火力全开“嗨”起来

最早的游戏本是由独显负责图形运算,然后直接向屏幕输出所有画面的。但独显负责所有工作,无时无刻都在耗电;撇开游戏模式下高负载的功耗不谈,即便在省电模式下功耗也比核显高得多。 英伟达发布的Optimus混合输出技术,在…

C++继承

📟作者主页:慢热的陕西人 🌴专栏链接:C 📣欢迎各位大佬👍点赞🔥关注🚓收藏,🍉留言 本博客主要内容讲解了C继承部分相关的内容 文章目录 C继承Ⅰ. 继承的概念和…

Rviz2的自定义插件开发基础知识

1. 简介 Rviz中有不同类型的插件,每个插件都必须具有相应的基本类型,才能被RViz识别 plugin typebase typeDisplayrviz_common::DisplayPanelrviz_common::PanelToolrviz_common::ToolFrames transformation libraryrviz_common::transformation::Fram…

深度探索 Elasticsearch 8.X:function_score 参数解读与实战案例分析

在 Elasticsearch 中,function_score 可以让我们在查询的同时对搜索结果进行自定义评分。 function_score 提供了一系列的参数和函数让我们可以根据需求灵活地进行设置。 近期有同学反馈,function_score 的相关参数不好理解,本文将深入探讨 f…