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.rhkb.cn/news/292796.html

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

相关文章

Electron 读取本地配置 增加缩放功能(ctrl+scroll)

最近,一个之前做的electron桌面应用,需要增加两个功能;第一是读取本地的配置文件,然后记载配置文件中的ip地址;第二就是增加缩放功能; 第一,配置本地文件 首先需要在vue工程根目录中&#xff0…

切换ip地址的app,简单易用,保护隐私

在数字化时代,IP地址作为网络设备的标识,不仅承载着数据在网络间的传输任务,还在一定程度上关联着用户的隐私和安全。因此,切换IP地址的App应运而生,为用户提供了一种便捷的方式来改变其网络身份,实现匿名浏…

【Spring MVC】快速学习使用Spring MVC的注解及三层架构

💓 博客主页:从零开始的-CodeNinja之路 ⏩ 收录文章:【Spring MVC】快速学习使用Spring MVC的注解及三层架构 🎉欢迎大家点赞👍评论📝收藏⭐文章 目录 Spring Web MVC一: 什么是Spring Web MVC&#xff1…

【应用笔记】LAT1413+快速开关蓝牙导致设备无广播

1. 问题背景 客户使用 BlueNRG-345MC 开发了一个 BLE 外设,和手机连接。在测试中发现,手机连接上外设之后,不断地在手机上点击蓝牙的开关按钮,造成设备不断地断开、重连;少则几次,多则几十次。点击之后&am…

【Entity Framework】创建并配置模型

【Entity Framework】创建并配置模型 文章目录 【Entity Framework】创建并配置模型一、概述二、使用fluent API配置模型三、分组配置四、对实体类型使用EntityTypeConfigurationAttribute四、使用数据注释来配置模型五、实体类型5.1 在模型中包含类型5.2 从模型中排除类型5.3 …

loadbalancer 引入与使用

在消费中pom中引入 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-loadbalancer</artifactId> </dependency> 请求调用加 LoadBalanced 注解 进行服务调用 默认负载均衡是轮训模式 想要切换…

【数据结构与算法】二叉树的遍历及还原

树形结构 - 有向无环图 树是图的一种。 树形结构有一个根节点树形结构没有回路根节点&#xff1a;A叶子节点&#xff1a;下边没有其他节点了节点:既不是根节点,又不是叶子节点的普通节点树的度:这棵树最多叉的节点有多少叉&#xff0c;这棵树的度就为多少树的深度&#xff1a…

实例、构造函数、原型、原型对象、prototype、__proto__、原型链……

学习原型链和原型对象&#xff0c;不需要说太多话&#xff0c;只需要给你看看几张图&#xff0c;你自然就懂了。 prototype 表示原型对象__proto__ 表示原型 实例、构造函数和原型对象 以 error 举例 图中的 error 表示 axios 抛出的一个错误对象&#xff08;实例&#xff0…

WiFiSpoof for Mac wifi地址修改工具

WiFiSpoof for Mac&#xff0c;一款专为Mac用户打造的网络隐私守护神器&#xff0c;让您在畅游互联网的同时&#xff0c;轻松保护个人信息安全。 软件下载&#xff1a;WiFiSpoof for Mac下载 在这个信息爆炸的时代&#xff0c;网络安全问题日益凸显。WiFiSpoof通过伪装MAC地址&…

C++入门知识详细讲解

C入门知识详细讲解 1. C简介1.1 什么是C1.2 C的发展史1.3. C的重要性1.3.1 语言的使用广泛度1.3.2 在工作领域 2. C基本语法知识2.1. C关键字(C98)2.2. 命名空间2.2 命名空间使用2.2 命名空间使用 2.3. C输入&输出2.4. 缺省参数2.4.1 缺省参数概念2.4.2 缺省参数分类 2.5. …

GRE和MGRE综合实验

