web 技术中前端和后端交互过程

1、客户端服务器交互过程

客户端:上网过程中,负责浏览资源的电脑,叫客户端
服务器:在因特网中,负责存放和对外提供资源的电脑叫服务器

服务器的本质: 就是一台电脑,只不过相比个人电脑它的性能高很多,个人电脑中可以通过安装浏览器的形式,访问服务器对外提供的各种资源。
个人电脑也可以配置环境,使能对外提供资源,也是一台服务器。

web 应用的一个基本框架:
 

image.png


微服务就是单个应用程序拆分成许多个小型服务的一种开发方法。举个例子:
支付宝上有订购火车票的服务,现在阿里巴巴又开发了一个微信小程序,上面也可以订购火车票,那么订购火车票的代码只需要开发一份就行了,谁需要它就去找它(请求调用)就行啦。

客户端服务器的交互过程:
 

image.png


访问本机服务器和访问互联网中的服务器的区别:

  1. 环境配置:
    本机作为服务器:需要配置适当的软件和服务来充当服务器,例如安装和配置Web服务器(如Apache、Nginx)、数据库服务器(如MySQL、MongoDB)、应用服务器(如Tomcat、Node.js)等。
    而访问其他服务器资源则不需要这样的配置。
  2. 网络访问:
    本机作为服务器:通常情况下,你需要确保你的网络设置、防火墙配置等允许其他用户通过网络访问你的服务。
    而访问其他服务器资源时:只需要通过普通的网络连接即可。
  3. 资源地址:
    本机作为服务器:你可以使用本地主机地址(如localhost或者127.0.0.1)来访问你的服务器资源。
    而访问其他服务器资源时:你需要使用对应服务器的地址或域名。
  4. 权限和安全性:
    本机作为服务器,需要考虑到权限和安全性的问题,确保你的服务对外界的访问是安全可控的。
    而访问其他服务器资源时:你可能需要提供相应的凭证(如用户名和密码、API密钥等)来获取授权访问。

2、前端的功能

前端开发中常见的三种主要技术。
HTML:HTML 被认为是网页的骨架。它用于构建网页的内容,并且还告诉Web浏览器如何显示它。
CSS:CSS为浏览器提供了有关显示内容的更具体信息,例如文本的大小和颜色。
JavaScript:网站不仅仅是文本。JavaScript允许我们创建更复杂的元素,如交互式地图和动画图形。它能够让我们的网页具有更多功能。

3、后端的功能

根据不同的请求信息做出不同的响应。具体来说,当用户触发某个行为后,客户端会通过 http/https 请求,和服务器建立连接、发送请求,往往这个请求首先会被连接到 LB(负载均衡上),LB 根据配置,将请求转发到内部的 API 服务上。这些 API 服务,根据不同的业务逻辑请求其他服务(service),这些服务各司其职,例如读写某 Mysql 表、读写缓存、甚至请求搜索引擎来完成相应的任务。而 API 服务在完成相应的流程后,也会将数据返回给客户端,客户端根据前端逻辑完成相关的展示。

4、web 前后端是如何交互的

在本地开发Angular前端和Spring Boot后端时,他们之间的交互基于http协议。

前端发送HTTP请求:Angular前端通过Angular框架提供的HttpClient模块或其他HTTP客户端库发送HTTP请求到后端。

后端接收HTTP请求:Spring Boot后端应用程序通过Spring MVC或Spring Webflux等Web框架接收HTTP请求。这些框架提供了用于处理不同HTTP方法和路径的注解和工具。

后端处理HTTP请求:后端应用程序根据收到的HTTP请求执行相应的业务逻辑。这可能包括从数据库中检索数据、执行业务逻辑、对数据进行处理等。

后端发送HTTP响应:一旦后端完成处理,它将生成HTTP响应并将其发送回前端。响应通常包括HTTP状态码、响应头和响应体。响应体中可以包含请求的结果数据或者其他信息。

前端接收HTTP响应:Angular前端接收到后端发送的HTTP响应。它根据响应中的数据进行相应的操作,例如更新界面、显示数据、处理错误等。

5、后端的MVC框架

image.png


Model(模型层):提供/保存数据

Controller(控制层):数据处理,实现业务逻辑

View(视图层):展示数据,提供用户界面

前端只是后端 MVC 的 V(视图层),从数据与逻辑代码中分离出来。

认识开发中的工具

