前后端

React

https://react.dev/learn

JavaWeb

HTML 基础教程 https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML CSS 基础教程 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps

标签

image.png

image.png

DIV

是一个块级容器,就像一个无形的盒子,用来把页面内容分成不同的部分,方便用CSS控制样式和布局

你可以把页头,导航栏,内容区,页脚分别放进不同的

里,然后用CSS去控制每个盒子的位置,大小,背景等

CSS

css可以控制元素的大小,颜色,位置,背景等

JAVA

学习资料: https://www.runoob.com/java/java-tutorial.html

webserver:

学习资料推荐: Linux 高性能服务器编程 小林coding

项目概述:

image.png

在创建服务器时,还必须要指定一个端口号,当一台服务器,同时对外提供多种服务时,比如WEB服务,远程登陆服务等等,就需要使用"端口号"<对不同的服务进行区别.每个服务,都有自己唯一的端口号 image.png

接收浏览器的WEB请求 image.png

处理浏览器的请求: 在新线程中,单独处理对应浏览器客户端的请求

GET请求报文的格式 image.png

请求报文由4个部分组成: 请求行,请求头部行,空行,请求数据,具体格式如下:

\r(回车符): 含义: 将光标移动到当前行的开头 (不换行,只是回到行首,后续输出会覆盖该行开头的内容)

\n(换行符) 含义: 将光标移动到下一行 (换到新的一行,但列位置不变)

cpp中,当我们在字符串中使用\n时,它在不同平台上的表现可能会有所不同,因为cpp标准库在处理文本文件时可能会进行转换,例如在Windows平台上,当以文本模式打开文件时,写入\n会被转换为\r\n,读取\r\r会被转换为\n,而在二进制模式下,则不会进行转换

响应报文的格式 服务器发送数据给浏览器时,发送的响应报文,由4个部分组成: 状态行,消息头部,空行和响应正文,格式如下: 组成部分: 说明: 状态行: 版本+空格+状态码+短语+回车换行 消息头部 关键字: 空格 + 值 + 回车换行

空行 回车换行(\r\n) 例如: \n 响应正文

常用的关键字有: 关键字: 含义: Content-Type 返回消息的内容类型 Content-Length 返回内容的长度,以字节为单位 Data 返回消息的时间 Server 服务端的软件名称和它的版本号

执行WEB服务前的准备工作:

1.网络通信初始化 2.创建套接字 3.设置套接字属性,端口可复用 4.绑定套接字属性和网络地址 5.动态分配端口 6.创建监听队列

为什么要设置端口可复用:

// 没有设置端口复用时,重启可能报错: // “Bind failed: Address already in use”

1.服务器重启时避免"地址已在使用"错误 当服务器关闭或崩溃后,TCP连接可能还处于TIME_WAIT状态(通常持续2-4分钟).在这期间,如果立即重启服务器,会绑定失败

2.处理TIME_WAIT状态 TCP协议确保可靠关闭连接,TIME_WAIT状态: 确保最后一个ACK被对方收到 让网络中延迟的数据包过期 防止旧连接的重复数据包干扰新连接

3.开发调试遍历 在开发阶段,频繁重启服务器测试时,端口复用可以立即重启,无需等待

源码:

CGI (Common Gateway Interface, 通用网关接口)

一个标准协议,它定义了Web服务器与外部应用程序(如脚本,可执行程序)之间如何交互,从而动态生成网页内容

image.png

CGI 是一个让 Web 服务器运行外部程序来生成动态网页的古老而经典的协议。虽然现在很少直接使用“裸”CGI(因为性能问题),但它的思想——通过接口把请求传递给独立程序——仍然活跃在 FastCGI、WSGI、Servlets 等现代技术中。理解 CGI 有助于你把握 Web 后端演进的历史脉络。

image.png

Tinywebserver

B/S模型

Browser(浏览器):客户端,负责展示界面、发送用户请求(如输入网址、点击按钮)、渲染服务器返回的 HTML/CSS/JS 等资源。 Server(服务器):服务端,通常是 Web 服务器(如你读的代码),负责接收请求、处理业务逻辑(如查询数据库、调用其他接口)、返回响应数据(如网页内容、JSON 数据)

线程同步机制包装类

多线程同步,确保任一时刻只能有一个线程能进入关键代码段 信号量 互斥锁 条件变量

http连接处理类

根据状态转移,通过主从状态机封装了http连接类.其中,主状态机在内部调用从状态机.从状态机将处理 状态和数据传给主状态机 客户端发出http连接请求 从状态机读取数据,更新自身状态和接收数据,传给主状态机 主状态机根据从状态机状态,更新自身状态,决定响应请求还是继续读取

