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。如果你有闲暇时间,可以做个知识拓展。

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

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

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

相关文章

【JavaEE初阶系列】——常见的锁策略

目录 🚩乐观锁和悲观锁 🚩读写锁和普通互斥锁 🚩轻量级锁和重量级锁 🚩自旋锁和挂起等待锁 🚩公平锁和非公平锁 🚩可重入锁和不可重入锁 🚩关于synchronized的锁策略以及自适应 接下来讲解的锁策…

transformers微调模型后使用pieline调用无法预测列表文本

初学transformers框架 使用trainer简单训练一个文本分类模型三个epoch后 使用piepline调用model 和tokenizer后 发现 传入列表文本后 输出就变得不正常了,为么子哇 如下图

语义分割——Dark Zurich数据集

一、重要性及意义 首先,Dark Zurich为语义分割提供了大量真实且多样化的图像数据。该数据集包含了在夜间、黄昏和白天拍摄的大量图像,涵盖了不同光照条件和场景下的图像变化。这些图像数据不仅丰富了语义分割任务的数据集,也为模型提供了更全…

LLM:函数调用(Function Calling)

1 函数调用 虽然大模型能解决很多问题,但大模型并不能知晓一切。比如,大模型不知道最新消息(GPT-3.5 的知识截至 2021年9月,GPT-4 是 2023 年12月)。另外,大模型没有“真逻辑”。它表现出的逻辑、推理,是训练文本的统计…

IDEA一键备份MySQL数据库(mysqldump版)

问题 又到了搬MySQL数据库的时刻,这次我不想使用命令行备份,这次我想使用IDEA一键备份MySQL数据库。 解决 假设安装好mysqldump命令后,让IDEA使用mysqldump一键备份指定的数据库。具体IDEA配置如下: 这是IDEA上面的数据库到处…

掌握未来商机:如何利用会话式AI赢在起跑线

AI智能助手:提升工作效率的秘密武器 在这个信息爆炸的时代,内容策略成为了品牌与用户之间沟通的重要桥梁。一个有效的内容策略能够帮助品牌提升知名度,建立与目标受众的深度连接,并最终实现转化目标。内容策略不仅涉及内容的创作与…

【Pytorch学习笔记(二)】张量的创建(补充)

一、知识回顾 我们在博客《张量的创建与访问》中已经讨论了一些张量的创建方法如torch.CharTensor()、torch.FloatTensor()以及torch.zeros()等张量创建方法,但由于其仅仅介绍了cpu版本torch下张量的创建方法和只有具体数据类型张量,本节内容旨在补充gp…

深入理解MapReduce:从Map到Reduce的工作原理解析

当谈到分布式计算和大数据处理时,MapReduce是一个经典的范例。它是一种编程模型和处理框架,用于在大规模数据集上并行运行计算任务。MapReduce包含三个主要阶段:Map、Shuffle 和 Reduce。 ** Map 阶段 ** Map 阶段是 MapReduce 的第一步&am…

微信开发者工具创建一个小程序

创建项目 对于上面这个AppID可以自行选择是注册还是测试号,我是使用的测试号,之后再下面选择模板,我这里选择了JS-基础模板。 进入项目后在模拟器中可看到如下页面: 添加提交按钮进行页面跳转 添加需要跳转的文件夹,…

Node.js------模块化

◆ 能够说出模块化的好处◆ 能够知道 CommonJS 规定了哪些内容◆ 能够说出 Node.js 中模块的三大分类各自是什么◆ 能够使用 npm 管理包◆ 能够了解什么是规范的包结构◆ 能够了解模块的加载机制 一.模块化的基本概念 1.模块化 模块化是指解决一个复杂问题时&#xff0c…

Express

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

Go 源码之 gin 框架

Go 源码之 gin 框架 go源码之gin - Jxy 博客 一、总结 gin.New()初始化一个实例:gin.engine,该实例实现了http.Handler接口。实现了ServeHTTP方法 注册路由、注册中间件,调用addRoute将路由和中间件注册到 methodTree 前缀树(节…

HashSet解析

文章目录 集合简介对HashSet进行遍历迭代器增强forLambda表达式 Hash底层原理 集合简介 HashSet是Set集合下的子接口,set集合添加的元素是无索引,不重复,无序,与List系列集合正好相反。 无序:存储顺序不一致。 不重复…

全新的分布式锁,几行代码搞定,简单且强大

# 前言 分布式锁是分布式系统中一个极为重要的工具。目前有多种分布式锁的设计方案,比如借助 redis,mq,数据库,zookeeper 等第三方服务系统来设计分布式锁。tldb 提供的分布式锁,主要是要简化这个设计的过程&#xff0…

数据挖掘入门项目二手交易车价格预测之特征工程

文章目录 目标常见的特征工程具体步骤1. 导入数据2. 删除异常值3. 特征构造3.1 为树模型构造特征3.2 为LR NN 之类的模型构造特征 4. 特征筛选过滤式包裹式嵌入式 5. 总结 本文数据集来自阿里天池:https://tianchi.aliyun.com/competition/entrance/231784/informat…

初始Java篇(JavaSE基础语法)(5)(类和对象(下))

个人主页(找往期文章包括但不限于本期文章中不懂的知识点):我要学编程(ಥ_ಥ)-CSDN博客 目录 封装 访问限定符 封装扩展之包 自定义包 static成员 static修饰成员变量 static修饰成员方法 static成员变量初始化 内部类 对象的打…

Adaboost集成学习 | Matlab实现基于SVM-Adaboost支持向量机结合Adaboost集成学习时间序列预测(股票价格预测)

目录 效果一览基本介绍模型设计程序设计参考资料效果一览 基本介绍 Adaboost集成学习 | 基于SVM-Adaboost支持向量机结合Adaboost集成学习时间序列预测(股票价格预测)基于SVM(支持向量机)和AdaBoost集成学习的时间序列预测(如股票价格预测)是一种结合了两种强大机器学习算…

《极客时间TonyBai go语言第一课》学习笔记

文章目录 前置篇显式组合并发 入门篇大纲 前置篇 显式 在 C 语言中&#xff0c;下面这段代码可以正常编译并输出正确结果&#xff1a; #include <stdio.h> int main() { short int a 5; int b 8; long c 0; c a b; printf("%ld\n", c); }我们看到在上面…

Windows 电脑麦克风 自动启用/禁用 小玩具!

WinMicrophone Windows 系统的 麦克风设备&#xff08;启用/禁用&#xff09;切换驱动&#xff01;它是小巧且快速的&#xff0c;它能够自动的检测并切换麦克风的情况。 您可以在软件包仓库中找到发布版本的exe包&#xff0c;无需安装&#xff01;其能够大大增大您在Windows中…

【网站项目】面向社区健康服务的医疗平台

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…