f12网络教程 客户端 服务端 服务器前端 后端

优质文章学习记录

— 6 min read

文章目录

客户端 服务端 服务器 前端 后端

客户端（Client）——通信角色

在这里插入图片描述

请求发给谁了？所有客户端发请求时，请求的链接一定有 IP 和端口。

在这里插入图片描述


在这里插入图片描述
url里有 IP → 直接用，没有 IP → 调用 DNS 查域名 → 得到 IP
在这里插入图片描述


在这里插入图片描述

服务端（Server）–通信角色

在这里插入图片描述


在这里插入图片描述

服务器 程序运行的机器

在这里插入图片描述


在这里插入图片描述

前端（Front-end）——系统分层

在这里插入图片描述


在这里插入图片描述

前端不等于浏览器，浏览器 = 前端常见的运行环境之一

在这里插入图片描述


在这里插入图片描述

后端 – 系统分层

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

总结

在这里插入图片描述

Web 系统会叫前后端/非 Web 系统 一般都是客户端，服务端

在这里插入图片描述

程序&服务器

在这里插入图片描述

f12-》network(网络)->过滤->刷新-> XHR / Fetch-》点开其中一个请求

在这里插入图片描述

清空再操作: 如果请求太多，先点击 Network 面板的清空按钮，再操作页面

在这里插入图片描述

XHR / Fetch 面板里看到的请求 = 浏览器会向后端发的HTTP请求

在这里插入图片描述


在这里插入图片描述

XHR / Fetch XHR / Fetch 这个筛选器 = 只看“接口请求”，前端请求后端接口，就是：浏览器用来和后端接口“据”的方式

XHR = XMLHttpRequest

在这里插入图片描述

Fetch

在这里插入图片描述

XHR/Fetch 请求详情

payload 载荷
在这里插入图片描述
preview 预览
在这里插入图片描述
response
在这里插入图片描述
Initiator（启动器 / 调用来源）
在这里插入图片描述
Timing（时间）
在这里插入图片描述
Cookies（Cookie）
在这里插入图片描述
header 请求头
在这里插入图片描述

浏览器 Network 面板里都有哪些东西，以及 XHR/Fetch 和其他条目的区别

在这里插入图片描述

为什么 XHR / Fetch 才是前后端交互？

在这里插入图片描述


在这里插入图片描述

怎么在后端代码，搜请求的网址。搜path段，复制一部分关键的路径，都不到就在少复制一点

在这里插入图片描述


在这里插入图片描述

flask 类视图 怎么搜？ .ae_view(

浏览器 F12 看到一个请求 URL → 想在 Flask 代码里找到它对应的类视图

flask类视图讲解

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

Read more

【GitHub项目推荐--Happy Coder：Claude Code的移动端与Web客户端】⭐⭐⭐

简介 Happy Coder 是一个为Claude Code和Codex设计的移动端和Web客户端，支持实时语音功能、端到端加密，功能齐全。该项目由slopus团队开发，旨在让开发者能够随时随地监控和控制他们的AI编程助手。 🔗 GitHub地址 ： https://github.com/slopus/happy 📱 核心价值 ： 移动访问 · 实时监控 · 端到端加密 · 多设备切换 · 开源透明 项目背景 ： * 移动办公 ：远程工作需求增长 * AI编程 ：AI编程助手普及 * 设备切换 ：多设备协同需求 * 隐私安全 ：代码安全需求 * 开发者工具 ：开发者工具创新 项目特色 ： * 📱 移动访问 ：手机访问Claude Code * ⚡ 实时同步 ：实时状态同步 * 🔐 端到端加密 ：完全加密保护 * 🔔 推送通知 ：智能推送提醒 * 🔄 设备切换 ：无缝设备切换 技术亮点 ： * 加密技术 ：端到端加密 * 实时通信 ：实时数据同步
2025版最详细WebStorm下载安装教程(详细图解)

2025版最详细WebStorm下载安装教程(详细图解)

目录 一、前言 二、WebStorm的下载安装 1、下载WebStorm 2、安装WebStorm 3、首次启动WebStorm 一、前言 前端一般就是用WebStorm或者是VSCode，Jetbrains家的ide一般都比较重，VSCode相对而言就轻快一点。主要还是看大家自己喜欢哪个就下哪个，我个人电脑内存是32G所以我一直用Jetbrains家的软件体验不错。本博客记录一下WebStorm的安装流程，大家自行参考 然后WebStorm从24年10月开始就是免费的了，所以不需要任何许可证直接下了就能用，并且也不需要像Java和Python那样配JDK和解释器，整体还是很简单的 二、WebStorm的下载安装 1、下载WebStorm 打开浏览器，访问JetBrains的官方网址，点击如下网址能直接跳转到WebStorm的下载页面： Download WebStorm: The JavaScript and TypeScript IDE by JetBrains 选择好自己的系统，然后直接点击Download即可 等待安装包下载完成，网速快

零门槛玩转声纹技术：CAM++ WebUI使用完全指南

零门槛玩转声纹技术：CAM++ WebUI使用完全指南 1. 为什么说这是真正“零门槛”的声纹工具？ 你可能听说过声纹识别——那个听起来高大上、需要写代码、调模型、配环境的AI黑科技。但今天要介绍的这个工具，连“安装”两个字都几乎可以划掉。 它不是命令行里一串让人头皮发麻的报错信息，也不是需要你先学三天Python才能跑通的项目。它就是一个打开浏览器就能用的网页界面，点几下、传两段音频、按一个按钮，3秒后你就知道：这两段声音，是不是同一个人说的。 这不是演示，不是Demo，而是科哥基于达摩院开源模型 CAM++（Context-Aware Masking++） 打包好的完整WebUI系统。它已经帮你把所有底层依赖、CUDA版本、PyTorch环境、语音预处理流水线……全都封进镜像里了。你唯一要做的，就是启动它，然后开始验证、提取、探索。 没有GPU？没关系，它在CPU上也能跑（速度稍慢但完全可用）。 没接触过语音技术？没问题，连“Embedding”
详细教程：如何从前端查看调用接口、传参及返回结果（附带图片案例）

详细教程：如何从前端查看调用接口、传参及返回结果（附带图片案例）

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题（CORS） 作为一名后端工程师，理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具（F12）查看和分析这些信息，并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章，打开开发者工具进行演示。 2. 使用