Web服务器 :
常见的Web服务器软件包括Apache、Nginx、Microsoft IIS等。这些服务器软件通常运行在服务器操作系统上,如Linux、Windows Server等。
apache 是最原始的 web 服务器,使用 C 语言开发的,非常稳定。只支持普通网页(html)的静态解析,但可以通过插件支持 php。

tomcat 是对 apache 服务器的扩展,使用 Java 开发的。它是一个支持动态解析(jsp、asp、php、cgi等)的容器,可以独立于 apache 运行,也可以和 apache 一起使用。举个例子:apache 是一辆车,车上可以装 html,也可以装水。如果要装水的话,就得有个桶,而这个桶就是 tomcat,桶也可以从车上拿下来。

Nginx Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好。


node.js是一种基于Google V8引擎的JavaScript运行时环境,它允许开发者使用JavaScript进行服务器端编程
Spring Boot是一个基于Spring框架的快速开发框架,它使用了约定大于配置的方式,可以帮助开发人员快速搭建基于Spring的Web应用程序。相较于传统的Spring框架,Spring Boot的优势在于自动化配置、嵌入式Web容器、依赖管理等方面。
Spring Boot和Node.js都是流行的开发应用程序框架,但它们之间具有以下几个显著的区别:

1Spring BootNode.js
编程语言JavaScriptJava
平台Spring Boot通常在Java虚拟机(JVM)上运行Node.js是基于V8 JavaScript引擎的运行时环境
架构t基于Java EE框架事件驱动和非阻塞I/O的异步编程模型
编程语言JavaScriptJava

技术前沿拓展

前端开发,你的认知不能仅局限于技术内,需要发散思维了解技术圈的前沿知识。细心的人会发现,开发内部工具的过程中,大量的页面、场景、组件等在不断重复,这种重复造轮子的工作,浪费工程师的大量时间。

介绍一款程序员都应该知道的软件JNPF快速开发平台,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类,方便扩展;集成了代码生成器,支持前后端业务代码生成,实现快速开发,提升工作效率;框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用;后端框架支持 Vue2、Vue3。如果你有闲暇时间,可以做个知识拓展。

看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

scratch小动物的晚会 2024年3月中国电子学会图形化编程 少儿编程 scratch编程等级考试一级真题和答案解析

目录 scratch小动物的晚会 一、题目要求 1、准备工作 2、功能实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 1、思路分析 2、详细过程 四、程序编写 五、考点分析 六、 推荐资料 1、入门基础 2、蓝桥杯比赛 3、考级资料 4、视频课程 …

CVAE-GAN——生成0-9数字图像(Pytorch+mnist)

1、简介 CVAE-GAN(Conditional Variational Autoencoder Generative Adversarial Network)是一种混合型生成模型,结合了条件变分自编码器(CVAE)和生成对抗网络(GAN)的思想。在CVAE-GAN中&#…

我的C++奇迹之旅相遇:支持函数重载的原理

文章目录 📝前言🌠 C支持函数重载的原理:名字修饰(name Mangling)🌉不同编译器不同函数名修饰规则 🌠Windows下名字修饰规则🚩总结 📝前言 函数重载概念 函数重载:是函数的一种特殊…

加密/ 解密 PDF:使用Python为PDF文档设置、移除密码

在数字化时代,文档的安全性变得越来越重要。特别是对于包含敏感信息的PDF文件,确保其不被未经授权的人员访问或修改是至关重要的。本文将介绍如何使用Python在PDF文档中设置密码,以及如何移除已经设置的密码。 目录 PDF加密基础知识 Pytho…

大话设计模式之建造者模式

