当前位置: 首页 > news >正文

前后端、网关、协议方面补充

这里写目录标题

  • 前后端
    • 接口文档
      • 简介
      • 前后端视角
        • 对于前端
        • 对于后端
          • 代码
          • 注册路由
          • 路由处理函数
      • 关于http
        • GET/POST
        • 底层网络
        • 关于前端的获取
  • 路由器网关
    • 路由器的IP
      • 简介
      • 公网IP(WAN IP)
      • 私网IP(LAN IP)
      • 无线网络IP(WIFI IP)
      • 查询
        • 路由器私网IP
        • 路由器公网IP
    • LAN口与WIFI
      • 简介
      • 基本原理
    • 手动配置电脑IP时,默认网关
      • 由上述已经可知,默认网关即路由器的私网IP
    • 二级目录
    • 二级目录
  • 一级目录
    • 二级目录
    • 二级目录
    • 二级目录
  • 一级目录
    • 二级目录
    • 二级目录
    • 二级目录

前后端

接口文档

简介

接口文档,是对一个接口的功能、参数、返回值、调用凡是等进行详细描述的文档

例如:
在这里插入图片描述

前后端视角

对于前端

在这里插入图片描述
在这里插入图片描述
前端相当于接口的调用者
后端相应的接口会被开放在文档中规定的URL地址,该接口服务就监听在这里。
前端会去向接口文档中提供的URL发送请求,向指定的后端服务发送数据,拿到返回值(通常是JOSN类型的数据)

发送的数据包括:
GET:完整的URL(含请求方法、参数)
POST:大部分数据在请求体,同时也会讲URL发送到后端
发送URL一方面可以携带数据,一方面可以检查确认没有发错人