半同步/半反应堆线程池

使用一个工作队列解除了主线程和工作线程的耦合关系;主线程往工作队列中插入任务,工作线程通过竞争来取得任务并执行它 同步I/O模拟proactor模式 半同步/半反应堆 线程池

定时器处理非活动连接

由于非活跃连接占用了连接资源,严重影响服务器的性能,通过实现了一个服务器定时器,处理这种非活跃连接,释放连接资源.利用alarm函数周期性地触发SIGALRM信号,该信号地信号处理函数利用管道通知主循环执行定时器链表地定时任务 统一事件源 基于升序链表的定时器 处理非活动连接

同步/异步日志系统

同步/异步日志系统主要涉及了两个模块,一个是日志模块,一个是阻塞队列模块,其中加入阻塞队列模块主要是解决异步写入日志做准备 自定义阻塞队列 单例模式创建日志 同步日志 异步日志 实现按天,超行分类

校验 & 数据库连接池

数据库连接池 单例模式,保证唯一 list实现连接池 互斥锁实现线程安全

校验 HTTP请求采用POST方式 登录用户名和密码校验 用户注册及多线程注册安全

自瞄网页调试器

虚拟机和windows主机Net网络通信:

虚拟机Linux: IP: 192.168.186.136(NAT 背后的内部地址,Windows 无法直接访问) 开了两个服务: HTTP 服务器:监听 0.0.0.0:8000 rosbridge WebSocket 服务器:监听 0.0.0.0:9090

Windows主机: 浏览器地址栏输入 http://localhost:8000/panel.html 网页里的 JS 连接 ws://localhost:9090

VMware NAT 端口转发规则: 主机端口 8000 → 虚拟机 192.168.186.136:8000 主机端口 9090 → 虚拟机 192.168.186.136:9090

Linux高性能服务器

第6章 高级I/O函数

6.1pipe函数 – 创建管道

6.2dup函数和dup2函数 – 复制文件描述符

6.3readv函数和writev函数 – 分散读和集中写

6.4sendfile – 文件到套接字的零拷贝传输

6.5mmap函数和munmap函数 – 文件到套接字的零拷贝传输

6.6splice函数 – 内核空间的数据移动

6.7tee函数 – 管道数据的零拷贝镜像

6.8fcntl函数 – 文件描述符的操控

app(开怀)

这是一个基于 React 19 + TypeScript + Vite 的前端项目,UI 组件库使用了 shadcn/ui(基于 Radix UI + Tailwind CSS)。项目采用组件化 + 区块化的目录组织方式,适合构建企业级/产品展示类网站。

需求:

照片查找不到

环境配置文档:

一、准备工作 安装 Node.js 访问 Node.js 官网 下载 LTS 版本(如 20.x 或 22.x),Windows 选择 .msi 安装包 安装时一路默认选项(会自动配置环境变量) 安装完成后 重启电脑(或至少重启 VSCode/终端) 验证安装 打开 命令提示符(CMD),输入: cmd node -vnpm -v 如果显示版本号(如 v20.18.0 和 10.8.2),说明安装成功。

⚠️ 注意:不要使用 PowerShell(可能出现脚本执行策略错误),推荐使用 CMD 或 VSCode 中切换终端为 Command Prompt。

二、在 VSCode 中打开项目 打开 VSCode 点击 文件 → 打开文件夹,选择项目所在的文件夹(包含 package.json 的目录) 左侧资源管理器中应该能看到 package.json、index.html、src 等文件

三、安装项目依赖 打开终端cmd 进入项目目录 执行安装命令 npm install

四、启动开发服务器 npm run dev 终端会显示: text VITE v7.x.x ready in xxx ms ➜ Local: http://localhost:5173/ ➜ Network: use –host to expose 按住 Ctrl 并点击 http://localhost:5173/,浏览器会自动打开项目页面。

图片 1 图片 2 图片 3 图片 4 图片 5 图片 6 图片 7 图片 8

文档修订记录 7 次修订
  1. 197fd12 修复大小标题显示失败的bug hydarealman
  2. 9a00af8 Fix: apply heading heuristic to 44 existing posts (26+18) - TOC now shows real sections hydarealman
  3. edc8d79 博客界面更换 一些笑哦bug维修 hydarealman
  4. bce812d 6_28飞书文档同步更新 hydarealman
  5. 7d34298 Add manual and sortable library hydarealman
  6. 9402175 Improve blog layout and pinned posts hydarealman
  7. 98d0f15 Create Hugo blog hydarealman
在 GitHub 上查看完整历史