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

news2024/10/7 12:23:16

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.coloradmin.cn/o/1548873.html

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

相关文章

【每日一题】2580. 统计将重叠区间合并成组的方案数-2024.3.27

题目: 2580. 统计将重叠区间合并成组的方案数 给你一个二维整数数组 ranges ,其中 ranges[i] [starti, endi] 表示 starti 到 endi 之间(包括二者)的所有整数都包含在第 i 个区间中。 你需要将 ranges 分成 两个 组&#xff0…

【数据结构】 HashMap源码分析(常量+构造方法+方法)

文章目录 HashMap源码分析一、成员常量二、构造方法三、方法1.此时假定为进行了无参构造,没有分配内存2.当发生有参构造时,完成对容量的大小判断后,将容量大小,传进tableSizeFor方法中: HashMap源码分析 一、成员常量…

【物联网开源平台】tingsboard安装与编译

别看这篇了,这篇就当我的一个记录,我有空我再写过一篇,编译的时候出现了一个错误,然后我针对那一个错误执行了一个命令,出现了绿色的succes,我就以为整个tingsboard项目编译成功了,后面发现的时候&#xff…

如何本地部署开源AI知识库 FastGPT(新手教程)

环境: Win10 WSL2 ubuntu22.04 问题描述: 如何本地部署开源AI知识库 FastGPT 解决方案: 一、安装docker和docker-compose 安装docker 1.apt install docker.io2.apt install docker-compose3.docker --version4.docker compose version

[操作系统课设]GeeKOS操作系统的研究与实现

一.GeekOS操作系统概论 1.1教学操作系统 (1)针对RISC结构MIPS处理器 操作系统:Nachos、OS/161 (2)针对CISC结构Intel IA-32 (or x86)通用处理 操作系统:MINIX、GeekOS 我们用到的是:GeekOS 1&…

Java八股文(SpringCloud Alibaba)

Java八股文のSpringCloud Alibaba SpringCloud Alibaba SpringCloud Alibaba Spring Cloud Alibaba与Spring Cloud有什么区别? Spring Cloud Alibaba是Spring Cloud的衍生版本,它是由Alibaba开发和维护的,相比于Spring Cloud,它在…

C++初学者:像C#一样优雅写程序

C语言的强大,在于自由自在,你可以随便怎么写程序,不讲格式,可以很整齐,也可以鬼画符,只要能运行就可以了,程序员可以自由发挥。 如图: 国际C语言大赛中的代码 图2 C的语言更强大&…

关于振弦式渗压计的基本知识详解

振弦式渗透压力计的组成主要包括振弦、高灵敏度金属薄膜、渗透石以及激励和接收线圈等。其运作机制是:水压力施加在金属薄膜上导致其形变,进而影响连接的钢弦的拉力。由于钢弦振动频率与其拉力密切相关,通过测量钢弦的频率变化即可计算出渗透…

大白话扩散模型(无公式版)

背景 传统的图像生成模型有GAN,VAE等,但是存在模式坍缩,即生成图片缺乏多样性,这是因为模型本身结构导致的。而扩散模型拥有训练稳定,保持图像多样性等特点,逐渐成为现在AIGC领域的主流。 扩散模型 正如…

LVGL线条和画布功能

线条部件 线条部件由多个点连接而成,它可用于修饰界面或者展示数据。 要注意这里的描述,线条是由多个点连接而成的。 线条部件只有一个组成部分:主体 LV_PART_MAIN 线条是由多个点连接而成的对象,用户可以使用 lv_point_t 类型的…

C++电子宠物商店

一、功能描述 店内有不同类型的电子宠物 1.每种电子宠物能通过显示出来的文本提出需要或表示情绪如:饿、渴、饱涨、困、不舒服、高兴、生气、伤心、绝望、无聊等。 2.店员用户通过键盘操作“饲养”电子宠物,给它实施喂饭、喂水、带它上厕所、陪它玩耍、…

OpenCV4.9在iOS中安装

返回:OpenCV系列文章目录(持续更新中......) 上一篇:使用CUDA 为Tegra构建OpenCV-CSDN博客 下一篇: 警告! 本教程可以包含过时的信息。 所需软件包 CMake 2.8.8 或更高版本Xcode 4.2 或更高版本 从 G…

【QT入门】 Qt代码创建布局之多重布局变换与布局删除技巧

往期回顾: 【QT入门】 Qt代码创建布局之栅格布局详解-CSDN博客 【QT入门】 Qt代码创建布局之分裂器布局详解-CSDN博客 【QT入门】 Qt代码创建布局之setLayout使用-CSDN博客 【QT入门】 Qt代码创建布局之多重布局变换与布局删除技巧 一、最终效果 我们先看最终要实…

【前端学习——css篇】1.css的盒模型

https://github.com/febobo/web-interview 1.css的盒模型 html中的所有元素都是一个盒子,组成包括:内容content、内边距padding、边框border、外边距margin content,即实际内容,显示文本和图像 boreder,即边框&#…

Win10或Win11系统下西门子TIA博途运行时卡顿缓慢的解决办法总结

Win10或Win11系统下西门子TIA博途运行时卡顿缓慢的解决办法总结 首先,可以看下TIA PORTAL V19的安装条件: 处理器:Intel i5-8400H,2.5-4.2GHZ,4核以上+超线程技术,智能缓存; 内存:至少16GB,大型项目需要32GB 硬盘:必须SSD固态硬盘,至少50GB的可用空间 图形分辨率:1…

可拖拽的工作流优势多多,助力企业降本增效!

随着行业的进步和发展,利用低代码技术平台的优势特点,可以为企业带来降本增效、创造高价值和社会效益的目的。作为集系统开发、数据治理和数据分析于一身的一站式低代码技术平台服务商,流辰信息深知肩上背负的责任,为客户提供可拖…

一文读懂兼顾隐私、高性能和可拓展的公链Partisia Blockchain

目前,包括 Secret Network、Oasis Protocol 等在内的绝大多数以隐私为特性的可编程公链,在兼顾隐私的同时,在可拓展以及性能上或多或少的有所牺牲,即难以对诸多实际应用场景进行支撑。这归咎于链的设计以及共识机制的不合理&#…

【Java程序设计】【C00383】基于(JavaWeb)Springboot的水产养殖系统(有论文)

【C00383】基于(JavaWeb)Springboot的水产养殖系统(有论文) 项目简介项目获取开发环境项目技术运行截图 博主介绍:java高级开发,从事互联网行业六年,已经做了六年的毕业设计程序开发&#xff0c…

AI新工具(20240327) 自动生成带有精确躯干和手部动作的主播风格视频;新型AI搜索thinkany.ai;小米发布图像生成技术SDXS

✨ 1: Make-Your-Anchor 自动生成带有精确躯干和手部动作的主播风格视频 Make-Your-Anchor是一种革新性的系统,它允许用户仅使用一个人为期一分钟的视频片段进行训练,进而自动生成带有精确躯干和手部动作的主播风格视频。这样的系统特别适合于需要产生…

视频过大怎么发送到QQ微信?只需3步~

现在不仅仅是QQ,像我们常用的微信等软件,在传输视频时也都是有大小限制的。如果提示无法传输的话,我们可以从压缩视频来入手,好在现在压缩视频的方法多。可以直接借助视频压缩软件,或者利用视频编辑软件调整视频相关参…