fetch(‘https://example.com/api/getUserInfo?userId=1’) 这部分向指定的接口 URL 发送了一个 GET 请求,并传递了参数 userId=1 。
然后通过 .then(response => response.json()) ,将服务器返回的响应转换为 JSON 格式的数据。如果转换成功,就会进入下一个 .then 回调,通过 data => console.log(data) 将数据打印到控制台。
如果在这个过程中任何一个环节出现错误,比如网络问题或者服务器返回了错误状态码,就会被 .catch 捕获,然后通过 console.error 打印出错误信息。

对于后端
代码

在这里插入图片描述
在上述代码中,handleGetRequest 函数用于处理 GET 请求,分析请求中的参数,并根据参数情况返回相应的响应。main 函数中创建 http_listener 对象来监听指定端口和路径的请求,并关联处理函数。

步骤解释:
1、使用http_listener对象,来进行一些操作,包括:
指定监听URL、注册路由(注册当URL收到请求,且请求为GET/POST时,进入到某个“路由处理函数”进行业务处理)

在路由处理函数中:
2、参数在URL中,所以要对URL进行分割,拿到参数

3、拼接好JOSN数据对象之后,直接使用relay方法发送给前端

4、这个是后端在监听对应的URL路径上收到的前端请求

注册路由

上述的listener.support()就是注册路由
注册路由主要有以下几个重要作用:
组织和管理请求:通过注册路由,可以将不同的请求 URL 和对应的处理逻辑清晰地关联起来,使后端服务能够有条不紊地处理各种类型的请求。
提高代码可读性和可维护性:将请求与处理函数明确对应,使得其他开发者在阅读和理解代码时更容易知道每个请求的处理流程。
分离关注点:让开发者能够专注于每个路由对应的具体业务逻辑,而不必担心请求的分发和匹配。
方便扩展和修改:当需要添加新的功能或修改现有功能时,只需在注册路由的部分进行相应的调整,而不会影响到其他不相关的部分。
增强安全性:可以对不同的路由进行访问权限的控制和设置,保障系统的安全性。

其他例子:
在这里插入图片描述
1、在上述代码中,通过 listener.support 方法注册了两个路由 /home 和 /about ,并分别关联了 handleHomeRequest 和 handleAboutRequest 两个处理函数。

2、在上述代码中,注册的路由及其对应的 URL 分别是:
handleHomeRequest 对应的 URL 是 http://localhost:3000/home
handleAboutRequest 对应的 URL 是 http://localhost:3000/about

3、在实际开发中,只要前后端对 URL 的理解和使用保持一致即可,不一定要求资源实际存在于 URL 所指示的物理路径下。
URL 更多的是一种逻辑上的标识符和约定,前后端通过遵循相同的规则来进行通信和交互。
然而,从良好的架构和设计角度来说,将相关的处理逻辑和资源按照有意义的方式组织在与 URL 结构相对应的代码结构中,有助于提高代码的可维护性和可读性。
但关键还是前后端的一致性,只要双方都明确并遵循相同的 URL 规则,系统就能正常运行。

路由处理函数

上述的handleGetRequest 就是路由处理函数
路由处理函数呢,简单来说就是当特定的路由(也就是 URL 路径)被访问,并且使用了特定的 HTTP 方法(比如 GET、POST 等)时,会被调用执行的函数。
之所以叫 “路由”,是因为它就像网络中的路由器一样。路由器根据数据包的目标地址来决定数据包的流向,而在 Web 开发中,路由根据客户端请求的 URL 和方法,决定将请求引导到对应的处理函数去进行处理,从而实现不同的功能。
打个比方,您可以把整个 Web 应用想象成一个大的办公楼,每个房间就是一个功能模块。而路由就像是办公楼里的指示牌,告诉来访者(客户端的请求)根据不同的目的地(URL 路径)找到对应的房间(处理函数)去处理相关事务。

关于http

GET/POST

在这里插入图片描述
GET是查询
POST是提交,用于实质作用于后端或者数据库

底层网络

1、http的传输层是TCP:
在这里插入图片描述
浏览器会首先向后端建立TCP连接,之后再访问后续的URL请求

2、前后端使用http的话,主要是使用URL进行网络数据交互:
在这里插入图片描述
URL负责通信方的指定(IP+port),同时还指定请求的方法(GET/POST),同时还携带GET方法的参数
(POST的数据在请求体里面)
不需要实现创建socket进行连接

关于前端的获取

当我们输入一个网址后,浏览器会使用DNS解析域名获取后端IP

之后建立TCP连接

之后,向后端发送URL,后端收到后,向前端发挥实质的html等页面文件

浏览器解析这些html css等,渲染页面

路由器网关

路由器的IP

简介

路由器可以有多个IP地址,这取决于其配置和网络结构。

公网IP(WAN IP)

WAN(广域网)IP地址:这是路由器连接到互联网时使用的公共IP地址。这个地址是由你的互联网服务提供商(ISP)分配的,可以是动态的(每次连接时可能会变化)或静态的(固定不变)。

私网IP(LAN IP)

LAN(局域网)IP地址:这是路由器在其内部网络中使用的私有IP地址。它用于与连接到路由器的设备(如电脑、手机等)进行通信。常见的LAN IP地址范围包括192.168.x.x、172.16.x.x和10.x.x.x。
路由器的LAN IP地址通常也是这些设备的默认网关地址。

无线网络IP(WIFI IP)

无线网络(Wi-Fi)IP地址:如果路由器支持Wi-Fi,它还会有一个或多个用于无线网络的IP地址。

这些地址通常与LAN IP地址相同,因为它们都在同一个内部网络中。

总的来说,路由器的主要IP地址是WAN IP地址和LAN IP地址。如果你需要配置网络设备,通常只需要关注LAN IP地址(即默认网关)。

查询

路由器私网IP

在这里插入图片描述
在这里插入图片描述
电脑上的config,中“无线局域网支配器 WLAN”,指的是无线局域网(WIFI)的一些网络信息
WIFI型局域网
可以看到电脑的内网IP、默认网关就是路由器的“私网IP”

补充:“以太网适配器”:
以太网指的是LAN口的有线连接,而WLAN是无线连接(WIFI)

路由器公网IP

在这里插入图片描述
使用以上命令(注意是if 不是 ip)

这个会显示电脑的公网IP,同时,也是路由器的公网IP,因为内网的任何设备都是使用的路由器的公网IP

LAN口与WIFI

简介

WIFI与LAN口是平级的,他们都是在局域网子网中的连接方式,只不过一个是无线,一个是有线

基本原理

将路由器的WAN口插上网线后,路由器确实会连接到互联网

1 连接WAN口
将从互联网服务提供商(ISP)提供的调制解调器或光猫出来的网线插入路由器的WAN口。

2 配置路由器:按照互联网服务提供商的手册配置路由器

3 连接LAN口:
使用网线连接LAN口
或者
使用WIFI连接LAN口

手动配置电脑IP时,默认网关

由上述已经可知,默认网关即路由器的私网IP

二级目录

二级目录

一级目录

二级目录

二级目录

二级目录

一级目录

二级目录

二级目录

二级目录

相关文章:

前后端、网关、协议方面补充

这里写目录标题 前后端接口文档简介前后端视角对于前端对于后端代码注册路由路由处理函数 关于httpGET/POST底层网络关于前端的获取 路由器网关路由器的IP简介公网IP(WAN IP)私网IP(LAN IP)无线网络IP(WIFI IP)查询路由器私网IP路由器公网IP LAN口与WIFI简介基本原理 手动配置电…...

如何在Mac上切换到JDK 17开发环境

在本文中,我将为您介绍如何在Mac上切换到JDK 17,包括下载和安装JDK 17、设置环境变量、在IntelliJ IDEA中配置项目、修改Maven编译配置,并最终使用mvn clean install重新编译项目。通过这个流程,您可以顺利地将开发环境升级到JDK …...

深入探索 TypeScript:从基础到高级特性

深入探索 TypeScript:从基础到高级特性 一、引言 在现代软件开发领域,TypeScript 已经成为了一种极具影响力的编程语言。它基于 JavaScript,并为其添加了强大的静态类型系统,使得代码在开发阶段就能进行更严格的类型检查&#x…...

Leetcode:118. 杨辉三角——Java数学法求解

题目——Leetcode:118. 杨辉三角 给定一个非负整数 numRows,生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中,每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2: 输入: numRow…...

SHELL脚本(Linux)

声明 学习视频来自 B 站UP主泷羽sec,如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 ✍🏻作者简介:致…...

单元测试、集成测试、系统测试、验收测试、压力测试、性能测试、安全性测试、兼容性测试、回归测试(超详细的分类介绍及教学)

目录 1.单元测试 实现单元测试的方法: 注意事项: 2.集成测试 需注意事项: 实现集成测试的方法: 如何实现高效且可靠的集成测试: 3.系统测试 实现系统测试的方法: 须知注意事项: 4.验收测试 实现验…...

低代码集成多方API的简单实现

在现代软件开发中,集成多个API服务提供商已成为常见需求。然而,不同的API认证机制和数据格式使得集成过程变得复杂且耗时。为了应对这些挑战,本文将介绍一种低代码解决方案,通过配置化管理和简化的代码逻辑,帮助开发者…...

【测试框架篇】单元测试框架pytest(1):环境安装和配置

一、pytest简介 Pytest是Python的一种单元测试框架,与Python自带的unittest测试框架类似,但是比 unittest框架使用起来更简洁,效率更高。 二、pytest特点 Pytest是一个非常成熟的Python测试框架,主要特点有以下几点: 非常容易…...

Python数据分析NumPy和pandas(二十九、其他Python可视化工具)

与其他开源工具一样,在 Python 中创建图形有很多选项(太多了,无法一一列举)。自 2010 年以来,主要开发工作集中在创建用于在 Web 上发布交互式图形上。例如: Altair、Bokeh 和 Plotly 等工具,可…...

Unity中HDRP设置抗锯齿

一、以前抗锯齿的设置方式 【Edit】——>【Project Settings】——>【Quality】——>【Anti-aliasing】 二、HDRP项目中抗锯齿的设置方式 在Hierarchy中——>找到Camera对象——>在Inspector面板上——>【Camera组件】——>【Rendering】——>【Pos…...

Spring Boot实现文件上传与OSS集成:从基础到应用

目录 前言1. 文件上传的基础实现1.1 前端文件上传请求1.2 后端文件接收与保存 2. 集成第三方OSS服务2.1 准备工作2.2 编写OSS集成代码2.3 修改Controller实现文件上传至OSS 3. 文件上传的扩展:多文件上传与权限控制结语 前言 随着互联网应用的快速发展,…...

Python学习26天

集合 # 定义集合 num {1, 2, 3, 4, 5} print(f"num:{num}\nnum数据类型为:{type(num)}") # 求集合中元素个数 print(f"num中元素个数为:{len(num)}") # 增加集合中的元素 num.add(6) print(num) # {1,2,3,4,5,6} # 删除…...

linux startup.sh shutdown.sh (kkFileView)

linux启动脚本和关闭脚本startup.sh shutdown.sh (kkFileView) startup.sh DIR_HOME("/opt/openoffice.org3" "/opt/libreoffice" "/opt/libreoffice6.1" "/opt/libreoffice7.0" "/opt/libreoffice7.1&q…...

[MySQL]隐式类型转换

安全等号 <> 如果有参数为NULL&#xff0c;则除了相等比较运算符()&#xff0c;比较的结果为null。对于 nullnull&#xff0c;结果为true。 在select语句中&#xff0c;使用 时&#xff0c;结果不会包含值为 null 的记录&#xff0c;但如果使用安全等号 <> 来…...

面经总结1

文章目录 如何保证批量请求失败&#xff0c;只弹出一个toast1使用计数器&#xff1a;2使用标志变量&#xff1a; 如何减少项目里的if-else1使用多态2使用策略模式3使用字典映射4使用状态模式 babel-runtime 作用是啥如何实现 PDF 预览和下载1浏览器内置PDF阅读器2使用PDF.js库3…...

Oracle19C AWR报告分析之Instance Efficiency Percentages (Target 100%)

Oracle19C AWR报告分析之Instance Efficiency Percentages 一、分析数据二、详细分析2.1 Instance Efficiency Percentages (Target 100%)各项指标及其解释2.2 分析和总结 一、分析数据 二、详细分析 在 Oracle AWR (Automatic Workload Repository) 报告中&#xff0c;每个性能…...

数据结构--数组

一.线性和非线性 线性&#xff1a;除首尾外只有一个唯一的前驱和后继。eg&#xff1a;数组&#xff0c;链表等。 非线性&#xff1a;不是线性的就是非线性。 二.数组是什么&#xff1f; 数组是一个固定长度的存储相同数据类型的数据结构&#xff0c;数组中的元素被存储在一…...

nrm的安装及使用

nrm的安装及使用 NRM&#xff08;NPM Registry Manager&#xff09;是一个用于快速切换npm&#xff08;Node Package Manager&#xff09;源的工具。npm是Node.js的包管理工具&#xff0c;用于安装、发布、管理Node.js包。由于网络原因&#xff0c;直接使用npm官方源&#xff…...

【MatLab手记】 --从0到了解超超超详过程!!!

文章目录 MatLab笔记一、命令行窗口二、变量命名规则三、数据类型1. 数字2. 字符与字符串3. 矩阵3.1 矩阵创建3.2 矩阵的修改和删除3.3 矩阵的拼接与重构重排3.4 矩阵的运算方法3.5 矩阵的下标 4. 元胞数组&#xff08;类似数据容器&#xff09;5. 结构体 四、逻辑与流程控制五…...

从零创建vue+elementui+sass+three.js项目

初始化&#xff1a; vue init webpack projectnamecd projectnamenpm install支持sass: npm install sass --save-dev npm install sass-loader7.1.0 --save-dev npm install node-sass4.12.0 --save-devbuild/webpack.base.conf.js添加 rules: [...,{test: /\.scss$/,loade…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

《Offer来了:Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了:Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了:Java面试核心知识点精讲(原理篇)》技术文章大纲核心主题:Java基础原理与面试高频考点Java虚拟机(JVM)原理Java并发编程原理Jav…...

Netty自定义协议解析

目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类,这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前,需要明确协议的具体格式。例如,一个简单的…...

AI书签管理工具开发全记录(十八):书签导入导出

文章目录 AI书签管理工具开发全记录&#xff08;十八&#xff09;&#xff1a;书签导入导出1.前言 &#x1f4dd;2.书签结构分析 &#x1f4d6;3.书签示例 &#x1f4d1;4.书签文件结构定义描述 &#x1f523;4.1. ​整体文档结构​​4.2. ​核心元素类型​​4.3. ​层级关系4.…...

Vue.js教学第二十一章:vue实战项目二,个人博客搭建

基于 Vue 的个人博客网站搭建 摘要: 随着前端技术的不断发展,Vue 作为一种轻量级、高效的前端框架,为个人博客网站的搭建提供了极大的便利。本文详细介绍了基于 Vue 搭建个人博客网站的全过程,包括项目背景、技术选型、项目架构设计、功能模块实现、性能优化与测试等方面。…...

Java + Spring Boot + Mybatis 插入数据后,获取自增 id 的方法

在 MyBatis 中使用 useGeneratedKeys"true" 获取新插入记录的自增 ID 值&#xff0c;可通过以下步骤实现&#xff1a; 1. 配置 Mapper XML 在插入语句的 <insert> 标签中设置&#xff1a; xml 复制 下载 运行 <insert id"insertUser" para…...

NoSQL——Redis配置与优化

目录 关系型&非关系型数据库 一、核心原理对比‌ ‌二、核心特性对比‌ ‌三、关键区别剖析‌ ‌四、典型产品示例‌ ‌总结‌ Redis Redis核心原理 核心特性 技术意义 配置文件解析 1. 基础配置 2. 持久化配置 3. 内存管理 4. 高可用配置 5. 性能调优 6.…...