建造者模式(Builder Pattern)是一种创建型设计模式,旨在通过将复杂对象的构建过程与其表示分离,使得同样的构建过程可以创建不同的表示。 在建造者模式中,通常包含以下几个角色: Director(指挥…

新增收货地址

目录 🧂1.创建controller层 🥓2.创建service层 🌭3.注意细节 🍿4.避免dao数据暴漏 1.创建controller层 controller不做逻辑操作,只接受前端的数据 1.添加Api设置swagger模块名称2.RestController以json形式返回…

java计算机网络(一)-- url,tcp,udp,socket

网络编程: 计算机网络 计算机网络指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统、网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传递的计算机系统。 网络协议…

C#.net8创建webapi,使用SqlSugar,仓储模式,DTO,服务层,控制层的综合应用(企业级)

本文源码地址: https://download.csdn.net/download/u012563853/89036104 源码中,也有详细的注释说明。 代码总览: 这是一个综合性比较强的文章,需要有一定的基础,没有基础的人,看了后,会全面的了解一下,有基础的人,看了后会加强认识,更加的巩固,直接在项目中去应…

vue3全局控制Element plus所有组件的文字大小

项目框架vue-右上角有控制全文的文字大小 实现&#xff1a; 只能控制element组件的文字及输入框等大小变化&#xff0c;如果是自行添加div,text, span之类的控制不了。 配置流程 APP.vue 使用element的provide&#xff0c;包含app <el-config-provider :locale"loca…

mybatis的基于注解和xml的两种实现方式详解

文章简介 本文介绍了springbootmybatis实现数据库操作的两种实现方式&#xff0c;经测试均可运行使用。整体而言注解更加简便&#xff0c;但面对一些复杂查询&#xff0c;可能需要使用到注解方式。 注解方式 pom依赖&#xff1a; <dependencies><!--连接数据库--&…

Wasm初上手

总之也是为了扩宽技术面吧。。。我也不知道为什么就想试试了&#xff0c;就酱。 参考阅读&#xff1a;极客时间《WebAssembly入门课》 安装wasm的编译器Emscripten。Emscripten 是一个“源到源”语言编译器工具集&#xff0c;这个工具集可以将 C/C 代码编译成对应 JavaScript 代…

冒泡排序---算法

1、算法概念 冒泡排序&#xff1a;它重复地走访要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换&#xff0c;也就是说该数列已经排序完成。这个算法越小的元素会经由交换慢慢“浮”到…

Linux企业级别日志的查找

企业级别日志的查找 查看mysql数据库的日志错误日志&#xff08;Error Log&#xff09;查询日志&#xff08;General Query Log&#xff09;慢查询日志&#xff08;Slow Query Log&#xff09;事务日志&#xff08;Transaction Log&#xff09;二进制日志&#xff08;Binary Lo…

python-tkinter程序的带包发布pyinstaller的使用闭坑

一、pyinstaller 不是内部或外部命令 1、安装pyinstaller 安装的时候一定注意别少了install后的er&#xff0c;pyinstaller,否则会安装成其他的程序的。安装的指令如下&#xff1a; pip install pyinstaller2、配置运行环境 首先找到你的python的安装目录&#xff0c;这个我…

Web APIs知识点讲解(阶段六)

BOM- 操作浏览器 一.Window对象 1. 依托 BOM 对象实现对历史、地址、浏览器信息的操作或获取2. 具备利用本地存储实现学生信息表案例的能力 1.BOM(浏览器对象模型) BOM(Browser Object Model ) 是浏览器对象模型 window 是浏览器内置中的全局对象&#xff0c;我们所学习的所…

论文笔记:基于多粒度信息融合的社交媒体多模态假新闻检测

整理了ICMR2023 Multi-modal Fake News Detection on Social Media via Multi-grained Information Fusion&#xff09;论文的阅读笔记 背景模型实验 背景 在假新闻检测领域&#xff0c;目前的方法主要集中在文本和视觉特征的集成上&#xff0c;但不能有效地利用细粒度和粗粒度…

C# 学习第五弹——语句

一、if语句 —简单if语句 —if else 语句 —if else if else 语句 1、简单if语句 if&#xff08;表达式&#xff09;{语句} &#xff08;1&#xff09;表达式必须使用圆括号括起来&#xff1b; &#xff08;2&#xff09;表达式&#xff1a;关系表达式或逻辑表达…

Express

可以方便、快速创建Web网站的服务器&#xff08;提供web网页资源&#xff09;或API接口服务器&#xff08;提供API接口&#xff09; app.get(请求URL&#xff0c;function(req,res)>{}) //req:请求对象&#xff08;包括请求属性和方法&#xff09; //res:响应对象&#xff…

【python】常用函数汇总(持续更新……)

文章目录 【numpy.exp()】返回e的幂次方&#xff0c;e是一个常数为2.71828【np.dot()】矩阵相乘【np.linalg.inv()】矩阵求逆 【numpy.exp()】返回e的幂次方&#xff0c;e是一个常数为2.71828 举例&#xff1a;numpy.exp() 【np.dot()】矩阵相乘 【要点】 1、前者的列数后者…

suno让音乐行业一夜变天,如何快速体验suno一键生成音乐?

随着AI的应用变广&#xff0c;各类AI程序已逐渐普及。AI已逐渐深入到人们的工作生活方方面面。而AI涉及的行业也越来越多&#xff0c;从最初的写作&#xff0c;到医疗教育&#xff0c;再到现在的音乐。 Suno是一个专业高质量的AI歌曲和音乐创作平台&#xff0c;用户只需输入简…