实际网段划分 分配IP 1.IP划分 [r1]int g0/0/0 [r1-GigabitEthernet0/0/0]ip add 192.168.1.254 24 Mar 29 2024 16:42:44-08:00 r1 %%01IFNET/4/LINK_STATE(l)[3]:The line protocol IP on the interface GigabitEthernet0/0/0 has entered the UP state. [r1-Gigabi…

飞天使-k8s知识点28-kubernetes散装知识点5-helm安装ingress

文章目录 安装helm添加仓库下载包配置创建命名空间安装 安装helm https://get.helm.sh/helm-v3.2.3-linux-amd64.tar.gztar -xf helm-v3.2.3-linux-amd64.tar.gzcd linux-amd64mv helm /usr/local/bin修改/etc/profile 文件&#xff0c;修改里面内容,然后重新启用export PATH$P…

动态规划-----背包类问题(0-1背包与完全背包)详解

目录 什么是背包问题&#xff1f; 动态规划问题的一般解决办法&#xff1a; 0-1背包问题&#xff1a; 0 - 1背包类问题 分割等和子集&#xff1a; 完全背包问题&#xff1a; 完全背包类问题 零钱兑换II: 什么是背包问题&#xff1f; 背包问题(Knapsack problem)是一种…

Windows-安装infercnv包(自备)

目录 安装基础 ①安装JAGS a,找到适配版本 b&#xff0c;install for me only安装路径 ②安装"rjags"包 ③安装inferCNV 安装基础 版本&#xff1a; R version 4.2.2 (2022-10-31 ucrt) -- "Innocent and Trusting"安装的JAGS版本为JAGS 4.3.1 首…

GPT提示词分享 —— 智能域名生成器

提示词&#x1f447; 我希望你能充当一个聪明的域名生成器。我将告诉你我的公司或想法是什么&#xff0c;你将根据我的提示回复我一份域名备选清单。你只需回复域名列表&#xff0c;而不是其他。域名应该是最多 7-8 个字母&#xff0c;应该简短但独特&#xff0c;可以是朗朗上口…

C易错注意之分支循环,悬空else,短路表达式,函数static

接下来的日子会顺顺利利&#xff0c;万事胜意&#xff0c;生活明朗-----------林辞忧 前言&#xff1a; c语言中一些关于分支循环中continue常混淆&#xff0c;悬空esle问题&#xff0c;短路表达式&#xff0c;static ,extern在使用时稍不注意就会出错的点,接下来我们将介绍…

Monkey工具之fastbot-iOS实践

Monkey工具之fastbot-iOS实践 背景 目前移动端App上线后 crash 率比较高&#xff0c; 尤其在iOS端。我们需要一款Monkey工具测试App的稳定性&#xff0c;更早的发现crash问题并修复。 去年移动开发者大会上有参加 fastbot 的分享&#xff0c;所以很自然的就想到Fastbot工具。…

Lilishop商城(windows)本地部署【docker版】

Lilishop商城&#xff08;windows&#xff09;本地部署【docker版】 部署官方文档&#xff1a;LILISHOP-开发者中心 https://gitee.com/beijing_hongye_huicheng/lilishop 本地安装docker https://docs.pickmall.cn/deploy/win/deploy.html 命令端页面 启动后docker界面 注…

java回溯算法笔记

回溯算法综述 回溯用于解决你层for循环嵌套问题&#xff0c;且不剪枝的回溯完全等于暴力搜索。 回溯算法模板https://blog.csdn.net/m0_73065928/article/details/137062099?spm1001.2014.3001.5501 组合问题&#xff08;startindex避免使用重复元素&#xff09; “不含重复…

一篇讲明白 Hadoop 生态的三大部件

文章目录 每日一句正能量前言01 HDFS02 Yarn03 Hive04 HBase05 Spark及Spark Streaming关于作者推荐理由后记赠书活动 每日一句正能量 黎明时怀着飞扬的心醒来&#xff0c;致谢爱的又一天&#xff0c;正午时沉醉于爱的狂喜中休憩&#xff0c;黄昏时带着感恩归家&#xff0c;然后…