si-meng-spec/SiMengWebSite_Notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: v1.0.0 祀梦笔记：从 0 到 1 的数字化花园建设

Browse Source
This commit is contained in:
祀梦
2026-01-09 10:03:40 +08:00
commit a5fd8545f4
75 changed files with 15529 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.gitattributes vendored Normal file
View File

@@ -0,0 +1,14 @@
* text eol=lf
*.txt text eol=crlf
*.png binary
*.jpg binary
*.jpeg binary
*.ico binary
*.gif binary
*.tff binary
*.woff binary
*.woff2 binary
*.mp4 binary
*.webm binary
*.mov binary

18
.gitignore vendored Normal file
View File

@@ -0,0 +1,18 @@
**/node_modules
docs/.vuepress/.cache
docs/.vuepress/.temp
docs/.vuepress/dist
.trae/
.DS_Store
*.log
# Build and Publish output
_publish/
# Local resources storage (not uploaded)
resources/
# Ensure .gitkeep files are always tracked
!**/.gitkeep

89
README.md Normal file
View File

@@ -0,0 +1,89 @@
# 祀梦的笔记网站
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
一个基于 VuePress 的个人学习笔记和博客网站，记录编程学习、算法练习和日常生活的点滴。
## 项目简介
这个网站是我（祀梦）记录学习和生活的个人空间，主要包含以下内容：
- **编程笔记**：记录C++、LeetCode算法等编程相关的学习笔记
- **博客**：分享日常生活和学习心得
- **工具推荐**：记录实用的开发工具和资源
- **友情链接**：展示朋友的个人网站
## 技术栈
- [VuePress](https://vuepress.vuejs.org/) - 静态网站生成器
- [VuePress Theme Plume](https://theme-plume.vuejs.press/) - 美观的博客主题
- [Vue 3](https://vuejs.org/) - 前端框架
- [Vite](https://vitejs.dev/) - 构建工具
## 安装
- 环境要求：
- Node.js：`^20.6.0` 或 `>=22.0.0`（推荐使用当前 LTS 或稳定版）
- npm：`>=10`
- 安装步骤：
1. 在项目根目录执行依赖安装：
```sh
npm install
```
2. 启动开发服务器（任选其一）：
- 常规方式：
```sh
npm run docs:dev
```
- Windows 快捷方式（尝试监听 `0.0.0.0` 以便局域网访问）：
```bat
.\start.bat
```
- 若端口或权限受限，使用备用命令（绑定到本机并更换端口）：
```sh
npx vuepress@2.0.0-rc.24 dev docs --port 5173 --host localhost
```
3. 打开浏览器访问：
- `http://localhost:4567/`（默认）或
- `http://localhost:5173/`（如果使用备用命令）
- 常见问题与排查：
- “`vuepress` 不是内部或外部命令”：通常为依赖未安装或安装失败，执行 `npm install` 后重试。
- “listen EACCES: permission denied 0.0.0.0:4567”：端口或绑定权限受限，改用 `--host localhost` 或更换端口（如 `--port 5173`）。
- 需要清理缓存后重试：
```sh
npm run docs:dev-clean
```
- 更换端口示例（以 8080 为例）：
```sh
npx vuepress dev docs --port 8080 --host localhost
```
## 使用
```sh
# 启动开发服务器（带热重载）
npm run docs:dev
# 清除缓存并启动开发服务器
npm run docs:dev-clean
# 构建生产版本
npm run docs:build
# 本地预览生产版本
npm run docs:preview
# 更新 VuePress 和主题
npm run vp-update
```
## 文档链接
- [VuePress 官方文档](https://vuepress.vuejs.org/)
- [VuePress Theme Plume 文档](https://theme-plume.vuejs.press/)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

57
README.zh-CN.md Normal file
View File

@@ -0,0 +1,57 @@
# 祀梦的笔记网站
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
一个基于 VuePress 的个人学习笔记和博客网站，记录编程学习、算法练习和日常生活的点滴。
## 项目简介
这个网站是我（祀梦）记录学习和生活的个人空间，主要包含以下内容：
- **编程笔记**：记录C++、LeetCode算法等编程相关的学习笔记
- **博客**：分享日常生活和学习心得
- **工具推荐**：记录实用的开发工具和资源
- **友情链接**：展示朋友的个人网站
## 技术栈
- [VuePress](https://vuepress.vuejs.org/) - 静态网站生成器
- [VuePress Theme Plume](https://theme-plume.vuejs.press/) - 美观的博客主题
- [Vue 3](https://vuejs.org/) - 前端框架
- [Vite](https://vitejs.dev/) - 构建工具
## 安装
确保您的 Node.js 版本符合要求（^20.6.0 || >=22.0.0），然后执行以下命令：
```sh
npm i
```
## 使用
```sh
# 启动开发服务器（带热重载）
npm run docs:dev
# 清除缓存并启动开发服务器
npm run docs:dev-clean
# 构建生产版本
npm run docs:build
# 本地预览生产版本
npm run docs:preview
# 更新 VuePress 和主题
npm run vp-update
```
## 文档链接
- [VuePress 官方文档](https://vuepress.vuejs.org/)
- [VuePress Theme Plume 文档](https://theme-plume.vuejs.press/)
## 许可证
本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件。

8
docs/.vuepress/client.ts Normal file
View File

@@ -0,0 +1,8 @@
import { defineClientConfig } from 'vuepress/client'
import RImg from './theme/components/RImg.vue'
export default defineClientConfig({
enhance({ app }) {
app.component('RImg', RImg)
},
})

110
docs/.vuepress/config.ts Normal file
View File

@@ -0,0 +1,110 @@
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
import { viteBundler } from '@vuepress/bundler-vite'
import { commentPlugin } from '@vuepress/plugin-comment'
import { umamiAnalyticsPlugin } from '@vuepress/plugin-umami-analytics'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
export default defineUserConfig({
base: '/',
lang: 'zh-CN',
title: '仲夏夜之梦',
description: '爱与回忆的小世界，记录生活中的每一份温暖与感动',
head: [
['link', { rel: 'icon', type: 'image/png', href: 'https://theme-plume.vuejs.press/favicon-32x32.png' }],
],
bundler: viteBundler({
viteOptions: {
resolve: {
alias: {
},
},
},
}),
shouldPrefetch: false,
theme: plumeTheme({
/* 站点域名，启动 SEO 优化 */
hostname: 'https://www.simengweb.com',
/* 博客文章页面链接前缀 */
article: '/article/',
/* 启用数学公式支持和Mermaid图表 */
markdown: {
math: {
type: 'katex',
},
mermaid: true,
demo: true,
},
/**
* 编译缓存，加快编译速度
*/
cache: 'filesystem',
/* 本地搜索, 默认启用 */
search: { provider: 'local' },
footer: {
message: '愿每一份温柔都被世界珍藏 ✨',
copyright: '<a href="https://beian.miit.gov.cn/" target="_blank" aria-label="gongan filing address">沪ICP备2023010022号-1</a>©2025祀梦的个人博客'
},
/**
* 博客相关配置
*/
blog: {
postCover: {
layout: 'left',
width: 300,
compact: true
}
},
/**
* 文章贡献者配置
*/
contributors: {
mode: 'inline',
info: [
{
username: 'si-meng-spec',
name: 'si-meng-spec',
alias: ['si-meng-spec'],
}
]
},
/**
* Git插件配置
* 设置为true以在开发环境也启用
*/
plugins: {
git: true
},
codeHighlighter: {
lineNumbers: true,
}
}),
plugins: [
commentPlugin({
provider: 'Waline',
serverURL: 'https://vercel.simengweb.com',
meta: ['nick'],
requiredMeta: ['nick']
}),
umamiAnalyticsPlugin({
id: '2114ab32-5543-4be1-b5e8-c4f2c9269d0d',
link: 'https://umami.simengweb.com/script.js',
domains: ['www.simengweb.com'],
cache: true
}),
],
})

80
docs/.vuepress/navbar.ts Normal file
View File

@@ -0,0 +1,80 @@
import { defineNavbarConfig } from 'vuepress-theme-plume'
export default defineNavbarConfig([
{
text: '首页',
link: '/',
},
{
text: '博客',
link: '/blog/',
},
{
text: '学科知识',
items: [
{
text: '英语学习笔记',
link: '/subject/english/',
},
],
},
{
text: '编程笔记',
items: [
{
text: 'LeetCode',
link: '/programming/leetcode/',
},
{
text: 'C++',
link: '/programming/cplusplus/',
},
{
text: 'Solidity',
link: '/programming/solidity/',
},
{
text: 'Web 开发',
link: '/programming/web/',
}
],
},
{
text:"技术理论",
items:[
{
text: '密码学基础',
link: '/theory/cryptography/',
},
]
},
{
text: '运维',
items: [
{
text: '区块链运维',
link: '/ops/blockchain/',
},
{
text: 'Linux 运维',
link: '/ops/linux/',
},
{
text: 'Docker 运维',
link: '/ops/docker/',
},
],
},
{
text: '工具',
link: '/tools/',
},
{
text: '关于',
link: '/about/',
},
{
text: '友情链接',
link: '/friends/',
},
])

194
docs/.vuepress/notes.ts Normal file
View File

@@ -0,0 +1,194 @@
import { defineNoteConfig, defineNotesConfig } from 'vuepress-theme-plume'
/**
* 配置编程笔记
*/
const LeetCode = defineNoteConfig({
dir: 'programming',
link: '/programming/leetcode/',
sidebar: [
{ text: "LeetCode 指南", link: "/programming/leetcode/" },
{
text: "刷题题单", prefix: "/question_sheet", items: [
{ text: "LeetCode 入门题单～(≧∇≦)ﾉ", link: "/programming/leetcode/question_sheet/beginner/" }
]
}
]
})
const cPlusPlus = defineNoteConfig({
dir: 'programming',
link: '/programming/cplusplus/',
sidebar: [
{ text: "C++ 学习笔记", link: "/programming/cplusplus/" },
{
text: "基础配置与开发工具", prefix: "/basis", items: [
{ text: "C++ 环境配置", link: "/programming/cplusplus/basis/" }
]
}
]
})
const english = defineNoteConfig({
dir: 'subject',
link: '/subject/english/',
sidebar: [
{ text: "英语学习笔记", link: "/subject/english/" },
{
text: "学习环境与工具", prefix: "/basis", items: [
{ text: "英语环境配置", link: "/subject/english/basis/" }
]
},
{
text: "词汇与记忆", prefix: "/vocabulary", items: [
{ text: "词汇学习与记忆法", link: "/subject/english/vocabulary/" }
]
},
{
text: "语法与句法", prefix: "/grammar", items: [
{ text: "核心语法与句型", link: "/subject/english/grammar/" }
]
},
{
text: "听力与口语", prefix: "/listening-speaking", items: [
{ text: "听力口语训练", link: "/subject/english/listening-speaking/" }
]
},
{
text: "阅读与写作", prefix: "/reading-writing", items: [
{ text: "阅读提升", link: "/subject/english/reading-writing/" }
]
},
{
text: "写译", prefix: "/writing-translation", items: [
{ text: "写作与翻译指南", link: "/subject/english/writing-translation/" }
]
},
{
text: "考试与备考", prefix: "/exam", items: [
{ text: "英语四级 (CET-4) 备考指南", link: "/subject/english/exam/cet-4/" }
]
},
{
text: "资源与工具", prefix: "/resources", items: [
{ text: "学习资源与工具", link: "/subject/english/resources/" }
]
}
]
})
const solidity = defineNoteConfig({
dir: 'programming',
link: '/programming/solidity/',
sidebar: [
{ text: "Solidity 学习笔记", link: "/programming/solidity/" },
{
text: "基础语法", prefix: "/basic-syntax", items: [
{ text: "Solidity 基础语法与数据类型", link: "/programming/solidity/basic-syntax/" }
],
},
{
text: "项目实例", prefix: "/basic-syntax", items: [
{ text: "Solidity 代码实例", link: "/programming/solidity/analysis/case-analysis/" }
],
},
{
text: "杂项", prefix: "/other", items: [
{ text: "Hardhat 相关知识", link: "/programming/solidity/other/hardhat/" },
{ text: "一些没分类的小知识", link: "/programming/solidity/other/miscellaneous/" }
],
}
]
})
const cryptography = defineNoteConfig({
dir: 'theory',
link: '/theory/cryptography/',
sidebar: [
{ text: "密码学基础", link: "/theory/cryptography/" },
{
text: "古典加密算法", prefix: "/theory", items: [
{ text: "替换密码", link: "/theory/cryptography/substitution-ciphers/" },
{ text: "置换密码", link: "/theory/cryptography/permutation-encryption/" },
]
},
]
})
const blockchain = defineNoteConfig({
dir: 'ops',
link: '/ops/blockchain',
sidebar: [
{ text: "区块链运维指南", link: "/ops/blockchain/" },
{
text: "区块链理论基础", prefix: "/theory", items: [
{ text: "区块链的基本原理", link: "/ops/blockchain/theory/basic-principles/" },
{ text: "FISCO-BCOS 节点类型", link: "/ops/blockchain/theory/fisco-bcos-node-type/" }
]
},
{
text: "区块链运维", items: [
{ text: "区块链产品设计和基本部署", link: "/ops/blockchain/practice/basic-deployment/" },
{ text: "区块链网络部署与管理", link: "/ops/blockchain/practice/node-deployment/" },
{ text: "Console 控制台操作", link: "/ops/blockchain/practice/console-operator/" }
]
}
]
})
const linux = defineNoteConfig({
dir: 'ops',
link: '/ops/',
sidebar: [
{ text: "Linux 运维笔记", link: "/ops/linux/" },
{
text: "Linux 基础", prefix: "/linux", items: [
{ text: "Linux 基础命令详解", link: "/ops/linux/basic-commands/" }
]
},
{
text: "其他", prefix: "/linux", items: [
{ text: "一些零散的命令", link: "/ops/linux/other/" }
]
}
]
})
const docker = defineNoteConfig({
dir: 'ops',
link: '/ops/docker/',
sidebar: [
{ text: "Docker 运维笔记", link: "/ops/docker/" },
{
text: "数据库相关",
prefix: "/ops/docker/db/",
items: [
{ text: "MongoDB 部署", link: "/ops/docker/db/mongodb/" },
{ text: "Postgres 部署", link: "/ops/docker/db/postgres/" },
]
},
{
text: "其他服务",
prefix: "/ops/docker/other/",
items: [
{ text: "ETLCloud 部署", link: "/ops/docker/other/ETLCloud/" },
]
},
]
})
const web = defineNoteConfig({
dir: 'programming',
link: '/programming/web/',
sidebar: [
{ text: "Web 开发学习笔记", link: "/programming/web/" },
{
text: "基础知识", prefix: "/basic-syntax", items: [
{ text: "Web 前端基础讲解", link: "/programming/web/basic-syntax/html-css-js/" },
{ text: "HTML 常用标签与属性", link: "/programming/web/basic-syntax/html-tags-attributes/" },
{ text: "HTML 列表与语义布局", link: "/programming/web/basic-syntax/html-lists-and-semantic-layout/" },
{ text: "JavaScript 基础知识", link: "/programming/web/basic-syntax/javascript-basics/" },
],
},
]
})
/**
* 导出所有的 note
*/
export default defineNotesConfig({
dir: 'notes',
link: '/',
notes: [LeetCode, english, cPlusPlus, solidity, blockchain, linux, docker, cryptography, web],
})

25
docs/.vuepress/plume.config.ts Normal file
View File

@@ -0,0 +1,25 @@
import { defineThemeConfig } from 'vuepress-theme-plume'
import navbar from './navbar'
import notes from './notes'
export default defineThemeConfig({
logo: '/plume.svg',
appearance: true, // 深色模式
social: [
{ icon: 'github', link: '/' },
],
/**
* @see https://theme-plume.vuejs.press/config/basic/#profile
*/
profile: {
avatar: 'https://image.simengweb.com/elysia/header.jpg',
name: 'SiMengWebSite Notes',
description: '祀梦的笔记网站',
},
navbar,
notes,
})

0
docs/.vuepress/public/docs/.gitkeep Normal file
View File

0
docs/.vuepress/public/images/.gitkeep Normal file
View File

BIN
docs/.vuepress/public/images/elysia/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
docs/.vuepress/public/images/elysia/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 933 KiB

BIN
docs/.vuepress/public/images/elysia/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 600 KiB

BIN
docs/.vuepress/public/images/elysia/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 614 KiB

BIN
docs/.vuepress/public/images/elysia/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 KiB

BIN
docs/.vuepress/public/images/elysia/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 KiB

1
docs/.vuepress/public/plume.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1759225877144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" width="180" height="180" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M480.54625 437.511684l44.454975 31.121042L136.269726 1023.769663l-44.429382-31.121041z" fill="#7AEDE5" p-id="1686"></path><path d="M96.370298 986.352753l75.499238-13.30834 44.019894-62.958687-75.499237 13.308341-44.019895 62.958686zM174.172902 875.279298l75.499238-13.30834 44.019895-62.702757-75.499238 13.30834L174.172902 875.279298zM251.975507 764.205843l75.499237-13.30834 44.019895-62.702757-75.499238 13.308341-44.019894 62.702756zM329.778111 653.132389l75.499238-13.308341 43.763965-62.702756-75.499238 13.30834-43.763965 62.702757zM407.324786 542.058934l75.499237-13.30834 42.228388-60.143461-2.559297-1.791507-71.148434 12.540551-44.019894 62.702757z" fill="#44DCDF" p-id="1687"></path><path d="M864.159156 209.606358a184.013396 184.013396 0 0 0-179.150733-17.147284 185.293044 185.293044 0 0 0-76.778886-162.259379 151.254405 151.254405 0 0 0-217.028317 39.413161c-37.365724 54.768939-55.536727 131.547824-27.896329 230.336658a695.616705 695.616705 0 0 0 104.931144 204.743695 688.194746 688.194746 0 0 0 227.265502 28.920047 266.166804 266.166804 0 0 0 206.279273-104.675214 150.998475 150.998475 0 0 0-37.621654-219.331684z" fill="#f7adaf" p-id="1688"></path><path d="M925.326335 378.263977a147.67139 147.67139 0 0 0-61.167179-168.657619 184.013396 184.013396 0 0 0-179.150733-17.147284 185.293044 185.293044 0 0 0-76.778886-162.259379 151.254405 151.254405 0 0 0-217.028317 39.413161c-37.365724 54.768939-55.536727 131.547824-27.896329 230.336658a440.198945 440.198945 0 0 0 14.843918 43.763965l7.677889 5.886381c186.316763 129.756317 412.046687 137.946065 539.499637 28.664117z" fill="#f9babc" p-id="1689"></path><path d="M479.710939 66.563528m-10.422459 14.884814a18.171003 18.171003 0 1 0 20.844918-29.769628 18.171003 18.171003 0 1 0-20.844918 29.769628Z" fill="#FFFFFF" p-id="1690"></path><path d="M423.448352 97.253255c15.611707-15.611707 30.711554-10.493114 31.735273 0s-17.403214 15.867636-36.342006 60.399391a764.717703 764.717703 0 0 0-23.033666 81.129689c-5.374522 6.65417-10.493114-41.716528-1.535578-81.897478a131.547824 131.547824 0 0 1 29.175977-59.631602z" fill="#FFFFFF" p-id="1691"></path><path d="M428.566944 597.083802a321.703532 321.703532 0 0 1 98.021044 0c27.12854 6.65417 41.204669 24.057384 36.342006 47.09105s-29.687836 29.687836-41.972457 48.882557c-18.426933 28.408188-13.30834 37.621654-27.12854 55.536728a34.038639 34.038639 0 0 1-54.768939-2.303367 463.232611 463.232611 0 0 1-57.072305-102.371848zM392.992727 572.258629A320.935743 320.935743 0 0 0 358.442228 480.379896c-15.867636-23.289595-36.853865-30.711554-57.072305-18.171003s-17.659144 38.133513-31.223413 56.304516c-20.47437 25.592962-30.967484 25.592962-43.252106 44.531754a34.294569 34.294569 0 0 0 20.986229 51.185923 465.791907 465.791907 0 0 0 116.192047 18.426933z" fill="#f7adaf" p-id="1692"></path><path d="M388.130064 568.931544c10.237185-7.166029 35.830147 7.933818 41.204669 20.474369s-10.237185 25.592962-16.123566 36.597936-7.166029 22.521807-19.194722 27.896328a41.460598 41.460598 0 0 1-43.763964-22.777736c-4.862663-11.516833 11.004974-25.592962 22.009947-38.901302 5.886381-6.9101 6.65417-16.891355 15.867636-23.289595z" fill="#fbd2d3" p-id="1693"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

0
docs/.vuepress/public/videos/.gitkeep Normal file
View File

27
docs/.vuepress/theme/components/RImg.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<img :src="imageSrc" :alt="alt" v-bind="$attrs" />
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
src: {
type: String,
required: true
},
alt: {
type: String,
default: ''
}
})
// 使用 Vite 的 import.meta.glob 或简单字符串拼接
// 由于别名在运行时不可直接动态拼接，我们这里使用一个更稳妥的方法
// 映射到我们配置好的别名
const imageSrc = computed(() => {
// 处理路径，确保指向别名
const path = props.src.startsWith('/') ? props.src.slice(1) : props.src
return new URL(`../../../resources/${path}`, import.meta.url).href
})
</script>

6
docs/.vuepress/theme/shim.d.ts vendored Normal file
View File

@@ -0,0 +1,6 @@
declare module '*.vue' {
import type { ComponentOptions } from 'vue'
const comp: ComponentOptions
export default comp
}

50
docs/.vuepress/theme/styles/custom.css Normal file
View File

@@ -0,0 +1,50 @@
:root {
/** 主题颜色 */
/*
--vp-c-brand-1: #5086a1;
--vp-c-brand-2: #6aa1b7;
--vp-c-brand-3: #8cccd5;
--vp-c-brand-soft: rgba(131, 208, 218, 0.314);
*/
/** 背景颜色 */
/*
--vp-c-bg: #fff;
--vp-c-bg-alt: #f6f6f7;
--vp-c-bg-elv: #fff;
--vp-c-bg-soft: #f6f6f7;
*/
/** 文本颜色 */
/*
--vp-c-text-1: rgba(60, 60, 67);
--vp-c-text-2: rgba(60, 60, 67, 0.78);
--vp-c-text-3: rgba(60, 60, 67, 0.56);
*/
}
/** 深色模式 */
[data-theme="dark"] {
/*
--vp-c-brand-1: #8cccd5;
--vp-c-brand-2: #6aa1b7;
--vp-c-brand-3: #5086a1;
--vp-c-brand-soft: rgba(131, 208, 218, 0.314);
*/
/*
--vp-c-bg: #1b1b1f;
--vp-c-bg-alt: #161618;
--vp-c-bg-elv: #202127;
--vp-c-bg-soft: #202127;
*/
/*
--vp-c-text-1: rgba(255, 255, 245, 0.86);
--vp-c-text-2: rgba(235, 235, 245, 0.6);
--vp-c-text-3: rgba(235, 235, 245, 0.38);
*/
}

18
docs/README.md Normal file
View File

@@ -0,0 +1,18 @@
---
pageLayout: home
externalLinkIcon: false
config:
-
type: hero
full: true
background: tint-plate
hero:
name: 仲夏夜之梦
tagline: 祀梦和小小夏的花园
text: 在这里，每一个文字都承载着温暖与美好 🌸
actions:
-
theme: brand
text: 博客
link: /blog/
---

65
docs/about.md Normal file
View File

@@ -0,0 +1,65 @@
---
title: 关于祀梦与他的花园
description: 这里是爱与回忆的小世界～
hideInBlogList: true
article: false
createTime: 2024/10/29 12:30:00
permalink: /about/
---
# 👋 嗨呀！这里是祀梦的小窝~
欢迎来到我的数字花园！这里不仅是笔记的存放处，更是我思维流转、技术成长与生活感悟的小小交汇点。希望能在这里和你分享温暖与美好~ (๑>◡<๑)
## 🏗️ 正在努力构建的未来~
目前我是一名大三的学生，主修**信息安全**专业。虽然专业背景在“守”，但我对“建”有着更浓厚的兴趣呢！
- **职业坐标**：目前正全力投入**后端开发**的学习中，正在努力准备实习，期待能在真实的代码世界里磨砺自己，成为厉害的后端大牛！(๑•̀ㅂ•́)و✧
- **技术理念**：我崇尚简洁、高效的代码，同时也相信技术的最终目的是为了传递温暖和解决问题。
## 🪴 为什么会有这个“花园”？
你可能会发现这个站点的结构非常清晰（或者说，我在努力让它变得整齐一些~）。
在 2025 年末，我决定将原有的博客迁移到这个新家。原因很简单：**我需要一个更具结构化的空间来安放我的笔记**。从密码学理论到后端开发实战，从英语四级备考到算法练习，我希望知识能够像小植物一样，在合适的土壤里有序生长，方便自己翻阅，也能给路过的你一点点参考呀~ 🌸
## 🚀 个人项目展示~
除了这个笔记站，我还维护着以下这些心血之作：
- [**祀梦的个人博客**](https://blog.simengweb.com/)：我的感性领地，记录着生活故事与长长的技术思考。
- [**算法练习平台**](https://algorithmplatform.simengweb.com/)：为了提升算法能力而开发的小平台，欢迎来一起刷题呀！(≧∇≦)ﾉ
## 🛠️ 祀梦的小技能树~ (〃'▽'〃)
虽然总觉得自己学得杂杂的，但每一项技能都是我用心收集的“宝藏”哦！
- **常用的魔法咒语**：Python (最熟练啦~), C++, Java, Solidity, JavaScript
- **探索过的奇幻领地**：后端开发、信息安全、区块链运维、Linux 系统管理 (｡･ω･｡)
- **随身携带的口袋工具**：Docker, Git, WSL2, Hardhat
## 📸 生活的彩色一角
在代码之外，我的世界也是五颜六色的：
- **超棒的朋友**：首页提到的“小小夏”是我非常要好的朋友。我们共同守护着这个数字花园的宁静。
- **我的小爱好**：我热爱摄像、美食与旅游。假期闲下来的时候，也会拿起画笔，勾勒出心里的角色呢~ (๑˘ᴗ˘๑)
- **关于我呀**：一个喜欢美好事物、偶尔有点小社恐、但在技术面前总能保持好奇心的男孩子。
## 🕰️ 网站的成长足迹
- **2025-12-15**：完成结构化迁移，给笔记们找了个舒服的新家。
- **2025-09-21**：笔记站初次部署。
- **2024-10-29**：在这个小站写下了第一段关于花园的文字。
## 💌 找我玩呀~
如果你对我的项目感兴趣，或者只是想聊聊技术与生活，欢迎随时联系：
- **邮箱**：[meng_si@proton.me](mailto:meng_si@proton.me)
- **B站**：[66ccff色的薰依草](https://space.bilibili.com/361714249)
---
> “在每一个文字里，都承载着温暖与美好。” 🌸

255
docs/blog/collect/free_model_pai.md Normal file
View File

@@ -0,0 +1,255 @@
---
title: 便宜免费的大模型 API 整合 （ 2025年11月11日 ）
createTime: 2025/11/11 13:54:02
cover: /images/elysia/1.jpg
coverStyle:
layout: right
permalink: /article/free_model_api/
---
百度千帆、讯飞星火、腾讯混元均有免费在线额度，SCNet 提供 0.1 元/百万 tokens 的超低价大模型，轻量任务先薅免费，量大了再掏 0.1 元，稳！
<!-- more -->
## 免费的大模型 API 整合
嗨～如果你在找既温柔又省荷包的小模型，就把它们悄悄收进这里吧！它们也许不是夜空最亮的那颗星，却能在摘要、划重点、轻声问答的小角落里，给你软软又稳稳的陪伴哦～
### 百度千帆大模型平台
先从千帆开始吧～下面是常用模型的参考价格：
| 模型名称 | 版本名称 | 服务内容 | 子项 | 在线推理 | 批量推理 | 单位 |
|---|---|---|---|---|---|---|
| ERNIE Speed | ernie-speed-128k | 推理服务 | 输入 | 0 | 0.00012 | 元/千tokens |
| ERNIE Speed | ernie-speed-128k | 推理服务 | 输出 | 0 | 0.00024 | 元/千tokens |
| ERNIE Lite | ernie-lite-8k | 推理服务 | 输入 | 0 | 0.0012 | 元/千tokens |
| ERNIE Lite | ernie-lite-8k | 推理服务 | 输出 | 0 | 0.0024 | 元/千tokens |
| ERNIE Tiny | ernie-tiny-8k | 推理服务 | 输入 | 0 | 0.00008 | 元/千tokens |
| ERNIE Tiny | ernie-tiny-8k | 推理服务 | 输出 | 0 | 0.00016 | 元/千tokens |
> 提示：单纯调用 API 接口属于在线推理，当前显示为 0 元；批量推理按量计费。
#### 快速上手
1. 访问控制台并获取 API Key。
2. 使用下方示例进行快速测试。
3. 若遇错误，请检查模型名称与凭证有效期。
控制台：[https://console.bce.baidu.com/qianfan/ais/console/apiKey](https://console.bce.baidu.com/qianfan/ais/console/apiKey)
```python
import requests
import json
def main():
url = "https://qianfan.baidubce.com/v2/chat/completions"
API_KEY = 'YOUR_API_KEY'
payload = json.dumps({
"model": "ernie-speed-128k",
"messages": [
{
"role": "system",
"content": "You are a helpful assistant."
},
{
"role": "user",
"content": "你好"
}
]
})
headers = {
'Content-Type': 'application/json',
'Authorization': F'Bearer {API_KEY}'
}
response = requests.request("POST", url, headers=headers, data=payload)
print(response.text)
if __name__ == '__main__':
main()
```
> 小贴士：将 `YOUR_API_KEY` 替换为你的密钥，建议使用环境变量管理凭证；请勿在公共仓库提交 Key。
更多文档：[https://cloud.baidu.com/doc/qianfan-api/s/3m9b5lqft](https://cloud.baidu.com/doc/qianfan-api/s/3m9b5lqft)
### 讯飞星火大模型
接着，我们轻盈地来到星火～
- 官网：[https://xinghuo.xfyun.cn/sparkapi](https://xinghuo.xfyun.cn/sparkapi)
- 控制台：[https://console.xfyun.cn/services/cbm?from=desk](https://console.xfyun.cn/services/cbm?from=desk)
- 模型说明：可见 Spark Lite，Token 余量为无限。
#### 快速上手
> 小贴士：如需联网检索，启用 `web_search`；流式输出可以提升交互体验。
1. 在控制台获取授权凭证并替换到示例中。
2. 选择 `Lite` 模型，按需开启 `web_search` 与 `stream`。
3. 若需要长内容输出，注意 8K tokens 限制，合理裁剪上下文。
```python
# encoding:UTF-8
import json
import requests
# 请替换XXXXXXXXXX为您的 APIpassword, 获取地址：https://console.xfyun.cn/services/bmx1
api_key = "Bearer XXXXXXXXXX"
url = "https://spark-api-open.xf-yun.com/v1/chat/completions"
# 请求模型，并将结果输出
def get_answer(message):
#初始化请求体
headers = {
'Authorization':api_key,
'content-type': "application/json"
}
body = {
"model": "Lite",
"user": "user_id",
"messages": message,
# 下面是可选参数
"stream": True,
"tools": [
{
"type": "web_search",
"web_search": {
"enable": True,
"search_mode":"deep"
}
}
]
}
full_response = "" # 存储返回结果
isFirstContent = True # 首帧标识
response = requests.post(url=url,json= body,headers= headers,stream= True)
# print(response)
for chunks in response.iter_lines():
# 打印返回的每帧内容
# print(chunks)
if (chunks and '[DONE]' not in str(chunks)):
data_org = chunks[6:]
# print(f"DEBUG: raw data_org: {data_org}")
chunk = json.loads(data_org)
text = chunk['choices'][0]['delta']
# 判断最终结果状态并输出
if ('content' in text and '' != text['content']):
content = text["content"]
if (True == isFirstContent):
isFirstContent = False
print(content, end="")
full_response += content
return full_response
# 管理对话历史，按序编为列表
def getText(text,role, content):
jsoncon = {}
jsoncon["role"] = role
jsoncon["content"] = content
text.append(jsoncon)
return text
# 获取对话中的所有角色的content长度
def getlength(text):
length = 0
for content in text:
temp = content["content"]
leng = len(temp)
length += leng
return length
# 判断长度是否超长，当前限制8K tokens
def checklen(text):
while (getlength(text) > 11000):
del text[0]
return text
#主程序入口
if __name__ =='__main__':
#对话历史存储列表
chatHistory = []
#循环对话轮次
while (1):
# 等待控制台输入
Input = input("\n" + "我:")
question = checklen(getText(chatHistory,"user", Input))
# 开始输出模型内容
print("星火:", end="")
getText(chatHistory,"assistant", get_answer(question))
```
### 腾讯混元大模型
- 计费与价格：[https://cloud.tencent.com/document/product/1729/97731](https://cloud.tencent.com/document/product/1729/97731)
- 文档与控制台：[https://cloud.tencent.com/document/product/1729/111008](https://cloud.tencent.com/document/product/1729/111008)
- 模型说明：`hunyuan-lite` 免费可用，适合轻量任务。
```python
import os
from openai import OpenAI
# 构造 client（建议使用环境变量管理密钥）
api_key = os.getenv("HUNYUAN_API_KEY", "YOUR_API_KEY")
client = OpenAI(
api_key=api_key, # 混元 APIKey
base_url="https://api.hunyuan.cloud.tencent.com/v1", # 混元 endpoint
)
completion = client.chat.completions.create(
model="hunyuan-lite",
messages=[
{
"role": "user",
"content": "泥嚎"
}
],
extra_body={
"enable_enhancement": True,
},
)
print(completion.choices[0].message.content)
```
> 小贴士：请勿在公共仓库提交任何真实密钥；使用环境变量或密钥管理服务更安全。
## 低价大模型
### SCNet 平台
#### 简介
SCNet 是一个面向人工智能和科学计算的一站式算力与 AI 平台，提供从数据管理、模型训练到部署的完整链路服务，同时结合国产超算硬件和多模态模型生态，让企业和开发者能更高效地使用 AI。
#### 链接与文档
- 官网：[https://www.scnet.cn/](https://www.scnet.cn/)
#### 价格一览
| 模型 | 上下文长度 | 百万 tokens 输入价格 | 百万 tokens 输出价格 |
|---|---|---|---|
| Qwen3-235B-A22B | 32K | 0.1 元 | 0.1 元 |
| DeepSeek-R1-Distill-Qwen-7B | 32K | 0.1 元 | 0.1 元 |
| DeepSeek-R1-Distill-Qwen-32B | 32K | 1 元 | 4 元 |
| DeepSeek-R1-Distill-Llama-70B | 32K | 0.1 元 | 6 元 |
| QwQ-32B | 32K | 1 元 | 4 元 |
| Qwen3-30B-A3B | 128K | 1 元 | 6 元 |
| Qwen3-Embedding-8B | - | 0.1 元 | - |
- 文档（计费与说明）：[https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/modulefee.html](https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/modulefee.html)
目前看到的价格最低的 Qwen3-235B-A22B 模型的 API，相比前面的免费模型，性能更强。
- API 接口使用样例：[https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/apicall.html](https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/apicall.html)
## 小结
把上面这些“零钱包”级别的模型都翻完啦～
- 百度千帆、讯飞星火、腾讯混元都给出「免费在线额度」，日常轻量问答、摘要、润色完全够用；记得把 Key 藏进环境变量，别手滑推到 GitHub。
- 如果任务量突然暴涨，SCNet 的 Qwen3-235B-A22B 只要 0.1 元/百万 tokens，性价比直接拉满，当“备胎”也安心。
一句话：先薅免费的，薅不动再掏 0.1 元，让荷包和模型一起“稳稳幸福”吧！

298
docs/blog/elysia/elysia_quotation.md Normal file
View File

@@ -0,0 +1,298 @@
---
title: 爱莉希雅语录
createTime: 2026/01/08 15:39:17
cover: /images/elysia/2.png
coverStyle:
layout: left
permalink: /archives/a5b3ea8e-7c3c-40a1-a737-26e911623da8/
---
嗨，亲爱的来访者♪ 欢迎来到这片收集了“真我”与“美丽”碎片的园圃。在这里，你会读到执拗花朵在暴雨中的坚持，也会听见逐火英桀们为文明奏响的最后颂歌。请怀着期待慢慢翻阅吧，愿这些如星光般的文字能陪你开启属于自己的闪耀旅程，毕竟……你本身就是这世间最瑰丽的馈赠呢♪
<!-- more -->
![elysia](/images/elysia/1.jpg)
1. 执拗的花朵永远不会因暴雨而褪去颜色，你的决心也一定能在绝境中绽放真我。
2. 愿你前行的道路有群星闪耀。愿你留下的足迹有百花绽放。你即是上帝的馈赠，世界因你而瑰丽。
3. 悲剧并非终结，而是希望的起始。
4. 此后，将有群星闪耀，因为我如今来过。此后，将有百花绽放，因为我从未离去。
5. 告别过去，是为了走向未来
6. 我名为爱莉希雅……最初的律者，人之律者。
7. 某一日，祂从天坠落。人们抬头仰望，于是看见了星空。星月送来神的女儿，她愿成为人的伴侣。长风化作她的轺车，四海落成她的园圃。鸟雀衔来善的种子，百花编织爱的颂歌。她便是这样降生于世，行于大地，与人类一同长大，与世界一起发芽。
8. 亲爱的山雀，请将我的箭，我的花，与我的爱，带给那子然独行的旅人。然后，便让它开出永恒而无瑕的…人性之华吧。
9. 压力之下的选择才能揭示一个人的真我，也将决定他最终会成为怎样的人。
10. 即使未来不能改变，我也要自己决定到达那个结果的过程。
11. 这是段漫长的路途，你或许会停滞不前，甚至在很长一段时间里一无所获。但这未必是件坏事，并不是一定要做到了什么，达成了什么才算前进。空虚、迷茫、犹豫、自否，对于一个人的一生，这些过程同样拥有它们的意义——就像这里的十三个人曾经历的那样。
12. 天色暗了，接下来就是调皮捣蛋的时间了呢。
13. 白天的我也很可爱，晚上的我也很可爱，你更喜欢哪个我呢？
14. 说起粉色头发的可爱女孩，你第一个会想到谁？321回答！
15. 你好像有不少问题想问我呢，别心急，我们还有很多很多时间。
16. 你喜欢脚踩在落叶或是新雪上的感觉吗？我很喜欢哦。
17. 你比我想象中还可爱许多呢。是不是很在意我想象了什么？
18. 今天的任务都完成啦？真棒，夸夸你哦。
19. 嗨！今天天气真好，和我一样闪闪发光呢。
20. 嗨，早上好！一天的好心情，从见到你开始。
21. 嗨，早上好呀！看见我，有没有很开心呢？
22. 你该休息啦，约好了，我们明天再见哦。
23. 天冷了，小心别着凉哦。我？美少女怎么会冷呢。
24. 今天是我的生日哦。要一起庆祝吗？就我们两个人。
25. 哎呀，你也睡不着吗？那我们来聊聊天，好不好？
26. 有些事不用太在意，美丽的少女总有些小秘密，不是吗？
27. 这么晚了还不睡吗？是在想我，对不对？
28. 知道吗，今天是个很特别的日子。对啦，就是你的生日♪
29. 好啦，冷静一下♪
30. 以律者的标准，你的样子还真有些......别致呢♪
31. 哎呀，别生气嘛♪
32. 真是的......我会哭的哦......
33. 抱歉......得让你失望啦♪
34. 英桀们的谢幕，必须盛大而壮丽
35. 只是你我二人独处，显然有些寂寞了♪
36. 你说对不对？我的好·伊·甸♪
37. 你明明也很开心嘛♪
38. 英桀们也不过是心绪复杂，带有缺陷的普通人，就和当时的每个普通人一样。有自己的私心，也多半谈不上有什么大爱，但也会因为一时感动，或是心血来潮，去做一些冲动，又了不起的事。他们从来不是完美的英雄，只是因为在那个时间，出现在那里的是他们而已。
39. 我相信换做其他人，也一定会做出小异大同的选择，甚至做得更好也说不定？这就是［美丽］的永恒，我所相信的［真我］。十三个人生命的全部就是如此纷繁而又美妙的事物，意义在于在这个过程中我想要相信什么。那会决定在抵达终点时你能得到什么。
40. 你看，他们曾如此骄傲地活过，贯彻始终，以生命奏响了文明的颂歌，这是被称作英桀的人们的故事，是十三位逐火者未尽的旅途，但来访者，你们的道路仍将延续，不是吗，那就听凭心意前进吧，嘻，都说了要前进啦，沿着脚下的足迹，去见证这段逐火的征程，最后跨越逝者们的终幕，去创造我们所未能迎接的未来吧。
41. 要流传给后世的，绝不应该只有憎恨和使命。只有领略过这个时代的光辉和灿烂，未来的人们才能理解我们为之而战的意义。
42. 由英桀们来传承的，应当是身为英桀的荣耀，战斗的理由。是在这段逐火的旅途中，我们最终的灵魂所托。
43. 而后来的你们，将见证我们生命的足迹，灵魂的刻印，并在其中找到自己寻求的答案。
44. 但无论如何 我们的时代已经结束了，而我们也努力完成了各自的使命。
45. 不是被推搡，被裹挟着向前，也不是沿着被别人选定的道路行进。而是怀着这样的想法——我想要怎么做，我应该怎么做——去决定自己的命路，自己的刻印。
46. 以自我的意志，朝着自身所设下的目标，用自在的方式，竭尽全力活过“我”作为主角的一生。
47. 你看，我是这样的，大家也是这样的。我所知晓的那个时代，以及它所孕育出的这十三个人，都是如此。万千的轨迹交织、萦绕，由此诞下百花齐放的奇迹。这就是“美丽”的永恒，我所相信的“真我”。
48. 至此，我们的故事结束了。而从今以后，就是“你”的故事了。
49. 让无人传颂的歌谣，再度启唱。
50. 为历史尘封的故事，续写新章。
51. 高洁而纯真的灵魂，踏上旅途。
52. 愿掠集之兽爱佑其身，赐予「空梦」的自由。
53. 愿渡尘之羽爱佑其身，赐予「浮生」的坚忍。
54. 愿绘世之卷爱佑其身，赐予「繁星」的纯真。
55. 愿噬界之蛇爱佑其身，赐予「无限」的渴求。
56. 愿黎明之哨爱佑其身，赐予「旭光」的意志。
57. 愿寸断之刃爱佑其身，赐予「刹那」的决绝。
58. 愿善法之瞳爱佑其身，赐予「天慧」的智识。
59. 愿坏劫之焱爱佑其身，赐予「鏖灭」的赤诚。
60. 愿愚戏之匣爱佑其身，赐予「螺旋」的奇迹。
61. 愿璀耀之歌爱佑其身，赐予「黄金」的光辉。
62. 愿深罪之槛爱佑其身，赐予「戒律」的慈爱。
63. 愿无烬之剑爱佑其身，赐予「救世」的理想。
64. 愿无瑕之人爱佑其身，赐予「真我」的回归。
65. 我们于此赞颂，始源之律者的诞生
66. 我这支歌将抚摸你的前额，犹如那祝福的亲吻
67. 当你独自一人时，它会坐在身旁与你耳语
68. 当你陷入人群时，它又会保护你远离喧嚣。
69. 我的歌将成为你梦想的羽翼，它将载着你的心到那未知的边缘
70. 当黑夜遮蔽了你的路时，它又成为了照耀在你头顶的忠实星光
71. 于是，「始源」的故事迎来落幕
72. 于是，「始源」的故事迎来伊始
73. 以我为终……
74. 以我……为始。
75. 而今，终焉之时将至。而今，归去之时已至。就此告别吧，美丽的世界。
76. 不想前进的时候，就暂且停下脚步吧，我们永远都在这里，和当初一模一样，毕竟，美丽的女孩子什么都能做到嘛！
77. 游云拂风，花染湛空，与你并肩漫步在午后街头，携手美好此刻，共赏岁月温柔。
78. 经常会和别的女孩子谈论你哦。内容……是不是很想知道呀～
79. 有些事不用太在意，美丽的少女总有些小秘密，不是吗？
80. 这里有好多和我一样漂亮的女孩子呀，是天堂吗？
81. 你会不会嫌我话多呢？可我就是有好多话想对你说呀。
82. 不许叫错我的名字噢，不然……我会有小情绪的。
83. 如此绚丽的花朵，不该在绽放之前就枯萎。我会赠予你璀聚的祝福，而你的灵魂，也将会绽放更耀眼的光辉。
84. 嗨，想我了吗？
85. 不论何时何地，爱莉希雅都会回应你的期待
86. 嗨，我又来啦。多夸夸我好吗？我会很开心的～♪
87. 你好！新的一天，从一场美妙的邂逅开始。
88. 终于轮到我啦，这段时间我可是一直都在构思与你见面的开场白呢。
89. 你可以更光明正大的看向我噢，毕竟我也直在看着你嘛。来，让我们更深入地了解彼此吧？
90. 唉，要做的事好多～但焦虑可是女孩子的大敌，保持优雅得体，从容愉快地前进吧。
91. 别看我这样，其实我也是很忙的。不过，我的日程上永远有为你预留的时间。
92. 唉，时间真是个讨厌的东西，你不觉得吗？如果不是时间紧迫，我还想留下更多值得纪念的话语。
93. 有没有觉得我的话要比别人多一点？多就对啦，我可是有在很认真地准备这件事的。
94. 哇，你看那朵白白软软的云，是不是有点像我呢？
95. 可爱的少女心可是无所不能的噢～♪
96. 好啦可以啦，再说下去我就要哭了噢～♪
97. 这束鲜花，要心怀感激的收下哦～♪
98. 要好好看着我哦～♪
99. 这身衣服是伊甸做的噢，喜欢吗，还是说，喜欢的是我呢～♪
100. 别动噢，借你的眼睛照照镜子……好啦，我看起来怎么样？
101. 嗯～和女孩子独处时，可要好好看向对方的眼晴噢～♪
102. 有空多来陪陪我好吗，你一定不忍心让可爱的我孤独寂寞吧。
103. 这可是你选的衣服，要好好看着，不许移开视线噢。
104. 加点浪漫的气氛，如何？
105. 哇谢谢！我就知道你对我最好啦！
106. 爱莉希雅的贴心提示！你可以尽情的依赖爱莉希雅，而她，也会以全部的身心回应你！
107. 爱莉希雅的贴心提示！如果见到凯文在大厅里，多穿点衣服，他很冷的，各种意义上呢。
108. 在热情似火这件事上，我可不会输给千劫哦。
109. 这一次有你想要的东西吗?没有的话，我就可以再见你一面了。
110. 你应该不会嫌我话多吧？还是说，你更喜欢伊甸那种优雅文静的类型？
111. 如你所见，与那个凯文齐名的第二领袖，竟是一位如花朵般娇羞的少女也就是我啦。
112. 爱莉希雅的贴心提示！和樱说话时，别盯着耳朵看太久，她和我不一样，会害羞。
113. 想了想我毕竟算半个文职，说“武”也不太合适。那就去掉一个字，叫“女神”吧！你觉得呢？
114. 你说，我要是把头发留的和樱那么长，会不会更好看呀？嗯？
115. 你战斗的样子如此绚丽，就如同漫天的飞花一般。让我再为其添点色彩吧。
116. 这里埋藏着太多的历史、太多的秘密。但别担心，无论路有多长，我始终都会在你身边。
117. 如果我也成为律者，会是什么样子呢？头发会再变多些吗？还是说……裙摆会突然变长？
118. 说起来，为什么只有我的刻印是金色的伊甸不会生气吧?算啦，她那么好，一定不会生气的。
119. 咦，到我了吗？哎呀真可惜，这次的开场白我还没想好呢，原谅我吧，下次一定给你个惊喜。
120. 仔细想想，我是女孩子，战力比肩凯文，又有如神明般的聪慧与美貌。这么说来，我不也是“女武神”吗？
121. 爱莉希雅的贴心提示！如果遇到千劫，千万别问他有关面具的事哦。
122. 唉，不知道你见没见到这里的男孩们，他们都内向得很，还是我比较放得开吧?
123. 爱莉希雅的贴心提示！伊甸就像是天使一样——温柔，美丽，又总会予人以天使般的馈赠。
124. 这真是个神奇的地方，不是吗？它让我们的灵魂跨越时空于此相遇，多么浪漫呀。
125. 悄悄告诉你哦，我一共准备了40种不同的开场白。
126. 咦，你在看哪？哦......很在意这对耳朵？它们很漂亮对吗，我也这么觉得。
127. 你一定也在期待和我相遇吧？我知道，因为我的刻印总是很实用嘛。
128. 我的抉择与你的抉择，二者相遇会诞下怎样的奇迹，我想见证这一刻的到来。
129. 爱莉希雅的贴心提示！如果你不想听苏说话了，悄悄走开也行，他看不见。
130. 有我的刻印，你绝对不会输。输了也没关系，我会先一步去大厅等你回来。
131. 不要被三次元的女人骗了呀。
132. 英桀第二位，爱莉希雅，如你所见是一位像花朵般可爱的美丽少女。
133. 我们会留在过去，而你将走向未来。
134. 毕竟我向来不习惯太严肃的场合，也不喜欢过于拘谨的人际关系。
135. 再打下去我会哭的哦
136. 怎么样?喜欢我的记忆吗?有没有一种在和美丽的少女并肩作战的感觉?
137. 猜猜我为你带来了什么，金色的、闪闪发光的刻印，没有人能拒绝它，不是吗?
138. 见好就收哦！
139. 但我永远都会在这里，为你点亮前行的灯火。
140. 纵使知道文明已经覆灭，却依旧选择穷尽一切抗争到最后，只是为了将自己骄傲活过的样子永远铭刻在历史之中。
141. 悲伤不会凭空消失，但温暖的感情也会永远在心底珍藏。
142. 无论过去还是现在，可爱的少女心是无所不能的——只有这一点，无论如何都不会改变。
143. 那个白头发的漂亮女孩就是芽衣的...嗯哼哼，被我发现喽。
143.那是...华？唉，她交到了新的朋友，太好了。

149
docs/blog/technology/Deploying_WSL2_on_Windows_10.md Normal file
View File

@@ -0,0 +1,149 @@
---
title: 在 Windows10 上部署 WSL2 并启动 ubuntu 虚拟机
createTime: 2025/09/29 07:13:17
cover: /images/elysia/3.jpg
coverStyle:
layout: right
permalink: /article/deploying-wsl2-on-windows-10/
---
嗨呀～让我们在 Windows10 专业版上部署 WSL2 并启动 ubuntu 20.04 虚拟机吧～
最好使用 Windows10 专业版，并且在物理机上部署呢，在虚拟机上部署的话可能会有小麻烦，所以不太推荐啦~
<!-- more -->
## Windows10 镜像
大家好呀～今天要教大家如何在Windows10上部署WSL2并启动ubuntu虚拟机哦～
首先呢，我们需要准备一个Windows10的镜像文件～虽然Microsoft官方有提供，不过很容易下载失败呢，所以建议大家去[MSDN](https://msdn.itellyou.cn/)下载会更稳定哦～
在MSDN官网找到「操作系统」→「Window10」→「Windows 10 (Multiple Editions) (x64)」这个版本，它包含了专业版呢～要注意哦，WSL2只支持专业版、企业版或教育版，不支持家庭版呢，所以建议大家直接安装专业版会更方便～
## 启用WSL2和虚拟机平台
接下来，我们需要启用WSL2和虚拟机平台的功能哦～首先以管理员身份打开PowerShell，然后依次运行下面的命令：
```powershell
# 启用 WSL 功能
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
# 启用虚拟机平台（WSL2 必需）
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```
运行完成后，记得要重启电脑哦～重启之后，我们还要把WSL2设置为默认版本呢：
```powershell
# 设置 WSL2 为默认版本
wsl --set-default-version 2
```
## 在 WSL2 中安装 ubuntu 20.04 LTS 虚拟机
现在到了安装Ubuntu虚拟机的环节啦～还是以管理员身份打开PowerShell，然后依次运行这些命令：
```powershell
# 查看可用的 Ubuntu 版本
wsl --list --online
# 安装 Ubuntu 20.04 虚拟机
wsl --install -d Ubuntu-20.04
```
安装过程大概是这样的哦～让我们一起来看看：
```powershell :collapsed-lines
wsl: 使用旧分发注册。请考虑改用基于 tar 的分发。
正在下载: Ubuntu 20.04 LTS
Ubuntu 20.04 LTS 已下载。
已成功安装分发。可以通过 “wsl.exe -d Ubuntu 20.04 LTS” 启动它
正在启动 Ubuntu 20.04 LTS...
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: simeng
New password:
Retype new password:
passwd: password updated successfully
操作成功完成。
wsl: Failed to start the systemd user session for 'root'. See journalctl for more details.
Installation successful!
wsl: Failed to start the systemd user session for 'simeng'. See journalctl for more details.
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.
Welcome to Ubuntu 20.04.6 LTS (GNU/Linux 6.6.87.2-microsoft-standard-WSL2 x86_64)
* Documentation: https://help.ubuntu.com
* Management: https://landscape.canonical.com
* Support: https://ubuntu.com/advantage
System information as of Tue Sep 30 14:27:51 CST 2025
System load: 0.48 Processes: 74
Usage of /: 0.1% of 1006.85GB Users logged in: 1
Memory usage: 7% IPv4 address for eth0: 172.31.237.99
Swap usage: 0%
Expanded Security Maintenance for Applications is not enabled.
0 updates can be applied immediately.
Enable ESM Apps to receive additional future security updates.
See https://ubuntu.com/esm or run: sudo pro status
The list of available updates is more than a week old.
To check for new updates run: sudo apt update
This message is shown once a day. To disable it please create the
/home/simeng/.hushlogin file.
simeng@localhost:~$
```
这样我们就成功安装好Ubuntu虚拟机啦，可以开始使用了哦～
### 安装过程中可能会出现的错误
在安装过程中，可能会遇到一些小问题呢～不过不用担心，已经帮大家准备好了解决方案哦～
#### 错误码 0x800701bc 缺少更新包
如果看到这样的错误信息：
```txt
Installing, this may take a few minutes...
WslRegisterDistribution failed with error: 0x800701bc
Error: 0x800701bc WSL 2 ?????????????????? https://aka.ms/wsl2kernel
Press any key to continue...
```
这说明系统缺少WSL2所需的Linux内核更新包哦～这时候我们可以打开微软官网的[下载 Linux 内核更新包](https://learn.microsoft.com/zh-cn/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package)页面，下载最新的包安装就可以解决啦～
#### 错误码 0x80370102 虚拟化技术没有开启
如果遇到这个错误，可能是因为虚拟化技术没有开启哦～如果是在真实机上操作的话，需要进入BIOS开启虚拟化技术呢～开启之后，可以在任务管理器 -> 性能 -> CPU 的详情页面中，看到下方的虚拟化状态显示为「已启用」哦～
![虚拟化技术启用](https://image.simengweb.com/blog/technology/20250930140716_251_27.png)
如果是在虚拟机中操作的话，就需要启用嵌套虚拟化技术啦～以VMware为例：
先关闭虚拟机，然后找到虚拟机的.vmx配置文件（通常在虚拟机目录下），在文件末尾添加一行：`vhv.enable = "TRUE"`
保存之后再启动虚拟机就可以啦～如果还是失败的话，建议尝试换用WSL1，或者使用Hyper-V来部署Windows10虚拟机哦～
## 通过 WSL2 操作 ubuntu 20.04 LTS 虚拟机
安装完成后，我们该如何操作Ubuntu虚拟机呢？很简单哦～以管理员身份打开PowerShell，然后运行这个命令查看已安装的虚拟机：
```powershell
# 查看已安装的虚拟机
wsl -l -v
```
如果前面的步骤都正确的话，这里应该可以看到一个Ubuntu-20.04的虚拟机啦～
另外，在文件资源管理器中，会多出一个Linux文件夹，里面有一个Ubuntu-20.04文件夹，这就是虚拟机的根目录哦～
想要启动并进入Ubuntu虚拟机的话，可以运行这个命令：
```powershell
wsl -d Ubuntu-20.04
```
如果直接退出终端或者关闭窗口，虚拟机实例就会进入挂起状态，下次需要重新启动才能继续使用哦～当然，也可以通过指令强制终止虚拟机：
```powershell
wsl --terminate Ubuntu-20.04
```
## 通过 VS Code 开发
接下来，我们还可以通过VS Code来进行开发哦～不过需要先安装一些扩展呢：'Remote - SSH'和'WSL'
安装好扩展后，在VS Code左侧打开远程资源管理器，就可以看到Ubuntu20.04虚拟机啦～直接点击连接就可以了哦～不过第一次连接可能需要启动一下虚拟机，会有点慢呢，耐心等待一下吧～
![连接 WSL2 虚拟机](https://image.simengweb.com/blog/technology/20250930144329_252_27.png)
连接成功之后，就可以愉快地进行开发啦～是不是很简单呢～

120
docs/blog/technology/Operate_WSL2.md Normal file
View File

@@ -0,0 +1,120 @@
---
title: WSL2 核心操作指南
createTime: 2025/09/30 16:08:32
cover: /images/elysia/4.jpg
permalink: /article/operate-wsl2/
---
这篇文章主要讲WSL2虚拟机核心操作哦～它基于轻量级Hyper-V运行，像贴心小精灵默默工作～还能用命令行精细控制！接下来讲启动/关闭、实例管理、资源配置、网络操作、备份迁移这五大操作，是不是很期待呢～♪
<!-- more -->
## 启动/关闭 WSL2 虚拟机
WSL2的虚拟机平时是由Windows自动管理的呢，不过我们也可以通过命令手动控制它的生命周期哦～
```
# 启动指定的发行版
wsl -d Ubuntu-20.04
# 关闭指定的发行版
wsl --terminate Ubuntu-20.04
```
如果想要完全关闭WSL2的所有虚拟机，也是可以的哦～
使用这个命令后，所有的发行版都会被强制终止，内存、网络、文件句柄都会被全部释放呢～
```
wsl --shutdown
```
## 管理正在运行的 WSL 实例
想知道当前有哪些WSL实例在运行吗？很简单哦～使用下面这个命令就可以查看啦：
```
wsl -l -v
```
输出结果大概是这个样子的哦～
```text
NAME STATE VERSION
* Ubuntu Running 2
docker-desktop Running 2
Ubuntu-20.04 Stopped 2
```
看到那个带星号(*)的了吗？那就是当前的默认系统哦～如果想要设置新的默认发行版，可以使用这个命令：
```
wsl --set-default Ubuntu-20.04
```
嘿嘿～接下来讲讲怎么删除一个 WSL 实例哦～如果想和某个WSL实例说拜拜，就可以用下面这个命令哒～
```
wsl --unregister Ubuntu-20.04
```
注意，删除后无法恢复哦～请谨慎操作～
## 配置 WSL2 资源
WSL2的资源也是可以自定义配置的哦～我们可以通过编辑`%USERPROFILE%\.wslconfig`文件来设置内存、CPU核心数等参数呢～
```
[wsl2]
# 内存限制（默认：80% 物理内存）
memory=4GB
# CPU 核心数限制（默认：全部核心）
processors=2
# 交换空间大小（默认：25% 内存）
swap=2GB
# 是否启用 localhost 端口转发（默认 true）
localhostForwarding=true
```
要注意哦～修改完配置后，必须重启WSL2虚拟机才能让这些设置生效呢～
## 网络相关配置
WSL2使用的是虚拟NAT网络哦，它和Windows主机是相互隔离的，但又可以互相通信呢～是不是很神奇～
| 方向 | 访问方式 | 说明 |
| --- | --- | --- |
| Windows -> WSL2 | localhost:port | 自动端口转发（需要`localhostForwarding=true`） |
| WSL2 -> Windows | `host.docker.internal` 或 `$(cat /etc/resolv.conf \| grep nameserver \| awk '{print $2}')` | 获取主机的IP地址 |
| 外部机器 -> WSL2 | 默认不可达 | 需要手动端口转发或使用 Windows 防火墙规则 |
想知道WSL2的IP地址吗？可以用这个命令查看哦～（不过要注意，每次启动WSL2后，IP地址可能会变呢～）
注意哦～这个命令需要进入到WSL2虚拟机内部执行才行呢～
```
hostname -I
```
如果需要访问WSL2中的服务，多亏了`localhostForwarding`的配置，我们直接访问[localhost:port](http://localhost:port)就可以啦～超方便的～
如果需要手动设置端口转发，可以在Powershell中添加防火墙规则和端口转发哦～不过要记得以管理员方式打开Powershell呢～
```
# 获取 WSL2 当前IP地址
$wslIp = (wsl hostname -I).Trim()
$wslIp
# 添加端口转发（以 8000 端口为样例）
netsh interface portproxy add v4tov4 listenport=8000 listenaddress=0.0.0.0 connectport=8000 connectaddress=$wslIp
# 开放 Windows 防火墙
New-NetFirewallRule -DisplayName "WSL2 Port 8000" -Direction Inbound -LocalPort 8000 -Protocol TCP -Action Allow
# 撤销端口转发
netsh interface portproxy delete v4tov4 listenport=8000 listenaddress=0.0.0.0
# 撤销开放的防火墙规则
Remove-NetFirewallRule -DisplayName "WSL2 Port 8000"
```
## 备份和迁移
WSL2发行版也是可以备份和迁移的哦～我们可以把整个发行版导出成tar文件，这样就可以用于备份、迁移或者分享给其他小伙伴啦～
```
# 导出指定发行版到 tar 文件
wsl --export <发行版名称> <输出文件路径.tar>
wsl --export Ubuntu-20.04 D:\backups\ubuntu-2004.tar
# 导入 tar 文件为新的发行版
wsl --import <新发行版名称> <安装目录> <tar 文件路径> [选项]
wsl --import Ubuntu-Backup C:\wsl\Ubuntu-Backup D:\backups\ubuntu-2004.tar --version 2
```
要注意哦～导入完成后，默认用户会变成root呢～如果想要设置回原来的用户，可以使用这个命令：
```
ubuntu2004.exe config --default-user username
```
悄悄告诉大家一个小秘密～WSL2是可以同时存在多个同源发行版的哦～这样我们就可以在不同的环境中进行不同的实验啦～是不是很方便呢～

118
docs/blog/technology/signed-binary-representations.md Normal file
View File

@@ -0,0 +1,118 @@
---
title: 原码、反码、补码
createTime: 2026/01/08 16:34:05
cover: /images/elysia/6.jpg
coverStyle:
layout: right
permalink: /archives/6f41cabe-41e6-4a09-9f1c-af7dd709a35d/
---
欢迎来到 0 与 1 的魔法派对！这篇文章将带你揭开原码、反码与补码的奥秘，看计算机如何巧妙地用补码化减为加。让我们一起翻开这页，去捕捉二进制底层那份迷人的理性之美吧♪
<!-- more -->
## 一、 前置概念
计算机底层存储数据的时候使用的是二进制数字，但是计算机在存储一个数字的时候并不是直接存储该数字对应的二进制数，而是存储该数字对应的**二进制数的补码**。
在了解原码、反码和补码之前，我们要了解**机器数**和**真值**的概念。
### 1) 机器数
一个数在计算机的存储形式是二进制数，我们称这些二进制数为**机器数**。机器数是有符号的，在计算机中用机器数的最高位存放符号位，`0` 表示正数，`1` 表示负数。
### 2) 真值
因为机器数带有符号位，所以机器数的形式值不等于其真实表示的值（真值）。
- 以机器数 `1000 0001` 为例，其真正表示的值（首位为符号位）为 `-1`，而形式值（首位就是代表 1）为 `129`。
- 因此将带符号的机器数的真正表示的值称为机器数的**真值**。
## 二、 原码、反码与补码
### 1) 原码
原码的表示与机器数真值表示的一样，即用第一位表示符号，其余位表示数值。
- **正数**：就是它对应的二进制数。
- **负数**：将绝对值对应的二进制最左边位变为 `1`。
例如十进制的正负 1，用 8 位二进制的原码表示如下：
- `[+1]` = 原: `[ 0000 0001 ]`
- `[-1]` = 原: `[ 1000 0001 ]`
### 2) 反码
- **正数**：和原码相同。
- **负数**：在其原码的基础上，**符号位不变，其余各位取反**。
示例：
- `[+1]` = 原: `[ 0000 0001 ]` = 反: `[ 0000 0001 ]`
- `[-1]` = 原: `[ 1000 0001 ]` = 反: `[ 1111 1110 ]`
### 3) 补码
- **正数**：补码是其原码本身。
- **负数**：补码是在其原码的基础上，**符号位不变，其余各位取反后加 1**（即在反码的基础上加 1）。
示例：
- `[+1]` = 原: `[ 0000 0001 ]` = 反: `[ 0000 0001 ]` = 补: `[ 0000 0001 ]`
- `[-1]` = 原: `[ 1000 0001 ]` = 反: `[ 1111 1110 ]` = 补: `[ 1111 1111 ]`
## 三、 数据在计算机中的存储形式
计算机实际上只存储**补码**，所以说原码转换为补码的过程，也可以理解为数据存储到计算机内存中的过程。
在原、反、补码中，正数的表示是一模一样的，而负数的表示是不相同的。因此对于负数的补码来说，我们不能直接用进制转换将其转换为十进制数值，因为这样是得不到计算机真正存储的十进制数的。**应该将其转换为原码后，再将转换得到的原码进行进制转换为十进制数**（机器数包含符号位）。
## 四、 为什么会使用原码、反码、补码
对于人脑来说，知道机器数的第一位是符号位是一件很轻松的事情，但对于计算机基础电路设计来说判别第一位是符号位是非常难和复杂的事情。
为了让计算机底层设计更加简单，于是设计将符号位参与运算，并且**只保留加法**的方法，通过**加上一个负数的方式来实现减法**。这样让计算机运算更加简单，并且也让符号位参与到运算中去。
## 五、 使用原码、反码与补码进行运算
### 1) 使用原码运算
计算十进制表达式：`1 - 1 = 0`
```text
1 - 1 = 1 + (-1)
= 原:[ 0000 0001 ] + 原:[ 1000 0001 ]
= 原:[ 1000 0010 ] = -2
```
**结论**：如果用原码表示，让符号位也参与计算，对于减法来说，结果是不正确的。这也是计算机内部在存储数据时不使用原码的原因。为了解决这一问题，出现了反码。
### 2) 使用反码运算
计算十进制表达式：`1 - 1 = 0`
```text
1 - 1 = 1 + (-1)
= 原:[ 0000 0001 ] + 原:[ 1000 0001 ]
= 反:[ 0000 0001 ] + 反:[ 1111 1110 ]
= 反:[ 1111 1111 ] = 原:[ 1000 0000 ] = -0
```
**结论**：通过计算我们发现用反码计算减法，结果的真值部分是正确的。唯一的问题出现在 "0" 这个特殊的数值上。虽然人们理解上 `+0` 和 `-0` 是一样的，但是 0 带符号是没有任何意义的，而且会有 `[0000 0000]原` 和 `[1000 0000]原` 两个编码表示 0。为了解决这一问题，出现了补码。
### 3) 使用补码运算
计算十进制表达式：`1 - 1 = 0`
```text
1 - 1 = 1 + (-1)
= 原:[ 0000 0001 ] + 原:[ 1000 0001 ]
= 补:[ 0000 0001 ] + 补:[ 1111 1111 ]
= 补:[ 0000 0000 ] = 原:[ 0000 0000 ] = 0
```
**结论**：这样 0 用 `[0000 0000]` 表示，而以前出现问题的 `-0` 则不存在了。而且人们还发现可以用 `[1000 0000]` 表示 `-128`。
**-128 的推算过程如下**：
```text
(-1) + (-127) = -128
= 原:[ 1000 0001 ] + 原:[ 1111 1111 ]
= 补:[ 1111 1111 ] + 补:[ 1000 0001 ]
= 补:[ 1000 0000 ]
```
> **注意**：因为实际上是使用以前的 `-0` 的补码来表示 `-128`，所以 `-128` 并没有原码和反码表示。只要补码是 `[1000 0000]`，其十进制数值就为 `-128`。
### 4) 小结
因为补码能多存储一个 `-128`，而且在计算机底层中存储的是补码，所以在计算机中一个 8 位的二进制数的存储范围是用补码表示的 `[-128, 127]`，而不是用原码或反码表示的 `[-127, 127]`。这也可以解释为什么计算机中一个字节的取值范围是 `[-128, 127]`。
## 六、 总结（牢记）
- **二进制的最高位是符号位**：`0` 表示正数，`1` 表示负数。
- **正数三码合一**：正数的原码、反码、补码都一样。
- **负数反码**：它的原码符号位不变，其它位取反。
- **负数补码**：它的反码 + 1；反之，负数反码 = 负数补码 - 1。
- **0 的表示**：`0` 的反码、补码都是 `0`。
- **运算方式**：在计算机运算的时候都是以 **“补码”** 的方式来运算的。
- **查看结果**：当我们看运算结果的时候，要看它的**原码**（重点）。

27
docs/blog/website/EdgeOne_Pages_Images.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: 通过 EdgeOne Pages 搭建图床
createTime: 2025/09/29 02:28:17
cover: /images/elysia/5.jpg
permalink: /article/8gihio2v/
---
各位～今天要给大家介绍一个超棒的图床搭建方法哦！EdgeOne Pages 是腾讯云提供的静态网站托管服务，而且还有免费额度可以使用呢，对于日常需求来说完全足够啦～
<!-- more -->
## 创建一个 Git 项目
第一步呢，我们需要先在 Gitee 上创建一个项目，专门用来存放网站里要用的各种图片。当然啦，如果你习惯用 Github 或者 CNB 也没问题，这些平台都是支持的哦～而且要记住，项目的目录结构就是以后图片的访问路径呢～
## EdgeOne Page 中导入项目
接下来打开 EdgeOne Page 的[控制台](https://console.cloud.tencent.com/edgeone/pages)，这里可以导入 Github、Gitee 和 CNB 的项目哦～
点击「导入项目」，选择 Gitee 项目，找到刚才创建的那个项目，然后就可以直接开始部署啦～
等待大概一分钟左右，部署完成后，在项目概览页面点击预览按钮，就可以先看看资源能不能正常访问啦～
## 配置域名
如果临时链接可以正常访问的话，我们就可以配置自己的域名啦～在项目概览页面点击「自定义域名」就可以进入配置界面哦～
在那里输入你想要使用的域名，腾讯云可是提供了50个免费证书的额度呢！而且证书到期后还会自动释放额度，所以完全不用担心证书不够用的问题，可以放心大胆地点击「使用免费证书」按钮哦～

30
docs/friends.md Normal file
View File

@@ -0,0 +1,30 @@
---
friends: true
title: My Friends
description: 星星划过的时候，要记得许愿哦～♪
permalink: /friends/
contentPosition: after
article: false
pageLayout: friends
list:
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
-
name: 祀梦
link: https://github.com/si-meng-spec
avatar: https://github.com/si-meng-spec.png
desc: 嗨~ 新的一天，从一场美妙的邂逅开始。
-
name: AJohn
link: https://www.ajohn.top/
avatar: https://github.com/zzyAJohn.png
desc: 我希望正在读这句话的人永远开心
-
name: 小小夏
link: https://notes.simengweb.com
avatar: https://image.simengweb.com/images/xxx.jpg
desc: Kawasaki天下第一！
---

28
docs/notes/ops/blockchain/README.md Normal file
View File

@@ -0,0 +1,28 @@
---
title: 区块链运维指南
createTime: 2025/09/28 07:54:17
permalink: /ops/blockchain/
---
## 区块链简介
区块链就像是一本神奇的共享账本哦～它由许许多多的"区块"连接而成，每个区块里都记录着各种交易信息～最特别的是，这本账本不是由某一个人或组织保管的，而是由网络里的所有人一起维护呢～
想象一下，当有新的交易发生时，网络里的每个人都会收到一份拷贝，大家一起验证这份交易的真实性，然后把它添加到账本里～这样一来，就没有人能够偷偷篡改账本啦～是不是很神奇呢～♪
区块链还有一个超棒的特点哦～它不需要中间人的帮忙，就能让互不相识的人们安全地进行交易～就像魔法一样，让信任在数字世界里自然生长～
## 区块链的理论基础
呜呜~在网上找关于完整区块链原理的资料好难呀，现在就只看到一些比较基础的课程和书籍呢。
嘿嘿，在B站的话，发现有一个课程超棒哒，就是肖臻老师的[《区块链技术与应用》](https://www.bilibili.com/video/BV1Vt411X7JF/)呢！
在Youtube上也可以去看看[Binance Academy](https://www.youtube.com/@BinanceAcademy)的视频哟，感觉也很不错哒！
至于书籍嘛，目前还没找到特别好的，不过没关系，会继续努力找找哒！如果有好的课程的话，可以评论留言分享一下哦~
## 区块链的运维实践
嘿嘿~区块链的搭建呀，主要就是通过 [FISCO BCOS](https://fisco-bcos-documentation.readthedocs.io/zh-cn/latest/docs/introduction.html) 来实现哒！
它呢，是一个开源的、基于Java的区块链平台哟~还支持智能合约的部署和执行呢，超厉害的！

70
docs/notes/ops/blockchain/practice/basic-deployment.md Normal file
View File

@@ -0,0 +1,70 @@
---
title: 区块链产品设计和基础部署
description: 详细介绍区块链产品设计和基础部署
createTime: 2025/09/28 20:15:00
permalink: /ops/blockchain/practice/basic-deployment/
---
## 区块链产品方案设计
### 区块链产品需求分析
区块链产品分析主要是以下几个步骤：
1. 明确业务需求
围绕指定业务分析区块链落地解决的痛点，提出围绕业务的功能概述。
2. 搜集业务相关信息
针对设计功能，分析收集数据的方向、类型和具体维度
3. 分析搜集数据
借助数据分析工具整合收集数据，并能根据收集数据得出初步结论
能够保证收集数据的准确性和安全性
4. 确定应用需求
根据业务需求和收集数据，细化产品具体功能需求
5. 落地区块链平台
形成具体平台的设计需求报告
形成平台验收的准则
### 区块链平台设计方案
区块链平台包括：区块链底层平台、智能合约层、业务层、应用层和用户层
![区块链平台设计](https://image.simengweb.com/notes/ops/blockchain/practice/basic-deployment/2025-10-02-150534.png)
### 业务功能模块设计
业务功能模块设计包括三层：功能平台、功能模块、详细功能
![业务功能模块设计](https://image.simengweb.com/notes/ops/blockchain/practice/basic-deployment/23f38723fcc79a2a91ea317f4c467755.png)
### 业务流程图
关于业务流程图的一些常见符号：
![业务流程图常见符号](https://image.simengweb.com/notes/ops/blockchain/practice/basic-deployment/d2c1a8bbe17c0cfef0314d0d1ba9ab45.png)
有一些好用的在线绘制流程图的网站：
1. [Draw.io](https://app.diagrams.net/)
### ER 图设计
E-R 图（实体-关系图）是数据库设计中常用的一种工具，E 是实体，拥有一组属性，R 是关系，用于找到实体之间的联系。
实体与实体之间的关系，可能是一对一（1:1），一对多（1:n），多对多（m:n）
实体：通常用矩形表示，代表系统中的一个对象或概念，如"学生","课程","老师"
属性：通常用椭圆形表示，表示实体的特征，如"学生"的"姓名","班级"
关系：用菱形表示，用于不同实体间的联系，如"课程"和"学生"之间的"选修"关系

59
docs/notes/ops/blockchain/practice/console-operator.md Normal file
View File

@@ -0,0 +1,59 @@
---
title: Console 控制台操作
createTime: 2025/10/03 02:55:49
permalink: /ops/blockchain/practice/console-operator/
---
## Console 控制台是什么？
Console 是 FISCO BCOS 官方提供的一个交互式命令行工具，用于直接与区块链节点交互。
主要功能包括：
- 查询区块链状态（如区块链高度、节点列表、群组信息）
- 部署和调用智能合约（支持 Solidity）
- 管理节点（如查看节点共识状态、动态添加节点）
- 调试交易和查看回执
## 部署 Console 控制台
获取下载脚本：`wget https://gitee.com/FISCO-BCOS/console/releases/download/v2.8.0/console.tar.gz`
解压控制台安装包：`tar -zxf console.tar.gz console/`
复制配置文件：`cp conf/config-example.toml conf/config.toml`
编辑配置文件：`vim conf/config.toml`
```bash
# enSslKey = "conf/gm/gmensdk.key" # GM ssl cert file path
# default load the GM SSL encryption privateKey from ${certPath}/gm/gmensdk.key
[network]
# 请确保这里的连接地址都有节点
peers=["127.0.0.1:20200", "127.0.0.1:20201"] # The peer list to connect [!code warning]
# Configure a private topic as a topic message sender.
```
复制节点证书到 Console 的配置目录下
```bash
cp -r ../nodes/127.0.0.1/sdk/* conf/
```
通过 `bash start.sh` 就可以启动 Console 控制台啦！
![启动Console控制台](https://image.simengweb.com/notes/ops/blockchain/practice/console-operator/2025-10-03-161500.png)
## 常用控制台命令
这里的区块链的搭建是根据前一篇文章中的多机构多群组多节点的关系
### 合约相关命令
### 其他命令
- 查询区块高度：`getBlockNumber`
```bash title='output_example'
[group:1]> getBlockNumber
0
```
- 查看共识节点列表：`getSealerList`
```bash title='output_example'
[group:1]> getSealerList
[
d036a22f16909cba4c8521cd3c31db3be381e673c9749e3fd2848ab25eca134ef917cb9306f41893295c535078bce77bdc241eba3f92549a73efe4699d3c0df8,
f0535616759000b473a285d60814bc2c5927a9cb897644da46890de71e59df590cd6fe1b226a95e19a566b6fc127fd85032de0d9fdd3d529e5e50cd96ad51f28
]
```

122
docs/notes/ops/blockchain/practice/node-deployment.md Normal file
View File

@@ -0,0 +1,122 @@
---
title: 区块链网络部署与管理
createTime: 2025/10/02 04:13:08
permalink: /ops/blockchain/practice/node-deployment/
---
## FISCO BCOS 简介
嘿呀~FISCO BCOS 可是金链盟开源工作组超用心牵头打造的企业级金融区块链底层平台哟！它就像一个超级厉害的小能手，有着高性能、高可用、安全可控这些超棒的特点呢。还支持多群组架构喔，能轻轻松松满足不同业务场景下的数据隔离和隐私保护需求，简直太赞啦！
而且呢，FISCO BCOS 还准备了好多丰富的开发工具和组件，就像给开发者们准备了一个魔法百宝箱，帮助大家能快速搭建区块链应用。现在在金融、政务、供应链这些好多好多领域都能看到它活跃的身影，应用可广泛啦！
## FISCO BCOS 网络部署
FICSO BCOS 提供了一个 build_chain.sh 来部署区块链，下面的步骤都是通过这个脚本来部署的区块链网络
```
# 可以通过这个指令下载脚本并赋予执行权限
curl -#LO https://github.com/FISCO-BCOS/FISCO-BCOS/releases/download/v2.11.0/build_chain.sh && chmod u+x build_chain.sh
```
### 部署单群组4节点联盟链
这里要确保机器的30300-30303,20200-20203,8545-8548端口都没有被占用
```
# 部署单群组4节点联盟链
bash build_chain.sh -l 127.0.0.1:4 -p 30300,20200,8545 -e ./fisco-bcos
```
如果是国密版本，执行下面的命令
```
# 部署单群组4节点联盟链（国密版本）
bash build_chain.sh -l 127.0.0.1:4 -p 30300,20200,8545 -g -G -e ./fisco-bcos
```
参数解析：
- -l：指定节点的IP地址和节点数
- -p：指定节点的端口号
- -g 和 -G：使用国密sm算法
- -e：使用指定的 fisco-bcos 文件
默认情况下脚本会去 github 上下载 fisco-bcos 二进制文件，这一步在国内很有可能失败，建议提前下载好，然后直接使用本地的
部署完成之后就可以启动节点了
```
bash nodes/127.0.0.1/start_all.sh
```
检查节点进程是否存在
```
ps -ef | grep fisco-bcos
```
检查节点之间是否互相链接了
```
# 这里是检查 node0 的日志文件
tail -f nodes/127.0.0.1/node0/log/log* | grep connected
```
输出样例如下：
```
info|2025-10-02 17:06:40.006979|[P2P][Service] heartBeat,connected count=3
...
```
这里可以看到 count=3，说明 node0 已经链接了另外的三个节点
检查节点之间是否存在共识
```
# 这里是检查 node0 的日志文件
tail -f nodes/127.0.0.1/node0/log/log* | grep +++
```
输出样例如下：
```
info|2025-10-02 17:08:29.795822|[g:1][CONSENSUS][SEALER]++++++++++++++++ Generating seal on,blkNum=1,tx=0,nodeIdx=0,hash=5b5f44f4...
info|2025-10-02 17:08:33.807504|[g:1][CONSENSUS][SEALER]++++++++++++++++ Generating seal on,blkNum=1,tx=0,nodeIdx=0,hash=50fec464...
...
```
不断输出带有 `++++Generating seal` 的日志，说明共识正常
检查群组之间的共识
```bash
tail -f nodes/127.0.0.1/node0/log/log* | grep 'g:1.*+++'
```
输出样例如下：
```bash
info|2025-10-02 17:59:59.194525|[g:1][CONSENSUS][SEALER]++++++++++++++++ Generating seal on,blkNum=1,tx=0,nodeIdx=1,hash=fdb2da54...
info|2025-10-02 18:59:59.225102|[g:1][CONSENSUS][SEALER]++++++++++++++++ Generating seal on,blkNum=1,tx=0,nodeIdx=1,hash=b7d87997...
info|2025-10-02 19:59:59.327677|[g:1][CONSENSUS][SEALER]++++++++++++++++ Generating seal on,blkNum=1,tx=0,nodeIdx=1,hash=38dea43f...
info|2025-10-02 20:59:59.462059|[g:1][CONSENSUS][SEALER]++++++++++++++++ Generating seal on,blkNum=1,tx=0,nodeIdx=1,hash=cb0e89fa...
info|2025-10-02 21:59:59.284218|[g:1][CONSENSUS][SEALER]++++++++++++++++ Generating seal on,blkNum=1,tx=0,nodeIdx=1,hash=721e8904...
```
### 部署多机构多群组多节点
在很多时候，我们需要部署多机构多群组多节点的联盟链，来满足不同业务场景下的需求。
现在有需求如下：
|IP|节点数|所属机构|所属群组|P2P端口|Channel端口|RPC端口|
| --- | --- | --- | --- | --- | --- | --- |
| 127.0.0.1 | 2 | agencyA | 1,2 | 30300 | 20200 | 8545 |
| 127.0.0.2 | 2 | agencyB | 2,3 | 30400 | 20300 | 8645 |
| 127.0.0.3 | 2 | agencyC | 3 | 30500 | 20400 | 8745 |
| 127.0.0.4 | 2 | agencyD | 4 | 30600 | 20500 | 8845 |
这种时候建议直接编辑配置文件，参考样例如下:
```bash title='ipconf'
127.0.0.1:2 agencyA 1,2 30300,20200,8545
127.0.0.1:2 agencyB 2,3 30400,20300,8645
127.0.0.1:2 agencyC 3 30500,20400,8745
127.0.0.1:2 agencyD 4 30600,20500,8845
```
通过配置文件部署多机构多群组多节点联盟链
```
bash build_chain.sh -f ipconf -p 30300,20200,8545 -e ./fisco-bcos
```
这里查看一下输出信息，应当如下图所示：
![多机构多群组多节点部署](https://image.simengweb.com/notes/ops/blockchain/practice/node-deployment/2025-10-02-172916.png)
## 参考文章
- [搭建第一个区块链网络](https://fisco-bcos-documentation.readthedocs.io/zh-cn/latest/docs/installation.html)
- [开发部署工具](https://fisco-bcos-documentation.readthedocs.io/zh-cn/release-2.7.0/docs/manual/build_chain.html)

6
docs/notes/ops/blockchain/theory/basic-principles.md Normal file
View File

@@ -0,0 +1,6 @@
---
title: 区块链的基本原理
createTime: 2025/09/28 12:39:11
permalink: /ops/blockchain/theory/basic-principles/
---

342
docs/notes/ops/blockchain/theory/fisco-bcos-node-type.md Normal file
View File

@@ -0,0 +1,342 @@
---
title: 区块链的节点
createTime: 2025/10/05 13:07:05
permalink: /ops/blockchain/theory/fisco-bcos-node-type/
---
## 节点的基础概念
FISCO BCOS 引入了[游离节点、观察者节点和共识节点](https://fisco-bcos-documentation.readthedocs.io/zh-cn/latest/docs/design/security_control/node_management.html#id6)，这三种节点类型可以通过控制台互相转换。
组员：
- 共识节点：参与共识的节点，拥有群组的所有数据（搭链时默认都生成共识节点）。
- 观察者节点：不参与共识，但能实时同步链上数据的节点。
非组员：
- 游离节点：已启动，等待加入群组的节点。处在一种暂时的节点状态，不能获取链上的数据。
## 节点配置文件详解
节点搭建完成之后会有`config.ini`、`conf/group.%group_id.genesis`、`conf/group.%group_id.ini`、`node.nodeid` 等配置文件
::: code-tabs
@tab config.ini
```bash
# RPC (Remote Proceduce Call 远程过程调用)
# 用于配置节点对外提供的 RPC 服务，包括 JSON-RPC ( 用于 Web3.js,控制台等 )和 Channel 通信（ 用于 SDK,Java 应用等 ）
[rpc]
# 允许外部访问
channel_listen_ip=0.0.0.0
channel_listen_port=20200
# 只允许内部访问
jsonrpc_listen_ip=127.0.0.1
jsonrpc_listen_port=8545
# P2P (Peer-to-Peer 点对点通信)
# 用于配置节点之间的 P2P 通信
[p2p]
listen_ip=0.0.0.0
listen_port=30300
; nodes to connect
node.0=127.0.0.1:30300
node.1=127.0.0.1:30301
node.2=127.0.0.1:30400
node.3=127.0.0.1:30401
node.4=127.0.0.1:30500
node.5=127.0.0.1:30501
node.6=127.0.0.1:30600
node.7=127.0.0.1:30601
# 证书的黑白名单控制
[certificate_blacklist]
; crl.0 should be nodeid, nodeid's length is 128
;crl.0=
[certificate_whitelist]
; cal.0 should be nodeid, nodeid's length is 128
;cal.0=
# 群组的配置目录和数据目录
# 启动的时候会自动加载 group_config_path 下的所有群组
[group]
group_data_path=data/
group_config_path=conf/
# 配置网络安全
[network_security]
; directory the certificates located in
# 网络部分的配置文件目录
data_path=conf/
; the node private key file
# 节点的私钥文件
key=node.key
; the node certificate file
# 节点的证书文件
cert=node.crt
; the ca certificate file
# CA 的证书文件
ca_cert=ca.crt
# 配置加密存储
# 用于对接 KMS ，实现落盘数据加密
# 具体的可以查看参考文献中的第2篇文章，落盘加密
[storage_security]
enable=false
key_manager_ip=
key_manager_port=
cipher_data_key=
# 链的基本信息
[chain]
# 链的 ID ，不同链ID的节点无法通信
id=1
; use SM crypto or not, should nerver be changed
# 是否启动国密算法，这一步在创建的时候就应该规划好
# 一旦设定，不可更改，否则无法和其他节点通信
sm_crypto=false
# cannel 是否启用国密，需和 SDK 一致
sm_crypto_channel=false
# 兼容性配置
[compatibility]
; supported_version should nerver be changed
# 指定节点兼容的 FISCO BCOS 的版本
# 默认值即可，不应手动修改
supported_version=2.8.0
# 日志配置
[log]
# 启用配置
enable=true
# 日志配置目录
log_path=./log
; enable/disable the statistics function
# 是否启用统计功能
enable_statistic=false
; network statistics interval, unit is second, default is 60s
# 统计信息刷新间隔（单位：秒）
stat_flush_interval=60
; info debug trace
# 日志级别，可选值（trace < debug < info < warning < error）
level=info
; MB
# 单个日志文件最大大小（单位：MB）
max_log_file_size=200
# 是否实时刷盘
flush=true
# 流量控制
[flow_control]
; restrict QPS of the node
# 限制 QPS 每秒请求数，防止 DDOS
;limit_req=1000
; restrict the outgoing bandwidth of the node
; Mb, can be a decimal
; when the outgoing bandwidth exceeds the limit, the block synchronization operation will not proceed
# 限制节点出带宽（单位Mbps）
# 超出之后会暂停区块同步，避免网络拥塞
;outgoing_bandwidth_limit=2
```
@tab group.1.genesis
```bash
# 共识机制配置
[consensus]
; consensus algorithm now support PBFT(consensus_type=pbft), Raft(consensus_type=raft)
; rpbft(consensus_type=rpbft)
# 共识算法
consensus_type=pbft
; the max number of transactions of a block
# 每个区块的最大打包量，超出的部分会留在交易池，等待下一次打包
max_trans_num=1000
; in seconds, block consensus timeout, at least 3s
# 共识算法的超时时间
consensus_timeout=3
; rpbft related configuration
; the working sealers num of each consensus epoch
# 仅在 rpbft 的时候生效，每轮共识 epoch 中参与打包的共识节点数。
epoch_sealer_num=2
; the number of generated blocks each epoch
# 仅在 rpbft 的时候生效，每轮 epoch 持续的区块数。
epoch_block_num=1000
; the node id of consensusers
# 群组中共识节点的列表
node.0=f0535616759000b473a285d60814bc2c5927a9cb897644da46890de71e59df590cd6fe1b226a95e19a566b6fc127fd85032de0d9fdd3d529e5e50cd96ad51f28
node.1=d036a22f16909cba4c8521cd3c31db3be381e673c9749e3fd2848ab25eca134ef917cb9306f41893295c535078bce77bdc241eba3f92549a73efe4699d3c0df8
# 存储区块链的状态信息
# 支持 storage state 和 MPT state
# storage state 效率高
# MPT state 效率低，但是包含完整的历史信息
[state]
type=storage
# transaction （交易）相关配置
# gas 是一种计算智能合约执行过程中消耗的计算和存储资源，包括交易的gas的最大值的限制和区块的gas最大值的限制
# 如果交易或区块执行消耗的 gas 超过限制，则会丢弃交易区块
# FISCO BCOS 是联盟链，简化了 gas 的设计，仅保留交易最大 gas 限制，区块最大 gas 是通过共识配置的
[tx]
; transaction gas limit
gas_limit=300000000
# 群组的配置
[group]
# 群组 ID
id=1
# 群组的创世区块的时间戳(ms)
timestamp=1759397321000
# 群组的 EVM 配置
# 是否开启 free storage
# 这里具体的内容，可以查看参考文献中的第4篇文章，【教程】如何修改FISCO-BCOS内的EVM的gas...
[evm]
enable_free_storage=false
```
@tab group.1.ini
```bash
# 共识运行参数（PBFT 优化）
[consensus]
; the ttl for broadcasting pbft message
# PBFT 消息在网络中最多转发 2 跳
ttl=2
; min block generation time(ms)
# 最小出块时间 500ms
min_block_generation_time=500
# 动态调整区块大小 genesis 中的 max_trans_num
enable_dynamic_block_size=true
# 优化 TLL 转发逻辑，提升 PBFT 在大规模网络中的效率
enable_ttl_optimization=true
# Prepare 消息中只包含交易哈希，减少网络传输量
# 大幅提示大区块场景下的共识效率
enable_prepare_with_txsHash=true
; The following is the relevant configuration of rpbft
; set true to enable broadcast prepare request by tree
# 使用树状拓扑广播 Prepare 广播（而非全网广播）
# 适合节点多的场景
# 仅在 rpbft 或优化版 PBFT 中有效
broadcast_prepare_by_tree=true
; percent of nodes that broadcast prepare status to, must be between 25 and 100
# 广播 Prepare 状态给33%的节点，必须在 25%~100% 之间
prepare_status_broadcast_percent=33
; max wait time before request missed transactions, ms, must be between 5ms and 1000ms
# 请求缺失交易前，最多等待 100ms（收集更多交易）
# 范围 5 ~ 1000ms
max_request_missedTxs_waitTime=100
; maximum wait time before requesting a prepare, ms, must be between 10ms and 1000ms
# 请求缺失 Prepare 消息前，最多等待 100ms
# 范围 10ms ~ 1000ms
max_request_prepare_waitTime=100
[storage]
; storage db type, rocksdb / mysql / scalable, rocksdb is recommended
# 存储引擎
# 推荐使用 rocksdb （高性能，嵌入式 KV 数据库）
# 支持 mysql ( 不推荐，性能差 ) , scalable （分布式存储，实验性）
type=rocksdb
; set true to turn on binary log
# 开启二进制日志，默认关闭，开启会增加IO
binary_log=false
; scroll_threshold=scroll_threshold_multiple*1000, only for scalable
# 仅在 scalable 存储引擎下生效
scroll_threshold_multiple=2
; set fasle to disable CachedStorage
# 启用缓存层（非常推荐）
cached_storage=true
; max cache memeory, MB
# 缓存最大内容，32MB
max_capacity=32
# 允许节点最多超前同步10个区块
max_forward_block=10
; only for external, deprecated in v2.3.0
# 最大重试次数，默认 60 次
max_retry=60
topic=DB
; only for mysql
db_ip=127.0.0.1
db_port=3306
db_username=
db_passwd=
db_name=
# 交易池
[tx_pool]
# 交易池最大容量，默认 150000
limit=150000
; transaction pool memory size limit, MB
# 交易池最大内存占用：512 MB
memory_limit=512
; number of threads responsible for transaction notification,
; default is 2, not recommended for more than 8
# 用于通知 SDK 交易上链结果的线程数
notify_worker_num=2
# 区块同步优化
[sync]
; max memory size used for block sync, must >= 32MB
# 区块同步最大内存：512MB，必须大于等于 32 MB
max_block_sync_memory_size=512
# 同步空闲时，等待 200ms 再检查新块
idle_wait_ms=200
; send block status by tree-topology, only supported when use pbft
# 使用树状拓扑同步区块
# 可以大幅度降低网络带宽
# 仅在 PBFT 下支持
sync_block_by_tree=true
; send transaction by tree-topology, only supported when use pbft
; recommend to use when deploy many consensus nodes
# 交易广播也使用树状拓扑
send_txs_by_tree=true
; must between 1000 to 3000
; only enabled when sync_by_tree is true
# Gossip 协议心跳间隔
gossip_interval_ms=1000
# 每个节点维护 3 个gossip邻居
gossip_peers_number=3
; max number of nodes that broadcast txs status to, recommended less than 5
# 交易状态最多广播给5个节点
txs_max_gossip_peers_num=5
# 群组级的流量控制
[flow_control]
; restrict QPS of the group
# 限制群组的 QPS 为 1000
;limit_req=1000
; restrict the outgoing bandwidth of the group
; Mb, can be a decimal
; when the outgoing bandwidth exceeds the limit, the block synchronization operation will not proceed
# 限制群组的出链带宽为 2Mbps/s
;outgoing_bandwidth_limit=2
# SDK 连接白名单
[sdk_allowlist]
; When sdk_allowlist is empty, all SDKs can connect to this node
; when sdk_allowlist is not empty, only the SDK in the allowlist can connect to this node
; public_key.0 should be nodeid, nodeid's length is 128
;public_key.0=
```
@tab node.nodeid
```bash
# 节点的 ID
f0535616759000b473a285d60814bc2c5927a9cb897644da46890de71e59df590cd6fe1b226a95e19a566b6fc127fd85032de0d9fdd3d529e5e50cd96ad51f28
```
:::
## 节点操作命令
- `addSealer`：将节点转换为共识节点。
- `addObserver`：将节点转换为观察节点。
- `removeNode`：将节点设置为游离节点。
- `getSealerList`：查询当前的共识节点的列表
- `getObserverList`：查询当前的观察者节点的列表·
- `getNodeList`：查询当前的所有节点的列表
操作节点的时候是通过节点ID进行操作的，节点ID可以在节点目录的`conf/node.nodeid`中获取
请确保节点加入的区块链所有节点共识正常：正常的节点会输出`+++`日志
## 参考文章：
1. [组员节点管理](https://fisco-bcos-documentation.readthedocs.io/zh-cn/latest/docs/manual/node_management.html)
2. [落盘加密](https://fisco-bcos-documentation.readthedocs.io/zh-cn/latest/docs/design/features/storage_security.html)
3. [【全网首发】FISCO-BCOS从底层讲起链从配置文件开始解析...](https://blog.csdn.net/LforikQ/article/details/130920092)
4. [【教程】如何修改FISCO-BCOS内的EVM的gas值，让区块链预防DOS攻击...](https://blog.csdn.net/qq_57309855/article/details/126334115)

78
docs/notes/ops/docker/ETLCloud.md Normal file
View File

@@ -0,0 +1,78 @@
---
title: ETLCloud
createTime: 2025/12/24 17:13:36
permalink: /ops/docker/other/ETLCloud/
---
## 前置环境
这里安装之前，需要先安装 mongodb 数据库，可以参考 [使用 Docker 部署 MongoDB](mongodb.md)
## 安装 ETLCloud
拉取社区版本镜像：
```bash
docker pull ccr.ccs.tencentyun.com/restcloud/restcloud-etl:V4.0
```
### 部署容器
如果您已经运行过同名容器，请先删除：
```bash
docker rm -f restcloud-etl-V4.0
```
使用以下命令进行部署（包含授权绑定、数据持久化和端口映射）：
```bash
docker run -d \
--restart=always \
--privileged=true \
--name restcloud-etl-V4.0 \
--mac-address=01:D2:F4:18:B8:67 \
-v /data/tomcat:/usr/tomcat \
-p 9527:8080 \
ccr.ccs.tencentyun.com/restcloud/restcloud-etl:V4.0
```
**参数说明：**
- `--restart=always`: 容器退出时总是重启（如系统重启）。
- `--privileged=true`: 赋予容器特权模式，确保初始化正常。
- `--mac-address`: 固定 MAC 地址，用于绑定 License 授权（**注意：第一个字节必须为偶数，建议使用 02 开头**）。
- `-v /data/tomcat:/usr/tomcat`: 将 Tomcat 目录挂载到宿主机，实现数据持久化。
- `-p 9527:8080`: 访问端口映射，宿主机访问端口为 9527。
拷贝容器中的 tomcat 目录到主机上
```bash
docker cp e0419ad8a2bf31743ec17368cf4098e293c36761842a7dcff8280fbc34195fba:/usr/tomcat /data/
```
删除之前创建的简单容器
```bash
docker rm -f e0419ad8a2bf31743ec17368cf4098e293c36761842a7dcff8280fbc34195fba
```
在 /data/tomcat 路径下，编辑ETLCloud mongo相关的配置文件，这里的信息参考之前创建的 MongoDB 实例。
这里我额外修改了 server.port ,这里太容易和其他的服务端口冲突，所以这里修改为 9527。
```bash
sudo vim ./webapps/ROOT/WEB-INF/classes/application.properties
server.port=9527
...
#集群服务器之间同步用的公共配置数据库,空表示和配置库一起
spring.data.mongodb.host=127.0.0.1:27018
spring.data.mongodb.repositories.enabled=true
#MongoDb的数据库认证用户名及密码,没有可以为空
spring.data.mongodb.username=admin
spring.data.mongodb.password=admin
...
```
然后可以启动容器，样例如下：
```bash
docker run -d --restart=always --restart=on-failure:5 --privileged=true --name restcloud-etl-V4.0 --mac-address=自定义mac地址 -v /home/tomcat:/usr/tomcat -p 8080:8080 镜像id
```
具体命令，这里的MAC地址参数一定是要有的，不然每次重新创建之后MAC地址会变就需要重新生成SN码
这里的MAC地址不要和博主写一样的...自己随机一个或者随便写一个就行
```bash
docker run -d --restart=always --restart=on-failure:5 --privileged=true --name restcloud-etl-V4.0 --mac-address=02:D2:00:00:00:67 -v /data/tomcat:/usr/tomcat -p 9527:8080 4a5c0ed2a5b2
```
然后访问 服务器IP:9527/restcloud/admin/login 就可以啦
后面的话就是去官网申请一个SN码，然后就可以开始使用啦。

69
docs/notes/ops/docker/Postgres.md Normal file
View File

@@ -0,0 +1,69 @@
---
title: 使用 Docker 部署 Postgres
createTime: 2025/12/25 10:52:34
permalink: /ops/docker/db/postgres/
---
## 在 Ubuntu 上部署 Postgres 实例
拉取 Postgres 镜像：
```bash
docker pull postgres
```
> [!IMPORTANT] 注意事项
> 从 **PostgreSQL 18+** 版本开始，官方镜像建议将数据目录挂载到 `/var/lib/postgresql` 而非 `/var/lib/postgresql/data`。如果你是从旧版本升级镜像，直接挂载旧目录会导致启动失败。
### 极简运行 Postgres 实例
```bash
docker run --restart=always -itd --name postgres -p 5432:5432 -e POSTGRES_PASSWORD=postgres postgres
```
解析：
- `--restart=always`：容器重启时自动启动。
- `-itd`：交互式模式运行容器，后台模式。
- `--name postgres`：为容器命名为 postgres。
- `-p 5432:5432`：将主机的 5432 端口映射到容器的 5432 端口。
- `-e POSTGRES_PASSWORD=postgres`：设置 Postgres 数据库的密码为 postgres。
- `postgres`：使用 Postgres 镜像。
### 配置 Postgres 持久化实例
#### 方案一：使用最新版本 (18+)
创建一个目录用于存储 Postgres 数据：
```bash
mkdir -p /data/postgres/
```
运行 Postgres 容器：
```bash
docker run --restart=always -itd \
--name postgres \
-p 5432:5432 \
-e POSTGRES_PASSWORD=postgres \
-v /data/postgres/:/var/lib/postgresql \
postgres
```
#### 方案二：固定使用旧版本 (如 17)
如果你有现存的 `/var/lib/postgresql/data` 格式数据，建议固定版本：
```bash
docker run --restart=always -itd \
--name postgres \
-p 5432:5432 \
-e POSTGRES_PASSWORD=postgres \
-v /data/postgres/:/var/lib/postgresql/data \
postgres:17
```
解析：
- `-v /data/postgres/:/var/lib/postgresql/data`：将主机的 /data/postgres/ 目录挂载到容器的 /var/lib/postgresql/data 目录，用于持久化存储数据。
#### 进入容器之后修改 postgres 用户密码
进入 Postgres 容器：
```bash
docker exec -it postgres psql -U postgres
```
解析：
- `docker exec -it postgres psql -U postgres`：进入 Postgres 容器的 psql 命令行界面，使用 postgres 用户进行登录。
修改 postgres 用户密码为 postgres：
```sql
ALTER USER postgres PASSWORD 'postgres';
```

39
docs/notes/ops/docker/README.md Normal file
View File

@@ -0,0 +1,39 @@
---
title: Docker 部署运维
createTime: 2025/12/24 16:39:34
permalink: /ops/docker/
---
欢迎来到 Docker 运维笔记！✨
在这里，我们将一起探索那些神奇的“小盒子”——Docker 容器。它们就像是装满惊喜的礼盒，把复杂的程序都整整齐齐地收纳在一起，是不是很有趣呢？♪
不管是部署数据库，还是搭建各种好玩的应用，只要有了这些小盒子，一切都会变得像魔法一样简单又优雅呢～真期待看到你在运维的道路上，也能像花朵一样绽放光彩呢。🌸
好啦，让我们开始这段美妙的旅程吧～如果遇到困难，这里会一直提供帮助的哦～
## 常用基础命令 🛠️
为了更顺畅地开启这段旅程，这里准备了一些常用的魔法指令：
### 容器管理
- `docker ps`：查看正在运行的小盒子。
- `docker ps -a`：查看所有的小盒子（包括休息中的）。
- `docker stop <ID>`：让小盒子暂时休息一下。
- `docker start <ID>`：唤醒休息中的小盒子。
- `docker rm <ID>`：送走不再需要的小盒子。
### 镜像管理
- `docker images`：查看我们收集的所有魔法镜像。
- `docker pull <name>`：从云端下载新的魔法镜像。
- `docker rmi <ID>`：清理不再需要的魔法镜像。
### 日志与调试
- `docker logs -f <ID>`：实时查看小盒子里的悄悄话。
- `docker exec -it <ID> /bin/bash`：亲自钻进小盒子里面看看。
## 部署清单 📋
- [MongoDB 部署魔法](./mongodb.md)
- 更多惊喜，敬请期待～✨

69
docs/notes/ops/docker/mongodb.md Normal file
View File

@@ -0,0 +1,69 @@
---
title: 使用 Docker 部署 MongoDB
createTime: 2025/12/24 16:34:00
permalink: /ops/docker/db/mongodb/
---
本教程将介绍如何使用 Docker 快速部署一个 MongoDB 实例。
## 在 Ubuntu 上部署 MongoDB:4.2 实例
我们先拉取 MongoDB:4.2 镜像：
```bash
docker pull mongo:4.2
```
创建一个目录用于存储 MongoDB 数据：
```bash
mkdir -p /data/mongo/
```
启动 MongoDB 容器：
```bash :wrap
sudo docker run --restart=always -itd --name mongo -p 27018:27017 -v /data/mongo/:/data/db mongo:4.2 --auth
```
命令详解：
- `--restart=always`：容器重启时自动启动。
- `-itd`：交互式模式运行容器，后台模式。
- `--name mongo`：为容器命名为 mongo。
- `-p 27018:27017`：将主机的 27018 端口映射到容器的 27017 端口。
- `-v /data/mongo/:/data/db`：将主机的 /data/mongo/ 目录挂载到容器的 /data/db 目录，用于持久化存储数据。
- `mongo:4.2`：使用 MongoDB:4.2 镜像。
- `--auth`：启用身份验证功能。
进入 MongoDB 容器：
```bash
docker exec -it mongo mongo admin
```
### 在 MongoDB 容器中创建管理员用户
先进入 admin 数据库
```bash
use admin;
```
创建管理员用户 admin, 密码 root, 角色为 root。
```bash
db.createUser( { user: "root", pwd: "root", roles:['root'] });
```
退出 MongoDB 容器：
```bash
exit
```
使用 root 用户进行登录
```bash
docker exec -it mongo mongo admin -u root -p root
```
这里还能创建一个 admin 用户，用密码 admin，角色为 readWriteAnyDatabase, dbAdminAnyDatabase。
```bash
db.createUser( { user: "admin", pwd: "admin", roles:['readWriteAnyDatabase','dbAdminAnyDatabase'] } );
```
验证用户，这里会登录到 admin
```bash
db.auth("admin","admin");
```
删除用户的话可以使用，注意这里要切换回 root 用户
```bash
db.dropUser("admin");
```

31
docs/notes/ops/linux/README.md Normal file
View File

@@ -0,0 +1,31 @@
---
title: Linux 运维笔记
createTime: 2025/09/28 10:30:00
permalink: /ops/linux/
---
# Linux 运维笔记
你好呀，这里是祀梦的 Linux 运维笔记小天地～ 🌟
在这片神奇的天地里，我们将一起探索 Linux 操作系统的奥秘，学习各种实用的运维技巧。无论你是刚开始接触 Linux 的新手，还是已经有一定经验的运维工程师，相信这里都能为你提供一些有用的知识和见解哦～
## 为什么选择 Linux？
Linux 就像是一个宝藏盒子，里面装满了各种强大的工具和功能。它稳定、安全、高效，是服务器领域的佼佼者。而且最重要的是，它是开源的！这意味着我们可以自由地探索它的内部结构，甚至可以根据自己的需求进行定制～
## 笔记内容概览
这里的笔记将会涵盖以下几个方面：
- **Linux 基础命令**：从最基本的文件操作到系统管理，一步步带你熟悉 Linux 的常用命令
- **系统管理**：学习如何管理用户、进程、服务和网络
- **Shell 脚本编程**：掌握 Shell 脚本的编写技巧，让你的工作更加自动化
- **系统性能优化**：了解如何监控和优化 Linux 系统的性能
- **安全防护**：学习 Linux 系统的安全配置和防护措施
## 学习建议
学习 Linux 最好的方法就是**多实践**！不要害怕犯错，每一次错误都是成长的机会。如果你在学习过程中遇到了问题，记得多查阅文档，多和社区交流～
让我们一起开启这段精彩的 Linux 运维之旅吧！ 💪

210
docs/notes/ops/linux/basic-commands.md Normal file
View File

@@ -0,0 +1,210 @@
---
title: Linux 基础命令详解
createTime: 2025/09/28 10:45:00
permalink: /ops/linux/basic-commands/
---
# Linux 基础命令详解
Hello～ 欢迎来到 Linux 命令的奇妙世界！今天，爱莉希雅将带着祀梦一起探索那些最常用、最实用的 Linux 基础命令哦～ 准备好了吗？Let's go！🚀
## 文件与目录操作
### ls - 查看目录内容
`ls` 命令就像是你的眼睛，可以帮你查看当前目录下有哪些文件和文件夹～
```bash
# 查看当前目录内容
ls
# 查看详细信息（包括权限、大小、修改时间等）
ls -l
# 显示所有文件（包括隐藏文件）
ls -a
# 以人类可读的方式显示文件大小
ls -lh
```
### cd - 切换目录
`cd` 命令是你的小脚丫，可以带你在不同的目录之间穿梭～
```bash
# 进入指定目录
cd /path/to/directory
# 回到上一级目录
cd ..
# 回到主目录
cd ~
# 回到上一次所在的目录
cd -
```
### pwd - 显示当前路径
有时候我们可能会迷路，这时候 `pwd` 命令就像是指南针，可以告诉我们当前所在的位置～
```bash
# 显示当前工作目录的绝对路径
pwd
```
### mkdir - 创建目录
想要创建新的文件夹？`mkdir` 命令可以帮你实现这个愿望～
```bash
# 创建一个新目录
mkdir new_directory
# 递归创建多级目录
mkdir -p parent/child/grandchild
```
### rm - 删除文件或目录
`rm` 命令可以帮你清理不需要的文件和目录，但要小心使用哦，删除后可是很难恢复的～
```bash
# 删除文件
rm filename.txt
# 强制删除文件（不提示）
rm -f filename.txt
# 删除目录
rm -r directory
# 强制删除目录（不提示）
rm -rf directory
```
## 文件内容查看
### cat - 查看文件全部内容
`cat` 命令就像是一个快速阅读器，可以帮你一次性查看整个文件的内容～
```bash
# 查看文件内容
cat filename.txt
# 显示行号
cat -n filename.txt
```
### less - 分页查看长文件
如果文件太长，一次性看不完怎么办？`less` 命令可以帮你分页查看～
```bash
# 分页查看文件内容
less filename.txt
# 在 less 模式下，可以使用方向键上下滚动，按 q 退出
```
### head 和 tail - 查看文件开头和结尾
只想看文件的开头或结尾部分？`head` 和 `tail` 命令可以满足你的需求～
```bash
# 查看文件前 10 行
head filename.txt
# 查看文件前 20 行
head -20 filename.txt
# 查看文件最后 10 行
tail filename.txt
# 实时查看文件更新（常用于查看日志）
tail -f filename.log
```
## 文本搜索
### grep - 搜索文本内容
`grep` 命令就像是一个侦探，可以帮你在文件中搜索特定的文本～
```bash
# 在文件中搜索特定文本
grep "search_text" filename.txt
# 忽略大小写搜索
grep -i "search_text" filename.txt
# 显示匹配行及前后几行
grep -A 5 -B 5 "search_text" filename.txt
# 递归搜索目录下所有文件
grep -r "search_text" directory/
```
## 系统信息查看
### uname - 查看系统信息
想要了解你的 Linux 系统是什么版本？`uname` 命令可以告诉你～
```bash
# 查看系统内核信息
uname -a
```
### top - 查看进程信息
`top` 命令就像是系统的仪表盘，可以实时显示系统的运行状态和进程信息～
```bash
# 查看系统进程信息
top
# 在 top 模式下，可以按 q 退出
```
## 网络命令
### ping - 测试网络连接
想知道你的电脑能不能连接到某个网站？`ping` 命令可以帮你测试～
```bash
# 测试网络连接
ping www.example.com
```
### ifconfig/ip - 查看网络接口信息
想了解你的网络配置？`ifconfig` 或 `ip` 命令可以帮你查看～
```bash
# 查看网络接口信息
ifconfig
# 或者
ip addr
```
## 小练习
现在，让我们来做一个小练习吧！尝试使用今天学到的命令完成以下任务：
1. 在家目录下创建一个名为 `practice` 的文件夹
2. 进入 `practice` 文件夹，创建一个名为 `notes.txt` 的文件
3. 使用 `cat` 命令查看该文件（虽然现在它是空的）
4. 返回上一级目录，然后使用 `ls -la` 查看所有文件和目录的详细信息
怎么样？你都完成了吗？如果遇到了问题，不要着急，多试几次就会熟悉啦～ 😊
## 小结
今天我们学习了很多实用的 Linux 基础命令，这些命令就像是 Linux 世界的积木，只要你熟练掌握它们，就可以搭建出各种各样的奇妙作品～ 记得要多多练习哦，实践出真知嘛！
下次我们将学习更多高级的 Linux 命令和技巧，敬请期待～ 拜拜～ 👋

12
docs/notes/ops/linux/other.md Normal file
View File

@@ -0,0 +1,12 @@
---
title: 一些零散的命令
createTime: 2025/12/31 10:00:30
permalink: /ops/linux/other/
---
## 文件处理相关
统计当前目录下的所有文件加起来有多少行
```
wc -l * | tail -n 1
```

49
docs/notes/programming/c++/README.md Normal file
View File

@@ -0,0 +1,49 @@
---
title: C++ 学习笔记
description: 记录C++编程语言的学习心得和基础知识
createTime: 2025/09/22 09:00:00
permalink: /programming/cplusplus/
---
# C++ 学习笔记
这里是我在学习C++编程语言过程中记录的学习心得、基础知识和实战经验。通过整理这些笔记，希望能够帮助自己和他人更好地掌握C++这门强大的编程语言。
## 学习路径
C++是一门复杂而强大的编程语言，学习路径建议如下：
1. **基础语法** - 掌握C++的基本语法和编程概念
2. **面向对象编程** - 学习C++的类、继承、多态等OOP特性
3. **STL标准库** - 熟悉常用的容器和算法
4. **高级特性** - 模板、异常处理、智能指针等
5. **实战项目** - 通过实际项目巩固所学知识
## 笔记分类
### 基础语法
- 数据类型
- 运算符和表达式
- 控制流语句
- 函数
### 面向对象编程
- 类和对象
- 继承与多态
- 封装与抽象
- 构造函数与析构函数
### STL标准库
- 容器（vector, list, map等）
- 迭代器
- 算法
- 函数对象
## 学习资源推荐
- [C++ Primer Plus：中文版（第六版）](https://101su.ru/book/5442395/430bc1/c-primer-plus%E4%B8%AD%E6%96%87%E7%89%88%E7%AC%AC%E5%85%AD%E7%89%88.html) - 很好的C++入门教材
开始你的C++学习之旅吧！坚持学习，你会发现C++的魅力所在！

10
docs/notes/programming/c++/basis.md Normal file
View File

@@ -0,0 +1,10 @@
---
title: C++ 简介与环境配置
createTime: 2025/09/22 09:06:00
permalink: /programming/cplusplus/basis/
---
## C++的简介
欢迎来到C++的奇妙世界～(๑>◡<๑) 如果你之前接触过C语言的话，那真是太棒啦！C++就像是C语言穿上了漂亮的新衣裳，不仅保留了原来的优点，还添加了面向对象和泛型编程的魔法哦～不过呢，可能需要稍微调整一下之前的编程习惯呢。就算你是第一次接触C++也完全不用担心，我会用最简单可爱的方式，带着你一步一步探索这个神奇的编程世界哒！
## 环境配置

40
docs/notes/programming/leetcode/README.md Normal file
View File

@@ -0,0 +1,40 @@
---
title: LeetCode 题解笔记
description: 记录LeetCode算法题的解题思路和代码实现
createTime: 2025/09/22 08:09:52
permalink: /programming/leetcode/
---
# LeetCode 题解笔记
这里是我在LeetCode刷题过程中记录的解题思路和代码实现。通过整理这些题解，希望能够提高自己的算法水平和编程能力。
## 题解分类
### 数组与字符串
- [两数之和](https://leetcode-cn.com/problems/two-sum/)
- [三数之和](https://leetcode-cn.com/problems/3sum/)
### 链表
- [反转链表](https://leetcode-cn.com/problems/reverse-linked-list/)
- [合并两个有序链表](https://leetcode-cn.com/problems/merge-two-sorted-lists/)
### 动态规划
- [爬楼梯](https://leetcode-cn.com/problems/climbing-stairs/)
- [最长回文子串](https://leetcode-cn.com/problems/longest-palindromic-substring/)
## 解题技巧
1. **双指针法**：常用于数组、链表问题，如两数之和、反转链表等
2. **滑动窗口**：处理字符串子串问题
3. **动态规划**：将原问题分解为子问题，自底向上求解
4. **分治法**：将问题分成若干子问题，分别求解后合并结果
## 学习资源
- [LeetCode官方题解](https://leetcode-cn.com/problemset/all/)
- [代码随想录](https://programmercarl.com/)
- [算法导论](https://mitpress.mit.edu/books/introduction-algorithms)

13
docs/notes/programming/leetcode/beginner.md Normal file
View File

@@ -0,0 +1,13 @@
---
title: LeetCode 入门题单～(≧∇≦)ﾉ
description: 给算法初学者的题目推荐和学习路径
createTime: 2025年9月22日 08:52:52
permalink: /programming/leetcode/question_sheet/beginner/
---
# LeetCode 入门题单～(๑>◡<๑)
作为算法初学者，选择合适的题目开始练习真的超～级重要哦！这里给大家推荐一份超棒的入门题单——[「新」动计划 · 编程入门](https://leetcode.cn/studyplan/primers-list/) ～这份题单就像给小树苗精心准备的阳光和雨露一样，特别适合刚开始算法之旅的你～（悄悄告诉你，里面有两题是数据库基础，暂时可以跳过哦～）
我的小建议是：先自己试着挑战一下，如果遇到困难了，再来看题解也没关系～重要的是享受这个成长的过程呀～(♡˙︶˙♡)
## 基础语法 & 数据类型 ٩(๑>◡<๑)۶

21
docs/notes/programming/solidity/README.md Normal file
View File

@@ -0,0 +1,21 @@
---
title: Solidity 学习笔记
description: 记录Solidity智能合约开发的学习心得和基础知识
createTime: 2025/09/28 19:39:00
permalink: /programming/solidity/
---
## Solidity 智能合约概述
Solidity 是一种用于编写智能合约的静态类型编程语言，它运行在以太坊虚拟机（EVM）上。
## 推荐的资料
推荐的编辑器
Remix IDE：[https://remix.ethereum.org/](https://remix.ethereum.org/)
有在线版本，也可以下载之后使用，而且可以通过 Docker 部署，很方便
Solidity 学习资料：
- [Solidity 官方文档](https://docs.soliditylang.org/zh-cn/latest/index.html)
- [cryptozombies](https://cryptozombies.io/zh/course)

88
docs/notes/programming/solidity/basic-syntax.md Normal file
View File

@@ -0,0 +1,88 @@
---
title: Solidity 基础语法与数据类型
createTime: 2025/09/22 10:30:00
permalink: /programming/solidity/basic-syntax/
---
# Solidity 基础语法与数据类型～(≧∇≦)ﾉ
## Solidity 文件基础框架
Solidity 文件的基础框架通常包含以下几个部分：
1. **SPDX 许可证标识符 (SPDX License Identifier)**：为了避免法律问题和明确智能合约的开源许可证，建议在合约的开头添加 SPDX 许可证标识符。
2. **Solidity 版本声明 (Pragma)**：这会告诉编译器您希望使用哪个版本的 Solidity 来编译您的代码。
3. **ABI编码编译指示**：通过`pragma abicoder v1`或`pragma abicoder v2`来指定ABI编码版本。
4. **合约定义 (Contract Definition)**：这是您编写智能合约代码的主体部分。
下面是一个基础的 Solidity 文件框架示例，您可以直接使用：
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;
pragma experimental ABIEncoderV2;
contract MyContract {
// 在这里编写您的合约代码
}
```
## Solidity 基础数据类型
- 布尔类型（bool）：值为 `true` 和 `false`
- 运算符：`!`（逻辑非）、`&&`（逻辑与）、`||`（逻辑或）、`==`（等于）、`!=`（不等于）
- 整形（int/uint）：
- 有符号整数（int）：可以表示负数和零。
- 无符号整数（uint）：只能表示非负数。
- 整数类型可以是8位、16位、32位、64位或256位。（只要是八的倍数都可以）
- 例如：`int8`、`uint256`等。
- 运算符：
- 比较运算符：`<=`,`<`,`>=`,`>`
- 位运算符：`&`（按位与）、`|`（按位或）、`^`（按位异或）、`~`（按位取反）
- 移位运算符：`<<`（左移）、`>>`（右移）
- 算数运算符：`+`（加法）、`-`（减法）、`*`（乘法）、`/`（除法）、`%`（取余）
- 对于一个整数类型`X`，可以使用`type(X).min`和`type(X).max`来获取其最小值和最大值。
## Solidity 基础语法结构
## Solidity 基础操作
### 导入其他源文件
Solidity 支持导入其他源文件，使用`import`语句。例如：
```solidity
import "filename.sol";
```
这将导入`filename.sol`文件中的合约代码。
还可以创建一个新的全局符号
```solidity
import * as NewName from "filename.sol"
```
这将创建一个新的全局符号`NewName`，您可以在合约中使用它来引用`filename.sol`文件中的合约,例如`NewName.ContractName`。
还可以在导入的同时重命名符号：`import {symbol1 as alias, symbol2} from "filename";`
### 注释
Solidity 支持两种类型的注释：
1. **行注释**：使用`//`来注释单行代码。
2. **块注释**：使用`/*`和`*/`来注释多行代码。
例如：
```solidity
// 这是一个行注释
/*
这是一个
块注释
*/
```

922
docs/notes/programming/solidity/case-analysis.md Normal file
View File

@@ -0,0 +1,922 @@
---
title: 十份代码实例
createTime: 2025/10/10 11:07:11
permalink: /programming/solidity/analysis/case-analysis/
password: simeng
---
## 题目一
原题：
1.食品信息（FoodInfoItem）的接口编码
（1）编写食品信息实体的接口，完成可溯源食品信息初始化，实现可追溯的原始生产商食品信息上链功能
（2）编写分销商食品上链信息接口，根据食品溯源智能合约地址获取分销商上链食品的信息
（3）编写超市进行食品上链信息的接口，根据食品溯源智能合约地址获取超市上链食品信息。
2.食品溯源(Trace)的接口编码
（1）编写食品溯源智能合约生产商Producer添加食品接口，必须生产商才能添加可溯源的食品，实现溯源功能
（2）编写食品溯源智能合约分销商Distributor添加食品接口，必须分销商才能添加可溯源的食品，实现溯源功能
（3）编写食品溯源智能合约超市Retailer添加食品接口，必须超市才能添加可溯源的食品，实现溯源功能
3.角色（Role）管理的接口编码
（1）编写食品溯源增加角色接口，必须是未增加的角色才能被添加，实现添加角色的功能
（2）编写食品溯源移除角色接口，必须是已增加的角色才能被移除，实现移除角色的功能
（3）编写食品溯源角色授权接口，必须是授权的角色地址，实现角色权限管理功能
::: code-tabs
@tab Distributor.sol
```solidity
pragma solidity ^0.4.25;
import "./Roles.sol";
//中间商角色
contract Distributor {
using Roles for Roles.Role;
event DistributorAdded(address indexed account);
event DistributorRemoved(address indexed account);
Roles.Role private _distributors;
constructor (address distributor ) public {
_addDistributor(distributor);
}
modifier onlyDistributor() {
require(isDistributor(msg.sender), "DistributorRole: caller does not have the Distributor role");
_;
}
function isDistributor(address account) public view returns (bool) {
return _distributors.has(account);
}
function addDistributor(address account) public onlyDistributor {
_addDistributor(account);
}
function renounceDistributor() public {
_removeDistributor(msg.sender);
}
function _addDistributor(address account) internal {
_distributors.add(account);
emit DistributorAdded(account);
}
function _removeDistributor(address account) internal {
_distributors.remove(account);
emit DistributorRemoved(account);
}
}
```
@tab FoodInfoItem.sol
```solidity
pragma solidity >=0.4.22 <0.5.0;
pragma experimental ABIEncoderV2;
//食品信息管理合约
// 1. 保存食品基本信息:时间戳(流转过程中),用户名(流转过程中),用户地址信息(流转过程中),食品质量(流转过程中),食物名称,当前用户名称,质量,状态.
// 2. 对食品基本信息进行初始化
// 3. 实现两个方法:中间商添加食品信息;超市添加食品信息
// 4. 实现显示食品信息的方法
contract FoodInfoItem{
uint[] _timestamp;//①保存食品流转过程中各个阶段的时间戳
string[] _traceName;//②保存食品流转过程各个阶段的用户名
address[] _traceAddress;//③保存食品流转过程各个阶段的用户地址信息（和用户一一对应）
uint8[] _traceQuality;//④保存食品流转过程中各个阶段的质量
string _name;//⑤食品名称
string _currentTraceName;//⑥当前用户名称
uint8 _quality;//⑦质量（0=优质 1=合格 2=不合格）
uint8 _status;//⑧状态（0:生产 1:分销 2:出售）
address _owner;//⑨初始化owner
constructor (string name, string traceName, uint8 quality, address producer) public {
_timestamp.push(now);
_traceName.push(traceName);
_traceAddress.push(producer);
_traceQuality.push(quality);
_name = name;
_currentTraceName = traceName;
_quality = quality;
_status = 0;
_owner = msg.sender;
}
function addTraceInfoByDistributor(string traceName,address distributor, uint8 quality) public returns(bool) {
require(_status == 0 , "status must be producing");
require(_owner == msg.sender,"only trace contract can invoke")
//②
_timestamp.push(now);
_traceName.push(traceName);
_currentTraceName = traceName;
_traceAddress.push(distributor);
_quality = quality;
//③
//④
_traceQuality.push(_quality);
_status = 1;
return true;
}
function addTraceInfoByRetailer(string traceName,address retailer, uint8 quality) public returns(bool) {
require(_status == 1 , "status must be distributing");
require(_owner == msg.sender,"only trace contract can invoke")
//②
_timestamp.push(now);
_traceName.push(traceName);
_currentTraceName = traceName;
_traceAddress.push(retailer);
_quality = quality;
//③
//④
_traceQuality.push(_quality);
_status = 2;
return true;
}
function getTraceInfo() public constant returns(uint[], string[], address[], uint8[]) {
return(_timestamp, _traceName, _traceAddress, _traceQuality);
}
function getFood() public constant returns(uint, string, string, string, address, uint8) {
return(_timestamp[0], _traceName[0], _name, _currentTraceName, _traceAddress[0], _quality);
}
}
```
@tab Producer.sol
```solidity
pragma solidity ^0.4.25;
import "./Roles.sol";
//生产者角色
contract Producer {
using Roles for Roles.Role;
event ProducerAdded(address indexed account);
event ProducerRemoved(address indexed account);
Roles.Role private _producers;
constructor (address producer) public {
_addProducer(producer);
}
modifier onlyProducer() {
require(isProducer(msg.sender), "ProducerRole: caller does not have the Producer role");
_;
}
function isProducer(address account) public view returns (bool) {
return _producers.has(account);
}
function addProducer(address account) public onlyProducer {
_addProducer(account);
}
function renounceProducer() public {
_removeProducer(msg.sender);
}
function _addProducer(address account) internal {
_producers.add(account);
emit ProducerAdded(account);
}
function _removeProducer(address account) internal {
_producers.remove(account);
emit ProducerRemoved(account);
}
}
```
@tab Retailer.sol
```solidity
pragma solidity ^0.4.25;
import "./Roles.sol";
//零售商角色（超市）
contract Retailer {
using Roles for Roles.Role;
event RetailerAdded(address indexed account);
event RetailerRemoved(address indexed account);
Roles.Role private _retailers;
constructor (address retailer) public {
_addRetailer(retailer);
}
modifier onlyRetailer() {
require(isRetailer(msg.sender), "RetailerRole: caller does not have the Retailer role");
_;
}
function isRetailer(address account) public view returns (bool) {
return _retailers.has(account);
}
function addRetailer(address account) public onlyRetailer {
_addRetailer(account);
}
function renounceRetailer() public {
_removeRetailer(msg.sender);
}
function _addRetailer(address account) internal {
_retailers.add(account);
emit RetailerAdded(account);
}
function _removeRetailer(address account) internal {
_retailers.remove(account);
emit RetailerRemoved(account);
}
}
```
@tab Roles.sol
```solidity
pragma solidity ^0.4.25;
//角色库（管理所有角色地址）
// 1. 实现增加角色地址
// 2. 移除角色地址
// 3. 判断角色地址是否被授权
library Roles {
struct Role {
mapping (address => bool) bearer;
}
function add(Role storage role, address account) internal {
require(!has(role, account), "Roles: account already has role");
role.bearer[account] = true;
}
function remove(Role storage role, address account) internal {
require(has(role, account), "Roles: account does not have role");
role.bearer[account] = false;
}
function has(Role storage role, address account) internal returns (bool) {
require(account != address(0), "Roles: account is the zero address");
return role.bearer[account];
}
}
```
@tab Trace.sol
```solidity
pragma solidity >=0.4.22 <0.7.0;
pragma experimental ABIEncoderV2;
import "./FoodInfoItem.sol";
import "./Distributor.sol";
import "./Producer.sol";
import "./Retailer.sol";
//食品溯源合约（负责具体食品溯源信息的生成）
// 1.实现生产食品的方法(新建食品信息)
// 2.实现食品分销过程中增加溯源信息的接口
// 3.实现食品出售过程中增加溯源信息的接口
// 4.实现获取食品溯源信息接口
contract Trace is Producer, Distributor, Retailer{
mapping (uint256 => address) foods;//食品溯源id到具体食品溯源合约的映射表
uint[] foodList;
//构造函数
constructor(address producer, address distributor, address retailer)
public Producer(producer)
Distributor(distributor)
Retailer(retailer){
}
//生成食品溯源信息接口
//只有Producer能调用
//name 食品名称
//traceNumber 食品溯源id
//traceName 当前用户名称
//quality 当前食品质量
function newFood(string name,uint256 traceNumber, string traceName, uint8 quality)
public onlyProducer returns(uint)
{
require(foods[traceNumber] == address(0),"traceName already exist");//④
FoodInfoItem food = new FoodInfoItem(name,traceName,quality,msg.sender);//⑤
foods[traceNumber] = food;//⑥
foodList.push(traceNumber);//⑦
retur food;//⑧
}
//食品分销过程中增加溯源信息的接口
//只有Distributor能调用
//traceNumber 食品溯源id
//traceName 当前用户名称
//quality 当前食品质量
function addTraceInfoByDistributor(uint256 traceNumber,string traceName, uint8 quality)
public onlyRetailer returns(bool) {
require(foods[traceNumber] != address(0),"traceNumber does not exist");
//③
return FoodInfoItem(foods[traceNumber]).addTraceInfoByDistributor(traceName,msg.sender, quality);
}
//食品出售过程中增加溯源信息的接口
//只有Retailer能调用
//traceNumber 食品溯源id
//traceName 当前用户名称
//quality 当前食品质量
function addTraceInfoByRetailer(uint256 traceNumber,string traceName, uint8 quality)
public onlyRetailer returns(bool) {
require(foods[traceNumber != address(0)], "traceNumber does not exist");
return FoodInfoItem(foods[traceNumber]).addTraceInfoByRetailer(traceName,msg.sender, quality);
}
//获取食品溯源信息接口
//string[] 保存食品流转过程中各个阶段的相关信息
//address[] 保存食品流转过程各个阶段的用户地址信息（和用户一一对应）
//uint8[] 保存食品流转过程中各个阶段的状态变化
function getTraceInfo(uint256 traceNumber) public constant returns(uint[], string[], address[], uint8[]) {
require(foods[traceNumber] != address(0), "traceNumber does not exist");
return FoodInfoItem(foods[traceNumber]).getTraceInfo();
}
function getFood(uint256 traceNumber) public constant returns(uint, string, string, string, address, uint8) {
require(foods[traceNumber] != address(0), "traceNumber does not exist");
return FoodInfoItem(foods[traceNumber]).getFood();
}
function getAllFood() public constant returns (uint[]) {
return foodList;
}
}
```
:::
## 题目二
题目：
1.供应链金融实体信息编码（6分）
（1）编写供应链金融智能合约的实体接口，完成实体通用数据的初始化，实现企业和票据实体信息上链的功能；（2分）
（2）编写企业上链信息接口，实现供应链金融的企业信息上链；（2分）
（3）基于给定的智能合约代码以及注释，完成银行向企业交易的接口函数；（2分）
2.供应链金融公司与公司接口编码（6分）
（1）编写公司与公司之间进行交易的历史存证上链接口，实现公司与公司之间的交易功能；（2分）
（2）编写创建存证的接口，实现创建存证的功能；（2分）
（3）编写交易金额数量变化的接口，实现凭证交易双方资金的变化功能；（2分）
3.供应链金融公司与银行交易的接口编码（4分）
（1）编写公司与银行之间进行交易的历史存证上链接口，实现公司与银行之间的交易功能；（2分）
（2）编写创建存证的接口，实现创建存证的功能；（1分）
（3）编写交易金额数量变化的接口，实现凭证交易双方资金的变化功能；（1分）
::: code-tabs
@tab xxx.sol
```solidity
```
@tab xxx.sol
```solidity
```
@tab xxx.sol
```solidity
```
:::
## 题目三
题目：
子任务2-2-1：太阳能板管理接口编码
1. 根据文档要求，编写太阳能板新增接口功能，必须将新增太阳能板数据存入指定表中，在存储完成后需触发后事件并返回存储与否的标识；
2. 根据文档要求，编写太阳能板修改接口，必须通过指定表修改完成数据更新，在完成更新后需触发事件并返回更新与否的标识。
子任务2-2-2：能源管理接口编码
1. 根据文档要求，编写能源新增接口功能，必须将新增能源数据存入指定表中，在存储完成后需触发后事件并返回存储与否的标识；
2. 根据文档要求，编写能源修改接口，必须通过指定表修改完成数据更新，在完成更新后需触发事件并返回更新与否的标识。
子任务2-2-3：合约部署和调用
1. 解决代码错误和警告，正确编译并部署合约，成功获取部署的合约地址和ABI；
2. 调用太阳能板查询合约接口，完整验证业务流程；
3. 调用能源查询合约接口，完整验证业务流程。
::: code-tabs
@tab xxx.sol
```solidity
```
@tab xxx.sol
```solidity
```
@tab xxx.sol
```solidity
```
:::
## 题目四
原题：
1.编写原材料接口newMaterial，初始化原材料信息，返回合约地址，并实现原材料信息上链功能。
2.编写获取存原材料接口getMaterial，根据合约地址获取原材料信息
3.编写食品物流上链接口addLogistic，实现食品物流信息上链功能
4.编写获取食品物流信息的接口getLogistics，根据食品产品编号获取物流信息
::: code-tabs
@tab Logistics.sol
```solidity
pragma solidity 0.6.10;
pragma experimental ABIEncoderV2;
contract Logistics {
struct LogisticsData {
address cargo; //货物合约地址
address orgin; //货物上级合约地址
address destination; //货物下级合约地址
string memo; //备注信息
uint createdAt; //创建时间
uint queryCount; //已查询次数
}
LogisticsData[] private _logisticsData; //全部物流信息数组
uint public recordCount;//所有记录条数
uint public queryCount;//所有查询次数
//可自行添加形参和返回值
function addLogistics(address _cargo,address _orgin,【请补充】) public {
//TODO：”请补充缺失代码
}
//可自行添加形参和返回值
function getLogisticsInfo(address _cargo) public returns(LogisticsData[] memory _cargoLogisticsData) {
//TODO：”请补充缺失代码
}
}
```
@tab Material.sol
```solidity
pragma solidity 0.6.10;
contract Material {
struct Material {
address owner;
string name;
string id;
string memo;
uint createdAt;
bool exist;
}
mapping(string => Material) public materials;
//可自行添加形参和返回值
function newMaterial(string memory _name,string memory _id,【请补充】) public {
//TODO：”请补充缺失代码
}
//可自行添加形参和返回值
function getMaterial(string memory id) public view returns(【请补充】) {
//TODO：”请补充缺失代码
}
}
```
:::
参考答案：
::: code-tabs
@tab Logistics.sol
```solidity
pragma solidity 0.6.10;
pragma experimental ABIEncoderV2;
contract Logistics {
struct LogisticsData {
address cargo; //货物合约地址
address orgin; //货物上级合约地址
address destination; //货物下级合约地址
string memo; //备注信息
uint createdAt; //创建时间
uint queryCount; //已查询次数
}
LogisticsData[] private _logisticsData; //全部物流信息数组
uint public recordCount;//所有记录条数
uint public queryCount;//所有查询次数
//可自行添加形参和返回值
function addLogistics(address _cargo,address _orgin,【请补充】) public {
//TODO：”请补充缺失代码
}
//可自行添加形参和返回值
function getLogisticsInfo(address _cargo) public returns(LogisticsData[] memory _cargoLogisticsData) {
//TODO：”请补充缺失代码
}
}
```
@tab Material.sol
```solidity
pragma solidity 0.6.10;
contract Material {
struct Material {
address owner;
string name;
string id;
string memo;
uint createdAt;
bool exist;
}
mapping(string => Material) public materials;
//可自行添加形参和返回值
function newMaterial(string memory _name,string memory _id,【请补充】) public {
//TODO：”请补充缺失代码
}
//可自行添加形参和返回值
function getMaterial(string memory id) public view returns(【请补充】) {
//TODO：”请补充缺失代码
}
}
```
:::
## 题目五
题目：
1.个人签章信息接口编码
（1）编写个人签章智能合约的实体接口，完成实体通用数据的初始化，实现签章和用户实体信息上链的功能
（2）编写签章信息上链的接口，实现Seal合约的构造函数；
（3）基于给定的智能合约代码以及注释，完成ElectronicSeal合约判断多人签章文件编号是否存在的函数。
2.电子印章接口编码
（1）基于给定的智能合约代码以及注释，完成ElectronicSeal合约获取多人签章信息函数；
（2）基于给定的智能合约代码以及注释，完成ElectronicSeal合约多人签章函数。
::: code-tabs
@tab xxx.sol
```solidity
```
:::
## 题目六
题目：
1.食品信息（Food）、成员信息(Member)、生产订单信息(Productions)的结构体功能编码（6分）
（1）编写食品信息实体功能。（2分）
（2）完善智能合约中用户结构体内容（2分）
（3）编写生产订单(Productions)结构体信息。（2分）
2.食品溯源(Trace)的接口编码（6分）
（1）根据食品信息结构体，完成食品信息添加相应功能（2分）
（2）编写食品溯源收购商创建收购订单功能。
（3）编写食品溯源创建运输订单功能。
3.角色（Role）管理的接口编码（4分）
（1）编写食品溯源增加角色接口，实现添加角色的功能。（1分）
（2）编写食品溯源获取角色功能。（1分）
（3）编写食品溯源修改角色功能。（2分）
::: code-tabs
@tab xxx.sol
```
```
:::
## 题目七
原题：
**子任务2-2-1：航班延误保险购买合约编码（5分）**
（1）编写航班保险购买上链接口，完成只有购买机票的用户可以购买保险、必须缴纳正确的保费金额、购买保险的时间不能超过购买机票后的0.5小时的功能，符合条件则用户可以购买保险，将用户购买保险状态上链；（3分）
（2）编写退保接口，完成保险公司预存赔偿金后，用户无法退保，反之用户可退保的功能，将用户退保状态上链，并退还用户保费功能。（2分）
**子任务2-2-2：航班信息存证上链合约编码**
（1）编写获取航班信息接口，实现依据航班号获得航班号对应的计划起飞时间、实际起飞时间、到达时间、是否延误状态的功能；
（2）编写判断航班是否延误接口，实现依据航班号获得航班号对应的航班是否延误，得到航班是否延误的结果功能。
**子任务2-2-3：航班延误险理赔合约编码**
（1）编写客户理赔接口，实现如果航班延误超过4小时，将赔偿金赔偿给乘客的功能；
（2）编写保险公司收取保费接口，实现如果航班没有延误或者延误时间少于4小时，将保费转账给保险公司，并退还赔偿金的功能。
::: code-tabs
@tab Claims.sol
```solidity
pragma solidity ^0.6.10;
import "./FlightDelayInsurance.sol";
contract Claims is FlightDelayInsurance{
// 定义航班信息结构体
struct Flight {
uint256 departureTime; // 航班出发时间
uint256 delayTime; // 航班延误时间
bool isDelayed; // 航班是否延误
bool isInsured; // 航班是否购买保险
}
// 定义保险公司地址
address public insuranceCompany;
// 定义航班信息映射
mapping(bytes32 => Flight) public flights;
// 定义购买保险事件
event BuyInsurance(bytes32 flightKey, address passenger, uint256 premium);
// 定义航班延误事件
event FlightDelay(bytes32 flightKey, uint256 delayTime);
// 定义理赔事件
event Claim(bytes32 flightKey, address passenger, uint256 amount);
// 定义保险公司预存的赔偿金
uint256 public compensationNew;
// 构造函数，初始化保险公司地址和赔偿金
constructor() FlightDelayInsurance(platformS,airlineV,insuranceCompanyC,premium,compensation) public {
insuranceCompany = msg.sender;
compensationNew = compensation;
}
// 更新航班信息函数
function updateFlight(bytes32 flightKey, uint256 departureTime, uint256 delayTime, bool isDelayed) payable public {
// 判断调用者是否为保险公司
require(msg.sender == insuranceCompany, "Only insurance company can update flight information");
// 更新航班信息
flights[flightKey].departureTime = departureTime;
flights[flightKey].isDelayed = isDelayed;
/*********** 客户理赔接口 **********/
//任务2-2-3，请编写合约代码
/********** 客户理赔接口 ***********/
/*********** 保险公司收取保费接口开发 **********/
//任务2-2-3，请编写合约代码
/********** 保险公司收取保费接口开发 ***********/
// 触发航班延误事件
emit FlightDelay(flightKey, delayTime);
}
}
```
@tab FlightDelayInsurance.sol
```solidity
pragma solidity ^0.6.10;
contract FlightDelayInsurance {
address public platformS; // 平台S的地址
address public airlineV; // 航空公司V的地址
address public insuranceCompanyC; // 保险公司C的地址
uint public premium; // 保险费
uint public compensation; // 赔偿金额
uint public purchaseTime; // 购买保险的时间
uint public depositTime; // 存入赔偿金额的时间
bool public purchased; // 是否购买了保险
bool public deposited; // 是否存入了赔偿金额
mapping(address => bool) public insured; // 已退保的用户
mapping(address => bool) public policy; // 已生成保单的用户
mapping(address => bool) public purchasedTicket; // 已购买机票的用户
constructor(address _platformS, address _airlineV, address _insuranceCompanyC, uint _premium, uint _compensation) public {
platformS = _platformS; // 初始化平台S的地址
airlineV = _airlineV; // 初始化航空公司V的地址
insuranceCompanyC = _insuranceCompanyC; // 初始化保险公司C的地址
premium = _premium; // 初始化保险费
compensation = _compensation; // 初始化赔偿金额
}
function purchaseTicket() public {
require(!purchasedTicket[msg.sender], "Ticket has already been purchased"); // 该用户已购买机票
purchasedTicket[msg.sender] = true; // 标记该用户已购买机票
purchaseTime = block.timestamp;
}
/*********** 航班保险购买上链接口开发 **********/
//任务2-2-1，请编写合约代码
/********** 航班保险购买上链接口开发 ***********/
function depositCompensation() public payable {
require(msg.sender == insuranceCompanyC, "Only insurance company C can deposit compensation"); // 只有保险公司C可以存入赔偿金额
require(msg.value == compensation, "Compensation amount is incorrect"); // 赔偿金额不正确
require(block.timestamp < depositTime + 2 hours, "Deposit time has expired"); // 存入赔偿金额的时间已过期
deposited = true; // 标记已存入赔偿金额
}
/*********** 退保接口开发 **********/
//任务2-2-1，请编写合约代码
/********** 退保接口开发 ***********/
function generatePolicy() public {
require(deposited, "Compensation has not been deposited"); // 赔偿金额未存入，无法生成保单
require(msg.sender == platformS, "Only platform S can generate policy"); // 只有平台S可以生成保单
require(!policy[msg.sender], "Policy has already been generated"); // 该用户已生成保单
policy[msg.sender] = true; // 标记该用户已生成保单
}
}
```
@tab FlightManagement.sol
```solidity
pragma solidity ^0.6.10;
contract FlightManagement {
// 航班结构体
struct Flight {
string flightNumber; // 航班号
uint256 scheduledDepartureTime; // 计划起飞时间
uint256 actualDepartureTime; // 实际起飞时间
uint256 arrivalTime; // 到达时间
bool delayed; // 是否延误
}
// 航班号到航班信息的映射
mapping(string => Flight) flights;
// 添加航班
function addFlight(string memory _flightNumber, uint256 _scheduledDepartureTime, uint256 _arrivalTime) public {
flights[_flightNumber] = Flight(_flightNumber, _scheduledDepartureTime, 0, _arrivalTime, false);
}
// 更新实际起飞时间
function updateActualDepartureTime(string memory _flightNumber, uint256 _actualDepartureTime) public {
flights[_flightNumber].actualDepartureTime = _actualDepartureTime;
}
/*********** 获取航班信息接口开发 **********/
//任务2-2-2，请编写合约代码
/********** 获取航班信息接口开发 ***********/
/*********** 编写判断航班是否延误接口开发 **********/
//任务2-2-2，请编写合约代码
/********** 编写判断航班是否延误接口开发 ***********/
}
```
:::
## 题目八
题目：
子任务2-2-1：信息管理合约编码
1. 编写检索个人信息接口，完成患者通过身份证号检索其姓名、性别、年龄的功能；
2. 编写信息管理接口，完成允许患者与医院和科室进行信息管理，通过身份证号检索到患者的个人信息，将预约信息显示给患者，并发送到患者的账户地址中的功能；
子任务2-2-2：病历管理合约编码
1. 编写新建病历接口，实现检索病人对应科室既往病历，授权医生查看，如果没有既往病历则创建一个新的病历功能；
2. 编写结束就诊接口，实现检查病历是否已经填写，并结束病历咨询的功能。
子任务2-2-3：病历查看合约编码
根据需求用例文档在待补充源码中完成病历查看合约的编码，解决代码错误和警告，正确编译合约，功能调试正确，运行合约中的检查退款请求状态、自动批准退款请求接口功能。
1．编写查看病人个人信息接口，实现获取指定病人个人信息功能；
2．编写查看病人病情描述接口，实现获取指定病人病情描述功能。
::: code-tabs
@tab xxx.sol
```
```
:::
## 题目九
题目：
子任务2-2-1：合同管理合约编码
（1）编写房东签署合同接口，完成本合同位置只允许房东签署，通过合同中的信息生成租赁合同的链上哈希，触发协议签署合同的功能，其中合同中的信息包括房东链上账户、租客链上账户、租赁开始时间、租赁结束时间、月租金额、押金金额、交租时间；
（2）编写租金支付接口，完成只允许租客支付租金的规则，检查支付的租金金额是否正确，触发记录租金支付情况的功能。
子任务2-2-2：违约管理合约编码
（1）编写房东终止合同接口，实现房东终止合同判断，如果租客已经终止合同则合同无效，如果合同有效，对合同终止状态进行标记，将剩余押金退还给租客的功能；
（2）编写租客终止合同接口，实现租客终止合同判断，如果房东已经终止合同则合同无效，如果合同有效，对合同终止状态进行标记，将剩余押金退还给房东的功能。
子任务2-2-3：押金管理合约编码
根据需求用例文档在待补充源码中完成押金管理合约的编码，解决代码错误和警告，正确编译合约，功能调试正确，运行合约中的租客缴纳押金情况查询、房东收取押金情况查询接口功能。
（1）编写租客缴纳押金情况查询接口，实现查询租客是狗已缴纳押金功能；
（2）编写房东收取押金情况查询接口，实现房东是否已收到押金的功能。
::: code-tabs
@tab xxx.sol
```
```
:::
## 题目十
题目：
子任务2-2-1：账户管理合约编码
根据需求用例文档在待补充源码中完成账户管理合约的编码，解决代码错误和警告，正确编译合约，功能调试正确。需要编写生成账户接口，完成从外部部门检索姓名、年龄、雇主、开始日期、工资、缴费基数，将人员信息进行综合存储功能。
子任务2-2-2：费用管理合约编码
根据需求用例文档在待补充源码中完成费用管理合约的编码，解决代码错误和警告，正确编译合约，功能调试正确，运行添加新职工账户、添加新雇主账户。
1．编写添加新职工账户接口，实现当账户不存在，只有管理员可以添加职工账户，职工新账户中账户余额为0，未被赞助的功能；
2．编写添加新雇主账户接口，实现当账户不存在，只有管理员可以添加雇主账户，雇主新账户中账户余额为0，已被赞助的功能；
子任务2-2-3：保险转移合约编码
根据需求用例文档在待补充源码中完成保险转移合约的编码，解决代码错误和警告，正确编译合约，功能调试正确，运行合约中的申请转移关系、接收账户转移接口。
1．编写申请转移关系接口，实现创建申请、添加到申请列表功能，其中创建申请需要设置申请人地址、原城市、目标城市、停缴状态、批准状态；
2．编写接收账户转移接口，实现获取账户，进行账户授权状态、接收状态、个人账户基金、统筹账户基金、养老保险账户的信息设置；
::: code-tabs
@tab xxx.sol
```
```
:::

56
docs/notes/programming/solidity/other/hardhat.md Normal file
View File

@@ -0,0 +1,56 @@
---
title: Hardhat 相关知识
createTime: 2025/10/14 14:57:06
permalink: /programming/solidity/other/hardhat/
---
## HardHat2 部署
### Node.js v16 安装
HardHat2 需要 Node.js v16 及以上的版本
这里给出的是通过 npm 来将旧版本升级到 Node.js v16 的，如果想要直接安装的话通过 `yum install nodejs` 或者 `apt install nodejs` 来即可。
```bash
npm config set registry https://registry.npmmirror.com
sudo npm install -g n
sudo n 16
```
安装完成之后可以查看版本，如果没有更新可以重新刷新一下环境（直接退出重连最简单）
```bash
node -v
# v16.20.2
npm -v
# 6.14.15
```
### 安装 Hardhat2
创建一个 hardhat2-project 目录，初始化 npm 项目，注意这里不要用 hardhat 作为项目名
```bash
mkdir ~/hardhat2-project
cd ~/hardhat2-project
npm init -y
```
安装 Hardhat 2
```bash
npm install --save-dev hardhat@^2.23.0
```
初始化 Hardhat2 项目
```bash
npx hardhat init
```
选择
```bash
✔ What do you want to do? · Create a JavaScript project
✔ Hardhat project root: · /root/hardhat2-project
✔ Do you want to add a .gitignore? (Y/n) · y
✔ Help us improve Hardhat with anonymous crash reports & basic usage data? (Y/n) · y
✔ Do you want to install this sample project's dependencies with npm (@nomicfoundation/hardhat-toolbox)? (Y/n) · y
```
## 使用 Hardhat2 编译测试合约
在 hardhat2-project 目录下，执行以下命令来编译合约
合约都会放在 `contracts` 目录下，这里我们选择了一个默认的合约，因此可以直接编译
```bash
# 测试编译
npx hardhat compile
# 运行测试
npx hardhat test
# 查看可用任务
npx hardhat help
```

88
docs/notes/programming/solidity/other/miscellaneous.md Normal file
View File

@@ -0,0 +1,88 @@
---
title: 一些没分类的小知识
createTime: 2025/10/12 15:34:38
permalink: /programming/solidity/other/miscellaneous/
---
## 关于 memory 和 storage 存储类型
- `storage`：合约的持久化状态数据，保存在链上状态。对 `storage` 的写入最昂贵，读取也比内存贵；修改会永久生效。
- `memory`：函数调用期间的临时数据，函数返回后即释放。对 `memory` 的更改不会持久化。
- （补充）`calldata`：外部函数参数的只读数据位置，零拷贝、不可修改，用于节省 gas。
### 生命周期与成本
- `storage` 写入昂贵、读取较贵；适合保存需要长期存在的状态。
- `memory` 在函数结束时释放，读取/写入相对便宜；适合临时计算与返回值。
- 复杂引用类型（数组、`struct`、`mapping`、`string`、`bytes`）在函数参数或局部变量处通常必须显式标注数据位置。
### 默认与必须声明
- 状态变量总是位于 `storage`（例如 `User[] public users;`）。
- 外部函数（`external`）的复杂类型参数默认是 `calldata`；内部/公共函数需要显式标注 `memory` 或 `storage`。
- 局部变量的复杂类型必须指定数据位置，否则编译报错。
### 拷贝与引用语义
- 从 `storage` 读取到 `memory` 会“复制”数据；修改 `memory` 副本不影响原始 `storage`。
- 使用 `storage` 局部变量可以得到对状态数据的“引用”，对其赋值会持久化。
```solidity
pragma solidity ^0.8.20;
contract Users {
struct User { string name; uint age; }
User[] public users;
function add(string memory name, uint age) external {
users.push(User(name, age)); // 写入 storage
}
function updateName(uint i, string memory newName) external {
User storage u = users[i]; // storage 引用（指向链上状态）
u.name = newName; // 修改持久化生效
}
function tryUpdate(uint i) external {
User memory u = users[i]; // 从 storage 复制到 memory
u.age = 99; // 仅修改副本，不会影响链上状态
}
}
```
### 在内部函数传递 storage 引用
- 仅内部/私有函数可以接收 `storage` 引用参数，从而直接修改状态；外部函数参数不能是 `storage`。
```solidity
pragma solidity ^0.8.20;
contract Users2 {
struct User { string name; uint age; }
User[] public users;
function _inc(User storage u) internal { u.age += 1; }
function birthday(uint i) external {
_inc(users[i]); // 传递 storage 引用，持久化修改
}
}
```
### 动态 memory 数组与限制
- 可在 `memory` 中构造动态数组：`new uint[](n)`；适合作为返回值或临时计算。
- `mapping` 只能存在于 `storage`，不能在 `memory` 中创建或拷贝。
```solidity
pragma solidity ^0.8.20;
contract Arrays {
function make(uint n) external pure returns (uint[] memory a) {
a = new uint[](n);
for (uint i = 0; i < n; i++) a[i] = i;
}
}
```
### 常见坑与实践建议
- 给 `storage` 变量整体赋值会进行深拷贝或引用变更（依据类型），要明确拷贝成本与语义。
- 修改 `memory` 副本不会持久化；要修改链上状态请使用 `storage` 引用。
- 大型 `string/bytes/数组` 在 `memory↔storage` 间复制成本高，尽量减少不必要的复制。
- 外部函数能用 `calldata` 的地方尽量使用（只读参数），节省 gas。

90
docs/notes/programming/web/README.md Normal file
View File

@@ -0,0 +1,90 @@
---
title: Web 概览与学习路径
permalink: /programming/web/
createTime: 2025/10/28 22:20:00
---
# Web 是什么？
Web（万维网）是一个基于浏览器与服务器的“信息与应用平台”。用户通过浏览器访问网站，浏览器通过 **HTTP/HTTPS** 与服务器交互，服务器返回页面或数据，最终在浏览器中呈现并产生交互。
- 浏览器：渲染页面（HTML/CSS/JS）、执行脚本、发起网络请求。
- 服务器：处理业务逻辑、读写数据库、对外提供 API。
- 数据库：持久化存储（MySQL/PostgreSQL/MongoDB 等）。
简而言之：浏览器负责“看与用”，服务器负责“算与存”。
## 前端基础概念
- HTML：结构与语义（页面“骨架”）。
- CSS：表现与布局（页面“外观”）。
- JavaScript：交互与逻辑（页面“大脑”）。
- 现代前端：模块化、构建工具、组件化框架（Vue/React/Svelte 等）。
入门建议：先掌握原生 HTML/CSS/JS，再学习框架。你可以从本站文章开始：
- 基础教程 → `/programming/web/basic-syntax/html-css-js/`
## 后端基础概念
- 服务器与框架：Node.js（Express/NestJS）、Python（Flask/Django/FastAPI）、Java（Spring Boot）、Go（Gin/Fiber）。
- API 风格：REST（常见）、GraphQL（灵活查询）。
- 数据库与 ORM：MySQL/PostgreSQL（关系型）、MongoDB（文档型）；ORM 如 Prisma/TypeORM/SQLAlchemy。
- 常见能力：认证授权（Session/JWT/OAuth）、文件上传、任务队列、缓存、日志与监控。
## 前后端如何协作
- 约定接口：路径、方法（GET/POST/PUT/DELETE）、参数与返回 JSON。
- 跨域与安全：CORS、CSRF/XSS/SQL 注入防护、HTTPS。
- 开发流程：
1) 需求与原型 → 2) API 设计 → 3) 前端页面与交互 → 4) 后端实现与测试 → 5) 联调与验收 → 6) 部署与监控。
## 学习路径（从 0 到 1）
1. 基础三件套：HTML + CSS + JavaScript（建议用 VSCode + Live Server）。
2. 工具与方法：Git/GitHub、浏览器开发者工具、HTTP/REST、请求调试（Postman/Insomnia）。
3. 进阶前端：布局（Flex/Grid）、响应式、ES6+、模块化、打包与构建（Vite/Webpack）。
4. 后端入门：选择一种语言与框架（如 Node.js + Express），完成 CRUD 与认证。
5. 数据库：会建表、会写基本查询；理解事务与索引。
6. 部署与上线：Nginx 反向代理、Docker、环境变量、日志与监控。
建议开发一个“待办清单 + 登录 + 数据持久化”的完整小项目，贯穿前后端与部署。
## 推荐学习资源
通用与入门：
- [MDN Web Docs（HTML/CSS/JS 全面权威）](https://developer.mozilla.org/)
- [freeCodeCamp（系统课程与练习）](https://www.freecodecamp.org/)
- [Roadmap.sh（前端/后端学习路径图）](https://roadmap.sh/)
前端：
- [HTML/CSS 基础（MDN）](https://developer.mozilla.org/en-US/docs/Learn)
- [CSS-Tricks（样式与布局技巧）](https://css-tricks.com/)
- [JavaScript 基础与进阶（MDN）](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [Vue 官方文档](https://vuejs.org/)
后端：
- [Node.js 文档](https://nodejs.org/en/docs)
- [Express](https://expressjs.com/)
- [NestJS](https://docs.nestjs.com/)
- [Spring Boot](https://spring.io/projects/spring-boot)
- [Django](https://docs.djangoproject.com/)
- [Flask](https://flask.palletsprojects.com/)
- [FastAPI](https://fastapi.tiangolo.com/)
数据库与 ORM：
- [MySQL](https://dev.mysql.com/doc/)
- [PostgreSQL](https://www.postgresql.org/docs/)
- [MongoDB](https://www.mongodb.com/docs/)
- [Prisma（Node.js ORM）](https://www.prisma.io/docs)
- [TypeORM](https://typeorm.io/)
工具：
- [VSCode](https://code.visualstudio.com/)
- [Postman](https://www.postman.com/)
- [Insomnia](https://insomnia.rest/)
- [Docker](https://docs.docker.com/)
## 本站相关内容
- Web 前端基础讲解 → `/programming/web/basic-syntax/html-css-js/`
- 后续将补充：前端工程化、接口联调、部署与运维实战等专题。

535
docs/notes/programming/web/basic-syntax/html-css-js.md Normal file
View File

@@ -0,0 +1,535 @@
---
title: Web 前端基础讲解
createTime: 2025/10/28 21:23:48
permalink: /programming/web/basic-syntax/html-css-js/
---
## 前端开发到底是什么？
前端开发，简单来说，就是**你能在网页上看到和互动的一切**。
想象一下你正在看一个网站：
* **文字、图片、按钮、菜单**：这些都是前端开发人员用代码“画”出来的。
* **点击按钮会发生什么、输入框能打字、图片能放大缩小**：这些互动效果也是前端开发人员用代码实现的。
所以，前端开发就是负责把设计师画好的网站样子，用代码变成用户可以在浏览器里真实看到、摸到、用的东西。它主要涉及三种技术：
1. **HTML**：就像网页的“骨架”，决定了网页上有什么内容（标题、段落、图片等）。
2. **CSS**：就像网页的“衣服”，决定了网页看起来怎么样（颜色、字体、布局等）。
3. **JavaScript**：就像网页的“大脑”，决定了网页能做什么（动画、交互、数据处理等）。
总而言之，前端开发就是让网站变得好看、好用、能互动。
## 开发工具
进行前端开发，我们需要一个好用的“工具箱”。其中，**Visual Studio Code (VS Code)** 是一个非常受欢迎且功能强大的选择。
VsCode 官网：[https://code.visualstudio.com/](https://code.visualstudio.com/)
**为什么推荐 VS Code？**
* **免费且开源**：你可以免费使用它，并且它的代码是公开的，有很多人一起维护和改进。
* **轻量级但功能强大**：它启动速度快，占用资源少，但通过安装各种“插件”，可以实现非常多的功能，比如代码高亮、智能提示、调试、版本控制等等。
* **支持多种语言**：不仅对 HTML、CSS、JavaScript 有很好的支持，也支持其他很多编程语言。
* **丰富的生态系统**：有大量的插件可以帮助你提高开发效率，比如 Live Server（实时预览网页）、Prettier（代码格式化）等。
* **跨平台**：无论你使用 Windows、macOS 还是 Linux，都可以安装和使用 VS Code。
### VsCode 前端开发插件推荐
- **Chinese (Simplified) Language Pack for Visual Studio Code**：中文语言包，方便中文用户使用。
- **Live Server**：实时预览网页，修改代码后自动刷新。
- **Prettier**：代码格式化，保持代码风格统一。
- **HTML CSS Support**：HTML 和 CSS 代码智能提示。
参考文章：
1. [VSCode安装配置使用教程（最新版超详细保姆级含插件）一文就够了](https://blog.csdn.net/2303_82176667/article/details/137193809)
2. [快速上手web前端开发（超详细教程）](https://blog.csdn.net/2303_82176667/article/details/137193809)
## HTML5 基础知识讲解
HTML 是一种用来描述网页的语言，用于描述网页的结构和内容。
HTML 并不是一种编程语言，而是一种标记语言。它使用标签来描述网页上的不同元素，比如标题、段落、图片、链接等。
标签指的是由尖括号 `<` 和 `>` 包围的关键词，通常成对出现，用来表示元素的开始和结束。
一个简单的 HTML 实例，用于初步的了解效果：
```html title='index.html'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦(notes.simengweb.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
```
小提示：可以将代码复制到 VsCode 中，然后使用 Live Server 插件就可以实时预览效果啦。
### HTML5 文档分析
我们以前面的样例代码为例，来对 HTML 文档进行讲解
第一行：`<!DOCTYPE html>`，这是一个文档类型声明，用于告诉浏览器这是一个 HTML5 文档。
第二行：`<html>`，这是 HTML 文档的根元素，所有其他元素都必须嵌套在这个元素中，`<html>` 和 `</html>` 之间的内容就是文档的主体。
第三行到第六行：`<head>`，这是文档的头部元素，用于包含文档的元数据（比如标题、字符编码、外部资源引用等）。
第四行：`<meta charset="utf-8">`，这是一个元数据标签，用于指定文档的字符编码为 UTF-8。UTF-8 是一种常用的字符编码，能够表示世界上几乎所有的字符。如果不写的话可能会导致中文乱码的问题。
第五行：`<title>仲夏夜之梦(notes.simengweb.com)</title>`，这是文档的标题，会显示在浏览器的标题栏或标签页上。
第七行：`<body>`，这是文档的主体元素，用于包含文档的可见内容（比如文字、图片、按钮等），`<body>` 和 `</body>` 之间的内容就是文档的主体内容。
第八行：`<h1>我的第一个标题</h1>`，这是一个一级标题元素，用于表示文档的主要主题。`h1` 元素的内容会显示为较大的字体，通常用于页面的主标题。
第九行：`<p>我的第一个段落。</p>`，这是一个段落元素，用于表示文档中的一个段落。`p` 元素的内容会显示为普通的段落文本。
小提示：在浏览器中打开 F12 开启开发者工具，就可以查看和调试 HTML 文档啦。
## CSS3 基础知识讲解
CSS 是一种用来描述 HTML 文档“长什么样”的语言，专门负责网页的样式、排版与视觉效果。
CSS 也不是编程语言，而是一种“样式表”语言。它通过“选择器”找到 HTML 元素，再给它挂上一条或多条“声明”，告诉浏览器“这个元素应该是什么颜色、多大字号、放在哪里”。
一条 CSS 声明由“属性”和“值”组成，用冒号分隔，以分号结尾；多条声明放在花括号里，就组成了一条“样式规则”。
一个最简单的 CSS 示例，让页面里的标题变成红色、居中显示：
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦(notes.simengweb.com)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
```
@tab style.css
```css
body {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
```
:::
这里的 index.html 中需要添加一条语句，用于引入 CSS 样式表。
```html
<link rel="stylesheet" href="style.css">
```
然后通过浏览器打开 index.html 就可以看到效果啦。
### CSS 文档分析
我们以前面的样例代码为例，来对 CSS 文档进行讲解
第一到三行：`body { background-color:#d0e4fe; }`，这是一条针对 `<body>` 元素的样式规则。
- `body` 是“选择器”，表示要把样式应用到整个网页主体。
- `background-color` 是属性，用来设置背景颜色；`#d0e4fe` 是一个淡蓝色色值，因此整个页面会呈现淡蓝色背景。
第四行到第七行：`h1 { color:orange; text-align:center; }`，这是一条针对 `<h1>` 元素的样式规则。
- `h1` 是“选择器”，对应 HTML 中的一级标题。
- `color:orange;` 把标题文字设为橙色。
- `text-align:center;` 让标题在水平方向上居中显示。
第八行到第十一行：`p { font-family:"Times New Roman"; font-size:20px; }`，这是一条针对 `<p>` 元素的样式规则。
- `p` 是“选择器”，对应 HTML 中的段落。
- `font-family:"Times New Roman";` 指定段落使用 Times New Roman 字体。
- `font-size:20px;` 把段落文字大小设为 20 像素，让文字看起来更大、更清晰。
小提示：在 VsCode 中安装“Live Server”插件后，修改并保存 CSS 文件，浏览器会自动刷新，立即看到样式变化，方便调试。
## JavaScript 基础知识讲解
JavaScript（简称 JS）是让网页“动起来、能互动”的语言。它可以：
- 响应用户操作（点击、输入、滚动等）
- 修改页面内容与样式（增删节点、改文字/颜色）
- 与服务器通信、处理数据与状态
- 实现动画与复杂交互逻辑
下面用一个小示例，演示 JS 如何让页面产生交互效果：
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦(notes.simengweb.com)</title>
<link rel="stylesheet" href="style.css">
<!-- 样式写在外部 CSS 中 -->
<!-- JavaScript 推荐放在 body 末尾，或使用 defer 属性 -->
<!-- 这里在 body 末尾通过 src 引入外部脚本 -->
</head>
<body>
<h1>我的第一个标题</h1>
<p id="message">我的第一个段落。</p>
<button id="btn">点我试试</button>
<input id="name" placeholder="输入你的名字" />
<script src="script.js"></script>
</body>
</html>
```
@tab script.js
```js
// 等页面元素加载完成后再执行（避免找不到节点）
document.addEventListener('DOMContentLoaded', () => {
const msg = document.getElementById('message'); // 选择段落节点
const btn = document.getElementById('btn'); // 选择按钮
const nameInput = document.getElementById('name'); // 选择输入框
// 点击按钮，修改段落文本与颜色
btn.addEventListener('click', () => {
msg.textContent = '你点击了按钮！';
msg.style.color = 'green';
console.log('按钮被点击'); // 打开浏览器控制台可见
});
// 输入时，实时更新欢迎语
nameInput.addEventListener('input', (e) => {
const name = e.target.value.trim();
msg.textContent = name ? `你好，${name}！` : '我的第一个段落。';
});
});
```
:::
### JavaScript 文档分析
我们以前面的样例代码为例，来对 JS 的关键点进行讲解：
- `<script src="script.js"></script>`：在 HTML 中通过 `script` 标签引入外部 JS 文件。常见放置位置是 `</body>` 之前，避免脚本执行时页面元素尚未加载。
- `document.addEventListener('DOMContentLoaded', ...)`：等待文档结构加载完成再运行 JS，确保能获取到页面元素。
- `document.getElementById('...')`：选择页面中的元素节点，便于后续读写或绑定事件。
- `addEventListener('click'/'input', ...)`：给元素绑定事件监听器，描述“发生什么事时要做什么”。
- `textContent / style`：修改文本与内联样式，从而即时改变页面显示效果。
- `console.log(...)`：在开发者工具控制台输出调试信息，便于观察程序执行。
### 小提示
- 打开浏览器开发者工具（F12），切到“Console”能查看 `console.log` 输出；在 “Elements”/“Inspector” 面板能查看并调试 DOM 结构与样式。
- 在 VSCode 中使用 “Live Server”，保存 `script.js` 后浏览器会自动刷新，方便快速迭代。
- 现代 JS 推荐使用 `const` 与 `let` 替代 `var`；多用箭头函数与模板字符串（如 `` `你好，${name}` ``）让代码更简洁。
到这里，我们已经分别了解了 HTML（结构）、CSS（样式）与 JavaScript（交互）三者如何协同工作。接下来可以尝试把它们组合起来，做一个小页面练手。
## 动手练习：小作业（只改 HTML/CSS，JS 已提供）
目标：做一个“欢迎卡片”，包含标题、说明文字、输入框与按钮。
- 点击按钮时切换页面主题（浅色/深色），JS 会自动完成；
- 输入名字时实时显示欢迎语；
- 你只需要修改 HTML 和 CSS 来达到视觉与布局效果。
### 作业要求（验收标准）
- 卡片居中显示，具有圆角、阴影与内边距；
- 标题居中，段落有合适的行高与间距；
- 按钮有悬停（hover）与按下（active）的视觉反馈；
- 输入框获得焦点（focus）时有明显强调样式；
- 在移动端（窄屏）不溢出，布局能自适应；
- 深色主题下文字可读、对比度合理。提示：JS 会在 `<body>` 上切换 `theme-dark` 类，你可以在 CSS 中基于该类进行主题覆盖。
### 起步模板
将以下三份代码保存为同目录下的 `index.html`、`style.css` 与 `script.js`，用 VSCode 的 Live Server 打开 `index.html` 进行预览。完成作业时，请只修改 HTML 和 CSS（保留 JS 的 id 与类名依赖）。
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>小作业：欢迎卡片</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<div class="card" id="card">
<h1 class="card__title">欢迎来到我的页面</h1>
<p class="card__text" id="message">请点击按钮或输入你的名字</p>
<div class="card__actions">
<input id="name" class="input" placeholder="输入你的名字" />
<button id="btn" class="btn btn--primary">点我切换主题</button>
</div>
</div>
</div>
<script src="script.js" defer></script>
<!-- 注意：JS 依赖 #message、#btn、#name 这几个 id，请不要改动它们的命名 -->
<!-- 你可以新增或调整 class 名，或增删结构，来实现更好的视觉与布局 -->
</body>
</html>
```
@tab style.css
```css
/* 目标：只通过 CSS 实现卡片的视觉与响应式，并支持深色主题 */
/* 建议：使用 CSS 变量管理主题；在 .theme-dark 上覆盖变量 */
:root {
--bg: #f7f9fc;
--text: #222;
--primary: #ff7a45; /* 可调整为你的品牌色 */
--card-bg: #fff;
--card-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
}
.page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.card {
width: min(640px, 100%);
background: var(--card-bg);
border-radius: 16px;
box-shadow: var(--card-shadow);
padding: 24px;
}
.card__title {
margin: 0 0 12px;
text-align: center;
}
.card__text {
margin: 0 0 16px;
line-height: 1.6;
text-align: center;
}
.card__actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.input {
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
min-width: 220px;
}
.input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.2);
}
.btn {
padding: 10px 16px;
border: none;
border-radius: 999px;
cursor: pointer;
transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn--primary {
background: var(--primary);
color: #fff;
box-shadow: 0 6px 12px rgba(255, 122, 69, .3);
}
.btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(255, 122, 69, .4);
}
.btn--primary:active {
transform: translateY(0);
box-shadow: 0 4px 8px rgba(255, 122, 69, .3);
}
/* 任务：为深色主题定义样式。JS 会在 <body> 上切换 `.theme-dark` 类。*/
body.theme-dark {
--bg: #0f172a;
--text: #e5e7eb;
--primary: #60a5fa; /* 深色下可更柔和 */
--card-bg: #1f2937;
--card-shadow: none;
}
/* 可选：为移动端优化 */
@media (max-width: 480px) {
.card { padding: 18px; }
.input { min-width: 100%; }
}
```
@tab script.js
```js
// JS 已提供：负责交互逻辑，切换主题与显示欢迎语
// 你只需要改 HTML 和 CSS 即可达成作业要求
document.addEventListener('DOMContentLoaded', () => {
const msg = document.getElementById('message');
const btn = document.getElementById('btn');
const nameInput = document.getElementById('name');
// 切换深色主题（在 <body> 上切换 theme-dark 类）
btn.addEventListener('click', () => {
document.body.classList.toggle('theme-dark');
const dark = document.body.classList.contains('theme-dark');
msg.textContent = dark ? '深色主题已开启' : '浅色主题已开启';
});
// 实时欢迎语
nameInput.addEventListener('input', (e) => {
const name = e.target.value.trim();
msg.textContent = name ? `你好，${name}！` : '请点击按钮或输入你的名字';
});
});
```
:::
### 提示与加分项
- 可以用 `:root`+CSS 变量统一管理主题色，在 `.theme-dark` 中覆盖变量即可完成切换；
- 尝试为按钮增加平滑过渡与阴影层次感；
- 在移动端下让输入框占满一行，按钮在下一行显示；
- 可自行优化字体、字号与间距，让视觉更加舒适；
- 加分：实现卡片在深色主题下的微动效（例如背景色淡入）。
## 入门版（更简单，建议先做这个）
目标：做一个“欢迎卡片”，内容包括标题、说明文字、一个输入框和一个按钮。
- 点击按钮时高亮卡片（JS 已完成，你只需让 `.card.highlight` 在 CSS 里更显眼）。
- 输入名字时实时显示欢迎语（JS 已完成）。
- 你只需要修改 HTML 和 CSS，让页面好看、布局合理即可。
验收标准（入门）
- 卡片居中、圆角、阴影、内边距，整体观感舒适。
- 按钮有 `hover/active` 反馈，输入框 `focus` 有强调样式。
- 窄屏下不溢出，内容能自适应。
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>入门版小作业</title>
<link rel="stylesheet" href="style.css">
<!-- 保留以下 id：message / btn / name / card -->
</head>
<body>
<div class="page">
<div class="card" id="card">
<h1>欢迎</h1>
<p id="message">在输入框里写下你的名字</p>
<input id="name" placeholder="输入你的名字">
<button id="btn">高亮卡片</button>
</div>
</div>
<script src="script.js"></script>
<!-- 用 VSCode Live Server 打开 index.html 预览效果 -->
<!-- 完成作业时，请只修改 HTML 和 CSS -->
<!-- 你可以自由调整颜色、间距、字体与布局，使页面更美观 -->
</body>
</html>
```
@tab style.css
```css
/* 极简样式：你可以在此基础上美化与调整 */
body {
margin: 0;
background: #f5f7fa;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 16px;
}
.card {
width: min(360px, 100%);
background: #fff;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0,0,0,0.08);
padding: 16px;
text-align: center;
}
input {
width: 100%;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
margin-bottom: 12px;
}
input:focus {
border-color: #1677ff;
box-shadow: 0 0 0 2px rgba(22,119,255,.2);
}
button {
padding: 8px 12px;
border: none;
border-radius: 8px;
background: #1677ff;
color: #fff;
cursor: pointer;
}
button:hover { filter: brightness(1.05); }
button:active { filter: brightness(0.95); }
/* JS 点击按钮时会在卡片上切换 .highlight 类 */
.card.highlight {
background: #fffbe6; /* 浅黄色高亮 */
box-shadow: 0 8px 16px rgba(0,0,0,0.10);
}
```
@tab script.js
```js
// JS 已提供：负责简单交互。请只改 HTML/CSS。
document.addEventListener('DOMContentLoaded', () => {
const msg = document.getElementById('message');
const btn = document.getElementById('btn');
const nameInput = document.getElementById('name');
const card = document.getElementById('card');
// 实时欢迎语
nameInput.addEventListener('input', (e) => {
const name = e.target.value.trim();
msg.textContent = name ? `你好，${name}！` : '在输入框里写下你的名字';
});
// 切换卡片高亮
btn.addEventListener('click', () => {
card.classList.toggle('highlight');
});
});
```
:::

468
docs/notes/programming/web/basic-syntax/html-lists-and-semantic-layout.md Normal file
View File

@@ -0,0 +1,468 @@
---
title: html 列表与语义布局
createTime: 2025/11/02 20:47:50
permalink: /programming/web/basic-syntax/html-lists-and-semantic-layout/
---
## 四、列表（UL/OL/LI）
无序列表（圆点）：
```html title="index.html"
<ul>
<li>学习笔记</li>
<li>工具推荐</li>
<li>友情链接</li>
</ul>
```
有序列表（数字）：
```html title="index.html"
<ol>
<li>需求与原型</li>
<li>API 设计</li>
<li>联调与验收</li>
</ol>
```
**小案例：展示清单与步骤**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>列表案例</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
<body>
<h2>我的清单</h2>
<ul>
<li>学习笔记</li>
<li>工具推荐</li>
<li>友情链接</li>
</ul>
<h2>项目步骤</h2>
<ol>
<li>需求与原型</li>
<li>API 设计</li>
<li>联调与验收</li>
</ol>
</body>
</html>
```
@tab style.css
```css
ul, ol { margin: .5rem 0 1rem; padding-left: 1.5rem; }
li { margin: .25rem 0; }
```
@tab app.js
```js
document.querySelectorAll('li').forEach(li => li.addEventListener('click', () => li.classList.toggle('done')));
```
:::
**小作业：做一个“今日任务清单”**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>今日任务清单</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>今天要做的事</h1>
<ul>
<li>阅读 30 分钟</li>
<li>练习 1 个算法题</li>
<li>整理房间</li>
</ul>
</body>
</html>
```
@tab style.css
```css
body { font-family: system-ui; margin: 2rem; }
li { cursor: pointer; }
.done { text-decoration: line-through; color: #888; }
```
:::
## 五、语义化布局（Header/Nav/Main/Section/Article/Aside/Footer）
语义化标签让结构更清晰，搜索引擎更友好：
```html title="index.html"
<header>
<h1>我的网站</h1>
<nav>
<a href="/blog/">博客</a>
<a href="/notes/">笔记</a>
</nav>
<!-- 注意：更复杂的导航通常配合 CSS/JS 做响应式菜单 -->
<!-- 小提示：块级容器的外层仍可使用 <div> 来做网格或栅格布局 -->
<!-- 例如 <div class="container"> 包裹全站 -->
<!-- 只是这些语义标签会让搜索引擎更理解结构 -->
<!-- 语义标签与 <div> 并不冲突，可以配合使用 -->
<!-- 选择语义标签能让你的 HTML 更“有含义”而非只是分区 -->
<!-- 如果仅用于布局、无明确语义，用 <div> 即可 -->
<!-- 这段说明旨在帮助你建立语义化与布局之间的直觉 -->
<!-- 逐步养成好的结构化写法 -->
<!-- 让内容更可维护，更易被机器理解 -->
<!-- （继续往下看，还会介绍 Article/Section 等） -->
```
> 语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被搜索引擎和读屏工具理解。
**小案例：语义化布局入门**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>语义化布局案例</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
<body>
<header>
<h1>我的网站</h1>
<nav>
<a href="#home">首页</a>
<a href="#blog">博客</a>
</nav>
</header>
<main>
<section>
<h2>最新文章</h2>
<article>
<h3>用语义标签改造你的页面</h3>
<p>示例段落：用 header/nav/main/section/article/aside/footer 组织结构。</p>
</article>
</section>
<aside>
<h2>侧栏</h2>
<p>这里可以放导航、标签云或广告位。</p>
</aside>
</main>
<footer>© 2025 祀梦</footer>
</body>
</html>
```
@tab style.css
```css
body { font-family: system-ui; margin: 0; }
header, footer { padding: 1rem 2rem; background: #f7f7f7; }
nav { display: flex; gap: 1rem; }
main { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 1rem 2rem; }
article { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
aside { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
```
@tab app.js
```js
document.querySelectorAll('nav a').forEach(a => a.addEventListener('click', () => {
document.querySelectorAll('nav a').forEach(x => x.classList.remove('active'));
a.classList.add('active');
}));
```
:::
**小作业：用语义标签搭一个博客首页**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>博客首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>博客名称</h1>
<nav>
<a href="#">首页</a>
<a href="#">归档</a>
<a href="#">关于</a>
</nav>
</header>
<main>
<section>
<article>
<h2>第一篇文章标题</h2>
<p>摘要内容……</p>
</article>
<article>
<h2>第二篇文章标题</h2>
<p>摘要内容……</p>
</article>
</section>
<aside>
<h2>侧栏</h2>
<p>分类、标签或个人简介。</p>
</aside>
</main>
<footer>© 2025 你的名字</footer>
</body>
</html>
```
@tab style.css
```css
/* 与案例类似的栅格布局样式 */
main { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 1rem 2rem; }
article { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
aside { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
```
:::
## 六、表格（Table/TR/TH/TD）
```html title="index.html"
<table>
<thead>
<tr>
<th>姓名</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>祀梦</td>
<td>开发者</td>
</tr>
</tbody>
</table>
```
小提示：表格样式通常用 CSS 来美化（边框、间距、对齐等）。
**小案例：信息表格**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>信息表格案例</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
<body>
<table>
<thead>
<tr><th>姓名</th><th>职业</th><th>城市</th></tr>
</thead>
<tbody>
<tr><td>祀梦</td><td>开发者</td><td>上海</td></tr>
<tr><td>小李</td><td>产品经理</td><td>杭州</td></tr>
<tr><td>小王</td><td>设计师</td><td>北京</td></tr>
</tbody>
</table>
</body>
</html>
```
@tab style.css
```css
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: .5rem .75rem; text-align: left; }
thead th { background: #f7f7f7; }
tbody tr:nth-child(odd) { background: #fafafa; }
```
@tab app.js
```js
document.querySelectorAll('tbody tr').forEach(tr => tr.addEventListener('click', () => tr.classList.toggle('highlight')));
```
:::
**小作业：制作“课程表”**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>课程表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<thead>
<tr><th>时间</th><th>课程</th><th>教室</th></tr>
</thead>
<tbody>
<tr><td>周一 9:00</td><td>数学</td><td>A101</td></tr>
<tr><td>周三 14:00</td><td>英语</td><td>B302</td></tr>
<tr><td>周五 10:00</td><td>计算机</td><td>C210</td></tr>
</tbody>
</table>
</body>
</html>
```
@tab style.css
```css
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: .5rem .75rem; }
thead th { background: #f0f0f0; }
```
:::
## 七、媒体（Audio/Video/Source）
```html title="index.html"
<audio src="bgm.mp3" controls loop></audio>
<video src="intro.mp4" controls width="480" poster="cover.jpg" muted></video>
<!-- 常用属性：controls / autoplay / loop / muted / poster（封面） -->
```
补充说明：
- `controls` 提供播放控制；一般不建议隐藏，保证可用性。
- `autoplay` 可能被浏览器限制；若需自动播放，通常需同时设置 `muted`。
- `preload` 控制预加载策略（`none`/`metadata`/`auto`），根据页面性能需求选择。
- `poster` 为视频未播放时的封面图；音频没有封面属性。
- 使用 `<source>` 指定多种格式与 MIME 类型，提升兼容性：`<source src="xxx.mp4" type="video/mp4">`。
**小案例：嵌入音视频**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>媒体案例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>背景音乐</h2>
<audio src="bgm.mp3" controls loop></audio>
<h2>介绍视频</h2>
<video src="intro.mp4" controls width="480" poster="cover.jpg" muted></video>
</body>
</html>
```
@tab style.css
```css
video { display: block; margin-top: .5rem; }
```
:::
**小作业：添加一段你喜欢的音乐与视频**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>我的媒体</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<audio src="music.mp3" controls></audio>
<video src="movie.mp4" controls width="480" poster="cover.jpg"></video>
</body>
</html>
```
@tab style.css
```css
audio, video { display: block; margin: .5rem 0; }
```
:::
## 八、全局常用属性（任何标签几乎都能用）
- `id`：唯一标识，用于 JS/CSS 精确选择。
- `class`：分组与样式选择（上一课已讲）。
- `style`：内联样式（不推荐大量使用，建议写到 CSS 文件）。
- `title`：悬停提示文字。
- `data-*`：自定义数据属性（如 `data-user-id="42"`）。
- `aria-*`：无障碍相关属性，帮助读屏工具理解（如 `aria-label`）。
**小案例：使用 id/class/data/title/aria**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>全局属性案例</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
<body>
<button id="likeBtn" class="btn" title="点赞一下" data-count="0" aria-label="点赞">👍 喜欢</button>
<p id="msg" class="note" aria-live="polite">点击按钮试试。</p>
</body>
</html>
```
@tab style.css
```css
.btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.note { color: #555; }
```
@tab app.js
```js
const btn = document.getElementById('likeBtn');
const msg = document.getElementById('msg');
btn.addEventListener('click', () => {
const count = Number(btn.dataset.count || 0) + 1;
btn.dataset.count = String(count);
msg.textContent = `已点赞 ${count} 次`;
});
```
:::
**小作业：做一个带计数的按钮**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>计数按钮</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
<body>
<button id="counter" class="btn" title="点击增加" data-count="0">点击我</button>
<p id="status" class="note">当前计数：0</p>
</body>
</html>
```
@tab style.css
```css
.btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.note { margin-top: .5rem; }
```
@tab app.js
```js
const counter = document.getElementById('counter');
const statusEl = document.getElementById('status');
counter.addEventListener('click', () => {
const count = Number(counter.dataset.count || 0) + 1;
counter.dataset.count = String(count);
statusEl.textContent = `当前计数：${count}`;
});
```
:::
## 结尾：先结构清晰，再上样式与交互
写网页像搭房子：先把房间（结构标签）安排好，再选家具颜色（CSS），最后加智能设备（JS）。
建议你先用这些常用标签做一个“个人名片页”，含标题、段落、头像图片、导航链接和一个简单表单。练熟后再加样式与交互。
**延伸阅读**：
- HTML 规范与参考（MDN）：https://developer.mozilla.org/en-US/docs/Web/HTML
- 无障碍与语义化：https://developer.mozilla.org/en-US/docs/Glossary/Semantics

424
docs/notes/programming/web/basic-syntax/html-tags-attributes.md Normal file
View File

@@ -0,0 +1,424 @@
---
title: HTML 常用标签与属性
createTime: 2025/11/2 19:30:00
permalink: /programming/web/basic-syntax/html-tags-attributes/
---
## 文本与标题（H/P/Span/Strong/Em/Div）
**标题**：从重要到不重要，`<h1>` ~ `<h6>`。
```html title="index.html"
<h1>我的网站</h1>
<h2>关于我</h2>
<h3>联系方式</h3>
```
### 认识div标签
**什么是 `<div>`？**
`<div>` 是 "division"（分区）的缩写，可以理解为网页中的"容器"或"盒子"。
想象一下搬家时的纸箱：
* 网页 = 整个房间
* `<div>` = 一个个纸箱
* 箱子里 = 可以放各种物品（文字、图片、按钮等）
### `<div>` 的基本特点
1. 块级元素
`<div>` 是块级元素，这意味着：
* 默认会占据整行的宽度
* 前后会自动换行
* 就像段落一样，每个`<div>`都会从新的一行开始
**`<div>` 本身没有特定含义，它只是用来分组和布局。**
### 为什么要使用 `<div>`？
没有`<div>`的情况：
```html title='index.html'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦</title>
</head>
<body>
<h1>我的网站</h1>
<p>欢迎来到我的个人网站！</p>
<img src="photo.jpg" alt="我的照片">
<p>这是我的个人介绍...</p>
<button>联系我</button>
</body>
</html>
```
所有元素都堆在一起，很难分别控制样式。
使用 `<div>` 的情况：
```html title='index.html'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦</title>
</head>
<body>
<div class="header">
<h1>我的网站</h1>
<p>欢迎来到我的个人网站！</p>
</div>
<div class="content">
<img src="photo.jpg" alt="我的照片">
<p>这是我的个人介绍...</p>
</div>
<div class="footer">
<button>联系我</button>
</div>
</body>
</html>
```
这样我就可以分别控制每个部分的样式啦！
这个时候又有聪明的小朋友问了：这个class是什么呀？难道说？！是**起的名字！！**
太好了，恭喜你答对了，那么我们为什么要用class呢？
### Class
Class 可以理解为给 HTML 元素起的"组名"或"类别名"，让 CSS 能够精确地找到并美化特定的元素。
想象一个学校：
* HTML 元素 = 学生
* Class = 学生的身份（如"三年级一班"、"篮球队员"）
* CSS = 老师，根据身份给学生安排不同的任务和服装
class基本用法此处就不举例了，详情参照上面的代码。
如果没有class的情况：
```html title='index.html'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦</title>
</head>
<body>
<h1>我的网站</h1>
<p>普通段落</p>
<p>个人介绍</p>
<p>重要提示</p>
<button>普通按钮</button>
<button>重要按钮</button>
</body>
</html>
```
如果我们想给"重要提示"和"重要按钮"设置特殊样式，很难精确选择！像之前我教的一样css直接用p或者h1来选择的话就无法区分具体每一段的区别了。
这时候就可以用class了！
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦</title>
</head>
<body>
<h1>我的网站</h1>
<p class="normal">普通段落</p>
<p class="intro">个人介绍</p>
<p class="warning">重要提示</p>
<button class="normal-btn">普通按钮</button>
<button class="important-btn">重要按钮</button>
</body>
</html>
```
@tab style.css
```css
.warning {
color: red;
font-weight: bold;
}
.important-btn {
background-color: red;
color: white;
}
```
:::
**现在自己动手尝试一下**
## 动手练习：小作业
运用所学的 HTML 和 CSS 知识，创建一个美观的个人名片页面。不确定的时候翻翻文档
```html title='index.html'
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 在这里添加字符编码和标题 -->
</head>
<body>
<!-- 创建一个名片容器 div，class 为 "card" -->
<!-- 在卡片内部分为三个区域： -->
<!-- 1. 头部区域：包含姓名和职位 -->
<div class="card-header">
<!-- 添加 h1 标题显示你的姓名 -->
<!-- 添加 p 段落显示你的职位或专业 -->
</div>
<!-- 2. 主体区域：包含联系信息 -->
<div class="card-body">
<!-- 添加至少3个联系信息，使用 p 标签 -->
<!-- 例如：电话、邮箱、地址等 -->
</div>
<!-- 3. 底部区域：包含个人简介 -->
<div class="card-footer">
<!-- 添加一个个人简介段落 -->
</div>
</body>
</html>
```
css样式自定，发挥自己的创作力，创建一个独特的个人名片页面。
**段落与换行**：
```html title="index.html"
<p>这是一个段落，里面可以有<strong>加粗</strong>和<em>强调</em>。</p>
<p>这是另一个段落。<br>需要换行时用 <code>&lt;br&gt;</code>。</p>
<hr> <!-- 水平分割线 -->
```
**行内 vs 块级**：
- `<div>` 是块级元素（换行占整行），用于分区布局；
- `<span>` 是行内元素（不换行），用于强调局部文字。
使用建议与解释：
- 语义优先：`<strong>` 表示“语义上的重点”，`<b>` 仅表示“加粗外观”；`<em>` 表示“语气强调”，`<i>` 仅表示“斜体外观”。优先使用语义标签，样式交给 CSS。
- 标题层级：通常一个页面只有一个 `<h1>`，下面按层级组织为 `<h2>/<h3>...`。不要为求大小随意跳级或用标题替代普通文本。
- 段落与换行：换行请优先使用分段（`<p>`），只有在同段内需要视觉换行时使用 `<br>`。`<hr>` 适合用于内容分隔或主题切换。
**小案例：文本与标题**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>文本与标题案例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我的网站</h1>
<h2>关于我</h2>
<p>我是一名<strong>前端开发者</strong>，喜欢<em>简洁的设计</em>与清晰的结构。</p>
<hr>
<h3>联系方式</h3>
<p>Email: hello@example.com</p>
</body>
</html>
```
@tab style.css
```css
body { font-family: system-ui; margin: 2rem; }
h1 { font-size: 2rem; margin-bottom: .5rem; }
h2 { margin-top: 1.5rem; }
p { margin: .5rem 0; }
```
:::
**小作业：写一段个人简介**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>个人简介</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>你的名字</h1>
<h2>一句话介绍</h2>
<p>用两段文字，分别写你现在在做什么、你感兴趣的方向。</p>
<p>使用 <strong>strong</strong> 与 <em>em</em> 做重点强调。</p>
</body>
</html>
```
@tab style.css
```css
body { font-family: system-ui; margin: 2rem; line-height: 1.8; }
p { max-width: 60ch; }
```
:::
## 三、链接与图片（A/IMG）
### 什么是 `<img>` 标签
`<img>` 标签用于在网页中插入图片，它是自闭合标签（不需要结束标签）。
### `<img>` 标签的基本属性
* src：指定图片的路径（必填）
* alt：指定图片的替代文本（必填，用于图片加载失败时显示）
* width：指定图片的宽度（可选）
* height：指定图片的高度（可选）
基本语法：
```html title='index.html'
<img src="photo.jpg" alt="我的照片" width="200" height="300">
```
### HTML 超链接
HTML 链接（Anchor）是网页之间跳转的核心部分。
HTML 使用链接与网络上的另一个文档相连。
HTML中的链接是一种用于在不同网页之间导航的元素。
链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。
链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。
HTML 链接 通过 `<a>` 标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个链接上时，箭头会变为**一只小手**。
## `<a>` 标签的基本属性
* href：指定链接的目标 URL（必填）
* target：指定链接在何处打开（可选）
* _blank：在新窗口或标签页中打开链接
* _self：在当前窗口或标签页中打开链接（默认）
* _parent：在父框架中打开链接
* _top：在顶部框架中打开链接
基本语法：
```html title='index.html'
<a href="https://www.example.com">链接文本</a>
```
- `<a>` 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。
- href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。
**这里还有一个target 属性**：
- _blank：在新窗口或标签页中打开链接
- _self：在当前窗口或标签页中打开链接（默认）
- _parent：在父框架中打开链接
- _top：在顶部框架中打开链接
```html title='index.html'
<!DOCTYPE html>
<html>
<head>
<title>target属性示例</title>
</head>
<body>
<h2>target属性示例</h2>
<!-- 在当前窗口打开（默认） -->
<a href="https://www.baidu.com" target="_self">当前窗口打开</a>
<!-- 在新窗口打开 -->
<a href="https://www.baidu.com" target="_blank">新窗口打开</a>
<!-- 在父窗口打开 -->
<a href="https://www.baidu.com" target="_parent">父窗口打开</a>
<!-- 建议：新窗口打开外部链接 -->
<a href="https://www.example.com" target="_blank" rel="noopener">
外部网站（安全的新窗口）
</a>
</body>
</html>
```
复制代码到自己的html文件中，尝试一下不同的target属性值。
常用属性：
- `href`：目标地址；
- `target="_blank"`：新窗口打开；
- `rel="noopener"`：安全与性能（避免旧窗口被新页面控制）。
补充说明：
- 链接安全：外链新窗口打开时同时设置 `rel="noopener"` 或 `rel="noreferrer"`，避免安全与性能问题。
- 图片可使用 `loading="lazy"` 懒加载，减少首屏资源压力；`alt` 请写出图片用途或内容摘要。
- 设定 `width/height` 可以预留占位，减少页面布局抖动（CLS）。复杂场景可考虑 `<picture>` + `<source>` 做响应式图片。
- 与图片相关的配套标签：`<figure>` + `<figcaption>` 用于图片与说明文字的组合。
**小案例：链接与图片**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>链接与图片案例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<a href="/" >首页</a>
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN</a>
</nav>
<img src="avatar.jpg" alt="我的头像" width="160" height="160">
</body>
</html>
```
@tab style.css
```css
nav { display: flex; gap: 1rem; margin-bottom: 1rem; }
nav a { color: #06c; text-decoration: none; }
nav a:hover { text-decoration: underline; }
img { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
```
:::
**小作业：做一个“友链”与头像区块**
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>友链与头像</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h2>友情链接</h2>
<p>
<a href="https://notes.simengweb.com" target="_blank" rel="noopener">祀梦笔记</a>
·
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a>
</p>
</section>
<section>
<h2>头像</h2>
<img src="avatar.jpg" alt="你的头像" width="160" height="160">
</section>
</body>
</html>
```
@tab style.css
```css
section { margin-bottom: 1rem; }
img { border: 2px solid #eee; border-radius: 50%; }
```
:::

606
docs/notes/programming/web/basic-syntax/javascript-basics.md Normal file
View File

@@ -0,0 +1,606 @@
---
title: JavaScript 基础知识
createTime: 2025/11/2 21:30:00
permalink: /programming/web/basic-syntax/javascript-basics/
---
## JavaScript 是什么？
JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于**行为**，可以让网页变得动态和响应式。
## 第一个 JavaScript 程序
JavaScript 代码可以直接写在 HTML 文件中，通常放在 `<body>` 标签的底部，使用 `<script>` 标签包裹。
```html title="index.html"
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>我的第一个 JavaScript 程序</title>
</head>
<body>
<h1>你好，世界！</h1>
<script>
// 这是注释，不会被执行
console.log('Hello, JavaScript!'); // 在控制台输出文本
alert('欢迎学习 JavaScript！'); // 弹出提示框
</script>
</body>
</html>
```
**提示**：你可以在浏览器中按下 F12 打开开发者工具，然后切换到 "Console" 标签查看 `console.log()` 的输出。
`console.log()` 是 JavaScript 中最常用、最重要的调试工具，可以说是每个开发者的"最佳朋友"！
### 基本输出 ###
```javascript
// 输出字符串
console.log("Hello World!");
// 输出变量
const name = "小明";
console.log(name);
// 输出多个值
const age = 18;
const isStudent = true;
console.log("学生信息:", name, age, isStudent);
```
### 输出不同类型的数据 ###
```javascript
// 各种数据类型
console.log("字符串:", "Hello");
console.log("数字:", 42);
console.log("布尔值:", true);
console.log("数组:", [1, 2, 3]);
console.log("对象:", {name: "李华", age: 20});
console.log("函数:", function() {});
console.log("undefined:", undefined);
console.log("null:", null);
```
### 字符串插值 ###
```javascript
const userName = "张三";
const userAge = 25;
const score = 95.5;
// 传统方式
console.log("用户 " + userName + " 年龄 " + userAge + " 分数 " + score);
// 模板字符串（推荐）
console.log(`用户 ${userName} 年龄 ${userAge} 分数 ${score}`);
// 带表达式的插值
console.log(`${userName} 是 ${userAge >= 18 ? "成年人" : "未成年人"}`);
```
### 格式化输出 ###
```javascript
const product = {
name: "笔记本电脑",
price: 5999,
brand: "Dell",
inStock: true
};
// %s - 字符串
console.log("产品名称: %s", product.name);
// %d - 数字
console.log("价格: %d 元", product.price);
// %f - 浮点数
console.log("折扣价: %f", product.price * 0.9);
// %o - 对象
console.log("完整产品信息: %o", product);
// %c - CSS样式
console.log("%c重要信息!", "color: red; font-size: 20px; font-weight: bold;");
```
## JavaScript 变量
变量是用来存储信息的容器。在 JavaScript 中，我们使用 `let`、`const` 或 `var` 关键字来声明变量。
### 变量声明方式
```javascript
// 使用 let 声明可变变量
let name = "小明";
name = "小红"; // 可以修改
// 使用 const 声明常量（不可变）
const PI = 3.14159;
// PI = 3.14; // 错误！常量不能修改
// 使用 var 声明变量（旧方式，现在推荐使用 let 和 const）
var age = 25;
```
**注意**：
- 使用 `let` 声明的变量可以重新赋值
- 使用 `const` 声明的变量不能重新赋值（常量）
- 尽量避免使用 `var`，因为它有一些奇怪的作用域规则
## 数据类型
JavaScript 有几种基本数据类型：
### 1. 字符串（String）
用于表示文本，可以使用单引号或双引号。
```javascript
const greeting = "你好";
const name = 'JavaScript';
const message = `${greeting}, ${name}!`; // 使用模板字符串（ES6 特性）
console.log(message); // 输出：你好, JavaScript!
```
### 2. 数字（Number）
用于表示数值。
```javascript
const age = 25;
const price = 99.99;
const PI = 3.14159;
```
### 3. 布尔值（Boolean）
用于表示真或假，只有两个值：`true` 和 `false`。
```javascript
const isStudent = true;
const hasGraduated = false;
```
### 4. 数组（Array）
用于存储多个值的集合。
```javascript
const fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits[0]); // 输出：苹果（数组索引从0开始）
// 添加元素
fruits.push("葡萄");
console.log(fruits); // 输出：["苹果", "香蕉", "橙子", "葡萄"]
```
### 5. 对象（Object）
用于存储键值对集合。
```javascript
const person = {
name: "小明",
age: 25,
isStudent: true,
greet: function() {
console.log(`你好，我是${this.name}！`);
}
};
console.log(person.name); // 输出：小明
person.greet(); // 输出：你好，我是小明！
```
## 运算符
### 算术运算符
```javascript
const a = 10;
const b = 5;
console.log(a + b); // 15 加法
console.log(a - b); // 5 减法
console.log(a * b); // 50 乘法
console.log(a / b); // 2 除法
console.log(a % b); // 0 取余
console.log(a ** b); // 100000 幂运算（ES6）
```
### 赋值运算符
```javascript
const x = 10;
x += 5; // 等同于 x = x + 5
console.log(x); // 15
x -= 3; // 等同于 x = x - 3
console.log(x); // 12
```
### 比较运算符
```javascript
const a = 10;
const b = 5;
console.log(a > b); // true
console.log(a < b); // false
console.log(a >= b); // true
console.log(a <= b); // false
console.log(a === b); // false（严格相等，比较值和类型）
console.log(a == b); // false（宽松相等，只比较值）
console.log(a !== b); // true（严格不相等）
```
## 条件语句
### if 语句
```javascript
const age = 18;
if (age >= 18) {
console.log("你已经成年了！");
} else if (age >= 13) {
console.log("你是青少年。");
} else {
console.log("你还是个孩子。");
}
```
## 循环
### for 循环
```javascript
// 打印1到5
for (const i = 1; i <= 5; i++) {
console.log(i);
}
// 遍历数组
const fruits = ["苹果", "香蕉", "橙子"];
for (const i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// 使用 for...of 遍历（ES6）
for (const fruit of fruits) {
console.log(fruit);
}
```
### while 循环
```javascript
const count = 1;
while (count <= 5) {
console.log(count);
count++;
}
```
## 函数
函数是一段可重复使用的代码块，可以接受输入（参数），执行操作，并返回输出（返回值）。
### 函数声明
```javascript
function greet(name) {
return `你好，${name}！`;
}
const message = greet("小明");
console.log(message); // 输出：你好，小明！
```
格式如下
```javascript
function 函数名(参数1, 参数2, ...参数N) {
// 函数体：要执行的代码
return 返回值; // 可选
}
```
### 箭头函数（ES6）
```javascript
const sum = (a, b) => {
return a + b;
};
// 简化写法（当只有一行返回语句时）
const multiply = (a, b) => a * b;
console.log(sum(3, 4)); // 7
console.log(multiply(3, 4)); // 12
```
## DOM 操作
DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 来操作网页元素。
### 选择元素
```javascript
// 通过 id 选择元素
const title = document.getElementById("title");
// 通过 class 选择元素（返回元素集合）
const items = document.getElementsByClassName("item");
// 通过标签名选择元素
const paragraphs = document.getElementsByTagName("p");
// 通过 CSS 选择器选择元素（ES5+）
const header = document.querySelector("header"); // 选择第一个匹配的元素
const allLinks = document.querySelectorAll("a"); // 选择所有匹配的元素
```
### 修改元素内容
```javascript
// 修改文本内容
const title = document.getElementById("title");
title.textContent = "新标题";
// 修改 HTML 内容
title.innerHTML = "<strong>加粗的新标题</strong>";
```
### 修改元素样式
```javascript
const element = document.getElementById("box");
element.style.color = "red";
element.style.fontSize = "20px";
element.style.backgroundColor = "#f0f0f0";
```
### 添加事件监听器
```javascript
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log("按钮被点击了！");
alert("你好，欢迎使用！");
});
```
## 小案例：交互式计算器
下面是一个简单的交互式计算器示例，演示如何结合 HTML、CSS 和 JavaScript。
::: code-tabs
@tab index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>简易计算器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<h2>简易计算器</h2>
<input type="number" id="num1" placeholder="输入第一个数字">
<select id="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">×</option>
<option value="divide">÷</option>
</select>
<input type="number" id="num2" placeholder="输入第二个数字">
<button id="calculate">计算</button>
<div id="result">结果将显示在这里</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
@tab style.css
```css
.calculator {
max-width: 300px;
margin: 2rem auto;
padding: 1.5rem;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
font-family: system-ui;
}
input, select, button {
margin: 0.5rem 0;
padding: 0.5rem;
width: 100%;
box-sizing: border-box;
}
button {
background: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background: #0056b3;
}
#result {
margin-top: 1rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 4px;
}
```
@tab script.js
```javascript
// 获取DOM元素
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const operationSelect = document.getElementById('operation');
const calculateButton = document.getElementById('calculate');
const resultDiv = document.getElementById('result');
// 添加点击事件监听器
calculateButton.addEventListener('click', function() {
// 获取输入值
const num1 = parseFloat(num1Input.value);
const num2 = parseFloat(num2Input.value);
const operation = operationSelect.value;
const result;
// 检查输入是否有效
if (isNaN(num1) || isNaN(num2)) {
resultDiv.textContent = '请输入有效的数字！';
return;
}
// 执行计算
switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
// 检查除数是否为0
if (num2 === 0) {
resultDiv.textContent = '除数不能为0！';
return;
}
result = num1 / num2;
break;
}
// 显示结果
resultDiv.textContent = `计算结果：${result}`;
});
```
:::
## JavaScript 的异步编程
JavaScript 是单线程的，但它可以通过异步编程模型来处理耗时操作，如网络请求、定时器等。
### setTimeout 和 setInterval
```javascript
// setTimeout - 延迟执行一次
setTimeout(function() {
console.log('2秒后执行');
}, 2000);
// setInterval - 定期重复执行
const count = 0;
const timer = setInterval(function() {
count++;
console.log(`执行第 ${count} 次`);
if (count >= 5) {
clearInterval(timer); // 清除定时器
console.log('定时器已停止');
}
}, 1000);
```
### Promise（ES6）
Promise 是异步编程的一种解决方案，用于处理异步操作。
```javascript
// 创建一个Promise
const fetchData = new Promise((resolve, reject) => {
// 模拟网络请求
setTimeout(() => {
const success = true;
if (success) {
resolve('数据获取成功');
} else {
reject('数据获取失败');
}
}, 2000);
});
// 使用Promise
fetchData
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
```
## 常见错误和调试技巧
### 常见错误
1. **语法错误**：代码不符合 JavaScript 语法规则
2. **引用错误**：使用了未定义的变量或函数
3. **类型错误**：对错误类型的值进行操作
4. **范围错误**：数值超出有效范围
### 调试技巧
1. **使用 console.log()**：在控制台输出变量值或执行流程
2. **使用断点**：在浏览器开发者工具中设置断点，逐步执行代码
3. **检查错误信息**：仔细阅读错误提示，找出问题所在
4. **检查变量类型**：使用 `typeof` 操作符检查变量类型
```javascript
console.log(typeof "hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"（数组也是对象的一种）
```
## 实践练习
### 练习1：创建一个简单的待办事项列表
使用 HTML、CSS 和 JavaScript 创建一个待办事项列表，包含添加、删除和标记完成功能。
提示：
- 使用数组存储待办事项
- 使用 DOM 操作动态更新列表
- 为按钮添加事件监听器
### 练习2：实现一个数字猜谜游戏
计算机随机生成一个1到100之间的数字，玩家通过输入框猜测，程序提示"猜大了"或"猜小了"，直到猜对为止。
提示：
- 使用 `Math.random()` 生成随机数
- 使用条件语句判断猜测结果
- 记录并显示猜测次数
## 总结
JavaScript 是现代 web 开发的核心技术之一，它可以让网页变得动态和交互。通过学习变量、数据类型、运算符、条件语句、循环、函数和 DOM 操作等基础知识，你已经迈出了学习 JavaScript 的第一步。
继续练习和探索，你会发现 JavaScript 的强大功能和灵活性！

22
docs/notes/subject/english/README.md Normal file
View File

@@ -0,0 +1,22 @@
---
title: 英语学习笔记
createTime: 2025/10/20 16:34:20
permalink: /subject/english/
---
# 英语学习笔记
这是一个英语学习笔记的总览页。下面是目录与分区入口：
## 目录
- 学习环境与工具 → `/subject/english/basis/`
- 词汇与记忆 → `/subject/english/vocabulary/`
- 语法与句法 → `/subject/english/grammar/`
- 听力与口语 → `/subject/english/listening-speaking/`
- 阅读 → `/subject/english/reading-writing/`
- 考试与备考（含四级） → `/subject/english/exam/cet-4/`
- 学习资源与工具 → `/subject/english/resources/`
- 写译 → `/subject/english/writing-translation/`
你可以从以上入口进入对应的专题，随时扩展各章节内容。

15
docs/notes/subject/english/basis/README.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: 英语环境配置
createTime: 2025/10/20 16:34:20
permalink: /subject/english/basis/
---
# 英语环境配置
这里是英语学习的入门环境配置示例模版：
- 推荐词典与工具
- 输入法与语音资源
- 常用学习网站与 App
你可以按需补充具体内容。

42
docs/notes/subject/english/exam/cet-4.md Normal file
View File

@@ -0,0 +1,42 @@
---
title: 英语四级 (CET-4) 备考指南
createTime: 2025/10/20 16:42:00
permalink: /subject/english/exam/cet-4/
---
# 英语四级 (CET-4) 备考指南
## 考试结构概览
- 听力 (25%)：新闻、长对话、讲座/采访
- 阅读 (35%)：仔细阅读、选词填空
- 翻译 (15%)：汉译英
- 写作 (25%)：应用文与观点写作
## 核心备考策略
- 词汇：高频词与真题语块，使用 SRS 间隔重复
- 语法：时态、非谓语、从句，针对写作与翻译的准确表达
- 听力：精听 + 跟读（shadowing），积累场景表达
- 阅读：结构化分析段落逻辑，题型定位与干扰项识别
- 写作：模板+素材库+改写练习，关注连贯与准确
## 时间分配建议
- 写作 30 分钟：审题→列纲→写作→快速校对
- 阅读 40 分钟：定位→分析→作答→标记不确定
- 听力 按机考节奏：提前熟悉说明与做题界面
- 翻译 20 分钟：分句翻译→语法检查→润色
## 真题与模拟
- 使用近 3-5 年真题按套训练；分析错因并归档到词汇/语法/方法类别
- 每周至少一次全真模拟，记录分配与状态调整
## 考场技巧
- 先易后难；不确定题目标记后回看
- 注意题干限制词与语义线索（especially/only/not/except 等）
- 写作与翻译建议使用简单准确句式，避免长难句错误
## 推荐资源
- 真题：教育部考试中心官方题库与解析
- 听力：BBC 6 Minute English、VOA Learning English
- 写作：常用应用文格式与常见开头结尾句
> 后续我会补充各模块的详细练习清单与示例。

84
docs/notes/subject/english/grammar/README.md Normal file
View File

@@ -0,0 +1,84 @@
---
title: 核心语法与句型
createTime: 2025/10/20 16:40:00
permalink: /subject/english/grammar/
---
# 核心语法与句型
## 时态与语态
- 16 种时态的构成与用法（一般/进行/完成/完成进行 × 现在/过去/将来/过去将来）
- 被动语态的转换规则与适用场景
- 时态一致原则（主将从现、过去时一致等）
- 情态动词 + 完成体（must have done / should have done 等）的推测与虚拟含义
## 从句
### 名词性从句
- 主语从句（That he failed surprised us. / Whether she comes matters.）
- 宾语从句（I think (that) you are right.）
- 表语从句（The truth is that he lied.）
- 同位语从句（The fact that he lied shocked us.）
### 定语从句
- 限定性 vs. 非限定性
- 关系代词（who / whom / whose / which / that）与关系副词（when / where / why）
- 介词 + 关系代词（the house in which I live）
- 省略与替代（the book (that) I bought; the place (where) we met）
### 状语从句
- 时间（when / while / before / after / as soon as / until）
- 条件（if / unless / provided that / on condition that）
- 让步（though / although / even if / while）
- 原因（because / since / as / now that）
- 结果（so...that / such...that）
- 目的（so that / in order that）
- 比较（than / as...as / the more...the more）
## 非谓语动词
- 不定式（to do）：作主语、宾语、定语、状语、补语
- 动名词（doing）：作主语、宾语、表语、定语
- 现在分词（doing）与过去分词（done）：作定语、状语、补语、表语
- 独立主格结构（with + O + OC; N + doing / done...）
- 非谓语动词的时态与语态（to be doing / to have done / being done / having been done）
## 倒装与虚拟
### 倒装
- 否定副词置前（Never have I seen...）
- Only + 状语置前（Only then did I realize...）
- So / Such 置前（So fast did he run that...）
- 方位/时间副词置前（Out rushed the children.）
- 虚拟条件句省略 if（Were I you... / Had I known...）
### 虚拟语气
- 与现在事实相反（If I were you, I would...）
- 与过去事实相反（If I had known, I would have...）
- 与将来事实相反（If it should rain tomorrow...）
- 省略 if 的倒装（Were / Should / Had...）
- 含蓄虚拟（without / but for / otherwise）
- 名词性从句中的虚拟（insist that... (should) do; It is important that... (should) do）
## 句式与信息焦点
### 强调结构
- It is / was...that / who...（It was John that/who broke the window.）
- 助动词 do / does / did（She did tell me the truth.）
- 副词强调（absolutely / definitely / simply）
### 分裂句（Cleft Sentence）
- 主语分裂（What I need is time.）
- 宾语分裂（What he bought was a Ferrari.）
- 状语分裂（Where we met was in Paris.）
### 平行与省略
- 并列结构中的省略（He likes tea and she coffee.）
- 比较结构中的省略（I like her better than him.）
- 替代（do / so / one / that / those）
### 插入语与同位语
- 破折号、括号、逗号插入（The book—which I bought yesterday—is amazing.）
- 同位语短语（Mr. Smith, CEO of the company, will attend.）
### 长难句拆解策略
- 找谓语，定主干
- 划从句，标连接词
- 去插入，还省略
- 调语序，还原文

89
docs/notes/subject/english/listening-speaking/README.md Normal file
View File

@@ -0,0 +1,89 @@
---
title: 听力口语训练
createTime: 2025/10/20 16:40:00
permalink: /subject/english/listening-speaking/
---
# 听力口语训练
- 音素与连读弱读
- 听力材料选择与精听泛听
- 跟读与复述（shadowing & retelling）
- 场景对话与表达
## 自然拼读法Phonics
Phonics自然拼音，或叫“英语自然拼读法”更容易理解。拼读什么？就是看到英文字母或字母的组合能自然地读出、读对它的发音。这里，首先要区分“读音”(Name)与“发音”(Sound)。A-Z的26个字母几乎大家都认识、都能念出来，而念出来的就是字母本身的“读音”；而自然发音指的是字母的“发音”。发音不同于读音。看到字母后，不管读音，找对发音。这就Phonics要学的。理论可以讲很多很深，但Phonics注重的是方法与实践。因此，知道怎么正确发音就行了。
下面给你放一个基本发音规则的表，虽然看不到完整版但是足够了也足够大致理解发音规律了
```
https://wenku.so.com/tfd/b97611df865df13967a3b93a66d9e904?src=360ss&ocpc_id=139916&plan_id=2327941041&group_id=687803892&keyword=%E8%8B%B1%E8%AF%AD%E8%87%AA%E7%84%B6%E6%8B%BC%E8%AF%BB%E5%AD%97%E6%AF%8D%E7%BB%84%E5%90%88%E5%8F%91%E9%9F%B3&qhclickid=2ee0322320520786
```
英文的26个字母，分为元音和辅音，其中元音只有5个，即a，e，i，o，u，其余字母均为辅音。
对于大多数辅音来说，它们的发音是一对一的，而有少数几个辅音字母，每个字母有两个或以上的发音。
### 二、有多个发音的辅音
#### c 字母
c后面接a，o，u的时候，c的发音与字母k发音相同，叫做“hard c sound”：
```
cat, cap，call，coat，cup
```
当字母c后面接e，i，或y的时候，通常c的发音与字母s发音相同，叫做“soft c sound” ：
```
city, ice, rice, face, cell, cent, voice, pencil, juice
```
有时在e或i前面，c会发/sh/音：
```
ocean, racial, social
```
#### g 字母
g后面接a，o，u的时候，所发的音叫做“hard g sound”：
```
girl, gas, get, give, go
```
当字母g后面接e，i，或y的时候，有时g的发音与字母j的发音相同，叫做“soft g sound”
```
age, change, ginger, Egypt, gentle, giraffe, badge
```
特例：forget, give, girl中的g发hard sound。
#### x 字母
x在单词中间或结尾时发/ks/音：
```
box, next, fix, mix, tax
```
x在单词中间时有时发/gz/音：
```
exit, exam, exact
```
x在单词起始位置时发/z/音：
```
xylophone, xerox。
```
#### y 字母
y在单词起始位置时发音为辅音：
```
yes, you, yard, year, yell
```
y在单词或音节中间或结尾时被当做元音；
y在结尾，单词只有一个音节时y发长/i/音，y在结尾，单词有两个或以上音节时y发长/e/音，y在单词或音节中间时，发短/i/音。
- 小测试：
- my, cry, fly, sky, baby, happy
- puppy, hurrygym, nymph

11
docs/notes/subject/english/reading-writing/README.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: 阅读提升
createTime: 2025/10/20 16:40:00
permalink: /subject/english/reading-writing/
---
# 阅读提升
- 阅读策略（略读、扫读、精读）
- 篇章结构与逻辑（指代、连接、修饰）

12
docs/notes/subject/english/vocabulary/README.md Normal file
View File

@@ -0,0 +1,12 @@
---
title: 词汇学习与记忆法
createTime: 2025/10/20 16:40:00
permalink: /subject/english/vocabulary/
---
# 词汇学习与记忆法
- 高频词与词根词缀
- 主题词汇（校园、科技、社会等）
- 间隔重复（SRS）与记忆曲线
- 固定搭配与语块（collocations & chunks）

11
docs/notes/subject/english/writing-translation/README.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: 写译
createTime: 2025/10/22 10:26:07
permalink: /subject/english/writing-translation/
---
# 写译
- 写作模板与常用句式
- 改写与润色（句式多样化、语法准确性）
- 翻译（语法、词汇、上下文）

193
docs/notes/theory/cryptography/README.md Normal file
View File

@@ -0,0 +1,193 @@
---
title: 密码学基础
createTime: 2025/10/27 10:38:57
permalink: /theory/cryptography/
---
# 密码学基础
## 1. 密码学的定义
### 1.1 基本概念
**密码学（Cryptography）** 是一门研究信息安全的学科，主要关注如何在不安全的环境中实现安全通信。其核心是通过数学方法对信息进行变换，使得只有授权方能够理解信息内容。
### 1.2 核心目标
密码学追求以下四个主要安全目标：
- **机密性（Confidentiality）**：确保信息只能被授权的人访问
- **完整性（Integrity）**：确保信息在传输过程中不被篡改
- **认证性（Authentication）**：确认通信双方的身份真实性
- **不可否认性（Non-repudiation）**：防止发送方事后否认发送过信息
### 1.3 重要作用
密码学在现代信息安全中扮演着至关重要的角色：
- 保护个人隐私和商业机密
- 确保金融交易的安全性
- 维护国家安全和军事通信
- 支撑互联网基础设施的安全运行
### 1.4 主要应用场景
- **网络安全**：HTTPS、VPN、SSL/TLS协议
- **数字身份认证**：数字证书、数字签名、双因素认证
- **区块链技术**：加密货币、智能合约、分布式账本
- **移动通信**：SIM卡加密、移动支付安全
- **物联网安全**：设备身份认证、数据传输加密
### 1.5 基础概念与术语（入门）
为方便初学者快速建立直觉，先认识密码学中最核心的几个概念：
**明文（Plaintext）与密文（Ciphertext）**
- 明文：未加密的原始消息，例如“HELLO”。
- 密文：加密后的消息，人类或未授权系统难以直接理解。
**加密（Encryption）与解密（Decryption）**
- 加密：用密钥将明文转换为密文，记为：
$$
C = E_k(P)
$$
- 解密：用密钥将密文还原为明文，记为：
$$
P = D_k(C)
$$
其中，$P$ 表示明文，$C$ 表示密文，$k$ 表示密钥，$E$ 为加密算法，$D$ 为解密算法。
**密钥（Key）：对称密钥 vs 非对称密钥**
- 对称密钥：加密和解密使用相同的密钥，速度快，但密钥分发与管理是难点。
- 非对称密钥（公钥密码）：加密使用“公钥”，解密使用“私钥”，便于密钥分发，还能支持数字签名。
对称加密流程示意（同一把密钥）：
```mermaid
flowchart LR
S[发送者] -- 使用共享密钥 K 加密 --> C[(密文)]
C -- 使用共享密钥 K 解密 --> R[接收者]
```
非对称加密流程示意（公钥/私钥）：
```mermaid
flowchart LR
S[发送者] -- 使用接收者公钥加密 --> C[(密文)]
C -- 使用接收者私钥解密 --> R[接收者]
```
在典型的 RSA 公钥体制中，还可以用一个简洁的数学表达式表示加解密：
$$
\begin{aligned}
c &= m^{e} \bmod n,\\
m &= c^{d} \bmod n,
\end{aligned}
$$
其中 $(e, n)$ 为公钥，$(d, n)$ 为私钥，$m$ 为明文，$c$ 为密文。
**常见攻击模型简介（只需直观理解）**
- 唯密文攻击（COA）：攻击者只有密文，尝试恢复明文或密钥。
- 已知明文攻击（KPA）：攻击者拥有部分“明文-密文”对，用于分析算法或密钥。
- 选择明文攻击（CPA）：攻击者可选择明文并获取其密文，用于推断密钥或算法结构。
- 选择密文攻击（CCA）：攻击者可选择密文并得到其解密结果，进一步分析系统弱点。
直观结论：设计良好的现代密码系统，应当在这些攻击模型下仍保持安全（在合理的参数与假设下）。
## 2. 密码学历史简述
### 2.1 古代密码学（公元前-15世纪）
**凯撒密码（Caesar Cipher）**
- 时间：公元前1世纪
- 原理：字母移位加密
- 示例：将字母向后移动3位，A→D，B→E
**斯巴达密码棒（Scytale）**
- 时间：公元前5世纪
- 原理：缠绕在特定直径木棒上的皮条
古典密码简述：
- 核心思路：替换或移位（重新排列）字符。
- 代表示例：凯撒（替换）、栅栏（移位）、维吉尼亚（多表替换）。
- 直觉目标：混淆结构、增加猜测难度；但易受频率分析。
### 2.2 文艺复兴时期（15-18世纪）
**维吉尼亚密码（Vigenère Cipher）**
- 时间：16世纪
- 原理：多表替换密码
- 特点：比单表替换更安全
**博福特密码（Beaufort Cipher）**
- 时间：18世纪
- 原理：改进的维吉尼亚密码
### 2.3 近代密码学（19-20世纪中期）
**恩尼格玛密码机（Enigma）**
- 时间：二战时期
- 原理：机械转子密码机
- 重要性：推动了现代密码分析的发展
**香农的信息论**
- 时间：1949年
- 贡献：为密码学奠定了数学理论基础
### 2.4 现代密码学（1970年代至今）
**DES算法**
- 时间：1977年
- 意义：第一个公开的加密标准
**RSA算法**
- 时间：1977年
- 意义：第一个实用的公钥密码系统
**AES算法**
- 时间：2001年
- 意义：取代DES的新一代加密标准
现代密码简述：
- 对称加密：同一密钥加解密，适合大量数据（示例：AES/DES/3DES）。
$$
C = E_k(P), \quad P = D_k(C)
$$
- 非对称加密：公钥加密、私钥解密，便于密钥分发与数字签名（示例：RSA/ECC）。
$$
c = m^{e} \bmod n, \quad m = c^{d} \bmod n
$$
- 密钥交换：Diffie–Hellman 在不安全信道建立共享密钥。
- 数字签名：私钥签名、公钥验证，保障真实性与不可否认性。
### 2.5 关键历史时间线
```
公元前5世纪：斯巴达密码棒
公元前1世纪：凯撒密码
16世纪：维吉尼亚密码
1918年：一次一密密码本
1949年：香农信息论
1977年：DES和RSA算法
2001年：AES标准
```
## 总结
密码学作为信息安全的基石，经历了从简单替换到复杂数学算法的漫长发展历程。现代密码学建立在严格的数学基础之上，通过对称加密、非对称加密等多种技术手段，为数字世界提供了可靠的安全保障。
理解密码学的基本原理和分类，有助于我们更好地应用这些技术来保护信息安全，同时也为深入学习更高级的密码学概念奠定基础。
本篇笔记的所有代码开源于：[https://gitea.simengweb.com/si-meng-spec/cryptography-example-code](https://gitea.simengweb.com/si-meng-spec/cryptography-example-code)

107
docs/notes/theory/cryptography/classical-encryption/permutation-encryption.md Normal file
View File

@@ -0,0 +1,107 @@
---
title: 置换密码 - 等待完善
createTime: 2025/10/29 13:50:49
permalink: /theory/cryptography/permutation-encryption/
---
# 置换密码（Permutation / Transposition Ciphers）
置换密码的核心思想不是“把字母换成别的字母”（替换），而是**重新排列明文字符的位置**。也就是说：
- 明文字母的集合不变，顺序发生了改变；
- 由于字母频率不变，置换密码依然会暴露统计特征，但单词的结构与位置模式被打散。
与“替换密码”相比，置换密码更像是“洗牌”：把原本顺序排列的牌重新打乱。单独使用时并不安全，但与替换联合使用（乘积密码）能显著增强安全性。
```mermaid
flowchart LR
P[明文] --> A{根据密钥生成位置}
A --> B[重新排列字符]
B --> C[密文]
```
## 一、栅栏密码（Rail Fence Cipher）
**工作原理**：
将明文按“Z字形”写入若干行（称为“栅栏/轨道”），再按行依次读出即得到密文。轨道数即为密钥。
**示意**（以 3 轨为例）：
```
轨1: 0 4 8 ...
轨2: 1 3 5 7 9 ...
轨3: 2 6 ...
```
**示例**：
明文：`HELLOWORLD`
轨道数：`3`
- 轨1（索引 0,4,8）：`H O L`
- 轨2（索引 1,3,5,7,9）：`E L W R D`
- 轨3（索引 2,6）：`L O`
密文为各轨串联：`HOL` + `ELWRD` + `LO` → `HOLELWRDLO`
**数学表示**：
设明文 $P = p_0 p_1 \dots p_{n-1}$，根据密钥生成一个位置序列 $s_0, s_1, \dots, s_{n-1}$（即置换次序），则：
$$
C_j = p_{s_j}, \quad j = 0,1,\dots,n-1
$$
解密使用逆序列 $t = s^{-1}$：
$$
p_i = C_{t_i}, \quad i = 0,1,\dots,n-1
$$
**特点**：
- 实现简单，直观“打乱顺序”
- 频率不变，难以抵抗纯统计分析；但位置模式被破坏，较难直接猜词
- 作为教学与与替换密码的组合（乘积密码）更有价值
## 二、列移位置换（Columnar Transposition）
**工作原理**：
选择一个关键词，将明文按列填入表格，再按关键词的字母排序对列进行重排，最终按列或按行读出密文。
```mermaid
flowchart LR
A[明文填入表格] --> B{按关键词排序列}
B --> C[重排读取]
C --> D[密文]
```
**简例（概念演示）**：
明文：`ATTACKATDAWN`
关键词：`ZEBRA`（按字母表排序为 `A B E R Z`）
1) 将明文逐行填入 5 列表格；
2) 按关键词排序（A→B→E→R→Z）重排列；
3) 按重排后的列依次读出密文。
（实际实现时需要处理明文长度不足一整行的填充策略，如使用 `X` 或留空。）
**数学表示（一般置换模型）**：
关键词决定一个列置换 $\pi$，其作用是重新排列列索引。若把明文按列读取为序列 $P$，加密可抽象为：
$$
C = \operatorname{Permute}_{\pi}(P), \quad P = \operatorname{Permute}_{\pi^{-1}}(C)
$$
**特点**：
- 比栅栏更灵活，关键词让置换更“难猜”
- 仍保留频率分布，易受已知明文/选择明文的结构分析攻击
- 常与替换结合形成更强的乘积密码（如 ADFGX/ADFGVX 密码）
## 三、联合与加固：置换 × 替换
将“替换”与“置换”组合（先替换后置换，或多轮交替）能显著增强安全性：
- 替换打乱统计特征（字母频率分布变平）
- 置换打乱位置结构（模式与相邻关系被破坏）
这种思路在现代密码设计中仍然常见（“混淆与扩散”理念），尽管算法形式已经大为不同。
## 四、安全性与弱点（直观理解）
- 单独的置换密码不改变字母频率，抵抗统计攻击能力有限
- 容易受到已知明文/选择明文攻击（通过结构猜测置换）
- 多轮、复杂置换能提高攻击成本，但不建议单独用于实际安全场景
## 五、小练习（可选）
试着把你自己的名字用 3 轨栅栏加密；然后写出解密过程（先确定轨道索引，再按逆序重建原文）。
## 附件：
具体的使用样例代码请参考：[https://gitea.simengweb.com/si-meng-spec/cryptography-example-code](https://gitea.simengweb.com/si-meng-spec/cryptography-example-code)

170
docs/notes/theory/cryptography/classical-encryption/substitution-ciphers.md Normal file
View File

@@ -0,0 +1,170 @@
---
title: 替换密码
createTime: 2025/10/27 10:47:42
permalink: /theory/cryptography/substitution-ciphers/
---
# 替换密码（Substitution Ciphers）
我们一起来系统梳理古典加密算法（Classical Ciphers）。这些算法虽然在现代已不再安全，但它们是密码学发展的基石，蕴含了替换、置换、密钥等核心思想，非常适合理解密码学的基本原理。
替换密码的核心思想是“一对一”或“多对一”的字符映射：把明文中的每一个字母（或符号）按照事先约定好的规则，替换成另一个字母（或符号）。
这种映射可以是固定不变的（如凯撒密码的“统一移位”），也可以是依赖密钥动态变化的（如维吉尼亚密码的“周期移位”）。
由于密文保留了原始字母的出现频率，只是“换了一张皮”，所以替换密码在本质上没有改变字母的统计特性，这也为频率分析攻击留下了突破口。
替换操作可以手工完成，也可以通过查表、转盘、甚至机械电路实现，是后续更复杂多表替换与乘积密码的雏形。
## 一、凯撒密码（Caesar Cipher）
**工作原理**：
凯撒密码是一种循环移位密码，将字母表视为一个环形结构。加密时每个字母向后移动固定位置 $k$，解密时向前移动相同位置。
**数学表示**：
设字母 A-Z 对应数字 0-25，则：
加密公式：
$$E(x) = (x + k) \mod 26$$
解密公式：
$$D(x) = (x - k) \mod 26$$
其中 $x$ 是明文字母编号，$k$ 是密钥（0 ≤ k ≤ 25）。
**特点**：
- 实现简单，易于理解
- 密钥空间仅 $26$ 种可能，安全性极低
- 易受频率分析攻击
- 主要具有教学价值
## 二、单表替换密码（Simple Substitution Cipher）
**工作原理**：
单表替换密码是凯撒密码的泛化形式，它使用一个随机的字母替换表，而不是固定的移位。每个明文字母都被唯一地映射到一个密文字母，形成一对一的替换关系。
```mermaid
graph LR
A[明文字母] --> B{替换表}
B --> C[密文字母]
```
**数学表示**：
设字母表 $\Sigma = \{A,B,C,...,Z\}$，替换函数 $f: \Sigma \rightarrow \Sigma$ 是一个双射（一一对应），则：
加密公式：
$$E(x) = f(x)$$
解密公式：
$$D(y) = f^{-1}(y)$$
其中 $f^{-1}$ 是 $f$ 的逆函数。
**密钥空间**：
单表替换密码的密钥空间是所有可能的字母排列，大小为：
$$|K| = 26! \approx 4.03 \times 10^{26}$$
这个巨大的密钥空间使得暴力破解在计算上不可行。
**示例**：
假设替换表为：
```
A→Q, B→W, C→E, D→R, E→T, F→Y, G→U, H→I, I→O, J→P,
K→A, L→S, M→D, N→F, O→G, P→H, Q→J, R→K, S→L, T→Z,
U→X, V→C, W→V, X→B, Y→N, Z→M
```
```mermaid
flowchart LR
A[明文: HELLO] --> B[替换加密]
B --> C[密文: ITSSG]
C --> D[逆替换解密]
D --> E[明文: HELLO]
```
**安全性分析**：
虽然单表替换密码的密钥空间巨大，但它仍然易受**频率分析攻击**。因为：
1. **字母频率保留**：高频字母（如E、T、A）在密文中仍然是高频
2. **单词模式保留**：常见单词模式（如"THE"、"ING"）在密文中保持相同模式
3. **双字母频率**：常见字母对（如"TH"、"ER"）的频率特征仍然存在
**攻击方法**：
- 单字母频率分析
- 双字母频率分析
- 单词长度和模式分析
- 已知明文攻击
**特点**：
- 密钥空间巨大（$26!$），理论上难以暴力破解
- 仍然易受统计攻击
- 是密码学历史上重要的里程碑
- 为现代密码学提供了重要启示
## 三、维吉尼亚密码（Vigenère Cipher）
**工作原理**：
维吉尼亚密码是一种多表替换密码，它使用一个关键词来决定每次替换的凯撒密码移位量。关键词的每个字母对应一个移位量，明文的每个字母根据关键词的循环使用进行替换。
```mermaid
graph LR
A[明文] --> B{关键词循环扩展}
B --> C[明文与关键词按位组合]
C --> D{多表替换}
D --> E[密文]
```
**数学表示**：
设字母 A-Z 对应数字 0-25。
明文 $P = p_0 p_1 ... p_{n-1}$
关键词 $K = k_0 k_1 ... k_{m-1}$ (长度为 $m$)
加密公式：
$$E(p_i) = (p_i + k_{i \pmod m}) \mod 26$$
解密公式：
$$D(c_i) = (c_i - k_{i \pmod m}) \mod 26$$
其中 $p_i$ 是明文第 $i$ 个字母的数字表示，$k_{i \pmod m}$ 是关键词循环后对应第 $i$ 个字母的数字表示，$c_i$ 是密文第 $i$ 个字母的数字表示。
**示例**：
明文：`ATTACKATDAWN`
关键词：`LEMON`
1. **关键词循环扩展**：
将关键词 `LEMON` 循环扩展至与明文等长：`LEMONLEMONLE`
2. **明文与关键词按位组合（数字表示）**：
将明文和扩展后的关键词转换为数字 (A=0, B=1, ..., Z=25)。
明文数字: `0 19 19 0 2 10 0 19 3 0 22 13`
关键词数字: `11 4 12 14 13 11 4 12 14 13 11 4`
3. **加密运算**：
对每对明文数字 $p_i$ 和关键词数字 $k_{i \pmod m}$ 执行 $(p_i + k_{i \pmod m}) \mod 26$ 运算。
例如：
- 第一个字母：明文 A (0) + 关键词 L (11) = $(0 + 11) \mod 26 = 11 \rightarrow L$
- 第二个字母：明文 T (19) + 关键词 E (4) = $(19 + 4) \mod 26 = 23 \rightarrow X$
- 第三个字母：明文 T (19) + 关键词 M (12) = $(19 + 12) \mod 26 = 5 \rightarrow F$
...
最终密文：`LXFOPVEFRNHR`
**安全性分析**：
维吉尼亚密码比单表替换密码更安全，因为它引入了**多表替换**，使得密文的字母频率分布趋于平坦，从而抵抗了简单的频率分析攻击。
然而，它并非绝对安全，主要弱点在于**关键词的周期性**：
1. **Kasiski 测试**：通过分析密文中重复出现的字母组，可以推断出关键词的长度。
2. **频率分析（针对子密码）**：一旦关键词长度确定，密文可以被分成若干个凯撒密码，然后对每个子密码进行频率分析。
**特点**：
- 多表替换，比单表替换密码更安全
- 引入了关键词的概念，增强了密钥的复杂性
- 易受Kasiski测试和频率分析的组合攻击
- 在历史上曾被认为是“牢不可破的密码”
## 附件：
具体的使用样例代码请参考：[https://gitea.simengweb.com/si-meng-spec/cryptography-example-code](https://gitea.simengweb.com/si-meng-spec/cryptography-example-code)

48
docs/tools.md Normal file
View File

@@ -0,0 +1,48 @@
---
title: 常用Web工具
description: 一些我常用的在线工具集合
hideInBlogList: true
article: false
createTime: 2025/09/22 07:45:30
permalink: /tools/
---
# 常用Web工具
以下是我平时工作和学习中经常使用的一些Web工具，分享给大家：
## 开发工具
- [面向开发人员的便捷工具](https://it-tools.simengweb.com/) - 一个比较好的工具箱
- [算法可视化工具 - Visualgo](https://visualgo.net/zh) - 算法和数据结构可视化学习平台
- [程序员速查手册](https://quickref.cn/) - 程序员常用开发知识速查
- [Jupyter在线环境](https://jupyter.org/try-jupyter/lab/) - 在线Jupyter笔记本环境，支持多种编程语言
## 设计工具
- [iconfont-阿里巴巴矢量图标库](https://www.iconfont.cn/) - 阿里妈妈MUX倾力打造的矢量图标管理、交流平台
## 教育的平台
- [中国大学MOOC](https://www.icourse163.org/) - 国内优质在线课程平台
- [学堂在线](https://www.xuetangx.com/) - 清华大学发起的大规模开放在线教育平台
- [GeoGebra](https://www.geogebra.org/) - 数学教学与学习的动态几何软件
- [编程学习平台](https://noobdream.com/index/) - 编程学习资源与算法题库
## 在线工具
- [极简工具 - Jyshare](https://www.jyshare.com/) - 提供各种在线实用工具的平台
- [在线文件转换](https://onlineconvertfree.com/zh/) - 免费在线文件格式转换工具
- [工具库 - Enncy](https://tk.enncy.cn/) - 实用工具集合
## 资源平台
- [Z-Library](https://z-lib.life/) - 电子书资源库
## 自己常玩的一些游戏攻略
- [碧蓝航线WIKI大型作战成就记录地图](https://wiki.biligame.com/blhx/%E5%A4%A7%E5%9E%8B%E4%BD%9C%E6%88%98%E6%88%90%E5%B0%B1%E8%AE%B0%E5%BD%95%E5%9C%B0%E5%9B%BE) - 碧蓝航线大型作战成就记录地图
- [海岛奇兵数据大全](https://bb.heiyu100.cn/shuju.aspx) - 海岛奇兵升级数据、设施、游戏数据查询
- [Minecraft种子地图工具](https://www.chunkbase.com/apps/seed-map#seed=-7426240975919748310&platform=java_1_20&dimension=overworld&x=-119&z=881&zoom=0.27) - Minecraft种子地图查看工具
- [元气骑士中文维基](https://yqqs.huijiwiki.com/wiki/%E9%A6%96%E9%A1%B5) - 元气骑士游戏中文维基百科

8232
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

31
package.json Normal file
View File

@@ -0,0 +1,31 @@
{
"name": "si-meng-web-site-notes",
"type": "module",
"version": "1.0.0",
"description": "祀梦的笔记网站",
"license": "MIT",
"engines": {
"node": "^20.6.0 || >=22.0.0"
},
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:dev-clean": "vuepress dev docs --clean-cache --clean-temp",
"docs:build": "vuepress build docs --clean-cache --clean-temp",
"docs:preview": "http-server docs/.vuepress/dist",
"vp-update": "npx vp-update"
},
"devDependencies": {
"@vuepress/bundler-vite": "2.0.0-rc.24",
"@vuepress/plugin-umami-analytics": "^2.0.0-rc.112",
"artalk": "^2.9.1",
"http-server": "^14.1.1",
"typescript": "^5.9.2",
"vue": "^3.5.21",
"vuepress": "2.0.0-rc.24",
"vuepress-theme-plume": "1.0.0-rc.164"
},
"dependencies": {
"@waline/client": "^3.6.0",
"mermaid": "^11.12.1"
}
}

153
script/build-and-publish.bat Normal file
View File

@@ -0,0 +1,153 @@
@echo off
setlocal EnableExtensions EnableDelayedExpansion
REM ==========================================
REM Configuration
REM ==========================================
chcp 65001 >nul
REM Move to project root
cd /d "%~dp0.."
set "PROJECT_DIR=%CD%\"
set "DIST_DIR=%PROJECT_DIR%docs\.vuepress\dist"
set "CACHE_DIR=%PROJECT_DIR%docs\.vuepress\.cache"
set "TEMP_DIR=%PROJECT_DIR%docs\.vuepress\.temp"
set "PUBLISH_DIR=%PROJECT_DIR%_publish"
set "REMOTE_URL=https://gitea.simengweb.com/si-meng-spec/build_notes_simengweb.git"
set "BRANCH=main"
REM High memory limit for better performance/stability (8GB)
set "NODE_OPTIONS=--max-old-space-size=8192"
REM Disable Git SSL Verification for this session
git config --global http.sslVerify false
git config --global http.sslBackend openssl
REM Args
set "COMMIT_MSG=%~1"
if "%COMMIT_MSG%"=="" set "COMMIT_MSG=Build: %DATE% %TIME%"
echo ==========================================
echo Start Build and Publish
echo Project Dir: %PROJECT_DIR%
echo Memory Limit: 8192 MB
echo ==========================================
REM ==========================================
REM 1. Cleanup
REM ==========================================
echo [1/5] Cleaning up old artifacts...
if exist "%DIST_DIR%" (
echo - Removing %DIST_DIR%
rd /s /q "%DIST_DIR%"
)
if exist "%CACHE_DIR%" (
echo - Removing %CACHE_DIR%
rd /s /q "%CACHE_DIR%"
)
if exist "%TEMP_DIR%" (
echo - Removing %TEMP_DIR%
rd /s /q "%TEMP_DIR%"
)
REM Clean node_modules for a fresh install every time (Ensures clean state)
if exist "%PROJECT_DIR%node_modules" (
echo - Removing node_modules (Fresh Install Mode)
rd /s /q "%PROJECT_DIR%node_modules"
)
REM ==========================================
REM 2. Install Dependencies
REM ==========================================
echo [2/5] Installing dependencies (npm ci)...
call npm ci
if %ERRORLEVEL% NEQ 0 (
echo [Error] npm ci failed.
exit /b 1
)
REM ==========================================
REM 3. Build
REM ==========================================
echo [3/5] Building docs...
call npm run docs:build
if %ERRORLEVEL% NEQ 0 (
echo [Error] Build failed.
exit /b 1
)
if not exist "%DIST_DIR%" (
echo [Error] Dist directory not found after build.
exit /b 1
)
REM ==========================================
REM 4. Prepare Publish Directory
REM ==========================================
echo [4/5] Preparing publish directory...
if not exist "%PUBLISH_DIR%\.git" (
echo - Cloning publish repo...
if exist "%PUBLISH_DIR%" rd /s /q "%PUBLISH_DIR%"
git clone "%REMOTE_URL%" "%PUBLISH_DIR%"
if !ERRORLEVEL! NEQ 0 exit /b 1
) else (
echo - Updating publish repo...
pushd "%PUBLISH_DIR%"
git fetch --all
git checkout "%BRANCH%"
git reset --hard "origin/%BRANCH%"
popd
)
echo - Cleaning publish directory content (preserving .git)...
pushd "%PUBLISH_DIR%"
for /f "delims=" %%F in ('dir /a /b') do (
if /I not "%%F"==".git" (
if exist "%%F" (
attrib -R "%%F" >nul 2>&1
rd /s /q "%%F" 2>nul
del /f /q "%%F" 2>nul
)
)
)
popd
echo - Copying new build artifacts...
robocopy "%DIST_DIR%" "%PUBLISH_DIR%" *.* /E /NFL /NDL /NP /NJH /NJS >nul
if %ERRORLEVEL% GEQ 8 (
echo [Error] Robocopy failed.
exit /b 1
)
REM ==========================================
REM 5. Push to Remote
REM ==========================================
echo [5/5] Pushing changes...
pushd "%PUBLISH_DIR%"
if defined GIT_USERNAME git config user.name "%GIT_USERNAME%"
if defined GIT_EMAIL git config user.email "%GIT_EMAIL%"
git add -A
git diff --cached --quiet
if %ERRORLEVEL% EQU 0 (
echo [Info] No changes to commit.
) else (
git commit -m "%COMMIT_MSG%"
echo - Pushing to %BRANCH%...
git push origin "%BRANCH%"
if !ERRORLEVEL! NEQ 0 (
echo [Error] Git push failed.
popd
exit /b 1
)
echo [Success] Pushed successfully.
)
popd
echo ==========================================
echo All Done!
echo ==========================================
exit /b 0

3
script/start.bat Normal file
View File

@@ -0,0 +1,3 @@
@echo off
cd /d "%~dp0.."
npm run docs:dev -- --host 0.0.0.0 --port 8888

2
script/start.sh Normal file
View File

@@ -0,0 +1,2 @@
cd "$(dirname "$0")/.."
npm run docs:dev -- --host 0.0.0.0 --port 8888