[!NOTE] 提示 本文记录基于 Firefly 主题进行二次开发的实现取舍，覆盖首页动效、音乐可视化、标签图谱、留言板、Cloudflare 集成和部署流程。项目目标是保留 Astro 内容系统，同时将交互功能拆分为可独立维护的模块。

选型背景

项目最初定位为个人主页，后续增加了文章、评论、搜索和统计能力，因此选择继续在 Astro 内容系统上演进。没有迁移到 Fuwari 的主要原因是现有文章、组件和部署配置已经围绕 Astro 组织，迁移成本高于继续维护。

截至本文发布时，项目本地构建时间约为 24 s；性能结果取决于图片数量、网络环境和部署平台，不能直接作为所有环境的基准。后续重构的主要成本来自交互组件、Swup 生命周期和外部服务配置之间的耦合。

项目地址

https://github.com/ZhuangRenyang/Firefly-Mod

项目属于二次开发，代码和配置以仓库当前版本为准。

一、重点

1、首页

1. Hero 区域采用 Galgame 风格
2. 站点地图一览
3. 作品展示和博客主要方向

2、音乐

3D棋盘可视化音乐。

该功能参考并复刻了开源音乐地图项目的交互思路。

实现参考了 sonic-topography，并根据本站布局和数据结构进行了改造。复用代码或素材前应确认原项目许可证和署名要求。

3、分类标签

分类页现在只保留标签关系图谱：标签是节点，同一篇文章中同时出现的标签会连成边，边越粗表示共现次数越多。

实现上，构建阶段会遍历所有文章的 tags：每个标签生成一个节点，并记录它关联的文章；同一篇文章内的任意两个标签生成一条共现边，边的权重就是它们共同出现的次数。客户端按连通关系给节点分组，再交给 D3 力导向模拟进行排布；Canvas 根据模拟结果逐帧绘制图谱。节点大小由文章数量决定，边的透明度和粗细由共现权重决定。用户可以缩放、拖拽节点、悬停查看关联文章，点击或按回车跳转到对应标签页；同时支持键盘选择、减少动态效果偏好和亮暗主题切换。

4、留言

转变UI为聊天室，并复用 Waline 的登录、审核、表情和访问量能力。原本做了个翻卡牌的，因为这个在KV上面天天给我报警告，后面就取消了。

Waline 服务独立部署，博客只保存服务地址和客户端配置；项目 Worker 不保存评论内容，也不维护留言数据库或登录系统。

留言板调用的接口如下。读取接口每 30 s 轮询一次；页面不可见或浏览器离线时停止发起无效请求。

管理员 Token 仅保存到 sessionStorage；普通用户根据"记住登录"选项保存到 sessionStorage 或 localStorage。任何读取、发布、修改或删除请求返回鉴权错误时，页面都会清除本地 Token 并要求重新登录。

4.1 接口列表

以下为 @waline/api 中留言板实际调用的 CRUD 接口。

// GET /api/comment?path=...&pageSize=...&page=...&lang=...&sortBy=...
// Headers: (token 存在时) Authorization: Bearer <token>
// 读取留言列表（分页，首次加载 + 轮询 + 加载历史）
getComment({
  serverURL: string,     // Waline 服务端地址
  lang: string,          // 语言
  path: string,          // 页面路径（留言板固定为 /guestbook/）
  page: number,          // 页码，从 1 开始
  pageSize: number,      // 每页条数
  sortBy: string,        // 排序方式（如 "insertedAt_desc"）
  token?: string,        // 登录令牌（可选，管理员可看到待审核留言）
  signal?: AbortSignal,  // 取消请求信号
})
// Response: { count: number, page: number, pageSize: number, totalPages: number, data: WalineRootComment[] }

// --------------------------------------------------------------------------

// POST /api/comment?lang=<string>
// Headers: Content-Type: application/json
//         (token 存在时) Authorization: Bearer <token>
// Body: { nick, mail?, link?, comment, ua, url, pid?, rid?, at? }
// 发布留言
addComment({
  serverURL: string,
  lang: string,
  token?: string,           // 登录令牌（登录用户可选，匿名时不需要）
  comment: {                // WalineCommentData
    nick: string,           // 昵称
    mail?: string,          // 邮箱
    link?: string,          // 网站地址
    comment: string,        // 留言内容（含回复标记 HTML 注释）
    ua: string,             // User Agent
    url: string,            // 页面路径
    pid?: number,           // 父评论 ID（回复时）
    rid?: number,           // 根评论 ID（回复时）
    at?: string,            // @用户 ID（回复时）
  },
})
// Response: { errno: number, errmsg?: string, data?: WalineComment }

// --------------------------------------------------------------------------

// PUT /api/comment/<objectId>?lang=<string>
// Headers: Content-Type: application/json
//          Authorization: Bearer <token>
// Body: { comment?, status?, sticky?, like? }
// 编辑留言（仅本人或管理员可编辑）
updateComment({
  serverURL: string,
  lang: string,
  token: string,            // 登录令牌（必需）
  objectId: number,         // 留言 objectId
  comment?: {               // UpdateWalineCommentData
    comment?: string,       // 修改后的内容
    status?: "approved" | "waiting" | "spam",  // 审核状态（管理员）
    sticky?: 0 | 1,         // 置顶状态（管理员）
    like?: boolean,         // 点赞/取消点赞
  },
})
// Response: { errno: number, errmsg?: string, data: WalineComment }

// --------------------------------------------------------------------------

// DELETE /api/comment/<objectId>?lang=<string>
// Headers: Authorization: Bearer <token>
// 删除留言（仅本人或管理员可删除）
deleteComment({
  serverURL: string,
  lang: string,
  token: string,            // 登录令牌（必需）
  objectId: number,         // 留言 objectId
})
// Response: { errno: number, errmsg: string, data: "" }

// --------------------------------------------------------------------------

// GET /api/token?lang=<string>
// Headers: Authorization: Bearer <token>
// 登录回调 Token 校验（Waline OAuth 重定向回博客后验证身份）
fetch(`${serverURL}/api/token?lang=${lang}`, {
  headers: { Authorization: `Bearer ${token}` },
})
// Response: { errno: number, errmsg?: string, data?: UserInfo }

4.2 登录流程

sequenceDiagram
    participant User as 用户
    participant Page as 博客页面
    participant Waline as Waline 服务端
    participant Window as 浏览器窗口

    Note over User, Page: 桌面端：弹窗 + postMessage
    User->>Page: 点击"登录"
    Page->>Waline: 打开登录弹窗 (window.open)
    Waline->>Waline: 用户完成 OAuth 认证
    Waline-->>Window: postMessage ({ type: "userInfo", data: UserInfo })
    Page->>Page: 验证 UserInfo 合法性

    alt 验证成功
        Page->>Page: 进入存储策略
    else 验证失败
        Page->>Page: 清除 Token，提示重新登录
    end

    Note over User, Page: 移动端：跳转 + token 回传
    User->>Page: 点击"登录"
    Page->>Waline: location.href 跳转到登录页
    Waline->>Waline: 用户完成 OAuth 认证
    Waline-->>Page: 302 重定向回博客 (?token=...)
    Page->>Waline: GET /api/token (Authorization: Bearer <token>)
    alt 验证成功
        Waline-->>Page: 返回用户信息
        Page->>Page: 进入存储策略
    else 验证失败
        Waline-->>Page: 返回错误
        Page->>Page: 清除 Token，提示重新登录
    end

    Note over Page: 存储策略
    alt 管理员
        Page->>Page: 存入 sessionStorage
    else 普通用户 + 勾选"记住登录"
        Page->>Page: 存入 localStorage
    else 普通用户 + 未勾选"记住登录"
        Page->>Page: 存入 sessionStorage
    end

    Page->>Page: 刷新留言列表

5、关于

关于页内容使用 MDX 编写，正文里直接内嵌 Astro 组件（资料卡、技术栈卡片、时间线、社交链接和聊天气泡），排版交给框架的 Markdown 渲染管线，无需手动处理换行。页面底部附带一张更新日志图谱：构建时解析 log.md 的变更记录，生成按类型着色的日志卡片，并用 SVG 连线标注条目之间的关联页面。

6、日历

日历以全局小组件形式提供，聚合文章发布日期、法定节假日、内置节日和生日/纪念日，在固定的 6 × 7 月视图中展示公历和农历信息，并提供近期事件与当天详情。

6.1 接口列表

以下两个内部 API 在构建时预渲染为静态 JSON；日历小组件在浏览器端运行时 fetch 这两份数据。其中 /api/holidays.json 在构建时会调用第三方节假日 API 获取数据。

// --------------------------------------------------------------------------

// GET /api/allPostMeta.json
// Headers: 无
// 调用方：日历小组件客户端脚本（浏览器运行时 fetch）
// 构建时由 Astro Content Collections 生成并预渲染为静态 JSON，包含所有文章的元数据
fetch("/api/allPostMeta.json")
// Response: Array<{ id: string, title: string, published: number, category?: string, password?: boolean }>

// --------------------------------------------------------------------------

// GET /api/holidays.json
// Headers: 无
// 调用方：日历小组件客户端脚本（浏览器运行时 fetch）
// 构建时内部调用第三方 API 获取节假日数据后合并内置节日，预渲染为静态 JSON
fetch("/api/holidays.json")
// Response: Array<{ date: string, name: string, isOfficial?: boolean, isWorkday?: boolean, icon?: string, source: "api" | "builtin", rest?: number }>

// --------------------------------------------------------------------------

// GET https://timor.tech/api/holiday/year/<year>
// Headers: Accept: application/json
// 调用方：/api/holidays.json 内部（构建时由 holidayApi 配置驱动）
// 获取中国法定节假日、调休补班日
// 配置路径：src/config/calendarConfig.ts → holidayApi.url
fetch("https://timor.tech/api/holiday/year/2026")
// Response: { code: number, holiday: Record<string, { holiday: boolean, name: string, rest?: number }> }

两个内部 API 只在 astro build 时执行并输出为静态 JSON，生产环境由静态资源直接返回，浏览器端 fetch 到的是静态文件。文章或节假日更新后需要重新构建才能反映到日历上。

7、归档

归档页按年、月和文章组织时间线，支持分类和标签筛选，并显示年度文章进度。文章列表与统计在构建时根据文章元数据生成；由于静态构建无法读取查询参数，分类和标签筛选在客户端执行，不依赖额外的动态接口。

8、其他

1. 取消了侧边栏，首页和文章页将主要导航集中到顶部与移动端 Dock。
2. 修改了整体 UI 风格，保留亮色与暗色两种主题，不再维护背景图和多套背景配置。
3. 添加了日历功能，按文章发布日期展示内容；节假日数据在构建时从第三方 API 拉取并合并内置节日，运行时只读静态 JSON。
4. 删除了追番功能，避免相关数据请求和资源处理进入构建流程。
5. 使用 Pagefind 1.5.2 构建本地全文索引，并在构建期生成 LLM Wiki 的 JSON / Markdown 机器入口。
6. 站点完全静态生成，可直接部署到 Cloudflare Pages、Vercel、Netlify 或其他静态托管平台；评论和统计使用各自的外部服务。

二、用到的AI模型

• MIMO V2.5/PRO（送的百亿补贴）
• claude opus 4.64.74.8fable 5
• GPT 5.5/5.6
• antigravity的gemini 3.1/3.5
• TRAE上的 GLM/豆包/KIMI/QWEN/DeepSeek（都是拿来测试性能好在工作上确定是否实用）

本次试用成本约为 30 元。不同平台的模型、上下文管理和工具链存在差异，不能仅凭一次试用归因于模型或平台。实际接入时应使用小任务验证代码质量，并通过测试和审查控制回归风险。

三、优点与UI复制

纯静态，部署快，维护简单，成本低（只需要域名的费用）。

外部 UI 参考可以加速原型制作，但接入前需要统一交互规范、无障碍要求和许可证边界，避免把不兼容的组件直接拼接到站点中。

::github{repo="ZhuangRenyang/Firefly-Mod"}

[!NOTE] 提示 本文关注 AI 辅助开发中的流程和验证，不把“零人工”作为实际交付承诺。 本文记录使用 AI 辅助搭建和维护博客的实际流程：先确定视觉方向，再制作可验证的 HTML 原型，随后补齐项目规范、实现功能并执行测试。文章重点是协作边界和验证方法，不代表可以完全取消人工审查。

一、问题与目标

直接让 AI 根据一句话需求生成完整项目，通常会导致页面风格、目录结构和实现细节同时失控。下面的流程将需求拆成可验证的阶段。

1、正确流程

推荐流程如下：

1. AI 定整体风格
2. 编写原型图.html，还原度比截图高
3. AI 生成代码规范，方便后续维护
4. 代码必须各种红绿测试
5. 持续优化

2、原型图

这套流程不要求先完成专业设计稿，也不要求在设计工具和 IDE 之间反复同步。关键是先产出可以运行、可以对比的原型。

可以从 UI 组件库、开源项目和参考网页中提取布局与交互模式，再根据项目约束重新组合。使用外部素材时需要保留来源，并确认许可证允许使用。

2.1 原型图步骤

1. 在 UI 库或开源代码中找参考。
2. 若只有代码或图片，让 AI 生成对应 HTML 原型。
3. 对比原型是否符合需求。
4. 让 AI 按代码规范把原型接入指定页面位置。
5. 本地微调测试；除 Codex 外通常需多轮。

2.2 重点速查表

常见模块：导航栏（logo、菜单、按钮）、Hero（banner、首屏展示字体、引导）、Content（图文、卡片、表格）、Footer（版权、联系信息）。

参考来源选择：

• 没灵感：刷网站库找审美参考。
• 挑现成组件：看组件库。
• 明确结果：抄对标网站。

2.3 推荐资源

• 提示词优化：PromptPilot
• 网站参考：awwwards、OnePageLove、mobbin
• UI 组件库：Uiverse、React Bits、CodePen、Magic UI、Aceternity UI
• 图标库：Iconify

2.4 提示词速查表

根据原型图生成代码规范：

我需要当前业务的整体UI设计做一次风格迭代，我会给你几张参考设计的截图
请你仔细分析它的视觉风格，然后把这种风格应用到我的当前页面上
请重点还原这几个方面：
1. 配色：主色、辅助色、字体颜色、背景颜色
2. 字体：标题和正文的字号层级、粗细、间距、对齐方式、行高
3. 间距与留白： 模块之间的间距、元素之间的呼吸感
4. 组件样式：按钮、卡片、导航栏的圆角、阴影、边框
5. 整体布局：参考它的排版结构来组织页面

规范设计文档

请把我们这套设计风格保留下来，总结成一份设计规范文档，保存到design.md文件中，内容包括
以后我每做一个新页面，你都要先读这份design.md
1. 配色：主色、辅助色、背景色、、文字色的具体色值
2. 字体：标题和正文的字号、字重、行高
3. 间距：常用的内外边距和模块间距
4. 组件样式：按钮、卡片、导航栏的圆角、阴影、边框规则
严格按照里面的规范来设计，保证整个项目风格统一

3、设置规范

接手新项目时，不建议一上来就执行 /init 初始化。原因如下：

1. 技术栈不熟悉：无法判断实现阻力，容易踩坑。
2. 代码质量未知：若项目本身混乱，初始化会让问题更难处理。
3. 来回纠错成本高：报错、样式失效、需求被忽略等问题会反复出现。”报错你没看到嘛“、”画面怎么黑了“、“不要无视我的需求”、“不用抱歉，帮我改对啊”、“怎么切换页面后css失效了啊”。。。

3.1 正确流程

1. 让 AI 先深度分析项目结构、开发注意事项和目录树，输出架构图、模块依赖、核心数据流。
2. 重点询问：坑点、配置方式、调试方法、部署注意事项。输出一份「新人上手清单」和「常见翻车现场合集」。
3. 踩坑完成后，再执行 /init；让 AI 按企业级规范、解耦模块边界生成 claude.md 代码规范。
4. 检查 claude.md：例如若其中提到提交代码规范，而你有对应 skill，可改为让其使用指定 skill。
5. 再让 AI 做一次头脑风暴，按企业级规范对齐内容，迭代一次。

3.2 TDD是神

4、开发

1. 获取原型 HTML。
2. 头脑风暴学习原型图，明确需求并对齐，生成 PLAN。
3. 按代码规范开发。非 Codex 场景需提醒使用 TDD 相关测试 skill，避免白屏测试。
4. 检查交互：无卡顿、断层、闪烁，确认节流、防抖、重排处理到位；检查性能损耗和代码规范。
5. 确认整体无问题后再提交。

5、优化

开发完成后仍需持续优化。

5.1 动效

想让页面更有质感，可用以下提示词：

依次从上往下分层显示。"我想要更像高端设计师作品集/创意机构官网的动效，不要普通淡入。首屏需要有完整openinganimation，标题要有强视觉进场，比如遮罩揭开、位移、压缩后归位。滚动到每个模块时，英文大标题先大幅进场，卡片再依次stagger出现，图片要有 reveal 或轻微parallax。整体动效要夸张一点但高级，节奏慢一些、缓动丝滑，不要廉价弹跳，也不要影响性能。可以用 GSAP +ScrollTrigger。"

5.2 资源优化

图片：压缩，适当调整分辨率适合对应的位置大小，转换成webp

文字：压缩成日常用字6000字左右，还有包括数字、字母、标点符号和ASCLL码这些字体

懒加载：一些例如瀑布流图片、获取文章数等请求，可以异步加载

请求：合并小图标为 SVG Sprite，减少 HTTP 请求数。

缓存：静态资源加长期哈希文件名，配合 CDN 缓存策略。

5.3 定期扫描

定时让 AI 扫描项目漏洞、代码规范和冗余代码。

二、AI 工具

博客主要用 Claude Code（cc）和 Codex 编写。

1、Skill

• 头脑风暴：brainstorming
• TDD 测试：test-driven-development
• 代码规范：frontend-patterns
• UI 设计（自己打磨细节时基本用不上）：ui-ux-pro-max
• 技术文档：tech-blog（自己维护，源码见 claude-setting/skills/tech-blog）

2、模型选择

• 首推：Codex + GPT-5.5
• 次选：Claude Code + DeepSeek-V4-Pro

建议分工：顶模负责思考 PLAN，低模按代码规范编写，顶模最后审查代码。

三、博客设计

1、博客设计原则

谈谈不受欢迎的博客技术特征 - 纸鹿摸鱼处 而本站也很大遵循该原则，因为热爱AI绘画，所以只在首页展示AI绘画作品，其他页面则专注于文章内容呈现。后续也会继续遵循该原则。

保持博客风格统一：文章页面专注阅读，相册首页专注视觉，各司其职，互不干扰。

也希望各位读者能喜欢本站的设计风格，也能在设计自己的博客时参考本站的设计原则。

[!NOTE] 提示 本文实现一个基于 Cloudflare Vectorize 的博客语义搜索：构建阶段将 Markdown 按标题切块并生成向量，运行时由 Worker 检索相关段落，再通过 SSE 返回带文章引用的回答。重点关注分块边界、向量维度、检索阈值和敏感配置隔离。

一、问题与目标

博客已有 Pagefind 全文搜索，但它采用关键词匹配。用户搜索“缓存穿透怎么解决”时，如果文章中没有完全相同的词组，结果召回率会受到影响。

本文的目标是增加语义检索能力：用户以自然语言提问，系统基于博客内容生成回答，并返回参考文章链接。该实现适用于文章规模可控、允许最终回答依赖站内内容的个人博客；它不替代全文搜索，也不保证模型回答绝对正确。

二、架构

┌─────────────────────────────────────────────┐
│  前端 Svelte 聊天组件                        │
│  POST /api/ai-chat → SSE 流式接收            │
└──────────────┬──────────────────────────────┘
               ▼
┌─────────────────────────────────────────────┐
│  Cloudflare Worker                          │
│  1. 问题 → embedding 向量                    │
│  2. Vectorize 检索 topK 相似段落             │
│  3. 拼接 prompt（系统指令 + 检索结果 + 问题）│
│  4. 调用 LLM 流式生成回答                    │
│  5. SSE 返回 chunk + 参考文章                │
└──────────────┬──────────────────────────────┘
               ▼
┌─────────────────────────────────────────────┐
│  Cloudflare Vectorize                       │
│  存储所有文章段落的向量 + metadata            │
└─────────────────────────────────────────────┘

核心是 RAG（Retrieval-Augmented Generation）：先检索再生成。

三、文档分块策略

直接把整篇文章向量化效果差——一篇 3000 字的文章，embedding 模型只能捕捉到主题，丢失细节。

做法是按 Markdown heading 切段：

## 缓存穿透
缓存穿透是指查询一个一定不存在的数据...

### 解决方案
1. 布隆过滤器...
2. 缓存空值...

每个段落保留上下文：文章标题 + 日期 + 分类 + 标签 + 章节标题路径 + 正文。打包成一个 chunk：

文章：Redis 缓存设计
日期：2025-03-15
分类：笔记
标签：Redis, 缓存
章节：缓存问题 > 缓存穿透

缓存穿透是指查询一个一定不存在的数据...

空字段（如无分类、无标签）自动省略，通过 .filter(Boolean) 过滤空行。过滤条件：正文少于 50 字的段落丢弃（太短没有检索价值）。

1、实现细节

分块逻辑在 scripts/build-vectorize-index.js 的 splitByHeadings() 中：

function splitByHeadings(content, articleTitle) {
  const lines = content.split("\n");
  const chunks = [];
  let currentHeadingPath = [];
  let currentContent = [];

  function flush() {
    const text = currentContent.join("\n").trim();
    if (text.length < 50) return;
    chunks.push({ heading: currentHeadingPath.join(" > ") || articleTitle, text });
  }

  for (const line of lines) {
    const headingMatch = line.match(/^(#{1,4})\s+(.+)/);
    if (headingMatch) {
      flush();
      currentContent = [];
      const level = headingMatch[1].length;
      const title = headingMatch[2].trim();
      currentHeadingPath = currentHeadingPath.slice(0, level - 1);
      currentHeadingPath[level - 1] = title;
    } else {
      currentContent.push(line);
    }
  }
  flush();
  return chunks;
}

关键点：

• 只识别 # ~ #### 四级标题，遇到标题就切段
• currentHeadingPath 维护层级路径，如 缓存问题 > 缓存穿透 > 解决方案
• 每个 chunk 的 ID 由 slug::heading 哈希生成，保证同一章节始终对应同一向量 ID
• 每个 chunk 携带 metadata（articleTitle、articlePath、published、category、tags、heading、excerpt），供检索结果展示和去重使用

2、与 LangChain 递归分块的对比

LangChain 递归分块的核心逻辑（伪代码）：

separators = ["\n\n", "\n", ". ", " ", ""]  # 从大到小
for sep in separators:
    chunks = text.split(sep)
    if all(len(c) <= chunk_size for c in chunks):
        break
    # 太长的继续用更小的分隔符递归切分

本博客方案的潜在问题：如果一个标题下的内容过长，生成的 chunk 会变大，可能导致 embedding 质量下降、检索粒度变粗。实际部署时应增加最大字符数或 token 数限制，并通过检索评测确定重叠窗口。

改进方向：先按 Heading 切分保留语义边界，再对超长段落做二次字符切分，同时让子 chunk 继承父标题路径。

四、向量化与存储

1、构建脚本

scripts/build-vectorize-index.js 负责：

1. 读取 src/content/posts/ 下所有非 draft 文章
2. 按 heading 切段，生成 chunk 列表
3. 调用 embedding API 生成向量
4. 批量写入 Cloudflare Vectorize

支持增量更新——通过 .vectorize-manifest.json 记录每篇文章的内容 hash，只处理新增/修改/删除的文章。具体用法和底层 API 见下文「向量索引上传」小节。

2、Embedding 来源

两种模式，三者齐备时走第三方 API，否则用 Cloudflare Workers AI 免费模型：

对话模型同样有两种模式：

配置在 .env 中（仅敏感信息），参考 .env.example：

# Cloudflare 凭证（必填）
CLOUDFLARE_API_TOKEN=xxx
CLOUDFLARE_ACCOUNT_ID=xxx

# 第三方 AI API Key（可选，有则走第三方 API，无则回退 Workers AI）
AI_API_KEY=sk-xxx

非敏感配置（API 地址、模型名称、向量维度等）统一在 aiSearchConfig.ts 中管理，无需在 .env 重复配置。

3、Cloudflare 凭证获取

CLOUDFLARE_API_TOKEN：

1. 登录 Cloudflare Dashboard
2. 右上角头像 → My Profile → API Tokens → Create Token
3. 选择 Create Custom Token，权限勾选：
   • Account → Vectorize → Edit
   • Account → Workers AI → Use
4. 创建后复制 Token（页面关闭后无法再查看）

CLOUDFLARE_ACCOUNT_ID：

1. 登录 Cloudflare Dashboard
2. 点击任意域名 → 概览页右侧栏 API 区域 → 复制 Account ID
3. 或直接从 URL 中复制：https://dash.cloudflare.com/<account_id>/...

AI_API_KEY（可选）：

当前使用魔搭社区（ModelScope）的免费接口，注册即可获取：

1. 注册 ModelScope
2. 右上角头像 → API-KEY 管理 → 创建 API Key

4、Worker Secret 配置

Worker 运行时需要的 AI_API_KEY 不能写在代码中，需在 Cloudflare Dashboard 配置：

1. 登录 Cloudflare Dashboard
2. Workers & Pages → 选择你的 Worker → Settings → Variables and Secrets
3. 添加 Secret 类型变量：AI_API_KEY，值为第三方 API 的 Key

5、向量索引上传

构建脚本 scripts/build-vectorize-index.js 通过 Cloudflare REST API 操作 Vectorize（不是 Wrangler CLI）：

# 首次使用前，确保 .env 已配置 CLOUDFLARE_API_TOKEN 和 CLOUDFLARE_ACCOUNT_ID

# 增量更新（只处理新增/修改/删除的文章）
node scripts/build-vectorize-index.js

# 全量重建（删除旧索引，重新创建并上传所有文章向量）
node scripts/build-vectorize-index.js --force

全量重建流程：删除旧索引 → 创建新索引（指定维度和 cosine 度量）→ 分批生成 embedding → 分批插入向量。增量更新通过 .vectorize-manifest.json 记录每篇文章的内容 hash，只处理有变化的文章。

底层 API 调用：

// 插入向量
await fetch(`${API_BASE}/vectorize/v2/indexes/${INDEX_NAME}/insert`, {
  method: "POST",
  headers: { Authorization: `Bearer ${API_TOKEN}` },
  body: JSON.stringify({ vectors }),
});

// 删除向量
await fetch(`${API_BASE}/vectorize/v2/indexes/${INDEX_NAME}/delete-by-ids`, {
  method: "POST",
  headers: { Authorization: `Bearer ${API_TOKEN}` },
  body: JSON.stringify({ ids: batch }),
});

// 查询（Worker 运行时通过绑定调用，不需要 API Token）
const results = await env.VECTORIZE.query(queryVector, {
  topK: 10,
  returnMetadata: true,
});

五、Worker 端问答流程

src/worker.js 中的 handleAIChat 处理 /api/ai-chat：

1、统一配置管理

所有 AI 相关配置集中在 src/config/aiSearchConfig.ts，前端组件、构建脚本、Worker 三方共享：

export const aiSearchConfig = {
  apiUrl: "https://api-inference.modelscope.cn/v1",  // API 地址
  modelName: "deepseek-ai/DeepSeek-V4-Flash",         // LLM 对话模型
  embeddingModel: "Qwen/Qwen3-Embedding-8B",          // 向量模型
  vectorizeDim: 1024,                                  // 向量维度
  batchSize: 500,                                      // 构建脚本批大小
  embedBatchSize: 50,                                  // Embedding 请求批大小
  indexName: "blog-ai-search",                         // Vectorize 索引名
};

Worker 运行时通过 getAiConfig(env) 读取配置，非敏感项从 aiSearchConfig 取值，仅 API Key 从环境变量 env.AI_API_KEY 注入。当配置项和 API Key 都存在时走第三方 API，否则回退到 Cloudflare Workers AI 内置模型。

2、Embedding

async function getEmbedding(env, text) {
  const cfg = getAiConfig(env);
  if (useThirdParty(env)) {
    const res = await fetch(buildApiUrl(cfg.apiUrl, "/v1/embeddings"), {
      method: "POST",
      headers: {
        Authorization: `Bearer ${cfg.apiKey}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: cfg.embeddingModel,
        input: text,
        dimensions: cfg.vectorizeDim,
        encoding_format: "float",
      }),
    });
    if (!res.ok)
      throw new Error(`Embedding API ${res.status}: ${await res.text()}`);
    const data = await res.json();
    return data.data?.[0]?.embedding;
  }
  const result = await env.AI.run("@cf/baai/bge-base-en-v1.5", { text });
  return result.data[0];
}

模型名和维度均从 aiSearchConfig 读取，切换模型只需改配置文件。

3、向量检索

const queryVector = await getEmbedding(env, question);
const results = await env.VECTORIZE.query(queryVector, {
  topK: 10,
  returnMetadata: true,
});

过滤 score < 0.2 的低相似度结果，按 articlePath 去重后拼接上下文。每条匹配结果格式为 【文章标题 - 章节标题】\n摘要，用 --- 分隔。去重后的文章信息（标题、路径、发布日期、摘要、相似度分数）作为 refs 事件先于回答发送。

4、Prompt 拼接与 system 注入防护

系统提示（system prompt）决定了 AI 的人格和行为准则。如果用户通过构造请求在 history 中插入 role: "system" 的消息，就可能覆盖或绕过预设人格——这称为 system 注入攻击。

防护措施：在拼接 messages 之前，过滤掉 history 中所有 role === "system" 的条目，确保只有服务端硬编码的 systemPrompt 生效：

const safeHistory = history.filter((m) => m.role !== "system").slice(-6);

const messages = [
  { role: "system", content: systemPrompt },
  ...safeHistory,
  { role: "user", content: question },
];

当前人格设定为猫娘「喵墩」，系统提示包含完整的角色背景、语言规范、性格画像等，与博客检索规则拼接后传给 LLM。

5、流式返回

SSE 格式，四种事件类型：

data: {"type":"refs","articles":[...]}   ← 参考文章（先发）
data: {"type":"chunk","text":"..."}       ← 回答文本片段
data: {"type":"error","error":"..."}      ← 错误信息
data: {"type":"done"}                     ← 结束

LLM 后端由 aiSearchConfig 决定：配置了 apiUrl + modelName + AI_API_KEY 时走第三方 API（OpenAI 兼容格式流），否则回退 Workers AI（@cf/meta/llama-3-8b-instruct，Cloudflare 原生流）。

六、前端组件

src/components/controls/AISearch.svelte，Svelte 5 + runes。

核心交互：

• 入口：导航栏「工具」菜单触发 toggle-ai-search 事件，或 Ctrl+K 快捷键
• 聊天面板：全屏遮罩 + 居中卡片，移动端底部弹起
• 流式渲染：逐字显示（打字机效果），光标闪烁动画
• 参考文章：AI 回答下方显示可点击的原文链接
• 多轮对话：保留最近 6 条历史消息作为上下文
• Markdown 渲染：使用 marked 库，支持代码块、列表、引用
• 会话管理：localStorage 持久化，支持新建、切换、删除、上限控制
• 建议按钮：空对话时显示预设问题，点击直接发送
• 模型名显示：标题栏展示当前使用的对话模型名称
• 停止生成：生成中可点击停止按钮中断流式响应
• 错误处理：SSE error 事件和请求异常均以引用块形式展示

关键状态管理：

let messages = $state<Message[]>([]);
let isLoading = $state(false);
let abortCtrl: AbortController | null = null;
let reader: ReadableStreamDefaultReader<Uint8Array> | null = null;
let sessionId = $state("");
let sessionList = $state<SessionMeta[]>([]);
let showSessionList = $state(false);

流式读取使用 ReadableStream + TextDecoder，逐行解析 SSE data。生成中可通过 AbortController 中断请求，同时取消 reader。前端处理四种 SSE 事件：refs（参考文章）、chunk（文本片段）、error（错误信息）、done（结束）。

1、会话管理

1.1 数据结构设计

interface SessionMeta {
  id: string;      // 会话唯一标识
  title: string;   // 自动提取的第一条用户消息（前20字）
  updatedAt: number; // 最后更新时间戳
}

localStorage 存储策略：

• ai-chat:sessions — 会话元数据列表（JSON 数组）
• ai-chat:session:{id} — 单个会话的完整消息记录

1.2 新建会话

标题栏「新建会话」按钮（add-circle-outline 图标），点击后：

1. 保存当前会话到 localStorage
2. 生成新的 sessionId
3. 清空消息列表，开始新对话

function startNewSession() {
  saveCurrentSession();
  sessionId = generateSessionId();
  messages = [];
  showSessionList = false;
}

1.3 历史会话列表

标题栏「历史」按钮（history 图标），点击展开/收起下拉面板：

{#if showSessionList}
  <div class="ai-session-list">
    {#each sessionList as sess}
      <button
        class="ai-session-item"
        class:ai-session-item-active={sess.id === sessionId}
        onclick={() => switchSession(sess.id)}
      >
        <div class="ai-session-info">
          <span class="ai-session-title">{sess.title}</span>
          <span class="ai-session-time">{formatTime(sess.updatedAt)}</span>
        </div>
        <!-- 悬停显示删除按钮 -->
        <span onclick={(e) => { e.stopPropagation(); deleteSession(sess.id); }}>
          <Icon icon="material-symbols:close" size="sm" />
        </span>
      </button>
    {/each}
  </div>
{/if}

1.4 会话切换

点击历史会话项切换到该会话，自动保存当前会话后加载目标会话的消息：

function switchSession(id: string) {
  if (id === sessionId) { showSessionList = false; return; }
  saveCurrentSession();
  sessionId = id;
  messages = loadSessionMessages(id);
  showSessionList = false;
  scrollToBottom();
}

1.5 会话删除

鼠标悬停会话项时出现删除按钮（close 图标），删除后若删除的是当前会话则自动新建会话：

function deleteSession(id: string) {
  localStorage.removeItem(STORAGE_SESSION_PREFIX + id);
  sessionList = sessionList.filter((s) => s.id !== id);
  saveSessionListToStorage(sessionList);
  if (id === sessionId) {
    startNewSession();
  }
}

1.6 会话上限与自动清理

最多保留 20 个会话，超出时自动清理最旧的：

const MAX_SESSIONS = 20;

// 保存时检查上限
if (sessionList.length > MAX_SESSIONS) {
  const removed = sessionList.splice(MAX_SESSIONS);
  for (const s of removed) {
    localStorage.removeItem(STORAGE_SESSION_PREFIX + s.id);
  }
}

1.7 自动保存时机

• 每次 AI 回复完成后：send() 的 finally 块中调用 saveCurrentSession()
• 组件卸载时：onMount 返回的清理函数中保存
• 新建/切换会话前：先保存当前会话再操作

function saveCurrentSession() {
  if (!sessionId || messages.length === 0) return;
  if (messages.some((m) => m.streaming)) return; // 流式中不保存
  localStorage.setItem(STORAGE_SESSION_PREFIX + sessionId, JSON.stringify(messages));
  // 更新 sessionList 元数据...
}

1.8 初始化恢复

组件挂载时自动恢复最近会话：

onMount(() => {
  sessionList = loadSessionListFromStorage();
  if (sessionList.length > 0) {
    const latest = sessionList[0];
    sessionId = latest.id;
    messages = loadSessionMessages(latest.id);
  } else {
    sessionId = generateSessionId();
  }
  // ...
  return () => {
    saveCurrentSession(); // 卸载时保存
  };
});

七、敏感配置处理

非敏感配置集中在 src/config/aiSearchConfig.ts，三方共享。敏感信息（API Key）的配置方式见上文「Worker Secret 配置」小节。

八、资源消耗

个人博客完全够用。

九、文件清单

十、踩坑记录

1. 向量维度不一致

构建脚本用第三方 API 生成 1024 维向量，但 Vectorize 索引创建时指定了 768 维（Workers AI 的默认值）——写入直接报错。必须保证 VECTORIZE_DIM 和索引创建时的 --dimensions 一致。

2. Embedding URL 拼接

第三方 API 的 base URL 可能带 /v1 或 /chat/completions 后缀，需要统一清理再拼 /v1/embeddings：

function buildApiUrl(base, suffix) {
  return base
    .replace(/\/+$/, "")
    .replace(/\/v1\/?$/, "")
    .replace(/\/chat\/completions\/?$/, "") + suffix;
}

3. Workers AI 流式响应格式

Workers AI 的流式响应和 OpenAI SSE 格式不同，不能用同一套解析逻辑。需要分别处理，且 Workers AI 可能回退到非流式模式（需要额外处理 response 字段）。

4. 相似度阈值

Vectorize 返回的 cosine score 分布因 embedding 模型而异。实测 Qwen3-Embedding 的 score 整体偏低，0.2 以下基本是无关内容。阈值需要根据实际效果调整。

项目：Qwen3 企业知识库助手（FastAPI + 单页前端 + 本地向量库） 本笔记包含：RAG 原理 → 保姆级安装部署（每步含预期输出）→ 完整源码 → 故障排查复盘 所有报错案例均来自真实部署过程，可直接对照排错。

目录

• 一、项目是什么
• 二、RAG 原理（人话版）
• 三、项目结构
• 四、保姆级教程 Part A：云端部署（零基础照做）
• 五、保姆级教程 Part B：本地 Ollama 私有化模式（Windows）
• 六、日常运维
• 七、进阶：设备健康日报（数据分析 × 大模型）
• 八、完整源码
• 九、故障排查复盘
• 十、可扩展方向
• 附录 A：验收测试文档全文（CNC-8800 设备维护手册）
• 附录 B：四题验收测试用例（回归验证标准）

一、项目是什么

企业知识库问答系统：上传企业文档（txt/md/pdf）→ 自动切分、向量化入库 → 用户提问 → 检索相关片段 → 大模型带引用回答。支持 SSE 流式输出、多轮对话、访问令牌鉴权，一套代码可在"云端 API"与"本地 Ollama 私有化"之间一键切换。

二、RAG 原理（人话版）

RAG = 检索增强生成 = 先查资料，再回答（开卷考试）：

用户提问 → 问题向量化 → 向量库检索 Top-6 相似片段
        → 片段拼入提示词 → 大模型照着资料回答 → 附带 [1][2] 引用

三、项目结构

qwen3-demo/
├── backend/
│   ├── main.py           # FastAPI 主服务（问答 / 上传 / 日报 / 调试接口）
│   ├── rag_store.py      # 切分 + 向量库 + 检索
│   ├── report.py         # 设备健康日报（数据分析 × 大模型）
│   ├── data/             # equipment_data.csv 传感器数据 + 设备手册.txt
│   └── requirements.txt
├── frontend/index.html   # 聊天界面 + 知识库侧栏 + 健康日报按钮
├── deploy.sh             # 服务器一键部署脚本
└── README.md

四、保姆级教程 Part A：云端部署

A0. 准备清单（开始前备齐）

为什么 2核2G 够：服务器不跑模型，只做转发，推理在百炼云端完成。

A1. 购买并初始化服务器

1. 选「轻量应用服务器」→ 规格 2核2G（预算够选 2核4G）
2. 地域选离你近的（如上海/杭州）；镜像选 Ubuntu Server 22.04 LTS 64 位
3. 系统盘 50G SSD 足够；时长建议年付（活动价更划算）
4. 下单后进控制台做两件事：
   • 防火墙/安全组放行 80 端口（TCP，来源 0.0.0.0/0）——忘了这步浏览器打不开页面
   • 重置 root 密码并记好
5. 记下实例的公网 IP

A2. 创建百炼 API Key

1. 打开 bailian.console.aliyun.com → 首次进入按引导免费开通
2. 「API-KEY 管理」→ 创建 API-KEY → 复制
3. 核对格式：sk- 开头 + 32 位左右字母数字，中间没有空格、点号、等号 （真实踩坑：复制错了来源，Key 里混入点号长串，部署后调用必然失败）
4. ⚠️ Key 等同密码：不进聊天记录、不进代码仓库、只填服务器环境变量

A3. 把代码上传到服务器（二选一）

方式 A：网页终端上传（最简单，推荐新手）

1. 控制台点「登录」打开网页终端，用户名是 ubuntu
2. 把电脑上的 qwen3-demo.zip 通过终端右上角文件夹（上传）图标上传
3. 文件会落在 /home/ubuntu/ 下

方式 B：scp 命令上传（在你自己电脑的终端执行）

scp -r qwen3-demo root@服务器IP:/opt/

A4. 在服务器上执行部署（逐条命令 + 预期结果）

打开网页终端，逐条复制执行（每条之间等上一条跑完）：

# ① 切换到 root（提示符从 ubuntu@ 变成 root@）
sudo -i

# ② 安装解压工具（通常已装）
apt install -y unzip

# ③ 解压到 /opt（注意：文件名中间没有任何空格）
unzip /home/ubuntu/qwen3-demo.zip -d /opt/

✅ 预期输出：一串 creating: /opt/qwen3-demo/... 和 inflating: ...

# ④ 验证解压结果
ls /opt/qwen3-demo/backend

✅ 预期：看到 main.py rag_store.py requirements.txt

# ⑤ 配置环境变量（三条分别执行，= 后面换成你的值）
export LLM_API_KEY=sk-你的百炼Key
export ACCESS_TOKEN=起一个8位以上的访问令牌

✅ 预期：没有任何输出（Linux 的惯例：没消息就是好消息） ⚠️ 手动敲 export LLM_API_KEY=，然后只粘贴 Key 本身——整行粘贴容易带进多余字符

# ⑥ 一键部署
cd /opt/qwen3-demo
LLM_API_KEY=$LLM_API_KEY ACCESS_TOKEN=$ACCESS_TOKEN bash deploy.sh

✅ 预期：依次输出 1/5→5/5，最后打印 部署完成！浏览器访问: http://你的IP/?token=你的令牌

脚本自动完成：装依赖 → 配 2G swap → systemd 常驻服务（崩溃自动拉起、开机自启）→ Nginx 托前端 + 反向代理

A5. 验收测试（4 步）

1. 电脑浏览器打开 http://服务器IP/?token=你的令牌 → 看到"小千"聊天界面
2. 发"你好" → 流式打字机回答 = 后端 + 大模型 API 通
3. 手机关 Wi-Fi 用流量再开一次 = 公网访问无死角
4. 「📚 知识库」上传一份文档 → 提问文档内容 → 回答带 [1][2] 引用 = RAG 全链路通

A6. 常见报错速查表（全部真实踩过）

A7. 保姆级经验：粘贴命令的纪律

网页终端粘贴长命令容易夹带字符（~、空格、换行）。三条纪律：

1. 长命令拆短：环境变量用分步 export，别一行贴完
2. 回车前逐字符核对：和预期命令比对一遍再按
3. 每步看预期输出：A4 里每条命令都写了"预期输出"，不符就停下排查

五、保姆级教程 Part B：本地 Ollama 私有化模式（Windows）

目的：让模型真正跑在自己电脑上（数据不出本机），也是"本地私有化部署"的演示素材。

B1. 安装 Ollama

1. 打开 ollama.com/download → 下载 Windows 版 → 双击安装
2. 装完任务栏出现羊驼图标 = 后台服务已启动（无需任何配置）

B2. 拉取模型

PowerShell 执行：

ollama pull qwen3:8b      # 约 5GB，网慢可以睡前挂着

B3. 验证（三连）

ollama run qwen3:8b "介绍一下你自己"

→ 能流式回答即成功。

nvidia-smi

→ 应看到 python 进程占用数 GB 显存 = GPU 在干活（录演示视频必带这个画面）。

断网测试：关掉 Wi-Fi 再对话 → 依然能答 = 真·本地私有化。

B4. 把本项目切换成本地模式（Windows CMD）

cd qwen3-demo\backend
pip install -r requirements.txt

set LLM_BASE_URL=http://localhost:11434/v1
set LLM_API_KEY=ollama
set QWEN_MODEL=qwen3:8b
set EMBED_MODEL=bge-m3

uvicorn main:app --port 8000

前置：ollama pull bge-m3（嵌入模型，约 1.2GB）。 打开 frontend/index.html（直接双击即可，前端会自动回退到 localhost:8000）→ 上传文档 → 带引用回答，全程不联网。

B5. 录"私有化部署"演示视频脚本（2 分钟）

1. ollama pull qwen3:8b 过程（模型下载到本地）
2. nvidia-smi 显存占用画面
3. 终端对话演示
4. 断网后继续对话（点任务栏网络图标断 Wi-Fi）→ "数据不出本机"
5. （进阶）切到浏览器展示本地模式 RAG 问答

B6. 硬件参考（GTX 1650Ti 4G / 16G 内存实测）

六、日常运维

systemctl restart qwen-api        # 改代码/改配置后重启
journalctl -u qwen-api -f         # 实时日志
curl -s http://127.0.0.1:8000/api/kb   # 知识库状态

• 更新代码：重新上传 zip → unzip -o /home/ubuntu/qwen3-demo-vX.zip -d /opt/ → systemctl restart qwen-api

• 换 API Key / 令牌：

  sed -i 's|LLM_API_KEY=.*|LLM_API_KEY=sk-新Key|' /etc/systemd/system/qwen-api.service
  sed -i 's/ACCESS_TOKEN=.*/ACCESS_TOKEN=新令牌/' /etc/systemd/system/qwen-api.service
  systemctl daemon-reload && systemctl restart qwen-api
  

• 改了切分逻辑后：必须「清空知识库」重新上传文档（旧向量是旧切分生成的，不重建无效）

• 知识库防重复：同一文档重复上传会追加入库不去重——重传前先清空

七、进阶：设备健康日报（数据分析 × 大模型）

把"传感器数据分析"和"大模型解读"串成完整业务闭环 —— Pandas 算指标 → 检索手册建议 → 大模型写给车间主任看的日报。 这是整个项目里最能体现「制造业 + AI」岗位匹配度的功能，面试必讲。

7.1 为什么做这个功能

做纯 RAG 问答（上传手册→提问→回答）只能证明"会调 API"，而工厂场景的真实痛点是：

• 数据在传感器/SCADA 里躺着，没人看得懂、没人有空看；
• 老师傅的经验在纸质手册里，新员工查不到；
• 日报靠人工抄表写 Excel，滞后且主观。

本功能把它们串成一条自动链路：数据自己会说话，模型负责"翻译"成人话。这正是 FDE（制造业方向）岗位的核心工作：懂产线 + 会用 AI 解决真实问题。

7.2 整体架构（五步链路）

传感器 CSV ──► ①清洗 ──► ②双规则异常检测 ──► ③汇总 24h 指标
                                              │
                    设备手册.txt ──► ④关键词检索处置建议
                                              │
                                              ▼
                              ⑤大模型生成自然语言日报（qwen-turbo）

关键认知：大模型不连传感器。它待在链路最上层，吃的是已经变成文本/表格的数据；采集层（PLC/Modbus/网关/SCADA）属于工业物联网范畴，两者通过数据库或文件交接。

对应代码两份（同一套逻辑，两种载体）：

7.3 五个步骤逐个拆解（含代码）

① 数据清洗 —— 工业数据的"脏"是常态

def _clean(df: pd.DataFrame) -> pd.DataFrame:
    df = df.drop_duplicates()                      # 去重复采集
    for col in ["temperature", "vibration", "current"]:
        df.loc[df[col] == 0, col] = np.nan         # 0 值是断线，不是真 0
    df = df.sort_values(["machine_id", "timestamp"])
    for col in ["temperature", "vibration", "current"]:
        df[col] = df.groupby("machine_id")[col].transform(   # 关键：transform
            lambda s: s.interpolate(limit_direction="both").fillna(s.median())
        )
    return df

三个要点（面试追问高发区）：

1. 0 值当缺失处理：传感器断线时常上报 0，直接拿去算会把均值拉爆，必须先转 NaN；
2. 按设备分组插值：CNC-01 的缺失绝不能拿 CNC-02 的数据补，所以 groupby("machine_id")；
3. 为什么用 transform 而不是 apply：Pandas 新版本里 groupby().apply() 会丢失分组列（machine_id 列消失，后续逻辑直接报 KeyError），transform 返回与原表同索引的 Series，赋值回列天然对齐 —— 真实踩过的坑。

② 双规则异常检测 —— 规则 + 统计，互相兜底

WINDOW, SIGMA = 48, 3.0
THRESH = {"vib_high": 4.5, "temp_high": 75.0}

# 规则 1：固定阈值（老师傅经验）
df["rule_alert"] = (df["temperature"] > 75) | (df["vibration"] > 4.5)

# 规则 2：滚动 3σ（跟自己比，能抓"慢性劣化"）
m = g[col].rolling(48, min_periods=24).mean()
s = g[col].rolling(48, min_periods=24).std()
z = (当前值 - m) / s
g["sigma_alert"] = (temperature_z.abs() > 3) | (vibration_z.abs() > 3)

df["alert"] = df["rule_alert"] | df["sigma_alert"]   # 任一触发即算异常

为什么两条规则都要：

窗口大小的权衡（实测验证过）：窗口太小（如 6 点），均值/方差被当前值主导，计算不准、误报多；窗口太大，劣化趋势被"摊薄"，报警延迟，等于无效数据。实测 48 点 + min_periods=24 半窗起步，效果最平衡。

③ 汇总 24 小时指标 —— 给模型"喂"结构化数据

latest = df[df["timestamp"] >= df["timestamp"].max() - pd.Timedelta(hours=23)]
prev   = df[(df["machine_id"] == mid) &
            (df["timestamp"] < df["timestamp"].max() - pd.Timedelta(hours=24))]
item = {
    "设备": mid,
    "平均温度": round(g["temperature"].mean(), 1),
    "最高振动": round(g["vibration"].max(), 2),
    "振动环比": f"{(vib_now - vib_prev) / vib_prev * 100:+.1f}%",   # 环比前一个 24h
    "产量": int(g["output_count"].sum()),
    "异常次数": int(g["alert"].sum()),
}
# 三档风险分级
if 异常次数 >= 8 or 最高振动 > 5.3:      风险 = "高风险"
elif 异常次数 >= 3 or 最高振动 > 4.0:    风险 = "关注"
else:                                    风险 = "正常"

④ 检索手册处置建议 —— 让日报"有出处"

def lookup_manual(keyword: str) -> str:
    text = open(MANUAL, encoding="utf-8").read()
    for block in text.split("\n\n"):
        if keyword in block:
            return block.strip()[:300]
    return ""

# 触发逻辑：温度异常查「主轴过热」段落，振动异常查「振动」段落
tip = lookup_manual("主轴过热") if m["平均温度"] > 60 else lookup_manual("振动")

设计意图：日报不能只有"振动高了"，还得告诉车间主任该干什么（点检哪一项、加什么油、多少压力）。这里是轻量关键词检索；知识库模块的向量 RAG（余弦检索 + 0.45 阈值）是它的升级版 —— 两个版本都做过，面试可以对比讲。

⑤ 大模型生成日报 —— 提示词工程 + 防幻觉

prompt = (
    "你是工厂设备管理员助手。根据以下设备监控数据，写一份给车间主任看的《设备健康日报》。\n"
    "要求：① 先一句话说总体情况；② 高风险设备单独列出问题和建议动作；"
    "③ 语言简洁、面向一线，不要堆砌术语；④ 不超过 300 字。\n\n"
    f"监控数据：\n{body}\n"
    + ("\n参考建议：\n" + "\n".join(hints) if hints else "")
)

防幻觉三板斧（和 RAG 问答模块同一思路）：

1. 只给结构化数字，不让模型"回忆"数据 —— 数字全部由 Pandas 算好，模型只负责组织语言；
2. 给手册原文当参考建议，建议动作有出处；
3. 限定读者（车间主任）+ 字数上限，输出稳定可读。

容错降级设计（工程素养体现）：

• 未配置 LLM_API_KEY → 只输出结构化数据，不报错；
• 模型调用失败（401/网络）→ 降级为结构化数据 —— 日报功能永不因 AI 故障而中断；
• 数据文件缺失 → 返回明确 error 提示。

7.4 实测输出（本项目真实结果）

验证点：generate_data.py 在 CNC-02 的数据里埋了一个"轴承渐进劣化"剧本（振动逐日抬升），系统成功捕获 —— 振动环比 +97.6%、异常 23 次，判为高风险。这说明 3σ 检测 + 环比指标的组合确实能抓慢性故障。

大模型据此生成的日报示例：

"今日 3 台设备中 CNC-02 存在高风险：振动环比上升 97.6%、平均温度升至 65℃，建议检查主轴轴承，参考手册 2.1 节处置流程；CNC-03 需关注，CNC-01 正常。"

7.5 怎么用（三种方式）

方式 1：网页点按钮（融合版）

前端「📊 设备健康日报」按钮 → 调 GET /api/report?token=令牌 → 同页展示结构化指标 + AI 日报全文。

curl "http://服务器IP/api/report?token=你的令牌"
# 返回 {"summary": {...}, "report": "……日报全文……"}

方式 2：命令行手动跑（独立脚本）

cd device-analytics
python3 daily_report.py                          # 无 Key 也能跑（只出结构化数据）

# 云端百炼
export LLM_API_KEY=sk-xxx && python3 daily_report.py

# 本地 Ollama（数据不出本机，适合保密车间）
export LLM_BASE_URL=http://localhost:11434/v1 LLM_API_KEY=ollama QWEN_MODEL=qwen3:8b
python3 daily_report.py

方式 3：cron 每天自动生成 + 企业微信推送

crontab -e
# 每天 07:30 生成日报并推送到企业微信群机器人
30 7 * * * cd /opt/device-analytics && /usr/bin/python3 daily_report.py >> /var/log/daily_report.log 2>&1

推送思路：拿到日报文本后 requests.post(企微webhook, {"msgtype": "text", "text": {"content": 日报}})，车间主任每天早班在群里直接看到。

7.6 本功能踩坑记录（真实排查）

经验：鉴权方式要全接口统一。聊天接口用 Depends(require_token) 读请求头，日报/调试接口却手写读 URL 参数，两套写法并存就埋了这种 bug——重构时应统一为一个依赖项。

7.7 面试怎么讲（90 秒版本）

"我做过一个设备健康日报功能，解决的是工厂里数据没人看、经验传不下去的问题。链路是：传感器 CSV 先做清洗——0 值当断线缺失处理、按设备分组插值；然后双规则异常检测——固定阈值抓突发超标，滚动 3σ 抓慢性劣化，比如轴承磨损每天涨一点，固定阈值永远报警不了，3σ 就能抓到；接着汇总最近 24 小时指标，算振动环比；再从设备手册检索处置建议；最后让大模型把结构化数据翻译成给车间主任看的 300 字日报。数字全部由 Pandas 计算，模型只负责组织语言，所以不会幻觉出错误数据。我还做了降级：模型挂了就直接输出结构化数据，日报不断。真实数据里埋了一个轴承劣化剧本，系统成功抓到 CNC-02 振动环比涨了 97.6%，判为高风险。"

高频追问预案：

• 为什么不用大模型直接算数据？ —— 大模型算数不可靠且贵，正确的架构是"代码算数字、模型说人话"，各干各擅长的事。
• 3σ 误报怎么办？ —— 加环比和异常次数做三档风险分级，单点毛刺不会直接判高风险；生产上还可以加"连续 N 点超限才报警"的持久性判断。
• 数据量大了怎么办？ —— 现在 numpy 单机处理几万行足够；量大后检测可以下沉到时序数据库（如 TDengine/InfluxDB）的连续查询，日报只取聚合结果。
• 和 RAG 什么关系？ —— 同一套"检索→生成"思想：RAG 检索文档片段，日报检索手册处置建议；日报是"结构化数据 + 检索增强"的组合应用。

八、完整源码

8.1 backend/main.py

"""
Qwen3 演示项目 - 后端（含 RAG 知识库）
两种模式（环境变量切换）：云端 API / 本地 Ollama 私有化
"""
import io
import json
import os

import httpx
from fastapi import Depends, FastAPI, Header, HTTPException, UploadFile
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import StreamingResponse
from pydantic import BaseModel, Field

from rag_store import VectorStore, chunk_text

# ---------------- 配置 ----------------
LLM_BASE_URL = os.getenv("LLM_BASE_URL", "https://dashscope.aliyuncs.com/compatible-mode/v1")
LLM_API_KEY = os.getenv("LLM_API_KEY", os.getenv("DASHSCOPE_API_KEY", ""))
CHAT_MODEL = os.getenv("QWEN_MODEL", "qwen-turbo")
EMBED_MODEL = os.getenv("EMBED_MODEL", "text-embedding-v3")
CHAT_URL = f"{LLM_BASE_URL}/chat/completions"
EMBED_URL = f"{LLM_BASE_URL}/embeddings"
ALLOWED_EXT = {".txt", ".md", ".pdf"}
# 公网部署必配：设置后所有 /api/* 请求需携带 X-Access-Token 头
ACCESS_TOKEN = os.getenv("ACCESS_TOKEN", "")

def require_token(x_token: str | None = Header(default=None, alias="X-Access-Token")):
    if ACCESS_TOKEN and x_token != ACCESS_TOKEN:
        raise HTTPException(401, "缺少或错误的访问令牌（联系管理员获取）")

app = FastAPI(title="Qwen3 RAG Demo API")
app.add_middleware(
    CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"]
)

kb = VectorStore()
kb.load()

# ---------------- 基础工具 ----------------
async def embed_texts(texts: list[str]) -> list[list[float]]:
    """批量向量化（百炼单次最多 10 条，分批调用）。"""
    out: list[list[float]] = []
    async with httpx.AsyncClient(timeout=60) as client:
        for i in range(0, len(texts), 10):
            r = await client.post(
                EMBED_URL,
                headers={"Authorization": f"Bearer {LLM_API_KEY}"},
                json={"model": EMBED_MODEL, "input": texts[i : i + 10]},
            )
            if r.status_code != 200:
                raise HTTPException(502, f"向量化失败: {r.text[:300]}")
            items = r.json()["data"]
            out += [item["embedding"] for item in sorted(items, key=lambda x: x["index"])]
    return out

def extract_pdf(data: bytes) -> str:
    try:
        from pypdf import PdfReader
    except ImportError:
        raise HTTPException(500, "服务器未安装 pypdf（pip install pypdf）")
    reader = PdfReader(io.BytesIO(data))
    return "\n".join(page.extract_text() or "" for page in reader.pages)

def extract_text(filename: str, data: bytes) -> str:
    ext = os.path.splitext(filename)[1].lower()
    if ext not in ALLOWED_EXT:
        raise HTTPException(400, f"仅支持 {'/'.join(ALLOWED_EXT)} 格式")
    if ext == ".pdf":
        return extract_pdf(data)
    return data.decode("utf-8", errors="ignore")

# ---------------- 接口 ----------------
class ChatMessage(BaseModel):
    role: str = Field(pattern="^(system|user|assistant)$")
    content: str

class ChatRequest(BaseModel):
    messages: list[ChatMessage]
    max_tokens: int = 1024

@app.get("/api/health")
def health():
    return {"status": "ok", "model": CHAT_MODEL, "kb_chunks": kb.count}

@app.post("/api/upload")
async def upload(file: UploadFile, _=Depends(require_token)):
    if not LLM_API_KEY:
        raise HTTPException(500, "服务端未配置 LLM_API_KEY")
    data = await file.read()
    if len(data) > 10 * 1024 * 1024:
        raise HTTPException(400, "文件超过 10MB 限制")
    text = extract_text(file.filename, data)
    if len(text.strip()) < 10:
        raise HTTPException(400, "未能提取到有效文本内容")
    chunks = chunk_text(text)
    vectors = await embed_texts(chunks)
    n = kb.add(file.filename, chunks, vectors)
    return {"doc": file.filename, "chunks": n, "kb_total_chunks": kb.count}

@app.get("/api/kb")
def kb_status():
    docs = {}
    for m in kb.meta:
        d = docs.setdefault(m["doc_id"], {"name": m["name"], "chunks": 0})
        d["chunks"] += 1
    return {"total_chunks": kb.count, "docs": list(docs.values())}

@app.delete("/api/kb")
def kb_clear():
    kb.clear()
    return {"status": "cleared"}

@app.get("/api/debug")
async def debug_search(q: str, token: str = ""):
    """调试接口：透视某问题的检索命中片段（排查 RAG 问题的关键工具）"""
    if ACCESS_TOKEN and token != ACCESS_TOKEN:
        raise HTTPException(401, "令牌错误")
    if kb.count == 0:
        return {"q": q, "kb_chunks": 0, "hits": []}
    q_vec = (await embed_texts([q]))[0]
    hits = kb.search(q_vec, top_k=6)
    return {
        "q": q, "kb_chunks": kb.count,
        "hits": [{"score": h["score"], "text": h["text"][:150]} for h in hits],
    }

@app.post("/api/chat")
async def chat(req: ChatRequest, _=Depends(require_token)):
    if not LLM_API_KEY:
        raise HTTPException(500, "服务端未配置 LLM_API_KEY")
    last_user = next((m.content for m in reversed(req.messages) if m.role == "user"), "")
    if not last_user:
        raise HTTPException(400, "缺少用户消息")

    # ---- RAG 检索 ----
    sources, context_block = [], ""
    if kb.count > 0:
        q_vec = (await embed_texts([last_user]))[0]
        hits = kb.search(q_vec, top_k=6)
        if hits:
            refs = "\n\n".join(
                f"[{i + 1}] （来源：{h['name']}）\n{h['text']}"
                for i, h in enumerate(hits)
            )
            context_block = (
                f"以下是知识库中检索到的参考资料：\n\n{refs}\n\n"
                "回答要求（必须严格遵守）：\n"
                "1. 只能依据参考资料回答具体问题；若参考资料中找不到答案，"
                "必须第一句就说明「知识库中没有相关内容」，不得编造数字或事实；\n"
                "2. 依据资料回答时，在对应内容后标注引用序号，如 [1]；\n"
                "3. 参考资料与问题无关时，忽略资料，不要引用。"
            )
            sources = [
                {"idx": i + 1, "name": h["name"], "score": h["score"],
                 "snippet": h["text"][:120] + ("…" if len(h["text"]) > 120 else "")}
                for i, h in enumerate(hits)
            ]

    system_prompt = (
        "你是企业智能助手「小千」，回答简洁、专业、友好。"
        + (("\n\n" + context_block) if context_block else "")
    )

    payload = {
        "model": CHAT_MODEL,
        "messages": [
            {"role": "system", "content": system_prompt},
            *[m.model_dump() for m in req.messages],
        ],
        "max_tokens": req.max_tokens,
        "stream": True,
        "enable_thinking": False,
    }
    headers = {"Authorization": f"Bearer {LLM_API_KEY}"}

    async def event_stream():
        async with httpx.AsyncClient(timeout=120) as client:
            async with client.stream("POST", CHAT_URL, json=payload, headers=headers) as r:
                if r.status_code != 200:
                    body = (await r.aread()).decode("utf-8", "ignore")
                    yield f"data: {json.dumps({'error': body})}\n\n"
                    return
                async for line in r.aiter_lines():
                    if line.startswith("data:"):
                        chunk = line[5:].strip()
                        if chunk == "[DONE]":
                            break
                        try:
                            delta = json.loads(chunk)["choices"][0]["delta"].get("content", "")
                        except Exception:
                            continue
                        if delta:
                            yield f"data: {json.dumps({'content': delta}, ensure_ascii=False)}\n\n"
        if sources:
            yield f"data: {json.dumps({'sources': sources}, ensure_ascii=False)}\n\n"
        yield "data: [DONE]\n\n"

    return StreamingResponse(
        event_stream(),
        media_type="text/event-stream",
        headers={"Cache-Control": "no-cache", "X-Accel-Buffering": "no"},
    )

8.2 backend/rag_store.py

"""
轻量级本地向量知识库
- 不依赖外部数据库：向量存 numpy 文件、元数据存 JSON
- 中文友好切分（语义边界 + 重叠）；余弦相似度检索
- 生产环境可平滑替换为 Qdrant/Milvus，接口不变
"""
import json
import os
import re

import numpy as np

STORE_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "data")
INDEX_PATH = os.path.join(STORE_DIR, "kb_index.npz")
META_PATH = os.path.join(STORE_DIR, "kb_meta.json")

def chunk_text(text: str, size: int = 280, overlap: int = 60) -> list[str]:
    """按长度切分，并在标点/换行边界尽量断开，保留 overlap 重叠。"""
    text = re.sub(r"\r\n?", "\n", text)
    text = re.sub(r"\n{3,}", "\n\n", text).strip()
    if len(text) <= size:
        return [text] if text else []

    chunks, start = [], 0
    while start < len(text):
        end = min(start + size, len(text))
        if end < len(text):
            # 在窗口后 1/3 内寻找语义边界
            window = text[start + size // 2 : end]
            for sep in ["\n\n", "。", "！", "？", "；", "\n", "，"]:
                pos = window.rfind(sep)
                if pos != -1:
                    end = start + size // 2 + pos + len(sep)
                    break
        chunk = text[start:end].strip()
        if chunk:
            chunks.append(chunk)
        if end >= len(text):
            break  # 已覆盖到结尾，防止 start 以 1 字符步进死循环产生大量碎块
        start = max(end - overlap, start + 1)  # 防死循环
    return chunks

class VectorStore:
    def __init__(self):
        os.makedirs(STORE_DIR, exist_ok=True)
        self.vectors = None      # ndarray (n, dim)
        self.meta = []           # [{"doc_id","name","chunk_id","text"}]

    def load(self) -> bool:
        if os.path.exists(INDEX_PATH) and os.path.exists(META_PATH):
            data = np.load(INDEX_PATH)
            self.vectors = data["vectors"]
            with open(META_PATH, encoding="utf-8") as f:
                self.meta = json.load(f)
            return True
        return False

    def save(self):
        if self.vectors is not None:
            np.savez_compressed(INDEX_PATH, vectors=self.vectors)
        with open(META_PATH, "w", encoding="utf-8") as f:
            json.dump(self.meta, f, ensure_ascii=False)

    @property
    def count(self) -> int:
        return 0 if self.vectors is None else len(self.vectors)

    def add(self, doc_name: str, chunks: list[str], vectors: list[list[float]]) -> int:
        new_vec = np.array(vectors, dtype=np.float32)
        self.vectors = new_vec if self.vectors is None else np.vstack([self.vectors, new_vec])
        base = max((m["doc_id"] for m in self.meta), default=0) + 1
        for i, c in enumerate(chunks):
            self.meta.append({"doc_id": base, "name": doc_name, "chunk_id": i, "text": c})
        self.save()
        return len(chunks)

    def search(self, query_vec: list[float], top_k: int = 4) -> list[dict]:
        if self.count == 0:
            return []
        q = np.array(query_vec, dtype=np.float32)
        scores = self.vectors @ q / (
            np.linalg.norm(self.vectors, axis=1) * np.linalg.norm(q) + 1e-9
        )
        top = np.argsort(scores)[::-1][:top_k]
        hits = []
        for i in top:
            if scores[i] < 0.45:  # 相似度过低的丢弃（防弱相关上下文诱发幻觉）
                continue
            m = dict(self.meta[i])
            m["score"] = round(float(scores[i]), 4)
            hits.append(m)
        return hits

    def clear(self):
        self.vectors = None
        self.meta = []
        for p in (INDEX_PATH, META_PATH):
            if os.path.exists(p):
                os.remove(p)

8.3 deploy.sh

#!/bin/bash
# 用法：代码放 /opt/qwen3-demo 后，root 执行：
#   LLM_API_KEY=sk-xxx ACCESS_TOKEN=你的令牌 bash deploy.sh
set -e
if [ -z "$LLM_API_KEY" ] || [ -z "$ACCESS_TOKEN" ]; then
  echo "用法: LLM_API_KEY=sk-xxx ACCESS_TOKEN=你的令牌 bash deploy.sh"; exit 1
fi
[ "$(id -u)" != "0" ] && { echo "请用 root 执行"; exit 1; }
[ ! -d /opt/qwen3-demo/backend ] && { echo "请先把代码上传到 /opt/qwen3-demo"; exit 1; }

echo "==> 1/5 安装基础软件"
apt update -y && apt install -y python3-pip nginx curl

echo "==> 2/5 配置 2G swap"
if [ ! -f /swapfile ]; then
  fallocate -l 2G /swapfile && chmod 600 /swapfile
  mkswap /swapfile && swapon /swapfile
  grep -q swapfile /etc/fstab || echo '/swapfile none swap sw 0 0' >> /etc/fstab
fi

echo "==> 3/5 安装后端依赖"
cd /opt/qwen3-demo/backend
pip3 install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

echo "==> 4/5 配置 systemd 常驻服务"
cat > /etc/systemd/system/qwen-api.service <<EOF
[Unit]
Description=Qwen3 RAG Demo API
After=network.target
[Service]
User=root
WorkingDirectory=/opt/qwen3-demo/backend
Environment=LLM_API_KEY=${LLM_API_KEY}
Environment=QWEN_MODEL=${QWEN_MODEL:-qwen-turbo}
Environment=ACCESS_TOKEN=${ACCESS_TOKEN}
ExecStart=/usr/local/bin/uvicorn main:app --host 127.0.0.1 --port 8000
Restart=always
RestartSec=5
[Install]
WantedBy=multi-user.target
EOF
systemctl daemon-reload && systemctl enable --now qwen-api

echo "==> 5/5 配置 Nginx（前端 + 反向代理）"
cat > /etc/nginx/sites-available/default <<'EOF'
server {
    listen 80 default_server;
    root /var/www/html;
    index index.html;
    location /api/ {
        proxy_pass http://127.0.0.1:8000;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        proxy_buffering off;          # SSE 流式必须关缓冲
        proxy_read_timeout 300s;
    }
}
EOF
cp /opt/qwen3-demo/frontend/index.html /var/www/html/index.html
nginx -t && systemctl reload nginx
sleep 2
curl -s http://127.0.0.1:8000/api/health && echo ""
IP=$(curl -s --connect-timeout 3 ifconfig.me || echo 服务器IP)
echo "部署完成！浏览器访问:  http://${IP}/?token=${ACCESS_TOKEN}"

8.4 frontend/index.html（核心逻辑摘录，完整文件见仓库）

// ① 后端地址与令牌：默认同源（Nginx 反代），可用 URL 参数覆盖
const params = new URLSearchParams(location.search);
const API = params.get("api") || (location.protocol === "file:" ? "http://localhost:8000" : location.origin);
const TOKEN = params.get("token") || "";
const authHeaders = TOKEN ? { "X-Access-Token": TOKEN } : {};

// ② SSE 流式读取（打字机效果核心）
const reader = resp.body.getReader();
const decoder = new TextDecoder();
let buf = "", full = "";
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  buf += decoder.decode(value, { stream: true });
  let idx;
  while ((idx = buf.indexOf("\n\n")) >= 0) {
    const line = buf.slice(0, idx).trim(); buf = buf.slice(idx + 2);
    if (!line.startsWith("data:")) continue;
    const data = line.slice(5).trim();
    if (data === "[DONE]") continue;
    const j = JSON.parse(data);
    if (j.error) throw new Error(j.error);
    if (j.sources) { addSources(j.sources); continue; }   // 引用来源标签
    full += j.content || "";
    bot.textContent = full;                                // 逐字渲染
    chatEl.scrollTop = chatEl.scrollHeight;
  }
}

// ③ 多轮对话记忆：滑动窗口只保留最近 10 轮，控制上下文成本
body: JSON.stringify({ messages: history.slice(-10) })

// ④ 设备健康日报按钮（v7：令牌同时放 URL 参数和请求头，两种鉴权接口都兼容）
document.getElementById("reportBtn").onclick = async () => {
  const el = addMsg("bot", "📊 正在分析设备数据并生成日报…");
  const r = await fetch(API + "/api/report?token=" + encodeURIComponent(TOKEN), { headers: authHeaders });
  const j = await r.json();
  el.textContent = "📊 设备健康日报（最近 24 小时）\n\n" + (j.report || JSON.stringify(j));
};

8.5 backend/report.py（设备健康日报，完整源码）

"""
设备健康日报模块（融合进 qwen3-demo）
链路：传感器 CSV → 清洗 → 双规则异常检测 → 汇总 24h 指标
     → 检索设备手册处置建议 → 大模型生成自然语言日报
"""
import json
import os

import numpy as np
import pandas as pd

# 数据文件默认放在 qwen3-demo/backend/data/ 下，可用环境变量覆盖
DATA_CSV = os.getenv("EQUIPMENT_CSV",
                     os.path.join(os.path.dirname(os.path.abspath(__file__)), "data", "equipment_data.csv"))
MANUAL = os.getenv("EQUIPMENT_MANUAL",
                   os.path.join(os.path.dirname(os.path.abspath(__file__)), "data", "设备手册.txt"))

WINDOW, SIGMA = 48, 3.0
THRESH = {"vib_high": 4.5, "temp_high": 75.0}

LLM_BASE_URL = os.getenv("LLM_BASE_URL", "https://dashscope.aliyuncs.com/compatible-mode/v1")
LLM_API_KEY = os.getenv("LLM_API_KEY", "")
MODEL = os.getenv("QWEN_MODEL", "qwen-turbo")


def _clean(df: pd.DataFrame) -> pd.DataFrame:
    df = df.drop_duplicates()
    for col in ["temperature", "vibration", "current"]:
        df.loc[df[col] == 0, col] = np.nan          # 0 值是断线，不是真 0
    df = df.sort_values(["machine_id", "timestamp"])
    for col in ["temperature", "vibration", "current"]:
        df[col] = df.groupby("machine_id")[col].transform(   # transform 不丢分组列
            lambda s: s.interpolate(limit_direction="both").fillna(s.median())
        )
    return df


def _detect(df: pd.DataFrame) -> pd.DataFrame:
    def rolling_sigma(g: pd.DataFrame) -> pd.DataFrame:
        for col in ["temperature", "vibration"]:
            m = g[col].rolling(WINDOW, min_periods=24).mean()
            s = g[col].rolling(WINDOW, min_periods=24).std()
            g[f"{col}_z"] = ((g[col] - m) / s.replace(0, np.nan)).round(2)
        g["sigma_alert"] = (g["temperature_z"].abs() > SIGMA) | (g["vibration_z"].abs() > SIGMA)
        return g

    df = pd.concat([rolling_sigma(g) for _, g in df.groupby("machine_id")]).sort_index()
    df["rule_alert"] = (df["temperature"] > THRESH["temp_high"]) | (df["vibration"] > THRESH["vib_high"])
    df["alert"] = df["rule_alert"] | df["sigma_alert"]
    return df


def build_summary() -> dict:
    """读取设备数据，完成清洗与检测，汇总最近 24 小时指标。"""
    if not os.path.exists(DATA_CSV):
        return {"error": f"未找到设备数据文件：{DATA_CSV}"}
    df = _detect(_clean(pd.read_csv(DATA_CSV, parse_dates=["timestamp"])))
    latest = df[df["timestamp"] >= df["timestamp"].max() - pd.Timedelta(hours=23)]
    rows = []
    for mid, g in latest.groupby("machine_id"):
        prev = df[(df["machine_id"] == mid) &
                  (df["timestamp"] < df["timestamp"].max() - pd.Timedelta(hours=24))]
        vib_now, vib_prev = g["vibration"].mean(), prev["vibration"].mean()
        item = {
            "设备": mid,
            "平均温度": round(float(g["temperature"].mean()), 1),
            "最高振动": round(float(g["vibration"].max()), 2),
            "振动环比": f"{(vib_now - vib_prev) / vib_prev * 100:+.1f}%",
            "产量": int(g["output_count"].sum()),
            "异常次数": int(g["alert"].sum()),
        }
        if item["异常次数"] >= 8 or item["最高振动"] > THRESH["vib_high"] + 0.8:
            item["风险"] = "高风险"
        elif item["异常次数"] >= 3 or item["最高振动"] > THRESH["vib_high"] - 0.5:
            item["风险"] = "关注"
        else:
            item["风险"] = "正常"
        rows.append(item)
    return {"周期": "最近 24 小时", "设备": rows}


def lookup_manual(keyword: str) -> str:
    """从设备手册中按关键词取处置建议（轻量检索，生产可换 RAG 向量检索）。"""
    if not os.path.exists(MANUAL):
        return ""
    text = open(MANUAL, encoding="utf-8").read()
    for block in text.split("\n\n"):
        if keyword in block:
            return block.strip()[:300]
    return ""


async def generate_report_text(summary: dict) -> str:
    """调用大模型把结构化指标翻译成自然语言日报。"""
    import httpx
    body = json.dumps(summary, ensure_ascii=False, indent=2)
    hints = []
    for m in summary.get("设备", []):
        if m["风险"] != "正常":
            tip = lookup_manual("主轴过热") if m["平均温度"] > 60 else lookup_manual("振动")
            if tip:
                hints.append(f"【{m['设备']}】参考手册建议：{tip}")
    prompt = (
        "你是工厂设备管理员助手。根据以下设备监控数据，写一份给车间主任看的《设备健康日报》。\n"
        "要求：① 先一句话说总体情况；② 高风险设备单独列出问题和建议动作；"
        "③ 语言简洁、面向一线，不要堆砌术语；④ 不超过 300 字。\n\n"
        f"监控数据：\n{body}\n"
        + ("\n参考建议：\n" + "\n".join(hints) if hints else "")
    )
    if not LLM_API_KEY:
        return "（未配置 LLM_API_KEY，以下为结构化数据）\n\n" + body
    try:
        async with httpx.AsyncClient(timeout=120) as client:
            r = await client.post(
                f"{LLM_BASE_URL}/chat/completions",
                headers={"Authorization": f"Bearer {LLM_API_KEY}"},
                json={"model": MODEL, "messages": [{"role": "user", "content": prompt}],
                      "enable_thinking": False},
            )
            r.raise_for_status()
            return r.json()["choices"][0]["message"]["content"]
    except Exception as e:
        return f"（模型调用失败：{e}）以下是结构化数据：\n\n{body}"

九、故障排查复盘（最值钱的部分）

上线验收用固定测试文档出 4 道题，2 对 2 错，逐步定位修复：

问题 A：文档里没有的内容被编造

• 现象：问"年假有几天"（文档无此内容），模型自信回答"5 天"还带引用
• 定位：低相关片段（0.46 分）混入上下文，误导模型
• 修复：相似度阈值 0.3 → 0.45 + 强化提示词"找不到必须第一句就明说"
• 结果：✅ 正确回答"知识库中没有相关内容"

问题 B：文档里有的内容答错

• 现象：问"冷却液浓度低于多少补加"，文档写了"低于 4%"，模型答错甚至说"没有"
• 排查链路：
  1. 怀疑召回不足 → Top-4 扩到 Top-6 → 未解决
  2. 新增 /api/debug 调试接口透视检索中间产物 → 正确片段其实在候选里（0.56 分）
  3. 怀疑模型能力 → qwen-turbo 换 qwen-plus → 仍未解决
  4. 发现 kb_chunks=67 异常（1141 字符应为 ~7 块）→ 逐轮追踪切分循环
  5. 根因：切分器在文档尾部以 1 字符步进退化，产生 60 个重复碎块挤占检索结果
• 修复：循环终止条件修复 → 67 块变 7 块，四题全对

方法论

固定测试集做回归验证，每改一处重测全部用例； 排查遵循"先看中间产物，再改参数"；RAG 的可靠性来自检索质量与数据管道，而不只是模型。

十、可扩展方向

• 混合检索（BM25 + 向量）与 Reranker 重排
• 片段去重与最小长度过滤、同一文档重复上传检测
• 会话持久化、多租户按部门隔离
• Dockerfile + 单元测试 + CI；Qdrant 替换本地 numpy 存储

附录 A：验收测试文档全文（CNC-8800 设备维护手册）

用途：A5 验收测试与第九章回归测试的标准测试文档。把下面全文复制保存为 测试文档-设备维护手册.txt，通过「📚 知识库」上传即可复现全部测试用例。这份文档同时是日报模块读取处置建议的来源（backend/data/设备手册.txt 内容与之相同）。

CNC-8800 数控加工中心 设备维护手册（测试版）

第一章 日常点检规范

1.1 每日点检项目
开机前必须完成以下五项检查：
（1）检查液压油位，油位应处于油窗刻度的 1/2 至 2/3 之间；
（2）检查冷却液浓度，正常范围为 5%-8%，低于 4% 需补加原液；
（3）检查气压表读数，主轴气动夹具压力应保持在 0.6-0.8 MPa；
（4）检查导轨润滑油泵工作状态，油位低于刻度 1/4 时立即加注 46 号导轨油；
（5）Listen 检查（听音检查）：主轴空运转 3 分钟，无异响、无异常振动方可开始加工。

1.2 每周点检项目
每周一早班对排屑器进行清理，清除铁屑积存；检查电柜风扇滤网，积尘厚度超过 2mm 时用压缩空气（0.4MPa 以下）吹扫；检查各轴限位开关动作是否灵活。

第二章 常见故障处理

2.1 主轴过热报警（ALM-4021）
故障现象：主轴温度传感器读数超过 65℃，系统触发 ALM-4021 报警。
处理步骤：
（1）先停机 15 分钟，让主轴自然冷却；
（2）检查主轴冷却水箱水位，低于下限则加注专用冷却液（型号 HFC-25）；
（3）检查冷却泵是否运转，若泵不转，检查泵电机热继电器是否跳脱，复位后重启；
（4）若以上正常仍报警，检查主轴轴承，振动值超过 4.5mm/s 时联系设备科更换轴承，切勿强行开机。

2.2 加工尺寸超差
故障现象：加工孔位偏差超过 0.02mm。
处理步骤：
（1）检查工件装夹是否松动，重新装夹并对刀；
（2）检查丝杠反向间隙，超过 0.015mm 时在系统参数中做反向间隙补偿；
（3）检查环境温度，车间温度偏离 20℃±5℃ 范围时精度受影响，夏季高温时段建议安排在早晚加工高精度件。

2.3 气动夹具夹不紧
故障现象：夹紧压力显示正常但工件打滑。
处理步骤：（1）检查夹爪齿面磨损，磨损超标更换夹爪；（2）检查气路三联件滤芯，积水过多会顶开安全阀导致实际压力不足，排水并更换滤芯。

第三章 安全操作红线（严禁事项）

（1）严禁在主轴旋转时打开防护门；
（2）严禁戴手套操作机床；
（3）严禁擅自修改系统参数，参数修改必须由设备科授权工程师执行并记录；
（4）严禁冷却液溅入电柜，电柜门必须常闭锁紧；
（5）发生异响、焦糊味、冒烟时立即按急停并断开电柜总电源，撤离并上报班组长。

第四章 保养周期表

主轴轴承：每 6000 小时检查一次振动值，超过 4.5mm/s 更换；
丝杠润滑：每 500 小时加注锂基润滑脂；
冷却液更换：每 3 个月整体更换一次；
电柜除尘：每季度专业除尘一次；
精度校验：每半年做一次定位精度检测（激光干涉仪），重复定位精度标准 ±0.005mm。

附录 B：四题验收测试用例（回归验证标准）

固定测试集，每改一处参数/代码就重测全部 4 题。3 题考"文档里有"，1 题考"文档里没有"（防幻觉）。

设计说明：第 2 题的"4%"故意埋在长段落中间，专测切分与召回质量；第 4 题是文档外的"陷阱题"，专测模型会不会编造。四题全绿 = RAG 全链路（解析→切分→向量化→检索→生成→拒答）验收通过。

笔记完 · 配套代码：qwen3-demo

💻官网： https://www.mysql.com

🌏维基百科：https://zh.wikipedia.org/wiki/MySQL

一、版本说明

按许可证分类：

主要版本号：

版本后缀：

安装包格式：

二、官网下载

🔹🔹下载可能需要登录Oracle账户，自己注册即可。

🟢本文安装第一小节里面标红的版本，即社区版、LTS，操作系统为Windows和Linux（MacOS安装相应的版本即可）。

再MySQL官网点击Downloads即可选择要下载的内容。

比如在Downloads界面下方选择社区版：MySQL Community (GPL) Downloads »

进去有很多选项：本文主要下载的是MySQL Community Server这一项。

☘️其它选项说明：

较新的版本（2025-03-05）：https://dev.mysql.com/downloads/mysql/

历史版本下载：https://downloads.mysql.com/archives/community/

（上面的连接都是MySQL官网的，若失效，官网下载即可）

选择版本和操作系统即可：

三、Windows安装

3.1 安装和配置

下载上图中的 8.4.4 LTS Windows MSI安装包。

双击安装，这里先安装typical版本吧，后面需要其它组件再安装即可。

安装完后，不要取消勾选进入Configuratior，然后完成，即可进入配置向导。

每个选项基本都有小字说明的，仔细看看就明白了。

取消勾选了也没事，自己打开即可：

后面要修改MySQL的设置，再次打开MySQL Configuratior修改就行了。

（1）自己设置数据保存目录：

（2）配置类型和网络：

• 配置类型（Config Type）

  • Development Computer：开发环境，占用较少资源，适合个人开发或测试。
  • Server Computer：服务器环境，优化性能，适合中小型应用。
  • Dedicated Computer：专用服务器，最大化性能，适合大型应用或高并发场景。

• 连接性

  • 打开或关闭TCP连接，以及设置相应的端口。
  • Named Pipe 是一种用于进程间通信（IPC）的机制，适用于 Windows 系统。它允许客户端和服务器通过一个命名的管道进行通信。
  • Shared Memory 是另一种本地通信机制，适用于 Windows 系统。它通过共享内存区域实现客户端和服务器之间的高效数据传输。

• Advanced Configuration 暂时不打开，是一些高级的设置。

(3) root账户密码设置-添加账户

设置root账户密码，以及添加其它用户。

暂时没有添加用户，比如你的用户只能查询，就可以添加一个相应的用户。

（4）Windows Service选项

在 Windows 系统上，MySQL 可以作为服务运行。通过将 MySQL 配置为 Windows 服务，可以实现 MySQL 的自动启动、停止和管理。

配置成Windows服务的好处就是： 服务可以设置为随 Windows 系统启动，无需手动启动 MySQL 服务器；可以后台运行等等。

选择配置：可以设置服务名称、是否开机自启动、以什么身份运行。

这里暂时不配置（不勾选），看实际需求即可。

（5）服务器文件权限：

可以运行所有用户，也可以自己设置。比如我选中系统和我当前登录的账户14143，（绿色箭头移动用户，左边有完全控制权限，右边没有）

（6）安装示例数据

就按照一些示例的数据库，给你学习、测速用。好多软件都有这个选项的。

• world: 包含国家、城市和语言信息。
• sakila: 模拟一个 DVD 租赁商店的数据库。

我都选上了：

（7）应用以上选项

点击Execute即可应用前面的选项，等待完成即可。

后面要修改MySQL的设置，再次打开MySQL Configuratior修改就行了。

3.2 后续操作

3.21 使用自带命令行客户端

安装之后会自带一个客户端：

进去，输入之前设置的密码即可看到MySQL 的命令行提示符：

一些简单语句：

查看所有数据库：

SHOW DATABASES;

创建新数据库：

CREATE DATABASE mydatabase;

使用某个数据库：

USE mydatabase;

查看当前数据库中的表：

SHOW TABLES;

创建表：

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50),
    email VARCHAR(100)
);

插入数据：

INSERT INTO users (name, email) VALUES ('Alice', 'alice@example.com');

查询数据：

SELECT * FROM users;

删除数据：

DELETE FROM users WHERE id = 1;

退出 MySQL 命令行：

EXIT;

示例：之前安装的时候我安装了2个可选的数据库：world和sakila

mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sakila             |
| sys                |
| world              |
+--------------------+
6 rows in set (0.01 sec)

mysql> use sakila;
Database changed
mysql> show tables;
+----------------------------+
| Tables_in_sakila           |
+----------------------------+
| actor                      |
| actor_info                 |
| address                    |
| category                   |
| city                       |
| country                    |
| customer                   |
| customer_list              |
| film                       |
| film_actor                 |
| film_category              |
| film_list                  |
| film_text                  |
| inventory                  |
| language                   |
| nicer_but_slower_film_list |
| payment                    |
| rental                     |
| sales_by_film_category     |
| sales_by_store             |
| staff                      |
| staff_list                 |
| store                      |
+----------------------------+
23 rows in set (0.01 sec)

mysql> select * from actor;
+----------+-------------+--------------+---------------------+
| actor_id | first_name  | last_name    | last_update         |
+----------+-------------+--------------+---------------------+
|        1 | PENELOPE    | GUINESS      | 2006-02-15 04:34:33 |
|        2 | NICK        | WAHLBERG     | 2006-02-15 04:34:33 |
|        3 | ED          | CHASE        | 2006-02-15 04:34:33 |
|        4 | JENNIFER    | DAVIS        | 2006-02-15 04:34:33 |
|        5 | JOHNNY      | LOLLOBRIGIDA | 2006-02-15 04:34:33 |
|        6 | BETTE       | NICHOLSON    | 2006-02-15 04:34:33 |
|        7 | GRACE       | MOSTEL       | 2006-02-15 04:34:33 |
|        8 | MATTHEW     | JOHANSSON    | 2006-02-15 04:34:33 |
|        9 | JOE         | SWANK        | 2006-02-15 04:34:33 |
后面省略

除了安装的2个示例数据库，还有几个其他的：

3.22 添加环境变量

添加环境变量后就可以在其它地方使用mysql了，比如powershell、cmd等等。

这个也是很多软件的常规操作，把bin目录(即二进制可执行文件目录)添加到环境变量即可。

在任意mysql相关软件上右键打开文件所在位置：

复制这个目录，添加到环境变量即可：

现在就可以在power shell连接了：

 mysql -u root -p

3.33 安装图像化界面

数据库的 命令行是用的比较少的，界面稍多，编程语言最多。

界面，就是把命令换成界面的点点点了，你自己都可以写一个界面。不过这里介绍的是大家常用的两个，还有其它的，也可以去搜一搜。

3.33.1 MySQL WorkBench

这是官方的。

链接：https://dev.mysql.com/downloads/workbench/

自己安装即可。没啥可说的。

先确保mysql是运行的。

点击新建连接：连接名称自己设置，后面是地址、端口、用户名、密码这些，自己填即可。完成后就会出现下图左边所示的连接（test），点击即可进入。

点击左下方的Schemas即可看到默认存在的数据库，我在表actor上右键选择前1000行，即可自动生成查询语句和结果。

软件汉化自己搜即可。

3.33.2 Navicat

官网：https://www.navicat.com.cn/

学生可以申请优惠。

这个支持很多数据库：

这软件还是挺好用的：

四、Linux安装

4.1 安装

本文使用Ubuntu22.04。

🟢 官方教程文档：https://dev.mysql.com/doc/refman/8.4/en/linux-installation-apt-repo.html

我基本上就是搬过来了。

☘️ （1）新建一个暂存目录（非必须）：

mkdir mysql_temp
# 进入
cd mysql_temp

☘️ （2）下载mysql apt 的存储库文件

ubuntu就是apt包管理器，你下载软件的时候，要配置源，即从哪里下载这个软件。这一步的功能就是设置从哪里下载mysql的。

还是mysql官网，downloads，页面下方MySQL Community (GPL) Downloads »，之后进入下面这个页面：

debian，Ubuntu 就进入APT的仓库，其它的进入相应的仓库即可。

在这个下载按钮上右键，复制链接：

然后在Ubuntu上下载即可：

wget https://dev.mysql.com/get/mysql-apt-config_0.8.33-1_all.deb

没wget的自己apt安装一下即可。

☘️ （3）安装下载的deb包

后面的名字以实际下载的为准。

sudo dpkg -i mysql-apt-config_0.8.33-1_all.deb

安装过程需要选择你要安装的包：

前两个选项，enter，进去选择即可。选完了，再选中第三行的OK，回车，即可。

☘️ （4）更新apt 源

sudo apt update

☘️ （5）安装

sudo apt install mysql-server

这将安装 MySQL 服务器的软件包以及客户端和数据库公共文件的软件包。

在安装过程中，系统会要求您为 MySQL 安装的 root 用户提供密码。密码要记住哦。

🟢 （6）运行

安装完之后应该会自动运行的。

但也有例外，比如mysql默认端口是3306，如果这个端口已经被其它应用占用了，就无法运行了。

比我的docker已经使用了3306端口：

ubuntu@VM-12-15-ubuntu:~/mysql_temp$ sudo lsof -i :3306
COMMAND    PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
docker-pr 5833 root    4u  IPv4  26444      0t0  TCP localhost:mysql (LISTEN)

这时候可以关闭占用的进程，或者给mysql设置其它端口。

编辑配置文件

sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

添加端口配置（3360是我的一个空闲端口）：

port = 3360

启动mysql server：

sudo systemctl start mysql

查看状态：

sudo systemctl status mysql

如果有还是无法运行，查看日志：

cat /var/log/mysql/error.log

4.2 远程连接

现在我在 Windows 的navicat上连接刚刚安装的 mysql：

注意：

1. 如果Ubuntu开启了防火墙，那要放行mysql使用的端口（这个基本操作不说了）。
2. 默认不能使用root账户进行远程连接。
3. mysql默认不开启远程连接。

在Ubuntu上登录mysql：

sudo mysql -u root -p

然后输入：

SELECT user, host FROM mysql.user;

可以看到root用户只运行本地登录。

可以修改root允许远程登录，但是不建议。

🔹这里新建一个普通用户来远程登录：
（将remote_user替换为你的用户名，password替换为你的密码）

CREATE USER 'remote_user'@'%' IDENTIFIED BY 'strong_password';

• %：表示允许从任何主机连接。如果只想允许特定IP地址连接，可以将%替换为具体的IP地址。

🔹📖给用户授予权限：

（a）所有数据库所有权限：

GRANT ALL PRIVILEGES ON *.* TO 'remote_user'@'%' WITH GRANT OPTION;

（b）授予特定数据库的所有权限（将database_name替换为你的数据库名）：

GRANT ALL PRIVILEGES ON database_name.* TO 'remote_user'@'%';

（c）授予特定数据库的只读权限：

GRANT SELECT ON database_name.* TO 'remote_user'@'%';

🔹刷新权限使权限生效：

FLUSH PRIVILEGES;

🔹现在应该还是不能远程连接的，停止mysql：

 sudo systemctl stop mysql

然后编辑配置文件，允许远程连接：

sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf

添加：

bind-address = 0.0.0.0

保存，重启mysql：

sudo systemctl restart mysql

🟢 现在可以远程连接了：

4.3 安装默认示例数据库

之前Windows那里已经介绍过了。

下载地址：https://dev.mysql.com/doc/index-other.html

我还是下载到之前的暂存文件夹：

wget https://downloads.mysql.com/docs/sakila-db.zip

解压：

 unzip sakila-db.zip

得到3个文件：

登录mysql：

mysql -u root -p

执行sakila-schema.sql脚本来创建数据库结构，并执行 sakila-data.sql脚本来填充数据库结构，使用以下命令：

source /home/ubuntu/mysql_temp/sakila-db/sakila-schema.sql;

source /home/ubuntu/mysql_temp/sakila-db/sakila-data.sql;

已安装（Navicat右键刷新一下）：

官网资料

• Modbus官网
• Modbus协议
• Modbus技术资源
• MODBUS TCP / IP

关于Java的开源库

• Jamod：Java Modbus实现：Java Modbus库。该库由Dieter Wimberger实施。一个很早期的 Java Modbus 库，已经不再维护。
• ModbusPal：ModbusPal是一个正在进行的Java项目，用于创建逼真的Modbus从站模拟器。由于预定义的数学函数和/或Python脚本，寄存器值是动态生成的。ModbusPal依赖于RxTx进行串行通信，而Jython则依赖于脚本支持。
• Modbus4J：Serotonin Software用Java编写的Modbus协议的高性能且易于使用的实现。支持ASCII，RTU，TCP和UDP传输作为从站或主站，自动请求分区，响应数据类型解析和节点扫描。
• JLibModbus：JLibModbus是java语言中Modbus协议的一种实现。jSSC和RXTX用于通过串行端口进行通信。该库是一个经过积极测试和改进的项目。

博客资料

• ModbusTCP协议
• 基于TCP/IP协议的Modbus
• modbus tcp通讯modbus4j使用说明-java编程
• modbus tcp 通讯modbus-master-tcp Java使用说明

Github资料

• modbus4j

ModbusTCP协议

Modbus由MODICON公司于1979年开发，是一种工业现场总线协议标准。1996年施耐德公司推出基于以太网TCP/IP的Modbus协议：ModbusTCP。

Modbus协议是一项应用层报文传输协议，包括ASCII、RTU、TCP三种报文类型。

标准的Modbus协议物理层接口有RS232、RS422、RS485和以太网接口，采用master/slave方式通信。 个人感觉：

modbus协议也是对地址变量进行读取或者写入操作，变化的可能是地址变量的地址和数据类型。
这个功能码（指定要做什么，对4个不同modbus对象寄存器：是读啊，是写啊，还是对多个一起操作啊）

Modbus和RS485的关系：Modbus是协议，物理层接口有RS232、RS422、RS485和以太网接口几种

仿真软件

验证4个常用功能码，仿真软件上面有F=01，F=02，F=03和F=04来显示

• 0x01：读线圈
• 0x02：读离散量输入
• 0x03：读保持寄存器
• 0x04：读输入寄存器

对应的代码要写4个方法

我要写一个Master(主站)，所以需要一个Slave(从站)

• 一个旧版的Modbus Slave：https://ioufev.lanzout.com/inPtpxp9yef
• 一个旧版的Modbus Poll：https://ioufev.lanzout.com/iVcExxpa1ze
• Modbus Slav 官网下载
• 安装：一直下一步
• 激活：Connection-->connect...（F3），输入激活码（SN 在安装文件同目录的文本文件里），下面截图没输入激活码，因为当时没找到激活码
• 操作：新建四个不同功能码的窗口，然后运行代码，修改仿真软件上的值。

代码参数的理解

• saveid：看资料"从站在modbus总线上可以有多个"，仿真软件就能模拟一个从站，就是ID=1，当然可以修改成ID=2
• 功能码：4个功能码，对应写4个方法，，仿真软件上的F=1，或者F=2，3，4
• addr：一开始看代码4个方法addr都是从0开始，是否重复？答案是：4个功能码表示4个区域或者设备，addr表示各自区域的地址编号。

选择TCP模式，端口是固定的502

地址类型

Slave Definition

可以自由设置地址的开始地址是多少（默认0），设置有多少个数量（默认10个）。

功能码

操作：新建四个不同功能码的窗口，然后运行代码，修改仿真软件上的值。

数据类型

功能码01 功能码02 功能码03，选择Float类型 signed：有符号
unsigned：无符号
hex：十六进制
binary：二进制

big-endian：大端，将高序字节存储在起始地址（高位编址）
little-endian：小端，将低序字节存储在起始地址（低位编址）

swap：交换

关于 大端和小端
modbus 一个地址是16位（2个字节），表示 float 类型的时候需要4个字节，也就是要2个16位地址，这就涉及到是哪个值在前面的问题了。
多数现代 CPU（如 x86、ARM）默认采用 小端 存储，即低字节在低地址；
Java 和 Modbus 协议默认使用 大端 表示字节顺序；
在实际 Modbus 应用中，多个寄存器组合表示浮点型数据时，不同厂商设备可能采用不同的字节顺序，需要通过文档或测试确认是否需要进行字节或寄存器“交换（swap）”。

双击第一个地址输入数据，会提示输入数据的类型，32位数据占2个地址，所以下一个地址是--

功能码04

使用jlibmodbus

• 参考：Java实现ModBus的poll端（主机master端，查询和接受数据）
• 源码1：https://sourceforge.net/projects/jlibmodbus/
• 源码2：https://github.com/kochedykov/jlibmodbus

特别有意思：常用的串口通信库都加进去了

maven依赖

<dependency>
<groupId>com.intelligt.modbus</groupId>
<artifactId>jlibmodbus</artifactId>
<version>1.2.9.7</version>
</dependency>

测试功能码04

package com.tcb.jlibmodbus;

import java.net.InetAddress;

import com.intelligt.modbus.jlibmodbus.Modbus;
import com.intelligt.modbus.jlibmodbus.exception.ModbusIOException;
import com.intelligt.modbus.jlibmodbus.exception.ModbusNumberException;
import com.intelligt.modbus.jlibmodbus.exception.ModbusProtocolException;
import com.intelligt.modbus.jlibmodbus.master.ModbusMaster;
import com.intelligt.modbus.jlibmodbus.master.ModbusMasterFactory;
import com.intelligt.modbus.jlibmodbus.tcp.TcpParameters;

/**
 * Hello world!
 *
 */
public class App {
	public static void main(String[] args) {
		try {
			// 设置主机TCP参数
			TcpParameters tcpParameters = new TcpParameters();
 
			// 设置TCP的ip地址
			InetAddress adress = InetAddress.getByName("127.0.0.1");
 
			// TCP参数设置ip地址
			// tcpParameters.setHost(InetAddress.getLocalHost());
			tcpParameters.setHost(adress);
 
			// TCP设置长连接
			tcpParameters.setKeepAlive(true);
			// TCP设置端口，这里设置是默认端口502
			tcpParameters.setPort(Modbus.TCP_PORT);
 
			// 创建一个主机
			ModbusMaster master = ModbusMasterFactory.createModbusMasterTCP(tcpParameters);
			Modbus.setAutoIncrementTransactionId(true);
 
			int slaveId = 1;//从机地址
			int offset = 0;//寄存器读取开始地址
			int quantity = 10;//读取的寄存器数量
 
 
			try {
				if (!master.isConnected()) {
					master.connect();// 开启连接
				}
 
				// 读取对应从机的数据，readInputRegisters读取的写寄存器，功能码04
				int[] registerValues = master.readInputRegisters(slaveId, offset, quantity);
 
				// 控制台输出
				for (int value : registerValues) {
					System.out.println("Address: " + offset++ + ", Value: " + value);
				}
 
			} catch (ModbusProtocolException e) {
				e.printStackTrace();
			} catch (ModbusNumberException e) {
				e.printStackTrace();
			} catch (ModbusIOException e) {
				e.printStackTrace();
			} finally {
				try {
					master.disconnect();
				} catch (ModbusIOException e) {
					e.printStackTrace();
				}
			}
		} catch (RuntimeException e) {
			throw e;
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

打印到控制台的信息

Address: 0, Value: 88
Address: 1, Value: 66
Address: 2, Value: 8
Address: 3, Value: 6
Address: 4, Value: 32727
Address: 5, Value: 32808
Address: 6, Value: 0
Address: 7, Value: 3
Address: 8, Value: 2
Address: 9, Value: 1

使用modbus4j

maven依赖

• 官方说明：https://github.com/infiniteautomation/modbus4j
• 有个坑：Maven配的阿里云仓库，下载不下来，注释掉阿里云仓库使用默认仓库才能下载好。

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.tcb</groupId>
  <artifactId>modbus</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>modbus</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>
  
  <!-- 若想引用modbus4j需要引入下列repository id:ias-snapshots id:ias-releases 两个 ，使用默认仓库下载，不要使用阿里云仓库-->
    <repositories>
	    <repository>
	        <releases>
	            <enabled>false</enabled>
	        </releases>
	        <snapshots>
	            <enabled>true</enabled>
	        </snapshots>
	        <id>ias-snapshots</id>
	        <name>Infinite Automation Snapshot Repository</name>
	        <url>https://maven.mangoautomation.net/repository/ias-snapshot/</url>
	    </repository>
	    <repository>
	        <releases>
	            <enabled>true</enabled>
	        </releases>
	        <snapshots>
	            <enabled>false</enabled>
	        </snapshots>
	        <id>ias-releases</id>
	        <name>Infinite Automation Release Repository</name>
	        <url>https://maven.mangoautomation.net/repository/ias-release/</url>
	    </repository>
	</repositories>
	
    <dependencies>
		 <dependency>
		    <groupId>junit</groupId>
		    <artifactId>junit</artifactId>
		    <version>4.13-beta-3</version>
		    <scope>test</scope>
		</dependency>
		<dependency>
		    <groupId>com.infiniteautomation</groupId>
		    <artifactId>modbus4j</artifactId>
		    <version>3.0.3</version>
		</dependency>
		
		<dependency>
		    <groupId>org.apache.commons</groupId>
		    <artifactId>commons-lang3</artifactId>
		    <version>3.9</version>
		</dependency>
    </dependencies>

</project>

Java实现modbus协议通讯

原文链接：http://www.leftso.com/blog/83.html
核心依赖:

• modbus4j.jar
• commons-lang3-3.0.jar

Modbus4jUtils类

package com.tcb.modbus;

import com.serotonin.modbus4j.BatchRead;
import com.serotonin.modbus4j.BatchResults;
import com.serotonin.modbus4j.ModbusFactory;
import com.serotonin.modbus4j.ModbusMaster;
import com.serotonin.modbus4j.code.DataType;
import com.serotonin.modbus4j.exception.ErrorResponseException;
import com.serotonin.modbus4j.exception.ModbusInitException;
import com.serotonin.modbus4j.exception.ModbusTransportException;
import com.serotonin.modbus4j.ip.IpParameters;
import com.serotonin.modbus4j.locator.BaseLocator;

/**
 * modbus通讯工具类,采用modbus4j实现
 * 
 * @author lxq
 * @dependencies modbus4j-3.0.3.jar
 * @website https://github.com/infiniteautomation/modbus4j
 */
public class Modbus4jUtils {
	/**
	 * 工厂。
	 */
	static ModbusFactory modbusFactory;
	static {
		if (modbusFactory == null) {
			modbusFactory = new ModbusFactory();
		}
	}

	/**
	 * 获取master
	 * 
	 * @return
	 * @throws ModbusInitException
	 */
	public static ModbusMaster getMaster() throws ModbusInitException {
		IpParameters params = new IpParameters();
		params.setHost("localhost");
		params.setPort(502);
		//
		// modbusFactory.createRtuMaster(params); //RTU 协议
		// modbusFactory.createUdpMaster(params);//UDP 协议
		// modbusFactory.createAsciiMaster(params);//ASCII 协议

        // 采用 Modbus RTU over TCP/IP，第二个参数为 true，即 modbusFactory.createTcpMaster(params, true)
		ModbusMaster master = modbusFactory.createTcpMaster(params, false);// TCP 协议
		master.init();

		return master;
	}

	/**
	 * 读取[01 Coil Status 0x]类型 开关数据
	 * 
	 * @param slaveId
	 *            slaveId
	 * @param offset
	 *            位置
	 * @return 读取值
	 * @throws ModbusTransportException
	 *             异常
	 * @throws ErrorResponseException
	 *             异常
	 * @throws ModbusInitException
	 *             异常
	 */
	public static Boolean readCoilStatus(int slaveId, int offset)
			throws ModbusTransportException, ErrorResponseException, ModbusInitException {
		// 01 Coil Status
		BaseLocator<Boolean> loc = BaseLocator.coilStatus(slaveId, offset);
		Boolean value = getMaster().getValue(loc);
		return value;
	}

	/**
	 * 读取[02 Input Status 1x]类型 开关数据
	 * 
	 * @param slaveId
	 * @param offset
	 * @return
	 * @throws ModbusTransportException
	 * @throws ErrorResponseException
	 * @throws ModbusInitException
	 */
	public static Boolean readInputStatus(int slaveId, int offset)
			throws ModbusTransportException, ErrorResponseException, ModbusInitException {
		// 02 Input Status
		BaseLocator<Boolean> loc = BaseLocator.inputStatus(slaveId, offset);
		Boolean value = getMaster().getValue(loc);
		return value;
	}

	/**
	 * 读取[03 Holding Register类型 2x]模拟量数据
	 * 
	 * @param slaveId
	 *            slave Id
	 * @param offset
	 *            位置
	 * @param dataType
	 *            数据类型,来自com.serotonin.modbus4j.code.DataType
	 * @return
	 * @throws ModbusTransportException
	 *             异常
	 * @throws ErrorResponseException
	 *             异常
	 * @throws ModbusInitException
	 *             异常
	 */
	public static Number readHoldingRegister(int slaveId, int offset, int dataType)
			throws ModbusTransportException, ErrorResponseException, ModbusInitException {
		// 03 Holding Register类型数据读取
		BaseLocator<Number> loc = BaseLocator.holdingRegister(slaveId, offset, dataType);
		Number value = getMaster().getValue(loc);
		return value;
	}

	/**
	 * 读取[04 Input Registers 3x]类型 模拟量数据
	 * 
	 * @param slaveId
	 *            slaveId
	 * @param offset
	 *            位置
	 * @param dataType
	 *            数据类型,来自com.serotonin.modbus4j.code.DataType
	 * @return 返回结果
	 * @throws ModbusTransportException
	 *             异常
	 * @throws ErrorResponseException
	 *             异常
	 * @throws ModbusInitException
	 *             异常
	 */
	public static Number readInputRegisters(int slaveId, int offset, int dataType)
			throws ModbusTransportException, ErrorResponseException, ModbusInitException {
		// 04 Input Registers类型数据读取
		BaseLocator<Number> loc = BaseLocator.inputRegister(slaveId, offset, dataType);
		Number value = getMaster().getValue(loc);
		return value;
	}

	/**
	 * 批量读取使用方法
	 * 
	 * @throws ModbusTransportException
	 * @throws ErrorResponseException
	 * @throws ModbusInitException
	 */
	public static void batchRead() throws ModbusTransportException, ErrorResponseException, ModbusInitException {

		BatchRead<Integer> batch = new BatchRead<Integer>();

		batch.addLocator(0, BaseLocator.holdingRegister(1, 1, DataType.FOUR_BYTE_FLOAT));
		batch.addLocator(1, BaseLocator.inputStatus(1, 0));

		ModbusMaster master = getMaster();

		batch.setContiguousRequests(false);
		BatchResults<Integer> results = master.send(batch);
		System.out.println(results.getValue(0));
		System.out.println(results.getValue(1));
	}

	/**
	 * 测试
	 * 
	 * @param args
	 */
	public static void main(String[] args) {
		try {
			// 01测试
			Boolean v011 = readCoilStatus(1, 0);
			Boolean v012 = readCoilStatus(1, 1);
			Boolean v013 = readCoilStatus(1, 6);
			System.out.println("v011:" + v011);
			System.out.println("v012:" + v012);
			System.out.println("v013:" + v013);
			// 02测试
			Boolean v021 = readInputStatus(1, 0);
			Boolean v022 = readInputStatus(1, 1);
			Boolean v023 = readInputStatus(1, 2);
			System.out.println("v021:" + v021);
			System.out.println("v022:" + v022);
			System.out.println("v023:" + v023);

			// 03测试
			Number v031 = readHoldingRegister(1, 1, DataType.FOUR_BYTE_FLOAT);// 注意,float
			Number v032 = readHoldingRegister(1, 3, DataType.FOUR_BYTE_FLOAT);// 同上
			System.out.println("v031:" + v031);
			System.out.println("v032:" + v032);

			// 04测试
			Number v041 = readInputRegisters(1, 0, DataType.FOUR_BYTE_FLOAT);//
			Number v042 = readInputRegisters(1, 2, DataType.FOUR_BYTE_FLOAT);//
			System.out.println("v041:" + v041);
			System.out.println("v042:" + v042);
			// 批量读取
			batchRead();

		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

代码理解

slave配置

操作：新建四个不同功能码的窗口，然后运行代码，修改仿真软件上的值。

输出信息

v011:true
v012:false
v013:true
v021:true
v022:false
v023:true
v031:7.5
v032:10.5
v041:1.5
v042:3.0
7.5
true

Java通过modbus4j对数据的写入

原文链接：http://www.leftso.com/blog/83.html

类Modbus4jWriteUtils.java

package com.tcb.modbus;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import com.serotonin.modbus4j.ModbusFactory;
import com.serotonin.modbus4j.ModbusMaster;
import com.serotonin.modbus4j.code.DataType;
import com.serotonin.modbus4j.exception.ErrorResponseException;
import com.serotonin.modbus4j.exception.ModbusInitException;
import com.serotonin.modbus4j.exception.ModbusTransportException;
import com.serotonin.modbus4j.ip.IpParameters;
import com.serotonin.modbus4j.locator.BaseLocator;
import com.serotonin.modbus4j.msg.ModbusResponse;
import com.serotonin.modbus4j.msg.WriteCoilRequest;
import com.serotonin.modbus4j.msg.WriteCoilResponse;
import com.serotonin.modbus4j.msg.WriteCoilsRequest;
import com.serotonin.modbus4j.msg.WriteCoilsResponse;
import com.serotonin.modbus4j.msg.WriteRegisterRequest;
import com.serotonin.modbus4j.msg.WriteRegisterResponse;
import com.serotonin.modbus4j.msg.WriteRegistersRequest;

/**
 * modbus4j写入数据
 * 
 * @author xq
 *
 */
public class Modbus4jWriteUtils {
	static Log log = LogFactory.getLog(Modbus4jWriteUtils.class);
	/**
	 * 工厂。
	 */
	static ModbusFactory modbusFactory;
	static {
		if (modbusFactory == null) {
			modbusFactory = new ModbusFactory();
		}
	}

	/**
	 * 获取tcpMaster
	 * 
	 * @return
	 * @throws ModbusInitException
	 */
	public static ModbusMaster getMaster() throws ModbusInitException {
		IpParameters params = new IpParameters();
		params.setHost("localhost");
		params.setPort(502);

		ModbusMaster tcpMaster = modbusFactory.createTcpMaster(params, false);
		tcpMaster.init();

		return tcpMaster;
	}

	/**
	 * 写 [01 Coil Status(0x)]写一个 function ID = 5
	 * 
	 * @param slaveId
	 *            slave的ID
	 * @param writeOffset
	 *            位置
	 * @param writeValue
	 *            值
	 * @return 是否写入成功
	 * @throws ModbusTransportException
	 * @throws ModbusInitException
	 */
	public static boolean writeCoil(int slaveId, int writeOffset, boolean writeValue)
			throws ModbusTransportException, ModbusInitException {
		// 获取master
		ModbusMaster tcpMaster = getMaster();
		// 创建请求
		WriteCoilRequest request = new WriteCoilRequest(slaveId, writeOffset, writeValue);
		// 发送请求并获取响应对象
		WriteCoilResponse response = (WriteCoilResponse) tcpMaster.send(request);
		if (response.isException()) {
			return false;
		} else {
			return true;
		}
	}

	/**
	 * 写[01 Coil Status(0x)] 写多个 function ID = 15
	 * 
	 * @param slaveId
	 *            slaveId
	 * @param startOffset
	 *            开始位置
	 * @param bdata
	 *            写入的数据
	 * @return 是否写入成功
	 * @throws ModbusTransportException
	 * @throws ModbusInitException
	 */
	public static boolean writeCoils(int slaveId, int startOffset, boolean[] bdata)
			throws ModbusTransportException, ModbusInitException {
		// 获取master
		ModbusMaster tcpMaster = getMaster();
		// 创建请求
		WriteCoilsRequest request = new WriteCoilsRequest(slaveId, startOffset, bdata);
		// 发送请求并获取响应对象
		WriteCoilsResponse response = (WriteCoilsResponse) tcpMaster.send(request);
		if (response.isException()) {
			return false;
		} else {
			return true;
		}

	}

	/***
	 * 写[03 Holding Register(4x)] 写一个 function ID = 6
	 * 
	 * @param slaveId
	 * @param writeOffset
	 * @param writeValue
	 * @return
	 * @throws ModbusTransportException
	 * @throws ModbusInitException
	 */
	public static boolean writeRegister(int slaveId, int writeOffset, short writeValue)
			throws ModbusTransportException, ModbusInitException {
		// 获取master
		ModbusMaster tcpMaster = getMaster();
		// 创建请求对象
		WriteRegisterRequest request = new WriteRegisterRequest(slaveId, writeOffset, writeValue);
		WriteRegisterResponse response = (WriteRegisterResponse) tcpMaster.send(request);
		if (response.isException()) {
			log.error(response.getExceptionMessage());
			return false;
		} else {
			return true;
		}

	}

	/**
	 * 
	 * 写入[03 Holding Register(4x)]写多个 function ID=16
	 * 
	 * @param slaveId
	 *            modbus的slaveID
	 * @param startOffset
	 *            起始位置偏移量值
	 * @param sdata
	 *            写入的数据
	 * @return 返回是否写入成功
	 * @throws ModbusTransportException
	 * @throws ModbusInitException
	 */
	public static boolean writeRegisters(int slaveId, int startOffset, short[] sdata)
			throws ModbusTransportException, ModbusInitException {
		// 获取master
		ModbusMaster tcpMaster = getMaster();
		// 创建请求对象
		WriteRegistersRequest request = new WriteRegistersRequest(slaveId, startOffset, sdata);
		// 发送请求并获取响应对象
		ModbusResponse response = tcpMaster.send(request);
		if (response.isException()) {
			log.error(response.getExceptionMessage());
			return false;
		} else {
			return true;
		}
	}

	/**
	 * 写入数字类型的模拟量（如:写入Float类型的模拟量、Double类型模拟量、整数类型Short、Integer、Long）
	 * 
	 * @param slaveId
	 * @param offset
	 * @param value
	 *            写入值,Number的子类,例如写入Float浮点类型,Double双精度类型,以及整型short,int,long
	 * @param registerCount
	 *            ,com.serotonin.modbus4j.code.DataType
	 * @throws ModbusTransportException
	 * @throws ErrorResponseException
	 * @throws ModbusInitException
	 */
	public static void writeHoldingRegister(int slaveId, int offset, Number value, int dataType)
			throws ModbusTransportException, ErrorResponseException, ModbusInitException {
		// 获取master
		ModbusMaster tcpMaster = getMaster();
		// 类型
		BaseLocator<Number> locator = BaseLocator.holdingRegister(slaveId, offset, dataType);
		tcpMaster.setValue(locator, value);
	}

	public static void main(String[] args) {
		try {
			//@formatter:off
			// 测试01
//			boolean t01 = writeCoil(1, 0, true);
//			System.out.println("T01:" + t01);

			// 测试02
//			boolean t02 = writeCoils(1, 0, new boolean[] { true, false, true });
//			System.out.println("T02:" + t02);

			// 测试03
//			short v = -3;
//			boolean t03 = writeRegister(1, 0, v);
//			System.out.println("T03:" + t03);
			// 测试04
//			boolean t04 = writeRegisters(1, 0, new short[] { -3, 3, 9 });
//			System.out.println("t04:" + t04);
			//写模拟量
			writeHoldingRegister(1,0, 10.1f, DataType.FOUR_BYTE_FLOAT);
			
			//@formatter:on
		} catch (Exception e) {
			e.printStackTrace();
		}

	}

}

代码理解

使用modbus-master-tcp

原文链接：http://www.leftso.com/blog/310.html
源码地址：https://github.com/digitalpetri/modbus
modbus tcp通讯Java的方案之前已经讲解过一种,modbus4j实现Java语言的modbus tcp协议通讯。从上一个方案中我们不难发现modbus4j的通讯实现方式是同步的。
实际应用中可能会读取大量的数据。同步处理对于应用的响应还是不太友好的。
本博客主要讲解另外一种Java语言的modbux tcp通讯方案。那就是modbus-master-tcp。

maven依赖

pom.xml注意,需要将java的编译版本指定到1.8.因为只有1.8以后才支持lambda表达式。

<dependency>
		<groupId>com.digitalpetri.modbus</groupId>
		<artifactId>modbus-master-tcp</artifactId>
		<version>1.1.0</version>
	</dependency>

观察可以发现,modbus-master-tcp项目的底层是基于netty框架开发。天然的支持异步处理。在性能方面有很好的提升。

编写modbus tcp读取案例

类SimpleMasterExample

package com.ioufev;

import java.util.concurrent.CompletableFuture;
import java.util.concurrent.ExecutionException;

import com.digitalpetri.modbus.codec.Modbus;
import com.digitalpetri.modbus.master.ModbusTcpMaster;
import com.digitalpetri.modbus.master.ModbusTcpMasterConfig;
import com.digitalpetri.modbus.requests.ReadCoilsRequest;
import com.digitalpetri.modbus.requests.ReadDiscreteInputsRequest;
import com.digitalpetri.modbus.requests.ReadHoldingRegistersRequest;
import com.digitalpetri.modbus.requests.ReadInputRegistersRequest;
import com.digitalpetri.modbus.responses.ReadCoilsResponse;
import com.digitalpetri.modbus.responses.ReadDiscreteInputsResponse;
import com.digitalpetri.modbus.responses.ReadHoldingRegistersResponse;
import com.digitalpetri.modbus.responses.ReadInputRegistersResponse;

import io.netty.buffer.ByteBuf;
import io.netty.util.ReferenceCountUtil;

/***
 * modbus TCP协议Java通讯读取例子
 *
 *
 */
public class ModbusMasterTCPDemo {

    static ModbusTcpMaster master;

    /**
     * 获取TCP协议的Master
     *
     * @return
     */
    public static void initModbusTcpMaster() {
        if (master == null) {
            // 创建配置
            ModbusTcpMasterConfig config = new ModbusTcpMasterConfig.Builder("localhost").setPort(502).build();
            master = new ModbusTcpMaster(config);
        }
    }

    /***
     * 释放资源
     */
    public static void release() {
        if (master != null) {
            master.disconnect();
        }
        Modbus.releaseSharedResources();
    }

    /**
     * 读取Coils开关量
     *
     * @param address
     *            寄存器开始地址
     * @param quantity
     *            数量
     * @param unitId
     *            ID
     * @return 读取值
     * @throws InterruptedException
     *             异常
     * @throws ExecutionException
     *             异常
     */
    public static Boolean readCoils(int address, int quantity, int unitId)
            throws InterruptedException, ExecutionException {
        Boolean result = null;
        CompletableFuture<ReadCoilsResponse> future = master.sendRequest(new ReadCoilsRequest(address, quantity),
                unitId);
        ReadCoilsResponse readCoilsResponse = future.get();// 工具类做的同步返回.实际使用推荐结合业务进行异步处理
        if (readCoilsResponse != null) {
            ByteBuf buf = readCoilsResponse.getCoilStatus();
            result = buf.readBoolean();
            ReferenceCountUtil.release(readCoilsResponse);
        }
        return result;
    }

    /**
     * 读取readDiscreteInputs开关量
     *
     * @param address
     *            寄存器开始地址
     * @param quantity
     *            数量
     * @param unitId
     *            ID
     * @return 读取值
     * @throws InterruptedException
     *             异常
     * @throws ExecutionException
     *             异常
     */
    public static Boolean readDiscreteInputs(int address, int quantity, int unitId)
            throws InterruptedException, ExecutionException {
        Boolean result = null;
        CompletableFuture<ReadDiscreteInputsResponse> future = master
                .sendRequest(new ReadDiscreteInputsRequest(address, quantity), unitId);
        ReadDiscreteInputsResponse discreteInputsResponse = future.get();// 工具类做的同步返回.实际使用推荐结合业务进行异步处理
        if (discreteInputsResponse != null) {
            ByteBuf buf = discreteInputsResponse.getInputStatus();
            result = buf.readBoolean();
            ReferenceCountUtil.release(discreteInputsResponse);
        }
        return result;
    }

    /**
     * 读取HoldingRegister数据
     *
     * @param address
     *            寄存器地址
     * @param quantity
     *            寄存器数量
     * @param unitId
     *            id
     * @return 读取结果
     * @throws InterruptedException
     *             异常
     * @throws ExecutionException
     *             异常
     */
    public static Number readHoldingRegisters(int address, int quantity, int unitId)
            throws InterruptedException, ExecutionException {
        Number result = null;
        CompletableFuture<ReadHoldingRegistersResponse> future = master
                .sendRequest(new ReadHoldingRegistersRequest(address, quantity), unitId);
        ReadHoldingRegistersResponse readHoldingRegistersResponse = future.get();// 工具类做的同步返回.实际使用推荐结合业务进行异步处理
        if (readHoldingRegistersResponse != null) {
            ByteBuf buf = readHoldingRegistersResponse.getRegisters();
            result = buf.readFloat();
            ReferenceCountUtil.release(readHoldingRegistersResponse);
        }
        return result;
    }

    /**
     * 读取InputRegisters模拟量数据
     *
     * @param address
     *            寄存器开始地址
     * @param quantity
     *            数量
     * @param unitId
     *            ID
     * @return 读取值
     * @throws InterruptedException
     *             异常
     * @throws ExecutionException
     *             异常
     */
    public static Number readInputRegisters(int address, int quantity, int unitId)
            throws InterruptedException, ExecutionException {
        Number result = null;
        CompletableFuture<ReadInputRegistersResponse> future = master
                .sendRequest(new ReadInputRegistersRequest(address, quantity), unitId);
        ReadInputRegistersResponse readInputRegistersResponse = future.get();// 工具类做的同步返回.实际使用推荐结合业务进行异步处理
        if (readInputRegistersResponse != null) {
            ByteBuf buf = readInputRegistersResponse.getRegisters();
            result = buf.readDouble();
            ReferenceCountUtil.release(readInputRegistersResponse);
        }
        return result;
    }

    public static void main(String[] args) {
        try {
            // 初始化资源
            initModbusTcpMaster();

            // 执行操作

            // 读取开关量
            System.out.println(readCoils(0, 1, 1));
            System.out.println(readDiscreteInputs(0, 1, 1));
            System.out.println(readDiscreteInputs(1, 1, 1));

            // 读取模拟量
            System.out.println(readHoldingRegisters(0, 2, 1));
            System.out.println(readHoldingRegisters(2, 2, 1));
            System.out.println(readHoldingRegisters(4, 2, 1));
            System.out.println(readInputRegisters(2, 4, 1));
            System.out.println(readInputRegisters(6, 4, 1));

            // 释放资源
            release();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

编写modbus tcp写入案例

0x06 Write Single Register

功能码06 写入单个寄存器

类WriteSingleRegisterRequest

// 发送单个寄存器数据，一般是无符号16位值：比如10
master.sendRequest(new WriteSingleRegisterRequest(address, value), unitId);

0x10 Write Multiple Registers

功能码10 写入多个寄存器

写入多个寄存器

类WriteMultipleRegistersRequest

// float类型转字节数组
byte[] bytes = float2bytes(values);
// 转netty需要的字节类型
ByteBuf byteBuf = Unpooled.wrappedBuffer(bytes);

// 写多个寄存器数据，数据类型由quantity（modbus地址的数量）决定，1个modbus地址是16位即2字节，float类型占4个字节即2个数量的modbus地址，double类型占8个字节即4个数量的modbus地址
master.sendRequest(new WriteMultipleRegistersRequest(address,quantity,byteBuf), unitId);

代码理解

slave：和上面的一样 输出信息

true
false
false
10.1
-5.6
9.2
6.00002
-90.122222

评价感受

• jlibmodbus：集成多个串口通信开源库，有意思
• modbus4j：很有名
• modbus-master-tcp：底层netty，支持异步

添加所有页面，和上一页、具体页、下一页的按钮， 设置div样式，默认第一页显示，其他页隐藏。

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .item {
      display: none;
      width: 300px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }
    .item>img {
      width: 100%;
      height: auto;
      position: absolute;
      /*top: 0;*/
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    .item.active {
      display: block;
    }
  </style>
</head>
<body>

<div>
  <div class="item active"><img src="precisionPlastic/precisionPlastic1.jpg" height="1191" width="820" />
    <img src="precisionPlastic/precisionPlastic1.jpg" height="1191" width="820" />
  </div>
  <div class="item"><img src="precisionPlastic/precisionPlastic2.jpg" height="1191" width="820" /></div>
  <div class="item"><img src="precisionPlastic/precisionPlastic3.jpg" height="1191" width="820" /></div>
  <div class="item"><img src="precisionPlastic/precisionPlastic4.jpg" height="1191" width="820" /></div>
</div>
<div>
  <button class="prev" >上一页</button>
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="next" >下一页</button>
</div>
</body>

js部分

通过按键来实现页面的功能

<script type="text/javascript">
  //封装函数、图片显示的部分、传入获取到的div，和被点击的序号
  function toggle(eles, active) {
    for(var i = eles.length; i--;) {
      eles[i].className = "item"; //先让所有div隐藏
    }
    eles[active].className = "item active";//再让被点击的序号对应的div 显示
  }
  //获取按键和div
  var aBtn = document.getElementsByClassName("btn");
  var aIem = document.getElementsByClassName("item");
  var prev = document.getElementsByClassName("prev");
  var next =  document.getElementsByClassName("next");
  var nowPage = 0; //定义当前页，默认值为0；

  for(var i = aBtn.length; i--;) {
    aBtn[i].tab = i;
    aBtn[i].onclick=function(){
      toggle(aIem,this.tab);
      nowPage=this.tab; //被点击后，保存当前页的序号
    }
  }
  //下一页
  next[0].onclick = function () {
    nowPage++;
    nowPage %= aBtn.length;
    toggle(aIem,nowPage);
  }
  //上一页
  prev[0].onclick=function(){
    nowPage--;
    if(nowPage ==-1){
      nowPage = aBtn.length-1;
    }
    toggle(aIem,nowPage);
  }
</script>

实现效果

完整代码HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .item {
      display: none;
      width: 300px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }
    .item>img {
      width: 100%;
      height: auto;
      position: absolute;
      /*top: 0;*/
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    .item.active {
      display: block;
    }
  </style>
</head>
<body>

<div>
  <div class="item active"><img src="precisionPlastic/precisionPlastic1.jpg" height="1191" width="820" />
    <img src="precisionPlastic/precisionPlastic1.jpg" height="1191" width="820" />
  </div>
  <div class="item"><img src="precisionPlastic/precisionPlastic2.jpg" height="1191" width="820" /></div>
  <div class="item"><img src="precisionPlastic/precisionPlastic3.jpg" height="1191" width="820" /></div>
  <div class="item"><img src="precisionPlastic/precisionPlastic4.jpg" height="1191" width="820" /></div>
</div>
<div>
  <button class="prev" >上一页</button>
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="next" >下一页</button>
</div>
</body>

<script type="text/javascript">
  //封装函数、图片显示的部分、传入获取到的div，和被点击的序号
  function toggle(eles, active) {
    for(var i = eles.length; i--;) {
      eles[i].className = "item"; //先让所有div隐藏
    }
    eles[active].className = "item active";//再让被点击的序号对应的div 显示
  }
  //获取按键和div
  var aBtn = document.getElementsByClassName("btn");
  var aIem = document.getElementsByClassName("item");
  var prev = document.getElementsByClassName("prev");
  var next =  document.getElementsByClassName("next");
  var nowPage = 0; //定义当前页，默认值为0；

  for(var i = aBtn.length; i--;) {
    aBtn[i].tab = i;
    aBtn[i].onclick=function(){
      toggle(aIem,this.tab);
      nowPage=this.tab; //被点击后，保存当前页的序号
    }
  }
  //下一页
  next[0].onclick = function () {
    nowPage++;
    nowPage %= aBtn.length;
    toggle(aIem,nowPage);
  }
  //上一页
  prev[0].onclick=function(){
    nowPage--;
    if(nowPage ==-1){
      nowPage = aBtn.length-1;
    }
    toggle(aIem,nowPage);
  }
</script>
</html>

Promise 的理解和使用

Promise 是什么?

抽象表达:

1. Promise 是一门新的技术(ES6 规范)

2. Promise 是 JS 中进行异步编程的新解决方案

​ 备注：旧方案是单纯使用回调函数

具体表达:

1. 从语法上来说: Promise 是一个构造函数

2. 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值

promise 的状态改变

1. pending 变为 resolved

2. pending 变为 rejected

   说明: 只有这 2 种, 且一个 promise 对象只能改变一次 无论变为成功还是失败, 都会有一个结果数据 成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

promise 的基本流程

promise 的基本使用

1. 使用 1: 基本编码流程

<script>
  // 1) 创建 promise 对象(pending 状态), 指定执行器函数 const p = new
  Promise((resolve, reject) =>{" "}
  {
    // 2) 在执行器函数中启动异步任务
    setTimeout(() => {
      const time = Date.now();
      // 3) 根据结果做不同处理
      // 3.1) 如果成功了, 调用 resolve(), 指定成功的 value, 变为 resolved 状态
      if (time % 2 === 1) {
        resolve("成功的值 " + time);
      } else {
        // 3.2) 如果失败了, 调用 reject(), 指定失败的 reason, 变为rejected 状态
        reject("失败的值" + time);
      }
    }, 2000)
  }
  ) // 4) 能 promise 指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason p.then(
  value => {
    // 成功的回调函数 onResolved, 得到成功的 vlaue
    console.log("成功的 value: ", value)
  }, reason =>{" "}
  {
    // 失败的回调函数 onRejected, 得到失败的 reason
    console.log("失败的 reason: ", reason)
  }
  )
</script>

1. 使用 2: 使用 promise 封装基于定时器的异步

<script>
	function doDelay(time) {
		// 1. 创建 promise 对象
		return new Promise((resolve, reject) => {
		// 2. 启动异步任务
			console.log('启动异步任务')
			setTimeout(() => {
				console.log('延迟任务开始执行...')
				const time = Date.now() // 假设: 时间为奇数代表成功, 为偶数代表失败
				if (time %2=== 1) { // 成功了
					// 3. 1. 如果成功了, 调用 resolve()并传入成功的 value
					resolve('成功的数据 ' + time)
				} else { // 失败了
					// 3.2. 如果失败了, 调用 reject()并传入失败的 reason
					reject('失败的数据 ' + time)
				}
			}, time)
		})
	}
	const promise = doDelay(2000)
	promise.then(
		value => {
			console.log('成功的 value: ', value)
		},
		reason => {
			console.log('失败的 reason: ', reason)
		},
	)
</script>

1. 使用 3: 使用 promise 封装 ajax 异步请求

<script>
	/*
	可复用的发 ajax 请求的函数: xhr + promise
	*/
	function promiseAjax(url) {
		return new Promise((resolve, reject) => {
			const xhr = new XMLHttpRequest()
			xhr.onreadystatechange = () => {
			if (xhr.readyState!==4) return
				const {status, response} = xhr
				// 请求成功, 调用 resolve(value)
				if (status>=200 && status<300) {
					resolve(JSON.parse(response))
				} else { // 请求失败, 调用 reject(reason)
					reject(new Error('请求失败: status: ' + status))
				}
			}
			xhr.open("GET", url)
			xhr.send()
		})
	}
	promiseAjax('https://api.apiopen.top2/getJoke?page=1&count=2&type=video')
		.then(
			data => {
				console.log('显示成功数据', data)
			},
			error => {
				alert(error.message)
			}
		)
</script>

为什么要用 Promise?

指定回调函数的方式更加灵活

1. 旧的: 必须在启动异步任务前指定
2. promise: 启动异步任务 => 返回 promie 对象 => 给 promise 对象绑定回调函数(甚至可以在异步任务结束后指定/多个)

支持链式调用, 可以解决回调地狱问题*

1. 什么是回调地狱?

   回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件

2. 回调地狱的缺点?

   不便于阅读 不便于异常处理

3. 解决方案?

   promise 链式调用

4. 终极解决方案?

   async/await

<script>
	// 成功的回调函数
	function successCallback(result) {
		console.log("声音文件创建成功: " + result);
	}
	// 失败的回调函数
	function failureCallback(error) {
		console.log("声音文件创建失败: " + error);
	}

	/* 1.1 使用纯回调函数 */
	createAudioFileAsync(audioSettings, successCallback, failureCallback)

	/* 1.2. 使用 Promise */
	const promise = createAudioFileAsync(audioSettings); // 2
	setTimeout(() => {
		promise.then(successCallback, failureCallback);
	}, 3000);

	/*2.1. 回调地狱*/
	doSomething(function(result) {
		doSomethingElse(result, function(newResult) {
			doThirdThing(newResult, function(finalResult) {
				console.log('Got the final result: ' + finalResult)
			}, failureCallback)
		}, failureCallback)
	}, failureCallback)

	/*2.2. 使用 promise 的链式调用解决回调地狱*/
	doSomething().then(function(result) {
		return doSomethingElse(result)
	})
	.then(function(newResult) {
		return doThirdThing(newResult)
	})
	.then(function(finalResult) {
		console.log('Got the final result: ' + finalResult)
	})
	.catch(failureCallback)

	/*2.3. async/await: 回调地狱的终极解决方案*/
	async function request() {
		try {
			const result = await doSomething()
			const newResult = await doSomethingElse(result)
			const finalResult = await doThirdThing(newResult)
			console.log('Got the final result: ' + finalResult)
		} catch (error) {
			failureCallback(error)
		}
	}
</script>

如何使用 Promise?

API

1. Promise 构造函数: Promise (excutor) {}

   (1) executor 函数: 执行器 (resolve, reject) => {}

   (2) resolve 函数: 内部定义成功时我们调用的函数 value => {}

   (3) reject 函数: 内部定义失败时我们调用的函数 reason => {}

   说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

2. Promise.prototype.then 方法: (onResolved, onRejected) => {}

   (1) onResolved 函数: 成功的回调函数 (value) => {}

   (2) onRejected 函数: 失败的回调函数 (reason) => {}

   说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调 返回一个新的 promise 对象

3. Promise.prototype.catch 方法: (onRejected) => {}

   (1) onRejected 函数: 失败的回调函数 (reason) => {}

   说明: then()的语法糖, 相当于: then(undefined, onRejected)

4. Promise.resolve 方法: (value) => {}

   (1) value: 成功的数据或 promise 对象

   说明: 返回一个成功/失败的 promise 对象

5. Promise.reject 方法: (reason) => {}

   (1) reason: 失败的原因

   说明: 返回一个失败的 promise 对象

6. Promise.all 方法: (promises) => {}

   (1) promises: 包含 n 个 promise 的数组

   说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就 直接失败

7. Promise.race 方法: (promises) => {}

   (1) promises: 包含 n 个 promise 的数组

   说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

promise 的几个关键问题

1. 如何改变 promise 的状态?

   (1) resolve(value): 如果当前是 pending 就会变为 resolved

   (2) reject(reason): 如果当前是 pending 就会变为 rejected

   (3) 抛出异常: 如果当前是 pending 就会变为 rejected

2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?

   当 promise 改变为对应状态时都会调用

3. 改变 promise 状态和指定回调函数谁先谁后?

   (1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调

   (2) 如何先改状态再指定回调?

   ​ ① 在执行器中直接调用 resolve()/reject()

   ​ ② 延迟更长时间才调用 then()

   (3) 什么时候才能得到数据?

   ​ ① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据

   ​ ② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

4. promise.then()返回的新 promise 的结果状态由什么决定?

   (1) 简单表达: 由 then()指定的回调函数执行的结果决定

   (2) 详细表达:

   ​ ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常

   ​ ② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值

   ​ ③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

5. promise 如何串连多个操作任务?

   (1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用

   (2) 通过 then 的链式调用串连多个同步/异步任务

6. promise 异常传透?

   (1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,

   (2) 前面任何操作出了异常, 都会传到最后失败的回调中处理

7. 中断 promise 链?

   (1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数

   (2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

汉文与汉字

首先，我们需要了解汉文和汉字这两个基础概念：

• **汉文（Han Script）**是汉语、日本语、朝鲜语、韩国语的书写系统中的一种文字；

• **汉字（CJK Ideograph）**是汉文的基本单元。

汉字文化圈中的许多国家或地区都对汉字提出了自己的编码标准，而 Unicode 将这些标准加总在一起进行统一编码，力求实现原标准与 Unicode 编码之间的无损转换。

字符集和字符编码

Unicode，GBK 和 UTF-8 有什么区别？很多人总是将它们混淆在一起，傻傻分不清，实际上它们不是同领域的概念。

字符集 我们常见的 Unicode、 ASCII 是一种字符集（character set），其作用是用一系列数字来表示字符（character），这些数字有时也称为码点（code points）。

例如 ASCII 码是美国制定了一套字符编码，ASCII 码使用一个字节来表示一个字符，一共规定了 128 个字符的编码，对应英语字符与二进制位之间的关系。

但对于一些亚洲国家的文字，比如中文，这些符号远远不够，必须使用多个字节表示一个符号。比如简体中文的 GB2312 编码方式，使用两个字节表示一个字符，最多可以表示 256 x 256 = 65536 个符号。

由于世界上存在着多种编码方式，同一个二进制数字可以被解释成不同的符号。如果用错误的编码方式解读一段文本，就会出现乱码。由此 Unicode 应运而生。

Unicode 是一个统一编码集合，类似于世界语，它将世界上所有符号都赋予了一个第一无二的编码。由于每个字符的编码都是唯一的，这样避免了字符编码混乱的问题。

字符编码 有了字符集，我们现在可以用任意数字来表示现实中的字符了。需要注意的是 Unicode 只是一个符号集，它只规定了符号的二进制代码，却没有规定这个二进制代码应该如何存储。所以字符要保存在计算机中，必须要先经过编码。

UTF-8 是 Unicode 的字符编码方式之一，同时也是互联网上使用最广的一种 Unicode 的实现方式。它规定了 Unicode 符号的存储方式。UTF-8 最大的一个特点，就是它是一种变长的编码方式。它可以使用 1~4 个字节表示一个符号，根据不同的符号而变化字节长度。

GBK（汉字内码扩展规范）和 UTF-8 类似，是一种中文字符编码方式。

总结：ASCII 和 Unicode 是一种字符集，而 UTF-8 和 GBK 是一种字符编码方式。两者不是一类事物, 是无法进行对比的。

正则匹配汉字

介绍完字符集和字符编码之后，回到正题，我们已经知道「汉字」是汉文的基本单元，但这里的「汉字」具体指代哪些字符集呢？

Unicode 从语义（semantic）、抽象字形（abstract shape），具体字形（typeface）三个维度出发，把不同编码标准里「起源相同、本义相同、形状一样或稍异」的汉字赋予相同编码，这些被编码的字符称为中日韩统一表意文字，即我们上面所提到的「汉字」。如果把它们全部列举出来写成正则表达式，那么就是技术上完整的匹配汉字的正则表达式了。

我们一开始所提到的正则表达式 /[\u4e00-\u9fa5]/ 匹配区域对应的是 Unicode 1.0.1 就收录进来的中日韩统一表意文字区块，在 Unicode 3.0 以前，这个正则表达式确实给出了所有汉字的编码。换言之，从 1992 年到 1999 年，这个正则表达式确实是正确的，想必这个表达式已经有 20 年了。

然而时光飞逝，Unicode 在 2017 年 6 月发布了 10.0.0 版本。在这 20 年间，Unicode 添加了许多汉字。这些新增的汉字并不在上面这个正则表达式匹配的区域中，所以我们的正则也需要与时俱进匹配最新的 Unicode 标准。

而这个问题的标准答案正则即是：

const HanZi = /\p{Unified_Ideograph}/u

\u是 ECMAScript 2015 定义的正则表达式标志，意味着将表达式作为 Unicode 码点序列； \p是 ECMAScript 2018 定义的正则表达式 Unicode 属性转义，它赋予了我们根据 Unicode 字符的属性数据构造表达式的能力； Unified_Ideograph 是 Unicode 字符的一个二值属性，对于汉字，其取值为 Yes，否则为 No。 因此 \p{Unified_Ideograph} 匹配所有满足 Unified_Ideograph=yes 的 Unicode 字符，而它的底层实现由运行时所依赖的 Unicode 版本决定，开发者不需要知道汉字的具体 Unicode 码点范围。

兼容性

Chrome 64 以上以及 Safari 11.1 以上都支持正则表达式 Unicode 属性转义。对于其他浏览器，推荐使用 7.7 版本的 @babel/env 转译配置将带有属性转义的正则表达式转为 Unicode 码点正则表达式。

{
  "presets": ["@babel/env"]
}

参考文章： JavaScript 正则表达式匹配汉字

什么是虚拟机

所谓的虚拟机，就是在当前计算机系统中，又开启了一个虚拟系统

这个虚拟系统，我们要安装Linux系统

Linux概述

Linux是一套免费使用和自由传播的类Unix操作系统，是一个基于Unix系统的多用户、多任务、支持多线程和多CPU的操作系统

多数情况下在Windows系统下开发，部署在Linux中

Windows和Linux系统的版本对比

特点

1. 开源 免费开放源代码
2. 多用户 系统可以保证各用户之间的安全、隐私
3. 多任务 同时可以开启多个应用程序
4. 良好的界面 Linux同时具有命令行界面和图形化界面
5. 支持多平台 可以在多种硬件平台上安装和运行，比如：PC或服务器或嵌入式系统

发行版本

1. Red Hat红帽子操作系统，企业级Linux，但是由于该系统收费，很多中小型企业都弃用了
2. CentOS它诞生于RedHat企业Linux系统中的免费源代码，现在已经不维护了
3. Rocky Linux可以很好的代替CentOS
4. 其他版本Ubuntu、Debian等等

安装VMWare及加载环境

双击运行VMWare安装软件，一直下一步即可，我们可以修改安装路径，但是需要注意路径不要有中文和空格 安装后，桌面上会有以上图标

解压rockylinux8.5.zip到一个没有中文和空格的路径中，在文件夹中找到一个后缀为.vmx的文件，双击运行会在VMWare中打开，点击开启此虚拟机，第一次启动，会有以下提示，选择“我已复制该虚拟机”

等待后，有以下提示

输入用户名：rockylinux

提示输入密码，输入内容时没有任何提示，所有一旦输错，需要重新输入，密码也是rockylinux

有类似以上提示，就说明登录成功了

切换登录用户，切换为root用户,切换命令如下：

sudo su -

有以上提示，表示切换成功，我们可以为root用户设置密码

passwd

之后登录root用户时，直接输入：su即可

安装BvSshClient

安装直接点击下一步即可

安装后，桌面上会有以上图标

运行后，有以下提示

host需要写入虚拟机的ip，需要查看虚拟机ip地址

ifconfig ens33  

以上红色框中的ip地址，是老师的ip，看自己的ip地址，然后写入到BSC的host中 登录成功后，会有以下提示

点击红框中的图标，会有终端弹出，会在这里练习Linux命令

Linux的目录结构

我们知道Linux的目录结构为树状结构，最顶级的目录为根目录/。

一些重要的目录

注意：文件或目录名<=255个字符、区分大小写、不能使用"/",不允许创建与系统已有的相同的目录。因为不好区分，还有就是防止某些软件无法自动进行识别

我的博客主题版本为：hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别，届时请自行百度。

1. 创建一个 GitHub 仓库存储图片

1. 首先创建一个图床仓库用来存放图片，仓库名随意。以下会以 [AssetsRepo] 指代这个静态资源仓库。

   

2. 访问 (Github-> 头像（右上角）->Settings->Developer Settings->Personal access tokens)Personal Access Tokens (Classic) (github.com)->generate new token, 创建的 Token 名称随意，但必须勾选 repo 项。

   

token 只会显示这一次，之后将无法查看，所以务必保证你已经记录下了 Token。之后如果忘记了就只能重新生成重新配置了。

2. npm 图床使用

1. 首先需要注册一个 npm 的账号。访问 npm 注册页面

   

2. 完成邮箱验证，注册完成后进入账号管理界面:头像 ->Account，拉倒最上方，你会看到 You have not verified ![85e92b51](/cdn/Miao/2026/9/85e92b51_af72c1940d788c381081e1621e9deae1.webp)your email address 字样的提示，点击以后按提示步骤验证你的邮箱。

3. 找到我们之前创建的图床仓库，在本地合适的位置把它 clone 下来。找个空文件夹打开终端输入：

   git clone git@github.com:[username]/[AssetsRepo].git
   #或者
   git clone https://github.com/[username]/[AssetsRepo].git
   

4. 在 clone 下来的 [AssetsRepo] 文件夹内打开终端，输入以下指令切换回原生源：

   npm config set registry https://registry.npmjs.org
   

5. 添加本地 npm 用户设置

   # 仅第一次使用需要添加用户，之后会提示你输入你的npm账号密码以及注册邮箱
   npm adduser
   # 非第一次使用直接登录即可，之后会提示你输入你的npm账号密码以及注册邮箱
   npm login
   

6. 运行 npm 初始化指令，把整个图床仓库打包，按照指示进行配置，注意需要事先确认你的包名没有和别人已发布的包重复，可以在 npm 官网搜索相应包名，搜不到就说明还没被占用。

   npm init
   

最后会输出一段 package.json，请求确认，输入 yes 即可。

1. 然后输入发布指令，我们就可以把包发布到 npm 上了。

   npm publish
   

2. jsdelivr+npm 的图片引用和 jsdelivr+github 很相似，例如：访问我在 [AssetsRepo] 仓库里存放的 /img/index.png。

   # jsDelivr+github链接
   https://cdn.jsdelivr.net/gh/[GithubUserName]/[AssetsRepo]/img/index.png
   # jsDelivr+npm链接
   https://cdn.jsdelivr.net/npm/[NpmPackageName]/img/index.png
   

   可以看到 Npm 只需要提供包名即可。这也是一开始要求包名不重复的原因之一

   jsDelivr+Npm 依然有 100MB 的包大小限制，但是 NPM 有丰富的国内节点。可以挑选一个使用。个人推荐知乎的。没有大小限制，而且也很稳定。

       【jsd出品，网宿国内节点】
       https://cdn.jsdelivr.net/npm/:package@:version/:file
       【知乎出品，网宿国内节点】
       主域名国内访问速度较慢，但有适合国内访问的镜像地址
       主域名：https://unpkg.com/:package@:version/:file
       镜像地址：https://unpkg.zhimg.com/:package@:version/:file
       【百度出品，网宿国内节点】
       https://code.bdstatic.com/npm/:package@:version/:file
       【饿了么出品，网宿国内节点】
   https://npm.elemecdn.com/:package@:version/:file
       https://shadow.elemecdn.com/npm/:package@:version/:file
   

4. 使用 GitHub Action 自动发布 npm 包

如果每次都要在本地进行 npm publish 的话，npm 的提交是整个包一起上传的，不存在增量更新，耗时不说，而且还往往需要架梯子才能正常上传。所以我们可以把它交给 github action 来完成。

1. 在 npm 官网 ->头像 ->Access Tokens->Generate New Token, 勾选Automation 选项，然后点击Generate Token 生成 Token ，Token 只会显示这一次，之后如果忘记了就只能重新生成重新配置了。

   

   

2. 在 github 的 [AssetsRepo] 仓库设置项里添加一个名为 NPM_TOKEN 的 secrets，把获取的 Npm 的 Access token 输入进去。

3. 在本地的 [AssetsRepo] 文件夹下新建 [AssetsRepo]/.github/workflows/autopublish.yml, 然后输入下面内容：

   name: Node.js Package
   # 监测图床分支，2020年10月后github新建仓库默认分支改为main，记得更改
   on:
     push:
       branches:
         - master
   
   jobs:
     publish-npm:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - uses: actions/setup-node@v1
           with:
             node-version: "12.x"
             registry-url: https://registry.npmjs.org/
         - run: npm publish
           env:
             NODE_AUTH_TOKEN: ${{secrets.npm_token}}
   

4. 在本地的 [AssetsRepo] 文件夹下打开终端，运行以下指令，上传新增内容至 github，即可触发部署。

   # 将更改提交
   git add .
   git commit -m "npm publish"
   # 更新package版本号
   npm version patch
   # 推送至github触发action
   git push
   

注意：⑴. 此处的四行指令顺序严格。

⑵. 每次更新 npm 图床都需要先修改 [AssetsRepo]\package.json 里的 version, 也就是版本号。而 npm version patch 即为更新 package.json 里的版本号的指令，效果是末尾版本号 + 1，例如 0.0.1=>0.0.2、1.1.3=>1.1.4。免去了打开 package.json 再修改版本号的麻烦（大版本更新还是需要手动改的）。

⑶. 更新 npm 图床务必要记得更新 package.json 里的版本号！

Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案。此项目包含开发分布式应用服务的必需组件，方便开发者通过 Spring Cloud 编程模型轻松使用这些组件来开发分布式应用服务。

依托 Spring Cloud Alibaba，只需要添加一些注解和少量配置，就可以将 Spring Cloud 应用接入阿里分布式应用解决方案，通过阿里中间件来迅速搭建分布式应用系统。

说功能明

• 服务限流降级：默认支持 Servlet，RestTemplate，Dubbo 和 RocketMQ 限流降级功能的介入，可以再运行时通过控制台实时修改限流降级规则，还支持查看限流降级的 Metrics 监控 ；解决服务异常问题

• 服务注册与发现：适配 SpringCloud 服务注册与发现标准，默认集成了 Ribbon 的支持 解决服务治理问题

• 分布式配置管理：支持分布式系统中的外部化配置，配置更改时自动刷新

• 消息驱动能力：基于 SpringCloud Stream 为微服务应用构建消息驱动能力 异步通信，解决组件间通信问题

• 阿里云对象存储：阿里云提供的海量，安全，低成本，高可靠的云存储服务，支持在任何应用，任何时间，任何地点存储和访问任意类型数据 分布式存储

• 分布式任务调度：提供秒级，精准，高可靠，高可用的定时 基于表达式 任务调度服务。同时提供分布式的任务执行模型，如网格任务。网格任务支持海量子任务均匀分配到所有 Worker 上执行

提供的组件

开源的免费组件：

• Sentinel ： 把流量作为切入点，从流量控制，熔断降级，系统负载保护等多个维度保护服务的

• Nacos：一个更易于构建云原生应用的动态服务发现，配置管理和服务管理平台

• RocketMQ：开源分布式消息系统，基于高可用分布式集群技术，提供低延时的，高可靠的消息发布与订阅服务，一般用于消息队列

• Dubbo：高性能的 Java RPC 框架

• Seata：易于使用的高性能微服务分布式事务解决方案

基于阿里云的商用组件：

• Alibaba Cloud ACM ：分布式架构环境中对应用配置进行集中管理和推送应用配置的中心产品

• Alibaba Cloud OSS ：阿里云对象存储

• Alibaba Cloud SchedulerX ：分布式任务调度，基于Cron表达式的三高 高可靠，高可用，高精度 定时任务调度服务

• Alibaba Cloud SMS ：覆盖全球的短信服务

对应版本

使用 SpringCloudAlibaba 的优势 部分摘自书籍

1. Alibaba 开源组件在没有并入 SpringCloud 生态之前，就已经在各个公司中广泛应用，如 Dubbo ，但之前因为阿里巴巴突然停止更新了几年，甚至有公司对 Dubbo 进行了二开，产生了 Dubbox。
2. 对大流量大并发天生的优势，我们知道 Alibaba 是电商起家，特别是在面对双十一这样的大促洪峰上，这些组件依然稳定可靠，所以说，相对于之前 Netflix 所提供的 cloud 组件来说，阿里巴巴所提供的组件似乎更适合于国内的应用场景。

后续

由于其中的生态繁杂，具体的各种组件，我会详细介绍，在本文中，只是简单的对 SpringCloudAlibaba 进行了一个概览。

本作品采用知识共享署名 4.0 国际许可协议进行许可。

#指定服务的端口
server:
  port:      #端口号

#公共配置
mybatis:
  configuration:
    #禁用缓存
    cache-enabled: false
    #配置映射驼峰命名法
    map-underscore-to-camel-case: true
    #将运行的sql语句在控制台输出
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

#配置knife4j
knife4j:
  enable: true #开启增强配置
  production: false #生产环境屏蔽,开启将禁止访问在线API文档
  #Basic认证功能,既是否需要通过用户名, 密码验证后才能访问在线API文档

  basic:
    enable: false #是否开启Basic认证
    #如果开启Basic认证,但是没有配置用户名和密码, 默认是admin/123321
    username: root
    password: root

#指定服务的应用名称(service-id)
spring:
    application:
      name:        #应用名称
    profiles:
      active: dev   #将来会激活dev的profile文件

XML依赖

web实例

<!--web实例-->
<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

mybatis整合springboot

 <!--mybatis整合springboot-->
<dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
        </dependency>

mysql驱动

<!--mysql驱动-->
<dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

在线api文档

<!--在线api文档-->
<dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>knife4j-spring-boot-starter</artifactId>
        </dependency>

alibaba 数据源德鲁伊

<!--alibaba 数据源德鲁伊-->
<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
        </dependency>

application-dev.yml配置

spring:
#配置数据库连接
  datasource:
    url: jdbc:mysql://localhost:3306/csmall_db?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimeZone=Asia/Shanghai&allowMultiQueries=true
    username: root
    password: root
#配置nacos信息
  cloud:
    nacos:
      discovery:
        server-addr: localhost:8848
    #配置sentinel信息
    sentinel:
      transport:
        dashboard: localhost:8080 #配置sentinel仪表盘的位置
        port: 8721 #执行限流的端口，每个项目是唯一的，如果此项目使用了8721端口，其余就不能使用该端口了

#配置dubbo信息
dubbo:
  protocol:
    #port设置成-1是Dubbo框架支持的特殊写法,会自动动态生成可用的端口,规则是从20880开始,
    #如果被占用就递增使用
    port: -1
    #设置连接的名称,一般固定就叫dubbo
    name: dubbo
  registry:
    #声明注册中心的软件类型和ip端口号
    address: nacos://localhost:8848
  consumer:
    #当项目启动时,作为消费者,是否要检查所有远程服务可用,false表示不检查
    check: false

seata:
  tx-service-group: csmall_group  #定义分组名称，一般是为了区分项目
  service:
    vgroup-mapping:
      csmall_group: default   #csmall_group组使用默认的Seata配置完成事务
    grouplist:
      default: localhost:8091 #设置Seata所在的地址，默认端口是8091

XML依赖

nacos依赖

<!--nacos依赖-->
 <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>

dubbo依赖

<!-- 添加dubbo依赖-->
<dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-dubbo</artifactId>
        </dependency>

seata依赖

<!--添加seata依赖-->
<dependency>
            <groupId>io.seata</groupId>
            <artifactId>seata-spring-boot-starter</artifactId>
        </dependency>
<!--Seata完成分布式事务需要的两个相关依赖（Seata需要下载下面两个依赖中的资源）-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>

sentinel依赖

<!--添加sentinel依赖-->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-sentinel</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.7.RELEASE</version>
                <configuration>
                    <mainClass>cn.tedu.csmall.stock.CsmallStockApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

• textarea标签回车符是/n,在html里识别回车是
  ，在存入数据库之前要进行转换成
  ，在取出展示在html页面时才能显示换行。

<tr>
            <td align=right width="20%" height="100">备注：</td>
            <td><textarea name="beiz" id="beiz"  class="textarea" style="width:80%;height:80px;"></textarea></td>
</tr>

• 在提交前存入数据库前转换一下

<script lanuage="javascript">
    var descrip = $("#beiz").val();
    descrip=descrip.replace(/\n/g,'<br />');
    $("#beiz").val(descrip);
</script>

• 这样存进数据库就是<br/>

• 试列

<textarea id="afms" rows="5" cols="50" name="afms" placeholder="工作介绍，如模具制作"></textarea>

            //工作描述
            var afms = $('#afms').val();

			afms = afms.replace(/\n/g,'<br />');
            
			$("#afms").val(afms);
            
            if(afms==undefined || afms.length<=0){
                alert('请输入工作描述！');
                return false;
            }

2.<br/> 转 textArea换行符

span_html = $("#test_span").html()
"测试<br>测试<br>测试<br>测试<br>"
text_area = $("#222");
n.fn.init [textarea#222, context: document, selector: "#222"]
text_area.val();
""
text_area.val(span_html.replace(/<br>/g,"\n"))
n.fn.init [textarea#222, context: document, selector: "#222"]

步骤1：下载并安装Node.js

下载并安装Node.js，下载完成后，打开新的CMD/终端窗口，输入以下命令：

npm -v

执行后，会提示版本号，则表示安装成功。

步骤2：配置npm源

在CMD/终端窗口中输入：

npm config set registry https://registry.npm.taobao.org

执行后，不会有反馈。

以上命令用于配置npm源，则后续的下载软件都将从所配置的源服务器下载。

步骤3：安装vue/cli

在CMD/终端窗口中输入：

npm install -g @vue/cli

执行后，会自动下载一些软件，在CMD/终端窗口中也会有许多信息，只要没有出现Error级别的错误，均可无视。

到此为止的所有操作，在每台电脑上，都是一次性操作。

步骤4：创建工程

（以下示例将把项目创建在F:\Vue-Workspace，此盘和文件夹名均可自行指定）

打开电脑中的文件夹窗口，找到F盘，新建名为Vue-Workspace的文件夹，然后，在CMD/终端窗口中输入：

f:

执行后，再输入：

cd f:\Vue-Workspace

再执行后，命令提示符应该是F:\Vue-Workspace，此时，再创建Vue CLI项目，则项目会出现在此文件夹中。

在CMD/终端窗口中输入：

vue create jsd2203-csmall-web-client

输入完成后，按1次回车（按下后会卡顿一会，请等待），在接下来的提示中，

选择`Manually choose featuers`，

再选择`Babel`、`Router`、`Vuex`，

再选择Vue的版本为`2.x`，

出现`Y/n`的选项时，直接回车即可，

然后选择`In package.json`，

最后的`y/N`选择也直接回车即可。

接下来，会自动完成创建过程，出现 Successfully created project cgb2202-csmall-web-client.提示即表示成功。

启动Vue CLI工程

在CMD/终端窗口中，首先，确保当前位置存在package.json文件，此文件是项目的根目录下的文件，所以，输入命令之前的提示符应该是：

F:\Vue-Workspace\jsd2203-csmall-web-client>

在此提示符下，输入启动项目的命令：

npm run serve

执行以上命令后，会自动编译并启动此工程，在启动过程中，将看到 Compiled successfully in 2155ms提示，则表示启动成功。

启动成功的提示中还包括http://localhost:8080这样的网址，通过此网址即可访问此工程的运行效果（不同网络配置的电脑，提示的网址可能数量不同）。

在浏览器中输入以上网址，即可访问。

停止已启动的项目

在CMD/终端窗口中，按下Ctrl + C即可停止已启动的项目。

（按下Ctrl + C时即已停止，所以，在弹出的提示中，无论选择Y或N都是等效的）

idea中terminal使用npm报不是内部或外部命令，也不是可运行的程序 或批处理文件

进入File->|Settings -> Tools -> Terminal 将shell path替换成此处内容：

C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe

关于Vue CLI工程结构

• [.idea]：是IntelliJ IDEA管理项目时自动生成的，可以无视
• [node_modules]：是当前项目所需的依赖项，不应该自行维护，注意：通常此文件夹不会提交到git，在得到git上的项目后，如果没有此文件夹，需要先执行npm install命令才可以
• [public]：是当前项目启动后的根路径，可存放各种资源，例如.css文件、.js文件、图片文件等，如果在此文件夹下粘贴1.jpg，则可以通过http://localhost:8080/1.jpg查看到此文件，并且，还可以按需自行创建文件夹，则路径上也应该有文件名称
  • favicon.ico：项目的图标文件，每个项目在（编译后的）根目录下有此文件时，会在浏览器中显示此图标
  • index.html：当前项目的页面，在Vue CLI工程，将有且仅有这1个HTML页面
• [src]
  • [assets]：资源文件夹，用于存放静态资源，通常包括.css文件、.js文件、图片文件等，需要注意，此处的文件都应该是不随着程序运行过程变化而发生变化的文件，例如logo.png在此处是正确的，但是，用户的“头像”则不应该放在此处
  • [components]：用于存放视图组件，且这些视图组件通常是被其它视图组件调用的，是可能复用的组件，并且，在不同的调用中，传入的参数可能不同
  • [router]
    • index.js：路由配置文件，主要配置访问路径与视图组件的对应关系
  • [store]
    • index.js：存储共享的量的文件
  • [views]：用于存放视图组件
  • App.vue：是index.html默认加载的视图文件
  • main.js：是当前项目的主JS文件，通常用于管理一些配置，例如添加了某些依赖项（例如Element UI）后，可能需要在此处导入，才可以使得各.vue文件中可以使用这些依赖项
• .gitignore：用于配置哪些文件和文件夹不会提交到git，如果此项目不需要提交到git，则不需要此文件
• babel.config.js：是Babel的配置文件，通常不关心，也不要修改
• jsconfig.js：是js一些通常配置的文件，通常不关心，也不要修改
• LICENSE：许可协议文件，默认的项目中通常没有此文件，在git上公开的项目通常都包含此文件
• package.json：主要配置当前项目的依赖项与项目的编译打包等配置，通常不建议手动修改
• package-lock.json：是自动管理的配置文件，通常不建议手动修改
• README.md：当前项目的说明文件，如果此项目已提交到git，通常会显示在git的此项目的主页，通常，应该在此文件中对当前项目进行必要描述，例如：如何配置此项目、如何启动此项目、相关的注意事项等
• vue.config.js：是Vue配置的文件，通常不关心，也不要修改

关于.vue文件 通常，.vue文件的源代码可以由3大部分组成：页面设计、样式、脚本，分别使用<template>、<style>、<script>节点。

关于<template>标签，其直接子标签必须有且仅有1个!

这3大部分并不全部都是必须的，例如某个.vue中没有<script>也是完全正常的！

在<template>的某个层级的子级，如果出现了<router-view />，表示此区域将由另一个视图文件来负责设计，至于是哪个视图， 取决于router/index.js中的路由配置。

关于路由的简单配置

在router下的index.js文件是用于配置路由的，在此文件中有一个routes常量，其属性值是一个对象的数组，例如：

import HomeView from '../views/HomeView.vue'const routes = [  {    path: '/',    name: 'home',    component: HomeView  },  {    path: '/about',    name: 'about',    component: () => import('../views/AboutView.vue')  }]

数组元素中，通常具有3个属性：

• path：路径，必须唯一
• name：自定义名称，可以不必配置此属性
• component：路径对应的视图组件（某个.vue文件加载得到的对象），有2种加载方式，第1种是在当前文件的起始位置（顶部）通过import语法静态导入（默认导入），第2种做法是在此component属性值位置使用箭头函数结合import函数进行导入，通常，在每个项目中，静态导入的视图组件应该只有1个

以上重点关注path和component的配置，当显示的视图组件中使用到了时，将根据当前访问的URL（浏览器中的路径）来决定显示哪个视图。

练习：做新的Other页面

1. App.vue文件定义标签: Other

2. router/index.js const routes = [ /.../ { path: '/other', component: () => import('../views/OtherView.vue') } ]

3. views文件夹中创建OtherView.vue

<template>    <div>        <h1>这是“其他”页面</h1>    </div></template>

使用Element UI

在CMD/终端窗口中，确保在当前项目的文件夹位置，执行安装Element Ui的命令：

npm i element-ui -S

安装完成后，还需要在main.js中添加配置：

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

以上操作是每个项目中做1次的操作。

接下来，在当前项目的任何.vue文件中都可以直接使用Element UI进行设计。

使用Axios

在CMD/终端窗口中，确保在当前项目的文件夹位置，执行安装axios的命令：

npm i axios -S 安装完成后，还需要在main.js中添加配置：

import axios from 'axios'Vue.prototype.axios = axios

以上操作是每个项目中做1次的操作。

接下来，在当前项目的任何.vue文件中都可以直接使用axios进行网络访问。

需要注意，目标服务器可能是禁止跨域访问的（错误提示中有CORS字样），在Spring Boot工程中，可以使得启动项目的类实现WebMvcConfigurer接口，并在此类中添加以下代码：

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("*")      //.allowedOrigins("*")
            .allowedMethods("*")
            .allowedHeaders("*")
            .allowCredentials(true)
            .maxAge(3600);
}

使用Axios发请求的代码示例：

let url = 'http://localhost:8080/login';  
console.log('url >>> ' + url);  
let data = {'username': this.ruleForm.username,
'password': this.ruleForm.password  
};
  console.log('data >>> ');
  console.log(data);  
this.axios.post(url,data).then((response)=>{
  console.log(response.data); 
 }).catch(function(error) {
console.log('响应结果为失败！');})

Vue CLI中的嵌套路由

在开发实践中，一个项目中，可能部分页面完全没有共用的（需要复用的）部分，所以，在App.vue中，应该只有一个<router-view/>，没有其它标签，

仍有部分页面存在共用的部分，所以，在其它.vue文件中，也可能需要再次使用到<router-view />，其具体表现为在App.vue中只有<router-view/>，

则此处实现显示的就另外某个.vue，但是在这些.vue中会用到<router-view/>，即出现了“嵌套”。

操作步骤：

1. 在App.vue中只保留一个<router-view />

2. 在HomeView.vue中设计页面结构，且主体部分也是一个<router-view/>

3. 新创建views/user/UserListView.vue和views/user/UserAddNewView.vue，在页面设计中，添加简单的文本表示页面是哪一个即可

4. 在router/index.js中进行配置，例如：

   const routes = [
     {
       // 因为被嵌套的<router-view>是在HomeView中的
       // 所以将在此处理配置嵌套路由
       // 使用children来配置子级路由，children子级的配置方式与routes子级的配置方式相同
       // 通常，应该配置redirect属性，表示重定向，因为一旦发现嵌套，原来的视图（例如HomeView）是不完整的，不应该允许直接访问
       // 以下配置重定向的效果：一旦访问 / 路径，就会自动跳转到 /user/list 路径
       path: '/',
       component: HomeView,
       redirect: '/user/list',
       children: [
         {
           path: '/user/list',
           component: () => import('../views/user/UserListView.vue')
         },
         {
           path: '/user/add-new',
           component: () => import('../views/user/UserAddNewView.vue')
         }
       ]
     }
    ]  
     // 原有其它代码
   

5. 最后，在访问时，使用例如http://localhost:8080/user/list类似的路径进行访问即可

在配置嵌套路由的路径时，推荐在父级路径上配置统一前缀，并在子级路径中使用相对路径进行配置，例如：

const routes = [
  {
    path: '/user', // 配置统一前缀
    component: HomeView,
    redirect: '/user/list',
    children: [
      {
        path: 'list', // 不以 / 作为第1个字符，表示相对路径
        component: () => import('../views/user/UserListView.vue')
      },
      {
        path: 'add-new', // 不以 / 作为第1个字符，表示相对路径
        component: () => import('../views/user/UserAddNewView.vue')
      }
    ]
  },
]

另外，还可以在<el-menu>上添加router，用于“启用菜单上的路由”，接下来，各菜单项的index属性值就可以配置为URL，在运行时，点击菜单项， 就可以跳转到对应的URL，例如：

<!-- 以下新增了router属性 -->          
<el-menu
      router
      default-active="/user/list"
      class="el-menu-vertical-demo">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-user-solid"></i>
        <span>用户管理</span>
      </template>
      <!-- 以下菜单项的index值为对应的URL -->
      <el-menu-item index="/user/list">
        <i class="el-icon-location"></i>
        <span>用户列表</span>
      </el-menu-item>
        <!-- 以下菜单项的index值为对应的URL -->
      <el-menu-item index="/user/add-new">
        <i class="el-icon-location"></i>
        <span>添加用户</span>
      </el-menu-item>
    </el-submenu>
</el-menu>

Vue CLI的路由守卫

路由守卫是一种类似Java Web中的“过滤器”的组件，它可以运行在每次发生路由跳转之前、之后， 主要用于解决一些“不管是哪个页面发生跳转都需要执行的任务”类似的问题。

例如，可以使用路由守卫来实现“每个页面都显示不同的标题栏文字”的效果。

因为Vue脚手架项目是单页面的，实质的HTML只有1个，则标题栏也只有固定的那一个，要实现“每个页面都显示不同的标题栏文字”， 只能“每次发生路由跳转时都重新设置标题栏文字”，并且，这个设置操作发生在跳转之前是相对更合理的。

可以在路由配置中，为每个路由配置添加meta，这是路由配置中，用于封装自定义信息的，然后，在其中定义title属性，用于配置标题栏文字，例如：

const routes = [
  {
    path: '/user',
    component: HomeView,
    redirect: '/user/list',
    children: [
      {
        path: 'list',
        component: () => import('../views/user/UserListView.vue'),
        meta: { // 新增代码
          title: '酷鲨商城运营管理平台 -- 用户列表'
        }
      },
      {
        path: 'add-new',
        component: () => import('../views/user/UserAddNewView.vue'),
        meta: { // 新增代码
          title: '酷鲨商城运营管理平台 -- 添加用户'
        }
      }
    ]
  }
]

然后，在路由配置文件中添加：

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
})

注意：必须调用next()，否则，跳转过程就此结束，不会继续向后运行，页面也不会显示了。

练习：添加类别的页面

1. 在views下创建category/CategoryAddNewView.vue文件
2. 在router/index.js中，在HomeView的children下配置此视图的路由，路径为/admin/category/add-new
3. 测试：启动前端项目，在浏览器中通过/admin/category/add-new可以访问此视图
4. 在HomeView的菜单中，添加对应的菜单项
5. 测试：通过菜单可以访问此视图
6. 将BrandAddNewView中的代码复制到CategoryAddNewView中，并将文字进行简单的修改，例如“品牌”改为“类别”
7. 根据设计文档，调整CategoryAddNewView中的控件，其中，“上级类别”、“类别图标”暂时使用文本框输入数据来提供临时的使用
8. 在CategoryAddNewView的JS代码部分，调整发请求、拿响应相关的代码，例如需要修改请求的URL

Vue 渐进式理解

Vue render 函数

vue diff 算法

Vue 核心

初识 Vue

1.想让 Vue 工作,就必须创建一个 Vue 实例,且要传入一个配置对象;

2.root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法;

3.root 容器里的代码被称为【Vue 模板】;

4.Vue 实例和容器是一一对应的;

5.真实开发中只有一个 Vue 实例，并且会配合着组件一起使用;

6.{{xxx}}中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性;

7.一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新;

模板语法

1.插值语法: 功能:用于解析标签体内容。 写法:{{xxx}}，xxx 是 js 表达式，且可以直接读取到 data 中的所有属性。

2.指令语涛 功能:用于解析标签（包括:际签属性、标签体内容、绑定事件.....) 举例: v-bind:href="xxx”或简写为:href="xxx"，xxx 同样要写 js 表达式, 且可以直接读取到 data 中的所有属性。 备注: Vue 中有很多的指令，且形式都是:v-????，此处拿 v-bind 举个例子。

数据绑定

单向数据绑定 (v-bind)

1. 语法：v-bind:href ="xxx" 或简写为 :href

2. 特点：数据只能从 data 流向页面

双向数据绑定 (v-model)

1. 语法：v-mode:value="xxx" 或简写为 v-model="xxx"
2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data

备注:

1. 双向绑定一般都应用在表单类元素上(如: input、select 等)

2. v-model :value 可以简写为 v-model，因为 v-model 默认收集的就是 value 值。

el 与 data 的两种写法

1.el 有 2 种写法 (1). new Vue 时候配置 el 属性。 (2). 先创建 Vue 实例，随后再通过 vm.$mount( '#root')指定 el 的值。 2.data 有 2 种写法 (1).对象式 (2).函数式

3.一个重要的原则: 由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了。

MVVM 模型

1. M：模型(Model) ：对应 data 中的数据
2. V：视图(View) ：模板
3. VM：视图模型(ViewModel) ： Vue 实例对象

data 中所有的属性,最后都出现在了 vm 身上。 vm 身上所有的属性及 Vue 原型上所有属性，在 Vue 模板中都可以直接使用。

MVVM 的核心是 ViewModel 层面 他就像是一个中转站 负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上的与视图进行双向绑定 向下与 Model 层通过接口请求请求进行数据交互，起承上启下作用。View 层展现的不是 Model 的数据，而是 ViewModel 层的数 由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。

Object.defineProperty 方法

<script>
    let number = 18
    let person = {
        name: '张三',
        sex: '男',
    }

    Object.defineProperty(person, 'age', {
        // value: 18,
        // enumerable: true,   //控制属性是否可以枚举，默认值是false
        // writable: true,     //控制属性是否可以被修改，默认值是false
        // configurable: true   //控制属性是否可以被删除，默认值是false

        //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get() {
            return number
        },

        //当有人修改person的age属性时，set函数(setter)就会被调用，且会受到修改的具体值
        set(value) {
            number = value;
        }
    })
</script>

vue 双向绑定原理及实现*

数据代理

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=13&spm_id_from=pageDriver&vd_source=e754d95b996bf636e1256b88397221dd

1.Vue 中的数据代理: 通过 vm 对象来代理 data 对象中属性的操作(读/写）

2.Vue 中数据代理的好处: 更加方便的操作 data 中的数据

3.基本原理: 通过 object.defineProperty()把 data 对象中所有属性添加到 vm 上.为每一个添加到 vm 上的属性，都指定一个 getter/setter。 在 getter/setter 内部去操作（读/写)data 中对应的属性。

事件处理

事件的基本使用

1.使用 v-on:xxx 或@xxx 绑定事件，其中 xxx 是事件名;

2.事件的回调需要配置在 methods 对象中，最终会在 vm 上;

3.methods 中配置的函数，不要用箭头函数! 否则 this 就不是 vm 了;

4.methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或 组件实例对象;

5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;

事件修饰符

1.prevent: 阻止默认事件（常用）;

2.stop: 阻止事件冒泡（常用）;

3.once: 事件只触发一次（常用）;

4.capture: 使用事件的捕获模式;

5.self: 只有 event.target 是当前操作的元素时才触发事件;

6.passive: 事件的默认行为立即执行，无需等待事件回调执行完毕;

键盘事件

1.Vue 中常用的按键别名:

• 回车=> enter

• 删除=> delete(捕获“删除”和“退格”键)

• 退出=> esc

• 空格=> space

• 换行=> tab（特殊，必须配合 keydown 使用）

• 上=> up

• 下=> down

• 左=> left

• 右=> right

  2.Vue 未提供别名的按健，可以使用按健原始的 key 值去绑定，但注意要转为 kebab-case(短横线命名)

  3.系统修饰键（用法特殊）:ctrl、alt、 shift、meta

​ (1).配合 keyup 使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

​ (2).配合 keydown 使用:正常触发事件。

4.也可以使用 keyCode 去指定具体的按键（不推荐)

5.Vue.config. keyCodes.自定义键名=健码，可以去定制按键别名

计算属性与监视

1.定义:要用的属性不存在，要通过已有属性计算得来。

2.原理:底层借助了 object.defineproperty 方法提供的 getter 和 setter.

3.get 函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。

4.优势:与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注: (1).计算属性最终会出现在 vm 上，直接读取使用即可。 (2).如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变。

监视属性 watch

1.当被监视的属性变化时,回调函数自动调用，进行相关操作

2.监视的属性必须存在,才能进行监视 ！！！

3.监视的两种写法:

​ (1).new Vue 时传入 watch 配置

​ (2).通过 vm.$watch 监视

深度监视

​ (1).vue 中的 watch 默认不监测对象内部值的改变（一层）。

​ (2).配置 deep:true 可以监测对象内部值改变（多层）。

备注:

​ (1).Vue 自身可以监测对象内部值的改变，但 Vue 提供的 watch 默认不可以！

​ (2).使用 watch 时根据数据的具体结构，决定是否采用深度监视。

computed 和 watch 之间的区别

​ 1.computed 能完成的功能,watch 都可以完成。 ​ 2.watch 能完成的功能，computed 不一定能完成，例如: watch 可以进行异步操作。

两个重要的小原则:

​ 1.所被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或 组件实例对象

​ 2.所有不被 Vue 所管理的函数（定时器的回调函数、ajax 的回调函数等、Promise 的回调函数)，最好写成箭头函数,这样 this 的指向才是 vm 或组件实例对象。

绑定样式

class 样式

写法：class=" xxx" xxx 可以是字符串、对象、数组。 字符串写法适用于：类名不确定,要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

style 样式

:style="{fontsize: xxx}" 其中 xxx 是动态值。

:style="[a,b]" 其中 a、b 是样式对象。

条件渲染

v-if

写法: (1).v-if="表达式"

​(2).v-else-if="表达式"

​ (3).v-else="表达式"

适用于: 切换频率较低的场景。

特点: 不展示的 DOM 元素直接被移除。

注意: v-if 可以和: v-else-if、v-else 一起使用，但要求结构不能被“打断”。

v-show

写法: v-show="表达式"

适用于: 切换频率较高的场景。

特点: 不展示的 DOM 元素未被移除,仅仅是使用样式隐藏掉

备注:使用 v-if 的时，元素可能无法获取到，而使用 v-show 一定可以获取到。

<template v-if="???">???</template>
//template 母版，最终不会渲染到页面上，页面上只会出现中间的内容，template配合v-if使用

列表渲染

v-for 指令

1.用于展示列表数据 2.语法: v-for=" (item,index) in xxx" :key="yyy" 3.可遍历: 数组、对象、字符串（用的很少）、指定次数（用的很少)

key 作用与原理

面试题: react、vue 中的 key 有什么作用?（key 的内部原理)

1. 虚拟 DOM 中 key 的作用: key 是虚拟 DOM 对象的标识，当状态中的数据发生变化时，Vue 会根据【新数据】生成【新的虚拟 DOM】,随后 Vue 进行【新虚拟 DOM】与【旧虚拟 DOM】的差异比较，比较规则如下:

2. 对比规则: (1).旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key: 若虚拟 DOM 中内容没变，直接使用之前的真实 DOM ! 若虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM。 (2).旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key 创建新的真实 DOM,随后渲染到到页面。

3. 用 index 作为 key 可能会引发的问题:

   1. 若对数据进行: 逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实 DOM 更新 ==> 界面效果没问题，但效率低。
   2. 如果结构中还包含输入类的 DOM: 会产生错误 DOM 更新 ==> 界面有问题。

4. 开发中如何选择 key? :

   1. 最好使用每条数据的唯一标识作为 key，比如 id、手机号、身份证号、学号等唯一值。
   2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示,使用 index 作为 key 是没有问题的。

监测数据

1.vue 会监视 data 中所有层次的数据。

2.如何监测对象中的数据?

​ 通过 setter 实现监视,且要在 new Vue 时就传入要监测的数据。

​ (1).对象中后追加的属性，Vue 默认不做响应式处理

​ (2).如需给后添加的属性做响应式，请使用如下 API:

​ vue.set(target, propertyName/index, value）或

​ vm.$set(target, propertyName/index, value)

3.如何监测数组中的数据?

​ 通过包裹数组更新元素的方法实现,本质就是做了两件事:

​ (1).调用原生对应的方法对数组进行更新。

​ (2).重新解析模板,进而更新页面。

4.在 Vue 修改数组中的某个元素一定要用如下方法:

​ 1.使用这些 API: push()、pop()、shift()、unshift()、splice()、sort()、reverse()

​ 2.Vue.set() 或 vm.$set()

特别注意: Vue.set(）和 vm.$set()不能给 vm 或 vm 的根数据对象添加属性！！！

收集表单数据

若:<input type="text"/>, 则 v-model 收集的是 value 值。用户输入的就是 value 值。

若:<input type="radio"/>，则 v-model 收集的是 value 值，且要给标签配置 value 值。

若:<input type="checkbox" />

​ 1.没有配置 input 的 value 属性，那么收集的就是 checked(勾选 or 未勾选，是布尔值)

​ 2.配置 input 的 value 属性:

​ (1) v-model 的初始值是非数组，那么收集的就是 checked（勾选 or 未勾选，是布尔值)

​ (2) v-model 的初始值是数组，那么收集的的就是 value 组成的数组

备注: v-model 的三个修饰符:

​ lazy: 失去焦点再收集数据

​ number: 输入字符串转为有效的数字

​ ​trim: 输入首尾空格过滤

内置指令

v-bind : 单向绑定解析表达式，可简写为:xxx

v-model : 双向数据绑定

v-for : 遍历数组/对象/字符串

v-on : 绑定事件监听，可简写为@

v-if : 条件渲染(动态控制节点是否存在)

v-else : 条件渲染（动态控制节点是否存在)

v-show : 条件渲染(动态控制节点是否展示)

v-text 指令:

1.作用:向其所在的节点中渲染文本内容。

2.与插值语法的区别:v-text 会替换掉节点中的内容，{{xxx}}则不会。

v-html 指令:

1.作用:向指定节点中渲染包含 html 结构的内容。

2.与插值语法的区别:

​ (1).v-html 会替换掉节点中所有的内容，{{xx}}则不会。

​ (2).v-html 可以识别 html 结构。

3.严重注意: v-html 有安全性问题！！！

(1).在网站上动态渲染任意 HTML 是非常危险的，容易导致 XSS 攻击。

(2).一定要在可信的内容上使用 v-html，永不要用在用户提交的内容上!

v-cloak 指令(没有值):

1.本质是一个特殊属性。Vue 实例创建完毕并按管容器后，会剧掉 v-cloak 属性。

2.使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}} 的问题。

v-once 指令:

1.v-once 所在节点在初次动态演染后,就视为静态内容了。

2.以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能。

v-pre 指令:

1.跳过其所在节点的编译过程

2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

生命周期

1.又名: 生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么: Vue 在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的 this 指向是 vm 或 组件实例对象。

常用的生命周期钩子:

1.mounte发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁 Vue 实例

1.销毁后借助 Vue 开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生 DOM 事件依然有效。

3.一般不会再 beforeDestroy 操作数据，因为即便操作数据，也不会再触发更新流程了。

Vue 组件化编程

Vue 中使用组件的三大步骤:

​ 1. 定义组件(创建组件）

​ 2. 注册组件

​ 3. 使用组件(写组件标签)

一、如何定义一个组件?

​ 使用 Vue.extend(options)创建，其中 options 和 new Vue(options)时传入的那个 options 几乎一样，但也有点区别：

​ 区别如下:

​ 1.el 不要写，为什么?—最终所有的组件都要经过一个 vm 的管理，由 vm 中的 el 决定服务哪个容器。

​ 2.data 必须写成函数，为什么?——避免组件被复用时，数据存在引用关系。

​ 备注: 使用 template 可以配置组件结构。

二、如何注册组件?

1.局部注册: 靠 new Vue 的时候传入 components 选项

2.全局注册: 靠 Vue.component('组件名',组件)

三、编写组件标签: <school></school>

非单文件组件

几个注意点:

1.关于组件名: 一个单词组成:

​ 第一种写法(首字母小写): school

​ 第二种写法(首字母大写): School

​ 多个单词组成:

​ 第一种写法(kebab-case 命名):my-school

​ 第二种写法(Camelcase 命名):MySchool（需要 Vue 脚手架支持)

​ 备注: ​ (1).组件名尽可能回避 HTML 中已有的元素名称，例如: h2、H2 都不行。

​ (2).可以使用 name 配置项指定组件在开发者工具中呈现的名字-

2.关于组件标签:

​ 第一种写法:<school></school>

​ 第二种写法: <school/>

​ 备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。

3.一个简写方式:

​ const school = Vue.extend(options）可简写为: const school = options

VueComponent

1. school 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的.

2. 我们只需要写<school/>或<school></school>，Vue 解析时会帮我们创建 school 组件的实例对象，即 vue 帮我们执行的

   new VueComponent(options)

3. 特别注意:每次调用 Vue.extend，返回的都是一个全新的 VueComponent ！！！

4. 关于 this 指向:

   (1).组件配置中:

   ​ data 函数、methods 中的函数、watch 中的函数、computed 中的函数它们的 this 均是【VueComponent 实例对象】

   (2).new Vue() 配置中:

   ​ data 函数、methods 中的函数、watch 中的函数、computed 中的函数它们的 this 均是【Vue 实例对象】.

5. VueComponent 的实例对象，以后简称 vc（也可称之为:组件实例对象）。

   Vue 的实例对象,以后简称 vm.

*内置关系

一个重要的内置关系:

​ VueComponent.prototype.__proto__ === Vue.prototype

为什么要有这个关系:

​ 让组件实例对象(vc）可以访问到 Vue 原型上的属性、方法。

实例的隐式原型属性永远指向自己缔造者的原型对象。

单文件组件

单文件组件

使用 Vue 脚手架

初始化脚手架

创建脚手架

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=61&vd_source=e754d95b996bf636e1256b88397221dd

脚手架文件结构

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

关于不同版本的 Vue:

1.vue.js vue.runtime.xxx.js 的区别:

​ (1).vue.js 是完整版的 Vue，包含: 核心功能+模板解析器。 ​ (2).vue.runtime.xxx,js 是运行版的 Vue， 只包含: 核心功能; 没有模板解析器。

2.因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render 函数接收到的 createElement 函数去指定具体内容。

vue.config.js 配置文件

使用vue inspect > output.js可以查看到 Vue 脚手架的默认配置。

使用 vue.config.js 可以对脚手架进行个性化定制，详情见: https://cli.vuejs.org/zh

ref 与 props

ref 属性

1.被用来给元素或子组件注册引用信息（id 的替代者)

2.应用在 htm1 标签上获取的是真实 DOM 元素，应用在组件标签上是组件实例对象(vc)

3.使用方式:

​ 打标识: <h1 ref="xxx">.....</h1>或<School ref="xxx"></School>

​ 获取: this.$refs.xxx

配置项 props

父子组件间的三种通信方式*

通过 props 实现通信

子组件的 props 选项能够接收来自父组件的数据。props 是单项绑定的

props 静态传递

子组件通过 props 选项来声明一个自定义的属性，然后父组件就可以再嵌套标签的时候，通过这个属性往子组件传递数据了！

father_props.vue

<template>
  <div>
    <h1>我是父组件！</h1>
    <child message="我是子组件一！"></child>  <!-- 通过自定义属性传递数据 -->
  </div>
</template>

<script>
import Child from '../components/child_props.vue'
export default {
  components: {
    Child
  }
}
</script>

<style lang="stylus" scoped>

</style>

child_props.vue

<template>
  <h3>{{ message }}</h3>
</template>

<script>
export default {
  props: ['message'] // 声明一个自定义的属性
}
</script>

<style lang="stylus" scoped>

</style>

props 动态传递

更多的时候我们需要传送一个动态的数据。这时候就可以用==v-bind(:)==实现。通过 v-bind 绑定 props 的自定义的属性，传递过去的就不是静态的字符串了，它可以是一个表达式，布尔值，对象等等任何类型的值

father_props.vue

<template>
  <div>
    <h1>我是父组件！</h1>
    <child message="我是子组件一！"></child>

    <!-- 这是一个 JavaScript 表达式而不是一个字符串 -->
    <child v-bind:message="a+b"></child>

    <!-- 用一个变量进行动态赋值 -->
    <child v-bind:message="msg"></child>
  </div>
</template>

<script>
import Child from '../components/child_props.vue'
export default {
  components: {
    Child
  },
  data () {
    return {
      a: '我是子组件二！',
      b: 41,
      msg: '我是子组件三！' + Math.random()
    }
  }
}
</script>
<style lang="stylus" scoped>

</style>

child_props.vue 子组件不变

通过$ref 实现通信

对于 ref 官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的$refs 对象上。

props 是父组件给子组件信息，那么，$ref 就是子组件给父组件信息。

简单来说，父组件可以通过$ref 来调用子组件的信息，包括 data 和 methods

father_ref.vue

<template>
  <div>
    <h1>我是父组件！</h1>
    <child ref="msg"></child>
  </div>
</template>

<script>
import Child from '../components/child_ref.vue'
export default {
  components: {
    Child
  },
  mounted: function () {
    console.log(this.$refs.msg)
    this.$refs.msg.getMessage('我是子组件一！')
  }
}
</script>

<style lang="stylus" scoped>

</style>

child_ref.vue

<template>
  <h3>{{ message }}</h3>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  methods: {
    getMessage (m) {
      this.message = m
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>

props 和$ref 的对比

1.前者着重于数据的传递，它并不能调用子组件里的属性和方法

2.后者着重于索引，主要用来调用子组件里的属性和方法。特别地，ref 用在 dom 元素的时候，能起到选择器的作用，这个功能比作为索引更加重要

$emit 实现通信

上面两种方法主要都是父组件为主，给子组件信息，调用子组件的信息。 那么，第三种方法就是以子组件为主。 $emit 绑定一个自定义事件 event，当这个语句被执行的时候，就会将参数 arg 传递给父组件，父组件通过@event 监听并接收参数。

father_emit.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <child @getMessage="showMsg"></child>
  </div>
</template>
<script>
import Child from '../components/child_emit.vue'
export default {
  components: {
    Child
  },
  data () {
    return {
      title: ''
    }
  },
  methods: {
    showMsg (title) {
      this.title = title
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>

child_emit.vue

<template>
  <h3>我是子组件！</h3>
</template>

<script>
export default {
  mounted: function () {
    this.$emit('getMessage', '我是父组件！')
  }
}
</script>

<style lang="stylus" scoped>

</style>

三种方法区别

1.对于 props，就是子组件设置一个 props，父组件给这个 props 赋值就可以通信，动态赋值可以用 v-bind（是主要的通信方式）

2.对于 ref，给子组件一个 ref，我们就可以通过这个this.ref，来调用子组件的属性和方法，这主要是用在 dom 树中，起到选择器的作用

3.对于$emit，子组件绑定一个方法和参数，父组件可以绑定子组件这个绑定方法的监听，获得子组件返回的参数。第三种方法少见一些。有些逆思维了。 目前不懂它存在的意义。

混入 mixin

解释

将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。

这里需要注意的是：提取的是逻辑或配置，而不是 HTML 代码和 CSS 代码。换一种想法，mixin 就是组件中的组件，Vue 组件化让我们的代码复用性更高，那么组件与组件之间还有重复部分，我们使用 Mixin 在抽离一遍。

Mixin 和 Vuex 的区别？

上面一点说 Mixin 就是一个抽离公共部分的作用。在 Vue 中，Vuex 状态管理似乎也是做的这一件事，它也是将组件之间可能共享的数据抽离出来。两者看似一样，实则还是有细微的区别，区别如下：

• Vuex 公共状态管理，如果在一个组件中更改了 Vuex 中的某个数据，那么其它所有引用了 Vuex 中该数据的组件也会跟着变化。
• Mixin 中的数据和方法都是独立的，组件之间使用后是互相不影响的。

功能:可以把个组件共用的配置提取成一个混入对象使用方式: 第一步定义混合,例如:

{
	data(){...},
	methods:{....}
}

第二步使用混入,例如:

​ (1).全局混入: Vue.mixin(xxx)

​ (2).局部混入: mixins: ['xxx']

插件

功能:用于增强 Vue 本质:包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据。

定义插件:

对象.install = function (Vue，options) {
	//1.添加全局过滤器
	vue.filter(....)
	//2.添加全局指令
	vue.directive(.. . .)
	//3.配置全局混入(合)
	Vue.mixin(... .)
	//4.添加实例方法
	Vue.prototype.$myMethod = function (){...}
	Vue.prototype.$myProperty = xxxx
}

使用插件: Vue.use()

scoped 样式

作用: 让样式在局部生效，防止冲突。

写法: <style scoped>

TodoList 案例总结

1.组件化编码流程:

​ (1).拆分静态组件:组件要按照功能点拆分，命名不要与 html 元素冲突。

​ (2).实现动态组件:考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用:

   1).一个组件在用: 放在组件自身即可。

   2).一些组件在用: 放在他们共同的父组件上(状态提升)。

​ (3).实现交互:从绑定事件开始。

2.props 适用于:

​ (1).父组件==>子组件 通信

​ (2).子组件==>父组件 通信(要求父先给子一个函数)

3.使用 v-model 时要切记: v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！

4.props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但不推荐这样做。

webStorage

1.存储内容太小一般支持 5MB 左右(不同浏览器可能还不一样)

2.浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3.相关 APl:   1.xxxxxStorage.setItem('key', 'value');   该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。   2.xxxxxStorage-getItem('person');   该方法接受一个键名作为参数，返回键名对应的值。   3.xxxxxStorage.removeItem('key');   该方法接受一个键名作为参数，并把该键名从存储中删除。   4.xxxxxStorage.clear()   该方法会清空存储中的所有数据。

4.备注:

​ 1.SessionStorage 存储的内容会随着浏览器窗口关闭而消失。

​ 2.LocalStorage 存储的内容，需要手动清除才会消失。

​ 3.xxxxxStorage.getItem(xxx) 如果 xxx 对应的 value 获取不到，那么 getltem 的返回值是 null

​ 4.JSON.parse(nul1)的结果依然是 null。

组件自定义事件

1.子种组件间通信的方式，适用于:子组件===>父组件

⒉.使用场景: A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（事件的回调在 A 中)。

3.绑定自定义事件:

​ (1).第一种方式，在父组件中: <Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/> ​ (2).第二种方式，在父组件中:

<Demo ref="demo" />
...... mounted(){ this.$refs.xxx.$on('atguigu',this.test) }

​ (3).若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

4.触发自定义事件: this.$emit('atguigu',数据)

5.解绑自定义事件this.$off('atguigu')

6.组件上也可以绑定原生 DOM 事件，需要使用native修饰符。

7.注意:通过this.refs.xxx.$on('atguigu' ,回调)绑定自定义事件时，回调要么配置在 methods 中，要么用箭头函数，否则 this 指向会出问题！！！

全局事件总线

1.—种组件间通信的方式，适用于任意组件间通信。

2.安装全局事件总线:

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this / /安装全局事件总线，$bus就是当前应用的vm
	},
	......
})

3.使用事件总线 :

​ (1).接收数据: A 组件想接收数据，则在 A 组件中给$bus 绑定自定义事件，事件的回调留在 A 组件自身。

methods(){
	demo(data){......}
},
......
mounted() {
	this.$bus.$on('xxxx',this.demo)
}

​ (2).提供数据:this.$bus.$emit( 'xxxx',数据)

4.最好在 beforeDestroy 钩子中，用$off 去解绑当前组件所用到的事件*。

消息订阅与发布（pubsub）

1.—种组件间通信的方式，适用于任意组件间通信。

2.使用步骤:

​ 1.安装 pubsub: npm i pubsub-js ​ 2.引入: import pubsub from 'pubsub-js' ​ 3.接收数据:A 组件想接收数据，则在 A 组件中订阅消息，订阅的回调留在 A 组件自身。

methods(){
	demo(data){......}
}
......
mounted() {
	this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
}

4.提供数据:pubsub.publish('xxx',数据)

5.最好在 beforeDestroy 钩子中，用PubSub.unsubscribe(pid)去取消订阅。

nextTick（生命周期钩子）

1.语法: this.$nextTick(回调函数)

2.作用: 在下一次 DOM 更新结束后执行其指定的回调。

3.什么时候用: 当改变数据后，要基于更新后的新 DOM 进行某些操作时，要在 nextTick 所指定的回调函数中执行。

vue.nextTick()方法的使用详解（简单明了）

过渡与动画

1.作用: 在插入、更新或移除 DOM 元素时，在合适的时候给元素添加样式类名。

2.图示: 3.写法:

​ 1.准备好样式:

​ (1).元素进入的样式:

​  ​ 1.v-enter: 进入的起点

​ ​  ​ 2.v-enter-active: 进入过程中

​  ​ 3.v-enter-to: 进入的终点

​ (2).元素离开的样式:

​ ​  ​ 1.v-leave: 离开的起点

​ ​  ​ 2.v-leave-active: 离开过程中

​ ​  ​ 3.v-leave-to: 离开的终点

​ 2.使用<transition>包裹要过度的元素，并配置 name 属性:

<transition name="hello">
  <h1 v-show="isShow">你好啊!</h1>
</transition>

​ 3.备注: 若有多个元素需要过度，则需要使用:<transition-group>，且每个元素都要指定 key 值。

Vue 中的 ajax

vue 脚手架配置代理(开发环境 Ajax 跨域问题)

方法一

在 vue.config.js 中添加如下配置:

devServer: {
  proxy: "http://localhost:5000";
}

说明:

​ 1.优点: 配置简单，请求资源时直接发给前端（8080）即可。

​ 2.缺点: 不能配置多个代理，不能灵活的控制请求是否走代理。

​ 3.工作方式: 若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源)

方法二

编写 vue.config.js 配置具体代理规则:

module.exports = {
  devServer: {
    proxy: {
      "/api1": {
        //匹配所有以'/api'开头的请求路径
        target: "http://localhost:5000", //代理目标的基础路径
        changeOrigin: true,
        pathRewrite: { "^/api1": "" },
      },
      "/api2": {
        //匹配所有以'/api'开头的请求路径
        target: "http://localhost: 5001", // 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: { "^/api2": "" },
      },
    },
  },
};
/*
	changeOrigin设置为true时，服务器收到的请求头中的host为: localhost: 5000
	changeOrigin设置为false时，服务器收到的请求头中的host为: localhost:8080
	changeOrigin默认值为true
*/

说明:

​ 1.优点: 可以配置多个代理，且可以灵活的控制请求是否走代理。

​ 2.缺点: 配置略微繁琐，请求资源时必须加前缀。

slot 插槽

1.作用: 让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于父组件===>子组件。

2.分类: 默认插槽、具名插槽、作用域插槽

3.使用方式:

​ (1).默认插槽:

父组件中:
<Category>
		<div>html结构1</div>
	</Category>

子组件中:
<template>
  <div>
    <!--定义插槽-->
    <slot>插槽默认内容...</slot>
  </div>
</template>

​

​ (2).具名插槽:

父组件中:
<Category>
		<template slot="center">
			<div>html结构1</div>
		</template>
		
		<template v-slot:footer>
			<div>html结构2</div>
		</template>
	</Category>

子组件中:
<template>
  <div>
    <!--定义插槽-->
    <slot name="center">插槽默认内容...</slot>
    <slot name="footer">插槽默认内容...</slot>
  </div>
</template>

​ (3).作用域插槽:

​ 1).理解: 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定）

​ 2).具体编码:

父组件中:
<Category>
		<template scope="scopeData">
			<!--生成的是ul列表-->
			<ul>
				<li v-for="g in scopeData.games" : key="g">{{g}}</li>
			</ul>
		</template>
	</Category>

<Category>
		<template slot-scope="scopeData">
			<!--生成的是h4标题-->
			<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
		</template>
	</Category>

子组件中:
<template>
  <div>
    <slot :games="games"></slot>
  </div>
</template>
<script>
export default {
  name: "Category",
  props: ["title"],
  //数据在子组件自身
  data() {
    return {
      games: ["红色警戒", "穿越火线", "英雄联盟", "超级玛丽"],
    };
  },
};
</script>

vuex

概念

专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方

式，且适用于任意组件间通信。

为什么要使用 Vuex

我们知道组件之间是独立存在的 组件之间要想实现通信 目前只有 props 选项 ，中大型项目时 面对一大堆组件之间的通信，与逻辑代码 将组件之间的共享数据给拿出来 在一定的规则下管理这些数据

什么时候使用 Vuex？

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

vuex 工作原理图

• 视图（View），以声明方式将状态映射到视图；
• 操作（Actions），响应在视图上的用户输入导致的状态变化
• 状态（State），驱动应用的数据源

搭建 vuex 环境(store)

1.创建文件:src/store/index.js

//引入vue核心库
import Vue from "vue";
//引入Vuex
import Vuex from "vuex";
//应用vuex插件
Vue.use(Vuex);

//准备actions对象——响应组件中用户的动作
const actions = {};
//准备mutations对象——修改state中的数据
const mutations = {};
//准备state对象——保存具体的数据
const state = {};

//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

2.在main.js中创建 vm 时传入store配置项

......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App)，
	store
})

基本使用

1. 初始化数据、配置actions 、配置mutations，操作文件store.js

//引入vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用vuex
Vue.use(Vuex)

const actions = {
	//响应组件中加的动作
    jia(context,value){
		//console.log('actions中的jia被调用了',miniStore ,value)
        context.commit('JIA',value)
	}，
}

const mutations = {
	//执行加
	JIA(state,value){
		//console.log('mutations中的JIA被调用了' ,state,value)
        state.sum += value
	)
}

//初始化数据
const state = {
	sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations
    state,
})

1. 组件中读取 vuex 中的数据:$store.state.sum

2. 组件中修改 vuex 中的数据:$store.dispatch('action中的方法名',数据)或$store.commit('mutations中的方法名',数据)

备注:若没有网络请求或其他业务逻辑，组件中也可以越过 actions，即不写dispatch，直接编写commit

getters 的使用

1. 概念: 当 state 中的数据需要经过加正后再使用时，可以使用 getters 加工。

2. 在store.js 中追加getters配置

......
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
    getters
})

1. 组件中读取数据:$store.getters.bigSum

四个 map 方法的使用

1.mapState 方法: 用于帮助我们映射state中的数据为计算属性

computed: {
	//借助mapState生成计算属性: sum、school、subject（对象写法)
	...mapState({sum:'sum',school:'school',subject:'subject'})，

    //借助mapState生成计算属性: sum、school、subject（数组写法)
	...mapState(['sum','school','subject'])，
}

2.mapGetters 方法: 用于帮助我们映射getters中的数据为计算属性

computed: {
	//借助mapGetters生成计算属性: bigSum(对象写法)
	...mapGetters({bigSum:'bigSum'}),

	//借助mapGetters生成计算属性: bigSum(数组写法)
	...mapGetters(['bigSum'])
}

3.mapActions 方法: 用于帮助我们生成与actions对话的方法，即:包含$store.dispatch(xx)的函数

methods:{
	//靠mapActions生成: increment0dd、 incrementWait（对象形式)
	...mapActions({incrementOdd:'jia0dd',incrementwait:'jiawait'})
	//靠mapActions生成: incrementOdd、incrementwait（数组形式)
	...mapActions(['jia0dd','jiawait'])
}

4.mapMutations 方法:用于帮助我们生成与mutations对话的方法，即:包含 $store.commit(xx)的函数

methods:{
	//靠mapActions生成: increment、decrement（对象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),

    //靠mapMutations生成:JIA、JIAN（对象形式)
	...mapMutations(['JIA','JIAN'])，
}

模块化+命名空间*

1.目的: 让代码更好维护，让多种数据分类更加明确。

2.修改store.js

const countAbout = {
	namespaced:true,//开启命名空间
    state:{ x:1 },
	mutations:{ ... },
    actions: { ... }，
    getters: {
		bigSum(state){
			return state.sum*10
        }
	}
}

const personAbout = {
	namespaced:true,//开启命名空间
    state:{ ... },
	mutations: { ... },
    actions: { ... }
}

const store = new Vuex.Store({
	modules: {
		countAbout,
        personAbout
    }
})

3.开启命名空间后，组件中读取 state 数据:

//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取:
...mapState('countAbout',['sum','school','subject'])，

4.开启命名空间后，组件中读取 getters 数据:

//方式一:自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取;
...mapGetters('countAbout', ['bigSum'])

5.开启命名空间后，组件中调用 dispatch

//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang', person)
//方式二，借助mapActions:
...mapActions('countAbout',{incrementOdd:'jiaOdd', incrementwait:'jiawait'})

6.开启命名空间后，组件中调用 commit

//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON' ,person)
//方式二:借助mapMutations:
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

vuex 核心概念和 API

各个类型的 API 各司其职，mutation 只管存，你给我（dispatch）我就存；action 只管中间处理，处理完我就给你，你怎么存我不管；Getter 我只管取，我不改的。action 放在了 methods 里面，说明我们应该把它当成函数来用（讲道理，钩子函数也应该可以的） mutation 是写在 store 里面的，这说明，它就是个半成品，中间量，我们不应该在外面去操作它。getter 写在了 computed 里面，这说明虽然 getter 我们写的是函数，但是我们应该把它当成计算属性来用。

state

1.vuex 管理的状态对象

2.是Vuex中的唯一数据源

3.只能通过 mutation 修改

4.示例代码

const state = {
	xxx.initValue
}

actions

1.值为一个对象，包含多个响应用户动作的回调函数

2.通过 commit()来触发 mutation 中函数的调用, 间接更新 state

3.如何触发 actions 中的回调？

​ 在组件中使用: $store.dispatch('对应的 action 回调名') 触发

4.可以包含异步代码（定时器, ajax 等等）

5.示例代码

const actions = {
  zzz({ commit, state }, data1) {
    commit("yyy", { data1 });
  },
};

mutations

1.值是一个对象，包含多个直接更新 state 的方法

2.谁能调用 mutations 中的方法?如何调用?

​ 在 action 中使用: commit('对应的 mutations 方法名')触发

3.mutations 中方法的特点: 不能写异步代码、只能单纯的操作 state

4.示例代码:

const mutations = {
	yyy (state，{data1}) {
	//更新state的某个属性
	}
}

modules

1.包含多个 module

2.一个 module 是一个 store 的配置对象

3.与一个组件（包含有共享数据）对应

model*

Module | Vuex (vuejs.org)

https://www.jianshu.com/p/a0c11ae01991

vue-router

相关理解

vue-router 的理解

vue 的一个插件库，专门用来实现 SPA 应用

对 SPA 应用的理解

1. 单页 Web 应用（single page web application，SPA）。
2. 整个应用只有一个完整的页面。
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4. 数据需要通过 ajax 请求获取

基本路由

路由的理解

1. 什么是路由?

   1. 一个路由就是 ─ 组映射关系(key - value)
   2. key 为路径, value 可能是 function 或 component

2. 路由分类

3. 后端路由:

   1. 理解: value 是 function,用于处理客户端提交的请求。

   2. 工作过程: 服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据。

4. 前端路由:

   1. 理解: value 是 component，用于展示页面内容。

   2. 工作过程: 当浏览器的路径改变时,对应的组件就会显示。

基本使用

1.安装 vue-router，命令:npm i vue-router 如果是 vue2 的话,命令后面加@3

2.应用插件:Vue.use(VueRouter)

3.编写 router 配置项:

//引入VueRouter
import VueRouter from "vue-router";
//引入Luyou组件
import About from "../components/About";
import Home from "../ components /Home";

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
    },
  ],
});

//暴露router
export default router;

4.实现切换(active-class 可配置高亮样式)

<router-link active-class="active" to="/about">
  About
</router-link>

5.指定展示位置

<router-view></router-view>

几个注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

2.通过切换，“隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

3.每个组件都有自己的$route属性，里面存储着自己的路由信息。

4.整个应用只有一个 router，可以通过组件的$router属性获取到。

嵌套路由(多级路由)

1.配置路由规则，使用 children 配置项:

routes: [
  {
    path: "/about",
    component: About,
  },
  {
    path: "/home",
    component: Home,
    children: [
      //通过children配置子级路由
      {
        path: "news", //此处一定不要写:/news
        component: News,
      },
      {
        path: "message", //此处一定不要写:/message
        component: Message,
      },
    ],
  },
];

2.跳转（要写完整路径)∶

<router-link to="/home/news">News</router-link>

路由的 query 参数

1.传递参数

<! --跳转并携带query参数，to的字符串写法-->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

<!--跳转并携带query参数，to的对象写法-->
<router-link
	:to="{
		path:"/home/message/detail',
		query:{
			id:666,
			title: '你好'
        }
	}"
>跳转</router-link>

2.接收参数:

$route.query.id;
$route.query.title;

命名路由

1.作用: 可以简化路由的跳转。

2.如何使用

​ 1.给路由命名:

{
	path:'/demo',
    component:Demo,
        children: [
			{
				path:'test',
                component:Test,
                children: [
					{
						name:'hello’//给路由命名
                        path:'welcome',
						component:Hello,
					}
				]
			}
		]
}

2.简化跳转:

<!--简化前,需要写完整的路径-->
<router-link to='/demo/test/welcome'>跳转</router-link>

<!--简化后，直接通过名字跳转-->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数-->
<router-link
	:to="{
		name : "hello',
		query:{
			id :666,
			title:'你好'
        }
	}"
>跳转</router-link>

路由的 params 参数

1.配置路由，声明接收 params 参数

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component: News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title',//使用占位符声明接收params参数
					component: Detail
				}
			]
		}
	]
}

2.传递参数

<!--跳转并携带params参数，to的字符串写法-->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>

<!--跳转并携带params参数，to的对象写法-->
<router-link
	:to="{
		name:'xiangqing',
		params:{
			id:666,
			title:"你好"
		}
	}”
>跳转</router-link>

特别注意: 路由携带 params 参数时，若使用 to 的对象写法，则不能使用 path 配置项，必须使用 name 配置!

3.接收参数:

$route.params.id;
$route.params.title;

路由的 props 配置

作用: 让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,
	//第一种写法: props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	//props:{a:900}

	//第二种写法: props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	//props:true

	//第三种写法:props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

vue 路由传参的三种基本方式

路由传参相关面试题

如何指定 params 参数可传可不传? 如果路由要求传递 params 参数，但是你就不传递 params 参数，发现一件事情，URL 会有问题的 如何指定 params 参数可以传递、或者不传递，在配置路由的时候，在占位的后面加上一个问号【params 可以传递或者不传递】

params 参数可以传递也可以不传递，但是如果传递是空串，如何解决?

使用 undefined 解快: params 参数可以传递、不传递（空的字符串)

this.$router.push({name:'search' ,params:{ keyword : " "||undefined} }),

路由组件可不可以传递 props 数据？

可以，三种写法，在路由配置中，组件用 props 接收

//布尔值写法:params
//props:true,		只能传params参数
//对象写法:额外的给路由组件传递一些props
//props:{a: 1,b:2},
//函数写法:可以params参数、query参数，通过props传递给路由组件
props:($route)=>{
	return·{keyword:$route.params.keyword ,k:$route.query.k};
}

<router-link>的 replace 属性(无痕浏览 doge)

1.作用:控制路由跳转时操作浏览器历史记录的模式

⒉ 浏览器的历史记录有两种写入方式:分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

3.如何开启replace模式:<router-link replace ......>News</router-link>

编程式路由导航

1.作用:不借助<router-link>实现路由跳转，让路由跳转更加灵活

2.具体编码:

//$router的两个API
this.$router.push({
  name: "xiangqing",
  params: {
    id: xxx,
    title: xxx,
  },
});

this.$router.replace({
  name: "xiangqing",
  params: {
    id: xxx,
    title: xxx,
  },
});

this.$router.forward(); //前进
this.$router.back(); //后退
this.$router.go(); //可前进也可后退

缓存路由组件

1.作用:让不展示的路由组件保持挂载，不被销毁。

2.具体编码:

<keep-alive include="News(组件名)">
  <router-view></router-view>
</keep-alive>

两个新的生命周期钩子

1.作用: 路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

2.具体名字:

1. activated路由组件被激活时触发。
2. deactivated路由组件失活时触发。

路由守卫

作用: 对路由进行权限控制

全局守卫

//全局前置守卫:初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next()//放行
		}else{
			alert('暂无权限查看")
			//next({name:'guanyu'})
		}
	}else{
		next()//放行
	}
})

//全局后置守卫:初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	if(to.meta.title){
		document.title = to.meta.title  //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享守卫

beforeEnter(to,from,next){
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			//next({name:'guanyu'})
		}
	}else{
		next()
	}
}

组件内路由守卫

//进入守卫:通过路由规则，进入该组件时被调用
beforeRouteEnter (to,from,next) {
},
//离开守卫:通过路由规则，离开该组件时被调用
beforeRouteLeave (to,from,next) {
}

路由器的两种工作模式 hash 与 history

1.对于一个 url 来说，什么是 hash 值?——#及其后面的内容就是 hash 值。

2.hash 值不会包含在 HTTP 请求中，即: hash 值不会带给服务器。

3.hash 模式:

​ (1).地址中永远带着#号，不美观。

​ (2).若以后将地址通过第三方手机 app 分享，若 app 校验严格，则地址会被标记为不合法。

​ (3).兼容性较好。

​ (4).他虽然在 URL 中，但是不会被包括在 HTTP 请求当中 对后端完全没影响 因此改变 hash 不会重新加载页面

4.history 模式:

​ (1).地址干净，美观。

​ (2).兼容性和 hash 模式相比略差。

​ (3).应用部署上线时需要后端人员支持，解决刷新页面服务端 404 的问题。

​ (4).当他修改执行时 虽然改变了当前的 URL 但游览器不会立即向后端发送请求

前端路由原理解析与实现

什么是前端路由 ？

路由描述的是 URL 与 UI 之间的映射关系 这种映射是单向的 即 URL 变化引起的 UI 更新（无需刷新页面）

如何实现前端路由？

要实现前端路由需要解决两个核心

1.如何改变 URL 却不引起页面刷新

2.如何检测 URL 变化了

下面分别使用 hash 与 history 两种实现方式回答上面的两个核心问题

hash 实现

hash 是 url 中 hash（#）及后面的部分，常用作锚点在页面进行导航，改变 url 中的 hash 部分不会引起页面刷新

通过 hashchange 事件 监听 url 变化 改变 url 的方式只有这几种：通过游览器的前进后退 通过标签改变 url 通过 window.location 改变 URL 这几种情况改变 URL 都会触发 hashchange 事件

history 实现

history 提供了 pushState（增加状态）和 replaceState（改变状态）两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新

history 提供类似hashchange 事件的 popstate 事件 但 popstate 事件有些不同：通过浏览器前进后退改变 URL 时会触发 popstate 事件，通过pushState/replaceState或<a>标签改变 URL 不会触发 popstate 事件。好在我们可以拦截 pushState/replaceState的调用和标签的点击事件来检测 URL 变化，所以监听 URL 变化可以实现，只是没有 hashchange 那么方便。

Vue UI 组件库

移动端常用 UI 组件库

1. Vant https://youzan.github.io/vant
2. Cube UI https://didi.github.io/cube-ui
3. Mint UI http://mint-ui.github.io

PC 端常用 UI 组件库

1. Element UI https://element.eleme.cn
2. IView UI https://www.iviewui.co.

组件间通信高级*

1.事件注意事项

事件：系统事件：click、双击、鼠标系列事件等等

​ 自定义事件

事件源、事件类型、事件回调

1、原生 DOM----button 标签可以绑定系统事件

2、组件标签-----可以绑定系统事件（不起作用：因为属于自定义事件）------@click 后面+ .native （可以把自定义事件变成原生的 DOM 事件）

原生 DOM click 事件，其实是给子组件的根节点绑定了单击事件----利用到事件委派

给原生 DOM 绑定自定义事件是没有任何意义的，因为没有办法触发$emit 函数

2.v-model

【组件通信方式的一种】

父组件

<template>
  <div>
    <h2>深入v-model</h2>
    <input type="text" v-model="msg" />
    <span>{{ msg }}</span>
    <br />
    <hr />
    <h2>v-model实现原理（vue2)</h2>
    <!--
			原生DOw当中是有oninput事件，它经常结合表单元素一起使用，当表单元素文本内容发生变化的时候就会发出发一次回调
			Vue2:可以通过value与input事件实现v-model功能
			:value 与 oninput 事件结合与 :v-model一样
		-->
    <input type="text" :value="msg" @input="msg = $event.target.value" />
    <span>{{ msg }}</span>
    <!--深入学习v-model：实现父子组件数据同步（实现父子组件通信） -->
    <!--
			:value到底是什么？ props，父子组件通信
			@input到底是什么？ 并非原生DOM的input事件，属于自定义事件
		-->
    <CustomInput :value="msg" @input="msg = $event" />
    <!-- 简化写法 -->
    <CustomInput v-model="msg" />
  </div>
</template>
<script type="text/ecmascript-6">
export default {
	name: " ModelTest',
	cmponents:{
		CustomInput
	},
	data(){
		return {
			msg:"我爱你塞北的大雪"
		}
	}
}
</script>

CustomInput 组件

<template>
  <div>
    <h2>input包装组件</h2>
    <!--
			:value   动态属性
			@input   给原生DOM绑定原生DOM事件
		-->
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>
<script type="text/ecmascript-6">
export default {
	name: 'CustomInput',
	props:['value']
}
</script>

v-model 实现原理：value 与 input 事件实现的，而且还需要注意可以通过 v-mode 实现父子组件数据同步

3.sync 属性修饰符

【组件通信方式的一种】

父组件

<template>
  <div>
    小明的爸爸现在有{{ money }}元

    <h2>不使用sync修改符</h2>
    <!--
			:money父组件给子组件传递props
			@update:money给子组件绑定的自定义事件只不过名字叫做update:money
			目前现在这种操作，起始和v-model很相似,可以实现父子组件数据同步
		-->
    <Child :money="money" @update:money="money = $event" />

    <h2>使用sync修改符</h2>
    <!--
			:money.sync:  
			第一，父组件给字符串传递props money
			第二，给当前子组件绑定了一个自定义事件,而且事件名称即为update:money
		-->
    <Child2 :money.sync="money" />
    <hr />
  </div>
</template>
<script type="text/ecmascript-6">
import Child from './Child.vue'
import Child2 from './Child2.vue'
export default{
	name:'',
	data(){
		return{
			money : 10000
		}
	},
	components:{
		Child,
        Child2
    }
}
</script>

Child 组件（两个组件一样）

<template>
  <div>
    <span>小明每次花100元</span>
    <button @click="$emit('update:money', money - 100)">花钱</button>
    爸爸还剩{{ money }}元
  </div>
</template>
<script type="text/ecmascript-6">
export default{
	name:'child',
	props: ['money']
}
</script>

4. $attrs 与 $listeners

$attrs属于组件的一个属性，可以获取到父组件传递过来的props数据，对于子组件而言，父组件给的数据可以利用props接收，如果子组件通过props接收的属性，在$attrs 属性当中是获取不到的

$listeners 也是组件实例自身的一个属性，他可以获取到父组件给子组件传递的自定义事件

按钮想要增加鼠标放上去的提示信息，外面加一个 a 标签，:title 属性为提示信息

5.$children与$parent

建议用 ref ,直接获取相应的子组件

$children 是组件实例的属性，可以获取到当前组件的全部子组件【是个数组】

不要用$children[0]书写，如果子组件过多，第 0 项可能不是想要的组件

$parent 可以获取到某个组件的父组件，可以操作父组件的数据和方法

6.混入 mixin

如果项目当中出现很多结构类似功能，想到组件复用

如果项目当中很多的组件 JS 业务逻辑相似，想到 mixin【可以把多个组件 JS 部分重复、相似地方】

7.插槽

可以实现父子组件通信（通信的结构）

默认插槽

具名插槽

作用域插槽：子组件的数据来源于父组件，子组件是决定不了自身结构与外观

需要引入的js文件有

   <script src="js/jquery.js"></script><!--lightbox-video方法实现-->

   <script src="js/magnific-popup.min.js"></script><!--lightbox-video 方法实现-->

   <script src="js/script.js"></script><!--lightbox-video 标签引入-->

css样式需要引入

    <link href="css/global.css" rel="stylesheet"><!--    css引入标签效果-->
    <link href="css/magnific-popup.css" rel="stylesheet"><!--引入视频点击页面css-->

a标签需要href链接获取站外视频地址,js引用需要class绑定lightbox-video和 video-box属性 如果需要加载别的网站需要添加js中的数组链接 源码文件放在网盘 地址:https://pan.baidu.com/s/13fGNOF_JJsSbvl3noyhN1g?pwd=rnav 提取码：rnav

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <title>链接获取站外视频播放</title>

    <link href="css/global.css" rel="stylesheet"><!--    css引入标签效果-->
    <link href="css/magnific-popup.css" rel="stylesheet"><!--引入视频点击页面css-->

</head>

<body>

  <a href="https://www.bilibili.com/video/BV1za411e7ij/?spm_id_from=333.999.0.0&vd_source=fdd59028a412be9546aea3619fee517d"
           style="position:absolute;
           color: #0b0b0b;
                	width:200px;
	                height:200px;
	               background-color:var(--black-color); " class="lightbox-video video-box">
              <!-- a标签通过class绑定 lightbox-video 和 video-box 属性加载视频-->
</a>
<script src="js/jquery.js"></script><!--lightbox-video方法实现-->

<script src="js/magnific-popup.min.js"></script><!--lightbox-video 方法实现-->

<script src="js/script.js"></script><!--lightbox-video 标签引入-->
</body>
</html>

众所周知，在计算机内部，所有信息最终都表示为一个二进制值，每个二进制位有 0 和 1 两种状态。八个二进制位（bit）组成一个字节（byte），一共可以表示 2^8 = 256 种状态。一个状态对应一种符号，即共有 256 种符号，从 00000000 到 11111111。

ASCII 码

ASCII 码是美国制定了一套字符编码，对英语字符与二进制位之间的关系，做了统一规定。ASCII 码使用一个字节来表示一个字符，一共规定了 128 个字符的编码，这些字符只用一个字节的后 7 位，第一位统一为 0。

对于英语 ASCII 编码的 128 个符号足够使用，但对于其他语言来说却不够，所以一些语言将字节中闲置的第一位编入新的符号，充分使用 256 个字符。但这样造成了同一个编码在不同语言编码体系中表示不同，造成混乱。

第二个问题是对于一些亚洲国家的文字，比如中文，256 个符号远远不够，必须使用多个字节表示一个符号。比如简体中文的 GB2312 编码方式，使用两个字节表示一个字符，最多可以表示 256 x 256 = 65536 个符号。

Unicode

由于世界上存在着多种编码方式，同一个二进制数字可以被解释成不同的符号。因此，要想打开一个文本文件，就必须知道它的编码方式，否则用错误的编码方式解读，就会出现乱码。由此 Unicode 应运而生。

Unicode 是一个统一编码集合，类似于世界语，它将世界上所有符号都赋予了一个第一无二的编码。由于每个字符的编码都是唯一的，这样避免了字符编码混乱的问题。

需要注意的是 Unicode 只是一个符号集，它只规定了符号的二进制代码，却没有规定这个二进制代码应该如何存储。

UTF-8

UTF-8（8-bit Unicode Transformation Format）是 Unicode 的实现方式之一，同时也是互联网上使用最广的一种 Unicode 的实现方式。它规定了 Unicode 符号的存储方式。UTF-8 最大的一个特点，就是它是一种变长的编码方式。它可以使用 1~4 个字节表示一个符号，根据不同的符号而变化字节长度。

UTF-8 的编码规则有两条：

对于单字节的符号，字节的第一位设为 0，后面 7 位为这个符号的 Unicode 码。因此对于英语字母，UTF-8 编码和 ASCII 码是相同的。 对于 n 字节的符号（n > 1），第一个字节的前 n 位都设为 1，第 n + 1 位设为 0，后面字节的前两位一律设为 10。剩下的没有提及的二进制位，全部为这个符号的 Unicode 码。 UTF-8 的解读方式：如果一个字节的第一位是 0，则这个字节单独就是一个字符；如果第一位是 1，则连续有多少个 1，就表示当前字符占用多少个字节。

1. 安装docker
2. 安装nginx
3. 编写Dockerfile文件
4. 创建镜像创建容器完成部署

参考博文:https://blog.csdn.net/Howinfun/article/details/102514099 视频讲解链接: 【云服务器部署springboot+vue前后端分离项目】 https://www.bilibili.com/video/BV1hY411d7H1/?share_source=copy_web&vd_source=ca4e02b93a63f6b61653cafdecdfc29f

使用maven打包工具

引入依赖--在有启动类的Pom文件中引入

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

安装docker

参照我之前的笔记，安装docker 并且替换docker的镜像源

安装nginx

nginx使用来进行反向代理服务主机

在本地安装nginx

安装之前：需要有gcc和gcc++的依赖

yum -y install gcc
yum -y install gcc-c++
检查安装后版本
gcc -v
g++ -v

需要安装的安装包：注意：需要按照以下顺序安装并进行编译

1. pcre-8.37.tar.gz
2. openssl-1.0.1t.tar.gz
3. zlib-1.2.8.tar.gz
4. nginx-1.12.2.tar.gz

安装prce

解压缩pcre-xx.tar.gz包

进入解压缩目录，执行./configure

注意：如果提示错误，需要提前安装gcc++

./configure完成后，回到pcre目录下执行make，再执行make install

安装openssl

解压缩openssl-xx.tar.gz包

进入解压缩目录，执行./config

make && make install

安装zlib

解压缩zlib-xx.tar.gz包

进入解压缩目录，执行./configure

make && make install

安装nginx

解压缩nginx-xx.tar.gz包

进入解压缩目录，执行./configure

make && make install

开放服务器端口

如果是本地虚拟机，就关闭防火墙: systemctl stop firewalld / 关闭开机自启动 systemctl disabled firewalld

如果是云主机，需要开放安全组端口80给nginx使用

nginx使用命令

（1）启动命令

在/usr/local/nginx/sbin目录下执行 ./nginx

（2）关闭命令

在/usr/local/nginx/sbin目录下执行 ./nginx -s stop

（3）重新加载命令

在/usr/local/nginx/sbin目录下执行 ./nginx -s reload

（4）查看版本 （5）查看进程

ps -ef | grep nginx

修改配置文件 -- 测试

进入/usr/local/nginx/conf,修改nginx.conf文件：

启动测试：

直接访问主机名就可以看到welcome nginx

配置nginx

因为nginx配置文件在我们的/usr/local/nginx/conf/nginx.conf位置，当如果我们的云服务器部署了多个项目的时候，项目配置文件如果都同时写在一个文件中很容易造成路由冲突，所以我们在原有的配置文件下末尾添加一条指令：

include /usr/local/nginx/conf.d/*.conf;

在nginx目录创建conf.d目录:

mkdir conf.d

在这个文件夹中再创建以conf为后缀的文件，用来配置找到我们的项目的location块:

后端： 前端：

上传jar包

在/usr/local创建了xz_platform的文件夹

把service-1.0-SNAPSHOT.jar上传到该文件夹

编写Dockerfile

# 基于java镜像创建新镜像
FROM java:8
# 作者
MAINTAINER mgx
# 配置映射
VULOME /root
# 将jar包添加到容器中并更名为app.jar
ADD  service.jar /root/app.jar
# 运行jar包
ENTRYPOINT ["nohup","java","-jar","/root/app.jar","&"]

把dockerfile文件编译成镜像文件

注意此时执行下列命令的位置是在Dockerfile所处的文件夹中，所以.表示当前文件夹

docker build -t xz_service .

执行之后，docker会自动下载java8镜像文件

docker images;

创建容器做好端口映射即可

docker run -d --name=xz-service -p 8080:8080 xz_service

配置hosts文件完成本地域名解析映射

C:\Windows\System32\drivers\etc\hosts

api是后端访问域名

admin.xz.com是后台访问

测试访问：

admin.api.xz.com/xz/giftInfo/admin/getCheckParam

补充说明：

参考博文：https://www.cnblogs.com/Json1208/p/8975403.html

Dockerfile中的VOLUME的使用对部署的帮助: VOLUME其实和我们的-v指定映射位置差不多，只是VOLUME在宿主机的位置只能是在/var/lib/docker/volumes/目录下

我们可以通过docker inspect + 容器名称查看存在宿主机的哪个目录

所以当我们进行更新jar包的时候可以直接把jar包更名成app.jar上传到该目录

最后通过重启一下容器，它会自动帮助我们把新更新的app.jar更新到我们指定的/root目录中，再次跑起来其实就是我们的新jar包了

docker restart xz_service_container

执行npm run build:prod打包vue工程 注意的是：记得修改自己生产环境调用的接口的地址 执行build命令之后，会生成一个dist打包目录

进入虚拟机 编写nginx配置文件，方便做映射 在/usr/local/nginx/conf.d/admin.xz.com.conf中编写

server{
    listen 80;
    server_name   admin.xz.com; # 编写的是后面配置本机hosts的域名

    location / {
        root /var/www/admin.xz.com;
        index index.html;
    }
}

然后在/var/www/admin.xz.com目录中上传我们dist目录中打包的所有文件

最后在本机配置好hosts，就可以直接访问了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3渐变⾊板配⾊代码</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .gradient--0 {

            --gradient-start: #6DE195;
            --gradient-start-text: '#6DE195';
            --gradient-end: #C4E759;
            --gradient-end-text: '#C4E759';
        }

        .gradient--1 {
            --gradient-end: #54E38E;
            --gradient-end-text: '#54E38E';
        }

        .gradient--2 {
            --gradient-start: #99E5A2;
            --gradient-start-text: '#99E5A2';
            --gradient-end: #D4FC78;
            --gradient-end-text: '#D4FC78';
        }

        .gradient--3 {
            --gradient-start: #ABC7FF;
            --gradient-start-text: '#ABC7FF';
            --gradient-end: #C1E3FF;
            --gradient-end-text: '#C1E3FF';
        }

        .gradient--4 {
            --gradient-start: #6CACFF;
            --gradient-start-text: '#6CACFF';
            --gradient-end: #8DEBFF;
            --gradient-end-text: '#8DEBFF';
        }

        .gradient--5 {
            --gradient-start: #5583EE;
            --gradient-start-text: '#5583EE';
            --gradient-end: #41D8DD;
            --gradient-end-text: '#41D8DD';
        }

        .gradient--6 {
            --gradient-start: #A16BFE;
            --gradient-start-text: '#A16BFE';
            --gradient-end: #DEB0DF;
            --gradient-end-text: '#DEB0DF';
        }

        .gradient--7 {
            --gradient-start: #D279EE;
            --gradient-start-text: '#D279EE';
            --gradient-end: #F8C390;
            --gradient-end-text: '#F8C390';
        }

        .gradient--8 {
            --gradient-start: #F78FAD;
            --gradient-start-text: '#F78FAD';
            --gradient-end: #FDEB82;
            --gradient-end-text: '#FDEB82';
        }

        .gradient--9 {
            --gradient-start: #BC3D2F;
            --gradient-start-text: '#BC3D2F';
            --gradient-end: #A16BFE;
            --gradient-end-text: '#A16BFE';
        }

        .gradient--10 {
            --gradient-start: #A43AB2;
            --gradient-start-text: '#A43AB2';
            --gradient-end: #E13680;
        }

        .gradient--11 {
            --gradient-start: #9D2E7D;
            --gradient-start-text: '#9D2E7D';
            --gradient-end: #E16E93;
            --gradient-end-text: '#E16E93';
        }

        .gradient--12 {
            --gradient-start: #F5CCF6;
            --gradient-start-text: '#F5CCF6';
            --gradient-end: #F1EEF9;
            --gradient-end-text: '#F1EEF9';
        }

        .gradient--13 {
            --gradient-start: #F0EFF0;
            --gradient-start-text: '#F0EFF0';
            --gradient-end: #FAF8F9;
            --gradient-end-text: '#FAF8F9';
        }

        .gradient--14 {
            --gradient-start: #121317;
            --gradient-start-text: '#121317';
            --gradient-end: #323B42;
            --gradient-end-text: '#323B42';
        }

        ul {
            margin-top: 30px;
            display: grid;
            grid-template-columns: repeat(var(--columns), 1fr);
            grid-auto-rows: 350px;
            font-family: Geneva, Tahoma, Verdana, sans-serif;
            color: #AAA;
            font-size: 12px;
            list-style-type: none;
        }

        li {
            position: relative;
            text-align: center;
        }

        .gradient {
            display: inline-block;
            height: 250px;
            width: 80%;
            background: linear-gradient(33deg, var(--gradient-start), var(--gradient-end));
            border-radius: 20px;
            box-shadow: 0 5px 10px #0002;
        }

        .start-color, .end-color {
            padding: 10px 0 0 10px;
        }

        .start-color:before, .end-color:before {
            content: '';
            width: 15px;
            height: 15px;
            border-radius: 999px;
            border-radius: 999px;
            display: inline-block;
        }

        .start-color:after, .end-color:after {
            padding: 0 10px;
            vertical-align: 2px;
            border-radius: 999px;
            display: inline-block;
        }

        .end-color:before {
            background-color: var(--gradient-start);
        }

        .end-color:after {
            content: var(--gradient-start-text);
        }

        .start-color:before {
            background-color: var(--gradient-end);
        }

        .start-color:after {
            content: var(--gradient-end-text);
        }

        @media screen and (min-width: 1750px) {
            :root {
                --columns: 8;
            }
        }

        @media screen and (max-width: 1750px) {
            :root {
                --columns: 7;
            }
        }

        @media screen and (max-width: 1500px) {
            :root {
                --columns: 6;
            }
        }

        @media screen and (max-width: 1250px) {
            :root {
                --columns: 5;
            }
        }

        @media screen and (max-width: 1000px) {
            :root {
                --columns: 4;
            }
        }

        @media screen and (max-width: 750px) {
            :root {
                --columns: 6;
            }
        }

        @media screen and (max-width: 625px) {
            :root {
                --columns: 5;
            }
        }

        @media screen and (max-width: 500px) {
            :root {
                --columns: 4;
            }
        }

        @media screen and (max-width: 375px) {
            :root {
                --columns: 3;
            }
        }

        @media screen and (max-width: 250px) {
            :root {
                --columns: 2;
            }
        }

        @media screen and (max-width: 750px) {
            ul {
                margin-top: 15px;
                grid-auto-rows: 190px;
                font-size: 10px;
            }

            .gradient {
                height: 125px;
            }

            .start-color, .end-color {
                padding: 7px 0 0 10px;
            }
        }
    </style>
</head>
<body style="padding:0;margin:0;">
<ul>
    <li class="gradient--0">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--1">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--2">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--3">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--4">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--5">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--6">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--7">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--8">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--9">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--10">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--11">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--12">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--13">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>

    <li class="gradient--14">
        <div class="gradient"></div>
        <div class="start-color"></div>
        <div class="end-color"></div>
    </li>
</ul>
</body>
</html>

Java 集合框架

ArrayList 类是一个可以动态修改的数组，与普通数组的区别就是它是没有固定大小的限制，我们可以添加或删除元素。

ArrayList 继承了 AbstractList ，并实现了 List 接口。 ArrayList 类位于 java.util 包中，使用前需要引入它，语法格式如下：

import java.util.ArrayList; // 引入 ArrayList 类

ArrayList<E> objectName =new ArrayList<>();　 // 初始化

• E: 泛型数据类型，用于设置 objectName 的数据类型，只能为引用数据类型。

• objectName: 对象名。

ArrayList 是一个数组队列，提供了相关的添加、删除、修改、遍历等功能。

添加元素

ArrayList 类提供了很多有用的方法，添加元素到 ArrayList 可以使用 add() 方法:

//实例
import java.util.ArrayList;

public class RunoobTest {
    public static void main(String[] args) {
        ArrayList<String> sites = new ArrayList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        System.out.println(sites);
    }
}

以上实例，执行输出结果为：

[Google, Runoob, Taobao, Weibo]

访问元素

访问 ArrayList 中的元素可以使用 get() 方法：

//实例
import java.util.ArrayList;

public class RunoobTest {
    public static void main(String[] args) {
        ArrayList<String> sites = new ArrayList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        System.out.println(sites.get(1));  // 访问第二个元素
    }
}

**注意：**数组的索引值从 0 开始。 以上实例，执行输出结果为：

Runoob

修改元素

如果要修改 ArrayList 中的元素可以使用 set() 方法：

//实例
import java.util.ArrayList;

public class RunoobTest {
    public static void main(String[] args) {
        ArrayList<String> sites = new ArrayList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        sites.set(2, "Wiki"); // 第一个参数为索引位置，第二个为要修改的值
        System.out.println(sites);
    }
}

以上实例，执行输出结果为：

[Google, Runoob, Wiki, Weibo]

删除元素

如果要删除 ArrayList 中的元素可以使用 remove() 方法：

//实例
import java.util.ArrayList;

public class RunoobTest {
    public static void main(String[] args) {
        ArrayList<String> sites = new ArrayList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        sites.remove(3); // 删除第四个元素
        System.out.println(sites);
    }
}

以上实例，执行输出结果为：

[Google, Runoob, Taobao]

计算大小

如果要计算 ArrayList 中的元素数量可以使用 size() 方法：

//实例
import java.util.ArrayList;

public class RunoobTest {
    public static void main(String[] args) {
        ArrayList<String> sites = new ArrayList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        System.out.println(sites.size());
    }
}

以上实例，执行输出结果为：

4

迭代数组列表

我们可以使用 for 来迭代数组列表中的元素：

//实例
import java.util.ArrayList;

public class RunoobTest {
    public static void main(String[] args) {
        ArrayList<String> sites = new ArrayList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        for (int i = 0; i < sites.size(); i++) {
            System.out.println(sites.get(i));
        }
    }
}

以上实例，执行输出结果为：

Google
Runoob
Taobao
Weibo

也可以使用 for-each 来迭代元素：

//实例
import java.util.ArrayList;

public class RunoobTest {
    public static void main(String[] args) {
        ArrayList<String> sites = new ArrayList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        for (String i : sites) {
            System.out.println(i);
        }
    }
}

以上实例，执行输出结果为：

Google
Runoob
Taobao
Weibo

其他的引用类型

ArrayList 中的元素实际上是对象，在以上实例中，数组列表元素都是字符串 String 类型。

如果我们要存储其他类型，而 只能为引用数据类型，这时我们就需要使用到基本类型的包装类。

基本类型对应的包装类表如下：

此外，BigInteger、BigDecimal 用于高精度的运算，BigInteger 支持任意精度的整数，也是引用类型，但它们没有相对应的基本类型。

ArrayList<Integer> li=new Arraylist<>();     // 存放整数元素
ArrayList<Character> li=new Arraylist<>();   // 存放字符元素

以下实例使用 ArrayList 存储数字(使用 Integer 类型):

//实例
import java.util.ArrayList;

public class RunoobTest {
public static void main(String[] args) {
ArrayList<Integer> myNumbers = new ArrayList<Integer>();
myNumbers.add(10);
myNumbers.add(15);
myNumbers.add(20);
myNumbers.add(25);
for (int i : myNumbers) {
System.out.println(i);
}
}
}

以上实例，执行输出结果为：

10
15
20
25

ArrayList 排序

Collections 类也是一个非常有用的类，位于 java.util 包中，提供的 sort() 方法可以对字符或数字列表进行排序。

以下实例对字母进行排序：

//实例
import java.util.ArrayList;
import java.util.Collections;  // 引入 Collections 类

public class RunoobTest {
    public static void main(String[] args) {
        ArrayList<String> sites = new ArrayList<String>();
        sites.add("Taobao");
        sites.add("Wiki");
        sites.add("Runoob");
        sites.add("Weibo");
        sites.add("Google");
        Collections.sort(sites);  // 字母排序
        for (String i : sites) {
            System.out.println(i);
        }
    }
}

以上实例，执行输出结果为：

Google
Runoob
Taobao
Weibo
Wiki

以下实例对数字进行排序：

//实例
import java.util.ArrayList;
import java.util.Collections;  // 引入 Collections 类

public class RunoobTest {
    public static void main(String[] args) {
        ArrayList<Integer> myNumbers = new ArrayList<Integer>();
        myNumbers.add(33);
        myNumbers.add(15);
        myNumbers.add(20);
        myNumbers.add(34);
        myNumbers.add(8);
        myNumbers.add(12);

        Collections.sort(myNumbers);  // 数字排序

        for (int i : myNumbers) {
            System.out.println(i);
        }
    }
}

以上实例，执行输出结果为：

8
12
15
20
33
34

Java ArrayList 方法

Java ArrayList 常用方法列表如下：

更多 API 方法可以查看：https://www.runoob.com/manual/jdk11api/java.base/java/util/ArrayList.html

Java 集合框架

概述

数组和集合都是Java中提供的容器

集合: 英文译为 Collection，用来存放对象的容器，集合中可以存放不同类型的对象，并且集合的长度可变。

在编程时，常常需要集中存放多个数据，可以使用数组来保存多个对象，但数组长度不可变化，一旦在初始化数组时指定了数组长度，这个数组长度就是不可变的，如果需要保存数量变化的数据，数组就有点无能为力了；

为了保存数量不确定的数据，以及保存具有映射关系的数据，Java提供了集合类。集合类主要负责保存、盛装其他数据，因此集合类也被称为容器类。

小结: 集合和数组的对比:

1. 数组中的元素可以基本类型的值，也可以是对象; 而集合中只能保存对象
2. 数组一旦指定了长度，长度就不能再改变; 而集合的长度是可以随时改变的
3. 往数组中插入元素非常麻烦,需要将插入位置后面的元素往后移动; 或者删除数组中间位置的某一个元素, 需要将删除位置后的元素往前移动; 而如果往集合中插入元素或者删除集合中的某一个元素,直接使用现成的方法操作即可

集合的继承结构

由于需求不同，Java就提供了不同的集合类。这多个集合类的数据结构不同，但是它们都是要提供存储和遍历功能的，我们把它们的共性不断的向上提取，最终就形成了集合的继承体系结构图。

Collection接口

• List接口
• ArrayList类
• LinkedList类
• Set接口
• HashSet类
• TreeSet类

解释说明:

• Collection集合是所有单值集合的顶层接口, 其中定义了常用的用于操作集合以及集合中元素的方法

  例如: 添加元素、删除元素、获取元素、获取集合长度、判断功能、将集合转成数组、迭代器遍历元素等功能

• List是Collection的子接口，特点是其中的元素是有序的(即:元素存入集合时的顺序和取出的顺序一致)

  可以通过下标访问List中的元素，另,List集合中的元素是可以重复的(包括null)

• Set也是Collection的子接口，特点是其中的元素是无序(即:元素存入集合时的顺序和取出的顺序不一定一致)

  无法通过下标访问Set中的元素，另外,Set集合中的元素是不可以重复的

学习集合的建议:

• 学习接口中提供的共性方法

• 通过实现类创建对象, 调用这些共性方法

常用方法

!!boolean add(E e)

• 往集合中添加指定元素e

boolean addAll(Collection c)

• 将小集合添加到大集合中

!!boolean isEmpty()

• 如果集合中没有任何元素(空集合), 返回true

boolean contains(Object o)

• 如果此集合中包含指定元素o, 则返回true

boolean containsAll(Collection c)

• 如果此集合中包含指定 集合c 中的所有元素，则返回 true。
• 例如c1中有 "a","b","c","d", 而c2中有"a","b", 则c1包含c2, 返回true 若,c1中有 "a","b","c","d", 而c2中有"x","a","b", 则c1不包含c2, 返回false

!!int size()

• 返回集合的大小(元素个数)

!!boolean remove(Object o)

• 从集合中删除指定的元素o, 删除成功则返回true
• 如果删除的元素不存在导致删除失败, 则返回false
• 如果元素o在集合中出现多次,仅删除第一个

boolean removeAll(Collection c)

• 删除此集合中那些也包含在指定集合c中的所有元素, 若有共同元素, 则删除并返回true 例如 c1中有 "a","b","c","d", 而c2中有"x","a","b",

c1.removeAll(c2),只删除c1中两个共同的元素 "a","b", 对c2没有影响

• 如果两个集合中没有共同元素, 则不删除, 返回false

boolean retainAll(Collection c)

• 仅保留此集合中那些也包含在指定集合c中的元素
• 例如 c1中有 "a","b","c","d", 而c2中有"x","a","b", c1.retainAll(c2),只保留c1中两个共同的元素 "a","b", 对c2没有影响

void clear()

• 删除此集合中的所有元素

Object[] toArray()

• 将此集合转成对象数组

boolean equals(Object o)

• 比较此 collection 与指定对象是否相等。

!!Iterator iterator()

• 返回此集合中所有元素组成的迭代器。

实例1：CollectionDemo1

package collection;
​
import java.util.ArrayList;
import java.util.Collection;
​
/**
 * JAVA集合框架
 * 集合和数组一样,可以保存一组元素,但是集合将元素的操作封装成了方法,操作简便,并且集合还提供了多种不同的实现供我们使用
 * java.util.Collection是所有集合的顶级接口,里面定义了所有的集合都必须具备的功能和方法
 * 集合有两类常用的子类:
 * java.util.List:可重复的集合,且有序,通常我们称之为"线性表"
 * java.util.Set:不可重复的集合
 * 上述两个都是接口,而元素是否重复取决于元素的自身的equals方法,即:Set集合不会存在两个元素equals比较为true的情况.
 */
public class CollectionDemo1 {
    public static void main(String[] args) {
        //类型声明为Collection的目的是什么? c变量只能调用Collection中声明的方法
        //集合中只能存放引用类型
        Collection c = new ArrayList();
        /*
         * add:加
         * boolean add(E e) 这个E是泛型,先理解为是Object
         * 向当前集合添加一个元素,如果该元素成功添加返回true,否则返回false
         */
        c.add("one");
        c.add("two");
        c.add("three");
        c.add("four");
        c.add("five");
        //[one, two, three, four, five]
        System.out.println(c);
        c.add("six");
        //[one, two, three, four, five, six]
        System.out.println(c);
        c.add(1);//自动装箱 c.add(Integer.valueOf(1))
        c.add(true);
        //[one, two, three, four, five, six, 1, true]
        System.out.println(c);
        /*
         * int size()
         * 返回当前集合的元素个数
         * 区别于数组的length,length是属性,size()是方法,length表示数组能存多少,但是存不够长度也不能改变,但是size不是,表示集合中的元素个数
         */
        int size = c.size();
        System.out.println("集合的元素的个数:"+size);
        boolean empty = c.isEmpty();
        //如果size=0,就返回true
        System.out.println("集合是否为空集:"+empty);
        c.clear();
        System.out.println(c);
        System.out.println("集合的元素个数:"+c.size());
        System.out.println("集合是否为空集:"+c.isEmpty());
    }
}

实例2：CollectionDemo2

package collection;
​
import pojo.Point;
​
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashSet;
​
/**
 * 使用当前类作为集合元素测试集合相关操作
 */
public class CollectionDemo2 {
    public static void main(String[] args) {
        //Collection c = new HashSet();
        Collection c = new ArrayList();
        c.add(new Point(1, 2));
        c.add(new Point(1, 2));//Set集合不能存储重复元素
        c.add(new Point(1, 2));
        c.add(new Point(3, 4));
        c.add(new Point(5, 6));
        c.add(new Point(7, 8));
        c.add(new Point(9, 0));
        /*
         * 集合重写了toString方法,格式为:
         * [元素1.toString(),元素2.toString(),...]
         */
        System.out.println(c);
        Point p = new Point(1, 2);
        /*
         * boolean contains(Object o)
         * 判断当前集合中是否包含给定的元素
         * 元素是否包含取决于该元素是否与集合现有元素存在equals比较为true的情况
         */
        boolean contains = c.contains(p);
        System.out.println("集合中是否包含(1,2)点:"+contains);
        /*
        * remove方法删除元素时,也是与集合中元素进行equals方法比较结果为true时,删除元素
        * 但是对于List集合而言,由于可以存储重复元素,所以这种删除只会删除遇到的第一个元素
        * */
        c.remove(p);
        System.out.println(c);
    }
}

Point

package pojo;
​
import java.util.Objects;
​
public class Point {
    private int x;
    private int y;
    //alt+insert
    public Point(int x, int y) {
        this.x = x;
        this.y = y;
    }
​
    public int getY() {
        return y;
    }
​
    public void setY(int y) {
        this.y = y;
    }
​
    public int getX() {
        return x;
    }
​
    public void setX(int x) {
        this.x = x;
    }
​
    @Override
    public String toString() {
        return "(" + x + "," + y +")";
    }
​
    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        Point point = (Point) o;
        return x == point.x && y == point.y;
    }
​
    @Override
    public int hashCode() {
        return Objects.hash(x, y);
    }
}

实例4：CollectionDemo4

package collection;
​
import java.util.ArrayList;
import java.util.Collection;
​
/**
 * @author 老安
 * @data 2022/7/18 19:40
 * 集合间的操作
 */
public class CollectionDemo4 {
    public static void main(String[] args) {
        Collection c1 = new ArrayList();
        c1.add("java");
        c1.add("c++");
        c1.add(".net");
        //c1集合:[java, c++, .net]
        System.out.println("c1集合:" + c1);
        Collection c2 = new ArrayList();
        c2.add("android");
        c2.add("ios");
        c2.add("java");
        //c2集合:[android, ios, java]
        System.out.println("c2集合:" + c2);
        /*
        * 将c2集合添加到c1集合中
        * */
        c1.addAll(c2);
        //c1集合:[java, c++, .net, android, ios, java]
        System.out.println("c1集合:" + c1);
        //c2集合:[android, ios, java]
        System.out.println("c2集合:" + c2);
        Collection c3 = new ArrayList();
        c3.add("c++");
        c3.add("ios");
        //c3.add("php"); 如果添加php,就会返回false
        //[c++, ios]
        System.out.println("c3集合:" + c3);
        /*
        * 判断c1集合中是否包含c3集合中的所有元素
        * */
        boolean containsAll = c1.containsAll(c3);
        System.out.println("c1集合是否包含c3集合:"+containsAll);
        /*
        * 将c1集合的元素和c3集合的相同元素进行保留
        * 取两个集合的交集
        * */
        c1.retainAll(c3);
        //[c++, ios]
        System.out.println("c1集合:" + c1);
        //[c++, ios]
        System.out.println("c3集合:" + c3);
        /*
        * 删除交集,将c1集合与c3集合公有的元素进行删除(c3不受影响)
        * */
        c1.removeAll(c3);
        //[]
        System.out.println("c1集合:" + c1);
        //[c++, ios]
        System.out.println("c3集合:" + c3);
    }
}

集合的遍历

IteratorDemo

package collection;
​
import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
​
/**
 * @author 老安
 * @data 2022/7/18 20:00
 * 集合的遍历
 * Collection层面上不支持随机访问操作(根据指定的位置获取对应的元素),但是集合的子类是支持的,我们后面学习
 * 而Collection层面上想要取出集合的元素只能通过遍历集合,从而拿出集合中的每一个元素
 * 集合提供了统一遍历的方式:迭代器遍历模式
 * 对应方法:
 * Iterator iterator()
 * 该方法会返回一个用于遍历当前集合的迭代器对象
 */
public class IteratorDemo {
    public static void main(String[] args) {
        Collection c = new ArrayList();
        c.add("a");
        c.add("#");
        c.add("b");
        c.add("#");
        c.add("c");
        c.add("#");
        c.add("d");
        c.add("#");
        c.add("e");
        System.out.println(c);
        /*
        * 迭代器使用方式:
        * */
        //1:获取要遍历的集合的迭代器对象
        Iterator it = c.iterator();
        //2:问(问集合是否有下一个元素可以遍历)
        /*
        * boolean hasNext()
        * 判断集合是否有下一个元素可以遍历
        * 迭代器的起始位置是集合的第一个元素之前,因此第一次调用hasNext()就是判断集合是否有第一个元素
        * */
        while (it.hasNext()){
            //3:取(取出下一个元素)
            /*
            * E next()
            * 取出集合中的下一个元素,获取元素后,迭代器的位置会向后移动一个元素的位置
            * */
            String e = (String) it.next();
            if ("#".equals(e)){
                //4:删(删除集合中的指定元素)
                /*
                * 迭代器在遍历的过程中,不能通过集合的方法来增删元素,
                * 但是可以通过迭代器的方法来删元素
                * 迭代器提供了remove()方法,该方法会将本次next()取出的元素从集合中删除
                * */
                //c.remove(e);
                it.remove();
            }
        }
        System.out.println(c);
    }
}

增强型for循环

NewForDemo

package collection;
​
import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
​
/**
 * @author 老安
 * @data 2022/7/18 20:24
 * JDK5推出时,推出了一个新的特性:增强型for循环
 * 通常也称之为叫做新循环和foreach循环
 * 新循环不会取代传统for循环的操作,它的出现仅仅是为了使用相同的语法去遍历集合和数组
 * 语法:
 * for(元素类型 e : 集合或者数组){
 * <p>
 * }
 */
public class NewForDemo {
    public static void main(String[] args) {
        String[] array = {"a", "b", "c", "d", "e"};
        //传统for循环
        //array.fori
        for (int i = 0; i < array.length; i++) {
            String s = array[i];
            System.out.println(s);
        }
        //新循环 array.for
        for (String s : array) {
            System.out.println(s);
        }
        /*
        * 集合之所以能够装载所有类型的元素,是因为集合装载的类型是Object类型
        * 集合和数组一样,一般情况下,都装载同一类型元素
        * 集合的泛型可以约束集合中装载的元素类型是什么
        * */
        Collection<String> c = new ArrayList<>();
        c.add("A");//编译器会检查传入的参数是否是泛型的指定的类型
        c.add("B");
        c.add("C");
        c.add("D");
        c.add("E");
        //c.for
        //新循环就是迭代器遍历
        for (String s : c) {
            System.out.println(s);
        }
    }
}

List集合

概述

List是一个有序的Collection(List是Collection的子接口)，使用此接口能够精确的控制每个元素插入的位置，能够通过索引(类似于数组的下标)来访问List中的元素，第一个元素的索引为 0，而且允许有相同的元素。

List 接口存储一组可重复、有序（插入顺序）的对象。

特点

1. 元素有下标,可以通过下标访问元素
2. 元素是有序的(存入集合的顺序和取出的顺序一定相同)
3. 元素可以重复(包括null)

List方法测试

ListDemo

package collection;
​
import java.util.ArrayList;
import java.util.List;
​
/**
 * @author 老安
 * @data 2022/7/18 21:22
 * java.util.List接口
 * List继承自Collection,是最常用的一类集合.特点:可以存放重复的元素且有序
 * List里提供了一套可以通过下标操作元素的方法
 * 常用实现类:
 * java.util.ArrayList:内部使用数组实现,查询性能更好
 * java.util.LinkedList:内部使用链表实现,增删性能更好
 * 对性能没有特别苛刻的要求下,通常使用ArrayList即可
 */
public class ListDemo {
    public static void main(String[] args) {
        List<String> list = new ArrayList<>();
        list.add("a");
        list.add("b");
        list.add("c");
        list.add("d");
        list.add("e");
        System.out.println(list);
        //获取集合中的第三个元素
        /*
         * E get(int index)
         * 获取指定下标对应的元素
         * */
        String str = list.get(2);
        System.out.println(str);
        //通过下标来遍历集合
        for (int i = 0; i < list.size(); i++) {
            String s = list.get(i);
            System.out.println(s);
        }
        //新循环遍历一定是从头到尾都遍历一次
        for (String s : list) {
            System.out.println(s);
        }
        /*
        * E set(int index,E e)
        * 将给定的元素设置到集合的指定的位置,返回值为该位置原来的元素
        * 替换元素的操作
        * */
        //给集合list的下标1的位置设置新的元素f,将被替换的b返回
        String old = list.set(1, "f");
        System.out.println(old);
        System.out.println(list);
    }
}

ListDemo2

package collection;
​
import java.util.ArrayList;
import java.util.List;
​
/**
 * @author 老安
 * @data 2022/7/18 21:22
 * List重载了一对add和remove方法
 */
public class ListDemo1 {
    public static void main(String[] args) {
        List<String> list = new ArrayList<>();
        list.add("a");
        list.add("b");
        list.add("c");
        list.add("d");
        list.add("e");
        System.out.println(list);
        //给集合list下标3的位置插入新的元素"f"
        /*
        * void add(int index,E e)
        * 将给定的元素插入到指定的位置
        * */
        list.add(3,"f");
        System.out.println(list);
        //删除list集合中下标为2的元素,并将删除的元素返回
        /*
        * E remove(int index)
        * 删除并返回指定位置的元素
        * */
        String old = list.remove(2);
        System.out.println(old);
        System.out.println(list);
    }
}

ListDemo3

package collection;
​
import java.util.ArrayList;
import java.util.List;
​
/**
 * @author 老安
 * @data 2022/7/18 21:22
 * List提供的方法:
 * List subList(int start,int end)
 * 获取当前集合中指定范围内的子集
 */
public class ListDemo2 {
    public static void main(String[] args) {
        //泛型指定时,必须要写引用类型
        List<Integer> list = new ArrayList<>();
        //10.fori
        for (int i = 0; i < 10; i++) {
            list.add(i);
        }
        //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
        System.out.println(list);
        //获取子集[3,7] 含头不含尾
        List<Integer> subList = list.subList(3, 8);
        //[3, 4, 5, 6, 7]
        System.out.println(list);
        System.out.println(subList);
        //将子集每个元素都扩大10倍
        //[30,40,50,60,70]
        //遍历集合中的每一个元素
        //i就是下标
        for (int i = 0; i < subList.size(); i++) {
            //获取当前元素,并扩大10被,然后赋值给当前遍历的下标位置
            subList.set(i,subList.get(i)*10);
        }
        System.out.println(subList);
        //对子集的操作就是对原集合对应的元素的操作
        System.out.println(list);
        //可以利用subList方法操作集合的部分元素
        //清空集合中1-8这部分的元素
        list.subList(1,9).clear();
        System.out.println(list);
    }
}

集合和数组的转换

集合转换数组:CollectionToArrayDemo

package collection;
​
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collection;
​
/**
 * @author 老安
 * @data 2022/7/20 20:51
 * 将一个集合转换为数组
 */
public class CollectionToArrayDemo {
    public static void main(String[] args) {
        Collection<String> c = new ArrayList<>();
        c.add("A");
        c.add("B");
        c.add("C");
        c.add("D");
        c.add("E");
        System.out.println("集合:"+c);
        /*
        * toArray由于默认是Object类型,所以使用非常少,
        * 一般都使用他的重载方法toArray(Object[] arr)
        * 要生成什么类型的数组,arr就声明什么类型,并且数组的长度,
        * 一般都指定成集合的元素数量
        * */
        String[] array = c.toArray(new String[c.size()]);
        System.out.println("数组:"+ Arrays.toString(array));
    }
}

数组转换集合: ArrayToListDemo

package collection;
​
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
​
/**
 * @author 老安
 * @data 2022/7/20 20:59
 * 数组转换为集合
 */
public class ArrayToListDemo {
    public static void main(String[] args) {
        String[] arr = {"A","B","C","D","E"};
        System.out.println("数组:"+Arrays.toString(arr));
        //数组转换为集合的方法
        List<String> list = Arrays.asList(arr);
        System.out.println("集合:"+list);
        //对list集合的操作,同时也会更改arr数组
        list.set(1, "F");
        System.out.println("数组:"+Arrays.toString(arr));
        System.out.println("集合:"+list);
        arr[0] = "G";
        System.out.println("数组:"+Arrays.toString(arr));
        System.out.println("集合:"+list);
        /*
        * 由于集合和数组关联了,而且数组是定长的,所以给集合中新增元素,
        * 同时也会给数组新加元素,但是数组不能新加,就会报错
        * */
        //list.add("H");
        //List<String> list2 = new ArrayList<>();
        //list2.addAll(list);
        //创建集合,并且将list集合的元素装载到list2中
        List<String> list2 = new ArrayList<>(list);
        list2.add("H");
        System.out.println("数组:"+Arrays.toString(arr));
        System.out.println("集合:"+list);
        System.out.println("集合:"+list2);
    }
}

集合的排序

SortListDemo

package collection;
​
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Random;
​
/**
 * @author 老安
 * @data 2022/7/20 21:12
 */
public class SortListDemo {
    public static void main(String[] args) {
        List<Integer> list = new ArrayList<>();
        Random random = new Random();
        for (int i = 0; i < 10; i++) {
            //生成一个随机整数
            int a = random.nextInt(100);
            list.add(a);
        }
        System.out.println("乱序集合:"+list);
        Collections.sort(list);//会自然排序,从小到大
        System.out.println("从小到大集合:"+list);
        Collections.reverse(list);//反转集合的元素
        System.out.println("从大到小集合:"+list);
    }
}

Map接口

概述

Map用于保存具有映射关系的数据，因此Map集合里保存着两组值，一组值用于保存Map里的键(key)另外一组值用于保存Map里的值(value)，键和值是一一对应的关系，称为映射。根据键就能找到对应的值，类似于生活中一张身份证对应一个人一样。

Map的key和value可以是任何引用类型的数据，其中key不允许重复，同一个Map对象的任何两个key通过equals方法比较总是返回false。

特点

1. Map集合中每个元素都有两个值, 分别是key(键) 和 value(值)
2. Map集合中的key(键)不允许重复, 在第二次添加已有的key时, value会被会覆盖
3. Map集合中的元素是无序的(即元素存入集合的顺序和取出时的顺序很可能不一致)
4. Map集合中的key和value具有映射关系, 可以通过key(键)来获取对应的value(值)

key和value之间存在单向一对一关系，即通过指定的key，总能找到唯一的、确定的value。从Map中取出数据时，只要给出指定的key，就可以取出对应的value。

如果把Map里的所有key放在一起来看，它们就组成了一个Set集合（所有的key没有顺序，key与key之间不能重复），实际上Map确实包含了一个keySet()方法，用于返回Map里所有key组成的Set集合。

如果把Map里的所有value放在一起来看，它们又非常类似于一个List：元素与元素之间可以重复，每个元素可以根据索引来查找，只是Map中的索引(也就是key)不是从0开始的整数值，而是任意类型的对象；

如果需要从List集合中取出元素，则需要提供该元素的数字索引；如果需要从Map中取出元素，则需要提供该元素的key。因此，Map有时也被称为字典，或关联数组。

继承结构

Map接口

• HashMap类
• TreeMap类
• Hashtable类

解释说明:

• Map集合是采用键-值对(key-value)的存储方式, 键(key)、值(value)可以是引用类型的数据, key不允许重复, vaue可以重复, key和value是一对一的关系, 通过指定的key总能找到唯一的、确定的value值

• HashMap 和 Hashtable 都是Map接口的实现类，它们之间的关系完全类似于ArrayList和Vector的关系

1. HashMap是线程不安全的, 所以HashMap的性能要比HashTable高一些
2. HashMap可以使用null作为key或value, Hashtable不允许使用null作为key和value;
3. Hashtable是一个古老的Map实现类，JDK 1.0出现，出现时，Java还没有提供Map接口，命名没有遵守Java的命名规范，与Vector类似的是，尽量少用Hashtable实现类，即使需要创建线程安全的Map实现类，也无须使用Hashtable实现类，可以通过别的方式来解决线程安全问题。

• TreeMap是Map的子接口SortedMap的的实现类, 是可以支持对内部元素进行排序的类, 也正因为如此, TreeMap的执行效率通常要比HashMap和HashTable慢。

MapDemo

package map;
​
import java.util.HashMap;
import java.util.Map;
​
/**
 * java.util.Map接口 查找表
 * Map体现的结构是一个多行两列的表格,其中左列称之为"key",右列称之为"value"
 * Map总是以key-value(键值对)的形式保存一组数据,并且可以根据key获取对应的value.
 * Map有一个要求,key不能重复(通过equals比较)
 * 常用实现类:
 * java.util.HashMap 我们称之为"散列表".当今查询速度最快的数据结构
 */
public class MapDemo {
    public static void main(String[] args) {
        Map<String,Integer> map = new HashMap<>();
        //V put(K k,V v)
        //向当前Map中保存一组键值对
        map.put("语文", 80);
        map.put("英语", 90);
        map.put("物理", 60);
        map.put("化学", 100);
        //{物理=60, 化学=100, 语文=80, 英语=90}
        System.out.println(map);
        Integer score = map.put("数学", 70);
        System.out.println(map);
        System.out.println(score);//由于key不存在,所以就返回null
        score = map.put("数学", 100);
        System.out.println(map);
        System.out.println(score);//由于key存在,就返回覆盖的value的内容
        //V get(Object key) 通过key值获取对应的value值
        score = map.get("语文");
        System.out.println(score);
        //返回Map中的元素个数
        int size = map.size();
        System.out.println(size);
        //判断是否包含key
        boolean ck = map.containsKey("英语");
        System.out.println(ck);
        //判断是否包含value
        boolean cv = map.containsValue(97);
        System.out.println(cv);
    }
}

变量分析

package test;
​
import pojo.Point;
​
import java.util.ArrayList;
import java.util.Collection;
​
/**
 * 局部变量在栈中
 * 对象都在堆中
 * 属性都在对象中(在堆里)
 *
 * 基本类型保存的只就是值本身 在栈中
 * 引用类型保存的值是对象在堆里的地址
 */
public class Demo {
    public static void main(String[] args) {
        String s = "hello";
        int a = 1;
        Point p = new Point(1, 2);
        Collection c = new ArrayList();
        c.add(p);
        test(s, a, p, c);
        System.out.println("s:" + s);//?
        System.out.println("a:" + a);//?
        System.out.println("p:" + p);//?
        System.out.println("c:" + c);//?
    }
    public static void test(String s, int a, Point p, Collection c) {
        a++;
        s = s + "world";
        p.setX(3);
        p = new Point(4, 5);
        c.clear();
        c.add(p);
        c = new ArrayList();
        p.setX(7);
        c.add(p);
    }
}

早在 Java 2 中之前，Java 就提供了特设类。比如：Dictionary, Vector, Stack, 和 Properties 这些类用来存储和操作对象组。

虽然这些类都非常有用，但是它们缺少一个核心的，统一的主题。由于这个原因，使用 Vector 类的方式和使用 Properties 类的方式有着很大不同。

集合框架被设计成要满足以下几个目标。

• 该框架必须是高性能的。基本集合（动态数组，链表，树，哈希表）的实现也必须是高效的。

• 该框架允许不同类型的集合，以类似的方式工作，具有高度的互操作性。

• 对一个集合的扩展和适应必须是简单的。

为此，整个集合框架就围绕一组标准接口而设计。你可以直接使用这些接口的标准实现，诸如： LinkedList, HashSet, 和 TreeSet 等,除此之外你也可以通过这些接口实现自己的集合。

从上面的集合框架图可以看到，Java 集合框架主要包括两种类型的容器，一种是集合（Collection），存储一个元素集合，另一种是图（Map），存储键/值对映射。Collection 接口又有 3 种子类型，List、Set 和 Queue，再下面是一些抽象类，最后是具体实现类，常用的有 ArrayList、LinkedList、HashSet、LinkedHashSet、HashMap、LinkedHashMap 等等。

集合框架是一个用来代表和操纵集合的统一架构。所有的集合框架都包含如下内容：

• 接口：是代表集合的抽象数据类型。例如 Collection、List、Set、Map 等。之所以定义多个接口，是为了以不同的方式操作集合对象

• 实现（类）：是集合接口的具体实现。从本质上讲，它们是可重复使用的数据结构，例如：ArrayList、LinkedList、HashSet、HashMap。

• 算法：是实现集合接口的对象里的方法执行的一些有用的计算，例如：搜索和排序。这些算法被称为多态，那是因为相同的方法可以在相似的接口上有着不同的实现。

除了集合，该框架也定义了几个 Map 接口和类。Map 里存储的是键/值对。尽管 Map 不是集合，但是它们完全整合在集合中。

集合框架体系如图所示

集合接口

集合框架定义了一些接口。本节提供了每个接口的概述：

Set和List的区别

• 1.Set 接口实例存储的是无序的，不重复的数据。List 接口实例存储的是有序的，可以重复的元素。

• 2.Set 检索效率低下，删除和插入效率高，插入和删除不会引起元素位置改变 <实现类有HashSet,TreeSet>。

• 3.List 和数组类似，可以动态增长，根据实际存储的数据的长度自动增长 List 的长度。查找元素效率高，插入删除效率低，因为会引起其他元素位置改变 <实现类有ArrayList,LinkedList,Vector> 。

集合实现类（集合类）

Java提供了一套实现了Collection接口的标准集合类。其中一些是具体类，这些类可以直接拿来使用，而另外一些是抽象类，提供了接口的部分实现。

标准集合类汇总于下表：

集合算法

集合框架定义了几种算法，可用于集合和映射。这些算法被定义为集合类的静态方法。

在尝试比较不兼容的类型时，一些方法能够抛出 ClassCastException异常。当试图修改一个不可修改的集合时，抛出UnsupportedOperationException异常。

集合定义三个静态的变量：EMPTY_SET，EMPTY_LIST，EMPTY_MAP的。这些变量都不可改变。

一般遍历数组都是采用for循环或者增强for，这两个方法也可以用在集合框架，但是还有一种方法是采用迭代器遍历集合框架，它是一个对象，实现了Iterator 接口或 ListIterator接口。

迭代器，使你能够通过循环来得到或删除集合的元素。ListIterator 继承了 Iterator，以允许双向遍历列表和修改元素。

遍历 ArrayList

//实例
import java.util.*;
 
public class Test{
 public static void main(String[] args) {
     List<String> list=new ArrayList<String>();
     list.add("Hello");
     list.add("World");
     list.add("HAHAHAHA");
     //第一种遍历方法使用 For-Each 遍历 List
     for (String str : list) {            //也可以改写 for(int i=0;i<list.size();i++) 这种形式
        System.out.println(str);
     }
 
     //第二种遍历，把链表变为数组相关的内容进行遍历
     String[] strArray=new String[list.size()];
     list.toArray(strArray);
     for(int i=0;i<strArray.length;i++) //这里也可以改写为  for(String str:strArray) 这种形式
     {
        System.out.println(strArray[i]);
     }
     
    //第三种遍历 使用迭代器进行相关遍历
     
     Iterator<String> ite=list.iterator();
     while(ite.hasNext())//判断下一个元素之后有值
     {
         System.out.println(ite.next());
     }
 }
}

解析：

三种方法都是用来遍历ArrayList集合，第三种方法是采用迭代器的方法，该方法可以不用担心在遍历的过程中会超出集合的长度。

遍历 Map

//实例
import java.util.*;
 
public class Test{
     public static void main(String[] args) {
      Map<String, String> map = new HashMap<String, String>();
      map.put("1", "value1");
      map.put("2", "value2");
      map.put("3", "value3");
      
      //第一种：普遍使用，二次取值
      System.out.println("通过Map.keySet遍历key和value：");
      for (String key : map.keySet()) {
       System.out.println("key= "+ key + " and value= " + map.get(key));
      }
      
      //第二种
      System.out.println("通过Map.entrySet使用iterator遍历key和value：");
      Iterator<Map.Entry<String, String>> it = map.entrySet().iterator();
      while (it.hasNext()) {
       Map.Entry<String, String> entry = it.next();
       System.out.println("key= " + entry.getKey() + " and value= " + entry.getValue());
      }
      
      //第三种：推荐，尤其是容量大时
      System.out.println("通过Map.entrySet遍历key和value");
      for (Map.Entry<String, String> entry : map.entrySet()) {
       System.out.println("key= " + entry.getKey() + " and value= " + entry.getValue());
      }
    
      //第四种
      System.out.println("通过Map.values()遍历所有的value，但不能遍历key");
      for (String v : map.values()) {
       System.out.println("value= " + v);
      }
     }
}

如何使用比较器

TreeSet和TreeMap的按照排序顺序来存储元素. 然而，这是通过比较器来精确定义按照什么样的排序顺序。

这个接口可以让我们以不同的方式来排序一个集合。

集合是一个对象，可容纳其他对象的引用。集合接口声明对每一种类型的集合可以执行的操作。

集合框架的类和接口均在java.util包中。

任何对象加入集合类后，自动转变为Object类型，所以在取出的时候，需要进行强制类型转换。

File类概述

File类的每一个实例可以表示硬盘(文件系统)中的一个文件或目录(实际上表示的是一个抽象路径)

使用File可以做到:

1. 访问其表示的文件或目录的属性信息,例如:名字,大小,修改时间等等
2. 创建和删除文件或目录
3. 访问一个目录中的子项

获取文件及其属性

• length(): 返回文件的长度, 单位是字节数(如果File是目录, 则返回0)
• exists(): 判断当前文件或目录是否存在，存在则返回true
• isFile(): 判断当前file是否为文件，是文件则返回true
• isDirectory(): 判断当前file是否为目录，是目录返回true
• getName(): 获取当前File文件或目录的名字
• getParent(): 获取当前File父目录的路径
• getAbsolutePath(): 获取当前File文件或目录的完整路径

代码案例

package file;
​
import java.io.File;
​
/**
 * 选中项目,创建一个文件(右键-->New-->File)
 */
public class FileDemo {
    public static void main(String[] args) {
        //访问当前项目目录下的demo.txt文件
        //绝对路径: 从盘符开始定位该文件 选中目标文件,右键-->Copy Path-->Absolute Path
        //D:\Dates\IDEASPACE\VN2204SE\demo.txt
        //new File("D:/Dates/IDEASPACE/VN2204SE/demo.txt");
        /*
         * 工作中一般不会去使用绝对路径去定位文件或者目录,都是使用相对路径的.
         * 有更好的跨平台性
         * "./"表示当前目录,比如在IDEA中,执行程序时,遇到"./"则表示当前程序所在项目目录
         */
        //光标放在new File("./demo.txt");的后面,然后按(ctrl+alt+v)或者(alt+enter)
        File file = new File("./demo.txt");
        //获取目标文件的文件名(带后缀)
        String name = file.getName();
        System.out.println("文件的名字:"+name);
        //获取目标文件的长度(单位是字节)
        long length = file.length();
        System.out.println("文件的长度:"+length+"字节");
        //只读: 文件只能读取,不能写入
        boolean cr = file.canRead();//read读
        System.out.println("文件是否可读:"+cr);
        boolean cw = file.canWrite();//write写
        System.out.println("文件是否可写:"+cw);
        boolean ih = file.isHidden();//hidden 隐藏
        System.out.println("文件是否被隐藏:"+ih);
    }
}

创建文件

createNewFile(): 创建指定路径和名称的文件, 如果文件不存在, 则创建并返回true, 否则就不创建并返回false

代码案例

package file;
​
import java.io.File;
import java.io.IOException;
​
/**
 * Create 创建 New 新 File文件
 * 使用FIle创建一个文件
 */
public class CreateNewFileDemo {
    public static void main(String[] args) throws IOException {
        //在当前项目的目录下,创建一个文件,test.txt
        //"./"可以忽略不写
        File file = new File("./test.txt");
        //exists() 判断文件是否存在,存在返回true,不存在返回false
        if (file.exists()){
            System.out.println("该文件已存在!!");
        }else{//文件不存在
            file.createNewFile();
            System.out.println("该文件已经创建完毕!");
        }
    }
}

删除文件

delete(): 删除文件或删除空目录, 删除成功返回true(非空目录删除会失败)

代码案例

package file;
​
import java.io.File;
​
/**
 * delete 删除
 * 删除一个文件
 */
public class DeleteDemo {
    public static void main(String[] args) {
        //将当前项目目录下的test.txt删除
        File file = new File("./test.txt");
        if (file.exists()){
            file.delete();//删除 删除不能撤回
            System.out.println("该文件已经删除了!");
        }else {
            System.out.println("文件不存在!");
        }
    }
}

创建目录

mkdir(): 创建指定路径和名称的目录, 如果目录不存在, 则创建并返回true, 否则就不创建并返回false
mkdirs(): 创建指定路径和名称的多级目录, 如果目录不存在, 则创建并返回true, 否则就不创建并返回false

代码案例

package file;
​
import java.io.File;
​
/**
 * Mk make 制作 Dir directory 目录
 * 创建一个目录
 */
public class MkDirDemo {
    public static void main(String[] args) {
        //在当前项目目录下,创建一个目录(目录没有后缀)
        //File dir = new File("./demo");
        File dir = new File("./a/b/c/d/e/f/g/h/i/j/k");
        if (dir.exists()){
            System.out.println("该目录已存在!");
        }else{
            /*
             * mkdir() 创建目录时,要求该目录所在的目录必须存在,否则无法创建
             * mkdirs() 创建目录时,会将所有不存在的目录都创建出来(推荐)
             */
            dir.mkdirs();
            System.out.println("目录已创建!");
        }
    }
}

删除目录

delete(): 删除文件或删除空目录, 删除成功返回true(非空目录删除会失败)

代码案例

package file;
​
import java.io.File;
​
/**
 * 删除一个目录
 */
public class DeleteDirDemo {
    public static void main(String[] args) {
        //将当前目录下的demo目录删除
        File dir = new File("./demo");
        if (dir.exists()){
            dir.delete();//删除目录时,要求这个目录必须是空目录
            System.out.println("该目录已删除!");
        }else {
            System.out.println("该目录不存在!");
        }
    }
}

获取目录中的子项

代码案例

package file;
​
import java.io.File;
​
/**
 * 获取一个目录中的子项
 */
public class ListFilesDemo {
    public static void main(String[] args) {
        //获取当前项目的所有子项
        File dir = new File(".");
        //isDirectory 是否是一个目录
        //isFile 是否是一个文件
        if (dir.isDirectory()){
            //获取dir目录的所有子项,返回一个File数组
            File[] files = dir.listFiles();
            System.out.println("VN2204SE有"+files.length+"个子项");
            //files.fori 自动生成根据下标遍历指定数组的for循环
            for (int i = 0; i < files.length; i++) {
                System.out.println(files[i].getName());
            }
        }
    }
}

递归遍历目录

递归（recursion）是一种常见的解决问题的方法，即把问题逐渐简单化。 递归的基本思想就是“自己调用自己”，一个使用递归技术的方法将会直接或者间接的调用自己。

 m();
 ...
 public void m(){
   ...
   m();
   ...
 }

需要注意的是: 递归方法一定要有出口, 否则将会一直自己调用自己, 变成死循环, 严重时将会导致内存溢出!

递归有两个特点: 1:必须要利用分支控制,制造出口 2:就是不能嵌套太多层,要不然太耗费资源,容易出错

递归是重复的干一件事,循环也是一直干一件事,递归重复过程,循环重复的是步骤

需求: 遍历指定File(目录)下的所有子目录和子文件, 输出该目录下的所有目录和文件名

思路: 声明一个diGui目录的方法, 接收一个File类型的对象, 方法内部实现如下: 

1.判断当前File是否为文件(防止第一次传入的是文件)

  1.1.如果file是文件, 输出: "文件不支持递归!"

  1.2.如果file是目录, 则继续执行第2步

2.获取当前目录下的所有子目录及子文件对象组成的File数组

3.遍历当前目录下的所有子目录及子文件对象

5.判断当前遍历的是目录还是文件

  4.1.如果当前遍历的是文件, 输出该文件的路径+名称

  4.2.如果当前遍历的是目录, 输出当前目录的路径+名称

  并以此目录作为根, 接着遍历该目录下的所有子目录和子文件, 输出该目录下的所有目录和文件名

递归获取目录的子项

package file;
​
import java.io.File;
​
/**
 * @author 老安
 * @data 2022/7/1 19:41
 */
public class ListDirDG {
    public static void main(String[] args) {
        //指定要递归的目录
        File file = new File("./a");
        //调用diGuiFolder,递归遍历传入的file的目录
        diGuiFolder(file);
    }
    private static void diGuiFolder(File file) {
        //1.判断当前File是否为文件(防止第一次传入的是文件)
        if (file.isFile()){
            //1.1.如果file是文件, 输出: "文件不支持递归!"
            System.out.println("文件不支持递归!");
        }else{
            //1.2.如果file是目录, 则继续执行第2步
            //2.获取当前目录下的所有子目录及子文件对象组成的File数组
            File[] fs = file.listFiles();
            //3.遍历当前目录下的所有子目录及子文件对象
            //fs.fori 快速生成for代码体
            for (int i = 0; i < fs.length; i++) {
                //4.判断当前遍历的是目录还是文件
                if (fs[i].isFile()){
                    //4.1.如果当前遍历的是文件, 输出该文件的路径+名称
                    System.out.println("文件:"+fs[i]);
                }else{
                    //4.2.如果当前遍历的是目录, 输出当前目录的路径+名称
                    System.out.println("目录:"+fs[i]);
                    //递归遍历当前子目录下的子元素
                    diGuiFolder(fs[i]);
                }
            }
        }
    }
}

递归删除目录

代码案例 package file; ​ import java.io.File; ​ /**

• @author 老安
• @data 2022/7/1 19:41
• 递归删除目录 */ public class DeleteDirDG {    public static void main(String[] args) {        //指定要递归的目录        File file = new File("./a");        //调用diGuiFolder,递归遍历传入的file的目录        diGuiFolder(file);   }    private static void diGuiFolder(File file) {        //1.判断当前File是否为文件(防止第一次传入的是文件)        if (file.isFile()){            //1.1.如果file是文件, 输出: "文件不支持递归!"            System.out.println("文件不支持递归!");       }else{            //1.2.如果file是目录, 则继续执行第2步            //2.获取当前目录下的所有子目录及子文件对象组成的File数组            File[] fs = file.listFiles();            //3.遍历当前目录下的所有子目录及子文件对象            //fs.fori 快速生成for代码体            for (int i = 0; i < fs.length; i++) {                //4.判断当前遍历的是目录还是文件                if (fs[i].isFile()){                    //4.1.如果当前遍历的是文件, 输出该文件的路径+名称                    System.out.println("删除文件:"+fs[i]);                    fs[i].delete();//删除文件               }else{                    //4.2.如果当前遍历的是目录, 输出当前目录的路径+名称                    //System.out.println("目录:"+fs[i]);                    //递归遍历当前子目录下的子元素                    diGuiFolder(fs[i]);               }           }            //5.删除file目录            file.delete();            System.out.println("删除目录:"+file);       }   } }

获取一个目录中符合过滤条件的所有子项

代码案例

package file;
​
import java.io.File;
import java.io.FileFilter;
​
/**
 * @author 老安
 * @data 2022/7/1 20:17
 * 获取一个目录中符合过滤条件的所有子项
 * listFiles方法有一个重载的方法:
 * File[] listFiles(FileFilter filter)
 * 该方法要求传入一个文件过滤器,然后仅将满足条件的子项进行返回
 * filter: 过滤器
 * accept: 接受
 */
public class ListFilesDemo2 {
    public static void main(String[] args) {
        //获取当前项目的目录
        File dir = new File(".");
        //由于这个过滤器接口只会使用一次,所以没必要定义一个子类去实现接口,可以使用匿名内部类简写
        FileFilter filter = new FileFilter() {
            @Override
            public boolean accept(File pathname) {
                //获取当前file对象的名字
                String name = pathname.getName();
                System.out.println("正在过滤:"+name);
                //判断名字中是否包含"o",如果包含返回true,不包含返回false
                boolean o = name.contains("o");
                //o是true,就符合过滤条件,o是false,就不符合过滤条件
                return o;
            }
        };
        //获取目录中子项时,会将每个子项传送给过滤器的accept()
        File[] files = dir.listFiles(filter);
        for (int i = 0; i < files.length; i++) {
            System.out.println(files[i]);
        }
    }
}

Java 集合框架

HashMap 是一个散列表，它存储的内容是键值对(key-value)映射。

HashMap 实现了 Map 接口，根据键的 HashCode 值存储数据，具有很快的访问速度，最多允许一条记录的键为 null，不支持线程同步。

HashMap 是无序的，即不会记录插入的顺序。

HashMap 继承于AbstractMap，实现了 Map、Cloneable、java.io.Serializable 接口。 HashMap 的 key 与 value 类型可以相同也可以不同，可以是字符串（String）类型的 key 和 value，也可以是整型（Integer）的 key 和字符串（String）类型的 value。 HashMap 中的元素实际上是对象，一些常见的基本类型可以使用它的包装类。

基本类型对应的包装类表如下：

HashMap 类位于 java.util 包中，使用前需要引入它，语法格式如下：

import java.util.HashMap; // 引入 HashMap 类

以下实例我们创建一个 HashMap 对象 Sites， 整型（Integer）的 key 和字符串（String）类型的 value：

HashMap<Integer, String> Sites = new HashMap<Integer, String>();

添加元素

HashMap 类提供了很多有用的方法，添加键值对(key-value)可以使用 put() 方法:

//实例
// 引入 HashMap 类      
import java.util.HashMap;

public class RunoobTest {
    public static void main(String[] args) {
        // 创建 HashMap 对象 Sites
        HashMap<Integer, String> Sites = new HashMap<Integer, String>();
        // 添加键值对
        Sites.put(1, "Google");
        Sites.put(2, "Runoob");
        Sites.put(3, "Taobao");
        Sites.put(4, "Zhihu");
        System.out.println(Sites);
    }
}

执行以上代码，输出结果如下：

{1=Google, 2=Runoob, 3=Taobao, 4=Zhihu}

以下实例创建一个字符串（String）类型的 key 和字符串（String）类型的 value：

//实例
// 引入 HashMap 类      
import java.util.HashMap;

public class RunoobTest {
    public static void main(String[] args) {
        // 创建 HashMap 对象 Sites
        HashMap<String, String> Sites = new HashMap<String, String>();
        // 添加键值对
        Sites.put("one", "Google");
        Sites.put("two", "Runoob");
        Sites.put("three", "Taobao");
        Sites.put("four", "Zhihu");
        System.out.println(Sites);
    }
}

执行以上代码，输出结果如下：

{four=Zhihu, one=Google, two=Runoob, three=Taobao}

访问元素

我们可以使用 get(key) 方法来获取 key 对应的 value:

//实例
// 引入 HashMap 类      
import java.util.HashMap;

public class RunoobTest {
    public static void main(String[] args) {
        // 创建 HashMap 对象 Sites
        HashMap<Integer, String> Sites = new HashMap<Integer, String>();
        // 添加键值对
        Sites.put(1, "Google");
        Sites.put(2, "Runoob");
        Sites.put(3, "Taobao");
        Sites.put(4, "Zhihu");
        System.out.println(Sites.get(3));
    }
}

执行以上代码，输出结果如下：

Taobao

删除元素

我们可以使用 remove(key) 方法来删除 key 对应的键值对(key-value):

//实例
// 引入 HashMap 类      
import java.util.HashMap;

public class RunoobTest {
    public static void main(String[] args) {
        // 创建 HashMap 对象 Sites
        HashMap<Integer, String> Sites = new HashMap<Integer, String>();
        // 添加键值对
        Sites.put(1, "Google");
        Sites.put(2, "Runoob");
        Sites.put(3, "Taobao");
        Sites.put(4, "Zhihu");
        Sites.remove(4);
        System.out.println(Sites);
    }
}

执行以上代码，输出结果如下：

{1=Google, 2=Runoob, 3=Taobao}

删除所有键值对(key-value)可以使用 clear 方法：

//实例
// 引入 HashMap 类      
import java.util.HashMap;

public class RunoobTest {
    public static void main(String[] args) {
        // 创建 HashMap 对象 Sites
        HashMap<Integer, String> Sites = new HashMap<Integer, String>();
        // 添加键值对
        Sites.put(1, "Google");
        Sites.put(2, "Runoob");
        Sites.put(3, "Taobao");
        Sites.put(4, "Zhihu");
        Sites.clear();
        System.out.println(Sites);
    }
}

执行以上代码，输出结果如下：

{}

计算大小

如果要计算 HashMap 中的元素数量可以使用 size() 方法：

//实例
// 引入 HashMap 类      
import java.util.HashMap;

public class RunoobTest {
    public static void main(String[] args) {
        // 创建 HashMap 对象 Sites
        HashMap<Integer, String> Sites = new HashMap<Integer, String>();
        // 添加键值对
        Sites.put(1, "Google");
        Sites.put(2, "Runoob");
        Sites.put(3, "Taobao");
        Sites.put(4, "Zhihu");
        System.out.println(Sites.size());
    }
}

执行以上代码，输出结果如下：

4

迭代 HashMap

可以使用 for-each 来迭代 HashMap 中的元素。

如果你只想获取 key，可以使用 keySet() 方法，然后可以通过 get(key) 获取对应的 value，如果你只想获取 value，可以使用 values() 方法。

//实例
// 引入 HashMap 类      
import java.util.HashMap;

public class RunoobTest {
    public static void main(String[] args) {
        // 创建 HashMap 对象 Sites
        HashMap<Integer, String> Sites = new HashMap<Integer, String>();
        // 添加键值对
        Sites.put(1, "Google");
        Sites.put(2, "Runoob");
        Sites.put(3, "Taobao");
        Sites.put(4, "Zhihu");
        // 输出 key 和 value
        for (Integer i : Sites.keySet()) {
            System.out.println("key: " + i + " value: " + Sites.get(i));
        }
        // 返回所有 value 值
        for(String value: Sites.values()) {
          // 输出每一个value
          System.out.print(value + ", ");
        }
    }
}

执行以上代码，输出结果如下：

key: 1 value: Google
key: 2 value: Runoob
key: 3 value: Taobao
key: 4 value: Zhihu
Google, Runoob, Taobao, Zhihu,

Java HashMap 方法

hashmap Java HashMap 常用方法列表如下：

Java 集合框架

HashSet 基于 HashMap 来实现的，是一个不允许有重复元素的集合。

HashSet 允许有 null 值。

HashSet 是无序的，即不会记录插入的顺序。

HashSet 不是线程安全的， 如果多个线程尝试同时修改 HashSet，则最终结果是不确定的。 您必须在多线程访问时显式同步对 HashSet 的并发访问。

HashSet 实现了 Set 接口。 HashSet 中的元素实际上是对象，一些常见的基本类型可以使用它的包装类。

基本类型对应的包装类表如下：

HashSet 类位于 java.util 包中，使用前需要引入它，语法格式如下：

import java.util.HashSet; // 引入 HashSet 类

以下实例我们创建一个 HashSet 对象 sites，用于保存字符串元素：

HashSet<String> sites = new HashSet<String>();

添加元素

HashSet 类提供了很多有用的方法，添加元素可以使用 add() 方法:

//实例
// 引入 HashSet 类      
import java.util.HashSet;

public class RunoobTest {
    public static void main(String[] args) {
    HashSet<String> sites = new HashSet<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Zhihu");
        sites.add("Runoob");  // 重复的元素不会被添加
        System.out.println(sites);
    }
}

执行以上代码，输出结果如下：

[Google, Runoob, Zhihu, Taobao]

在上面的实例中，Runoob 被添加了两次，它在集合中也只会出现一次，因为集合中的每个元素都必须是唯一的。

判断元素是否存在

我们可以使用 contains() 方法来判断元素是否存在于集合当中:

//实例
// 引入 HashSet 类      
import java.util.HashSet;

public class RunoobTest {
    public static void main(String[] args) {
    HashSet<String> sites = new HashSet<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Zhihu");
        sites.add("Runoob");  // 重复的元素不会被添加
        System.out.println(sites.contains("Taobao"));
    }
}

执行以上代码，输出结果如下：

true

删除元素

我们可以使用 remove() 方法来删除集合中的元素:

//实例
// 引入 HashSet 类      
import java.util.HashSet;

public class RunoobTest {
    public static void main(String[] args) {
    HashSet<String> sites = new HashSet<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Zhihu");
        sites.add("Runoob");     // 重复的元素不会被添加
        sites.remove("Taobao");  // 删除元素，删除成功返回 true，否则为 false
        System.out.println(sites);
    }
}

执行以上代码，输出结果如下：

[Google, Runoob, Zhihu]

删除集合中所有元素可以使用 clear 方法：

//实例
// 引入 HashSet 类      
import java.util.HashSet;

public class RunoobTest {
    public static void main(String[] args) {
    HashSet<String> sites = new HashSet<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Zhihu");
        sites.add("Runoob");     // 重复的元素不会被添加
        sites.clear();  
        System.out.println(sites);
    }
}

执行以上代码，输出结果如下：

[]

计算大小

如果要计算 HashSet 中的元素数量可以使用 size() 方法：

//实例
// 引入 HashSet 类      
import java.util.HashSet;

public class RunoobTest {
    public static void main(String[] args) {
    HashSet<String> sites = new HashSet<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Zhihu");
        sites.add("Runoob");     // 重复的元素不会被添加
        System.out.println(sites.size());  
    }
}

执行以上代码，输出结果如下

4

迭代 HashSet

可以使用 for-each 来迭代 HashSet 中的元素。

//实例
// 引入 HashSet 类      
import java.util.HashSet;

public class RunoobTest {
    public static void main(String[] args) {
    HashSet<String> sites = new HashSet<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Zhihu");
        sites.add("Runoob");     // 重复的元素不会被添加
        for (String i : sites) {
            System.out.println(i);
        }
    }
}

执行以上代码，输出结果如下：

Google
Runoob
Zhihu
Taobao

更多 API 方法可以查看：https://www.runoob.com/manual/jdk11api/java.base/java/util/HashSet.html

Java 集合框架

HTTP概念

HTTP协议 超文本传输协议 由万维网制定(w3c)

TCP协议主要关注客户端和服务器建立链接,互相传递数据的协议

是浏览器与服务器通讯的应用层协议，规定了浏览器与服务器之间的交互规则以及交互数据的 格式信息等。

HTTP交互规则

1. HTTP协议对于客户端与服务端之间的交互规则有以下定义: 1.要求浏览器与服务端之间必须遵循一问一答的规则，即:浏览器与服务端建立TCP连接后需要 先发送一个请求(问)然后服务端接收到请求并予以处理后再发送响应(答)。注意，服务端永远 不会主动给浏览器发送信息。
2. HTTP要求浏览器与服务端的传输层协议必须是可靠的传输，因此是使用TCP协议作为传输层 协议的。

HTTP请求和响应

HTTP协议对于浏览器与服务端之间交互的数据格式，内容也有一定的要求。 浏览器给服务端发送的内容称为请求Request 服务端给浏览器发送的内容称为响应Response

请求和响应中大部分内容都是文本信息(字符串)，并且这些文本数据使用的字符集为: ISO8859-1.这是一个欧洲的字符集，里面是不支持中文的!!!。而实际上请求和响应出现 的字符也就是英文，数字，符号。

请求Request

请求是浏览器发送给服务端的内容，HTTP协议中一个请求由三部分构成: 分别是:请求行，消息头(请求头)，消息正文(请求实体)。消息正文部分可以没有。

请求行

请求行是一行字符串，以连续的两个字符(回车符和换行符)作为结束这一行的标志。 回车符:在ASC编码中2进制内容对应的整数是13.回车符通常用cr表示。 换行符:在ASC编码中2进制内容对应的整数是10.换行符通常用lf表示。 回车符和换行符实际上都是不可见字符。 请求行分为三部分:

请求方式(SP)抽象路径(SP)协议版本(CRLF) 注:SP是空格 GET /index.html HTTP/1.1 GET / HTTP/1.1

URL地址格式:

协议://主机地址信息/抽象路径 http://localhost:8088/TeduStore/index GET /TeduStore/index.html HTTP/1.1

消息头

消息头是浏览器可以给服务端发送的一些附加信息，有的用来说明浏览器自身内容，有的用来告知服务端交互细节，有的告知服务端消息正文详情等。

消息头由若干行组成，每行结束也是以CRLF标志。 每个消息头的格式为:消息头的名字(:SP)消息的值(CRLF) 消息头部分结束是以单独的(CRLF)标志。 例如:

Host: localhost:8088(CRLF)
Connection: keep-alive(CRLF)
Upgrade-Insecure-Requests: 1(CRLF)
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36(CRLF)
Sec-Fetch-User: ?1(CRLF)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9(CRLF)
Sec-Fetch-Site: none(CRLF)
Sec-Fetch-Mode: navigate(CRLF)
Accept-Encoding: gzip, deflate, br(CRLF)
Accept-Language: zh-CN,zh;q=0.9(CRLF)(CRLF)

消息正文

消息正文是2进制数据，通常是用户上传的信息，比如:在页面输入的注册信息，上传的 附件等内容。

GET /myweb/index.html HTTP/1.1
Host: localhost:8088
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
Sec-Fetch-User: ?1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
1010101101001.....

响应Response

响应是服务端发送给客户端的内容。一个响应包含三部分:状态行，响应头，响应正文

状态行

状态行是一行字符串(CRLF结尾)，并且状态行由三部分组成，格式为: protocol(SP)statusCode(SP)statusReason(CRLF) 协议版本(SP)状态代码(SP)状态描述(CRLF) 例如: HTTP/1.1 200 OK

状态代码是一个3位数字，分为5类： 1xx:保留 2xx:成功，表示处理成功，并正常响应 3xx:重定向，表示处理成功，但是需要浏览器进一步请求 4xx:客户端错误，表示客户端请求错误导致服务端无法处理 5xx:服务端错误，表示服务端处理请求过程出现了错误

具体的数字在HTTP协议手册中有相关的定义，可参阅。 状态描述手册中根据不同的状态代码有参考值，也可以自行定义。通常使用参考值即可。

响应头

响应头与请求中的消息头格式一致，表示的是服务端发送给客户端的附加信息。

Content-Type: text/html(CRLF) Content-Length: 2546(CRLF)(CRLF)

响应正文

2进制数据部分，包含的通常是客户端实际请求的资源内容。 响应的大致内容:

HTTP/1.1 200 OK(CRLF)
Content-Type: text/html(CRLF)
Content-Length: 2546(CRLF)(CRLF)
1011101010101010101......

这里的两个响应头: Content-Type是用来告知浏览器响应正文中的内容是什么类型的数据(图片，页面等等) 不同的类型对应的值是不同的，比如:

文件类型    Content-Type对应的值
html          text/html
css           text/css
js            application/javascript
png           image/png
gif           image/gif
jpg           image/jpeg

Content-Length是用来告知浏览器响应正文的长度，单位是字节。

浏览器接收正文前会根据上述两个响应头来得知长度和类型从而读取出来做对应的处理以 显示给用户看。

In/Out: 相对于程序而言的输入(读取)和输出(写出)的过程。

即: 通过java程序到磁盘读取数据的过程, 我们称为In的过程, 也就是读取(输入)

将java程序中的数据写入磁盘的过程, 我们称为Out的过程, 也就是写出(输出)

在Java中，根据处理的数据单位不同，分为字节流和字符流。

字节流: 一个字节(byte)一个字节的去读取, 或者写出

字符流: 一个字符一个字符的去读取, 或者写出

JDK核心类库中提供了IO流相关的类, 这些类都在<java.io>包下

流的概念

程序中数据的读取和写入, 可以想象成水流在管道中流动。

• 流只能单方向流动
• 输入流用来读取in
• 输出流用来写出Out
• 数据只能从头到尾顺序的读取一次或写出一次

节点流和处理流

按照流是否直接与特定的地方(如磁盘,内存,设备等)相连,分为节点流和处理流两类

节点流

可以从或向一个特定的地方(节点)读写数据

处理流

是对一个已存在的流的连接和封装,通过所封装的流的功能调用实现数据读写

处理流特点

处理流的构造方法总是要带一个其他的流对象做参数,一个流对象经过其他流的多次包装,成为流的链接.

通常节点流也被称之为低级流.处理流也被称之为高级流或者过滤流

不能独立存在, 必须要连接低级流

节点流

OutputStream抽象类

Output输出 Stream字节流

此抽象类是表示输出字节流的所有类的超类。输出流接受输出字节并将这些字节发送到某个接收器。

FileOutputStream文件输出流

直接插在文件上，直接写出文件数据

创建对象：

FileOutputStream(String name) 
•     创建一个向具有指定名称的文件中写入数据的输出文件流。
FileOutputStream(File file) 
•     创建一个向指定 File 对象表示的文件中写入数据的文件输出流。
FileOutputStream(File file, boolean append) –追加
•     创建一个向指定 File 对象表示的文件中写入数据的文件输出流。

注意: 以上构造方法中, 如果参数指向的文件以及父目录都不存在, 将会抛出FileNotFoundException异常!

如果参数指向的文件不存在, 但文件的所在目录存在, 将不会抛异常, 程序会自动创建该文件!

FileOutputStream代码案例

package io;
​
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
​
/**
 * FOS FileOutputStream 文件输出流
 * 对File文件进行写出Output,使用的方式是Stream字节流
 */
public class FOSDemo {
    public static void main(String[] args) throws IOException {
        //1.创建FileOutputStream输出流,将数据输出到./test.txt文件中
        //File file = new File("./test.txt");
        //FileOutputStream fos = new FileOutputStream(file);
        //可以直接将文件的相对路径当做参数传递给流的构造方法
        //true如果不写,则默认是覆盖模式,每次写入内容,都会覆盖原有内容
        //如果写true,就是追加模式,不会覆盖原有内容
        FileOutputStream fos = new FileOutputStream("./test.txt",true);
        //2.开始向test.txt
        //向文件写出一个字节 参数单位是int
        //一个整数4个字节 传的是给定的int值的最后一个字节
        //00000000 00000000 00000000 00000001
        fos.write(1);//00000001
        fos.write(97);
        fos.write(98);
        fos.write(99);
        fos.write(13);//回车
        fos.write(10);//换行
        //输出byte数组 \r\n 是回车换行
        fos.write("Hello EveryBody\r\n".getBytes());
        //输出byte数组的一部分,输出BCD,1表示ABCDE中的下标1处的元素(B),3表示输出后面的3个字节
        fos.write("ABCDE".getBytes(),1,3);
        System.out.println("输出完成");
        //3.关闭流(释放资源)
        fos.close();
    }
}

InputStream抽象类

此抽象类是表示字节输入流的所有类的超类/抽象类。

FileInputStream子类

直接插在文件上，直接读取文件数据。

创建对象

FileInputStream(File file)

通过打开一个到实际文件的连接来创建一个 FileInputStream，该文件通过文件系统中的 File 对象 file 指定。

FileInputStream(String pathname)

通过打开一个到实际文件的连接来创建一个 FileInputStream，该文件通过文件系统中的路径名 name 指定。

FileInputStream代码案例

package io;
​
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
​
/**
 * FIS FileInputStream 文件字节输入流
 */
public class FISDemo {
    public static void main(String[] args) throws IOException {
        FileInputStream fis = new FileInputStream("./test.txt");
        //使用read方法每次读取文件中的一个字节
        //System.out.println((char)fis.read());
        //....
        //read方法读取不到内容时,会返回-1
        //System.out.println(fis.read());
        //System.out.println(fis.read());
        //while一般用于循环次数不确定  for一般用于利用循环次数
        int data;
        //循环条件是判断读取的字节是否是-1,并且把读取到的字节整数赋值给data,便于输出
        while ((data = fis.read())!=-1){//不等于-1说明能读到东西
            System.out.print((char)data);
        }
        //关闭流
        fis.close();
    }
}

复制文件

复制文件代码案例

package io;
​
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
​
/**
 * 实现文件复制
 */
public class CopyDemo {
    public static void main(String[] args) throws IOException {
        //创建一个输入流,读取原文件
        FileInputStream fis = new FileInputStream("./ATM.jpeg");
        //创建一个输出流,将读取的原文件内容写出到目标文件中
        FileOutputStream fos = new FileOutputStream("./ATMCopy.jpeg");
        int d;//记录每次读取到的字节
        long start = System.currentTimeMillis();
        while ((d = fis.read())!=-1){//每次循环读取一个字节
            //每次循环也将读取到的字节写入到复制文件中
            fos.write(d);
        }
        long end = System.currentTimeMillis();
        System.out.println("复制完毕!共耗时:"+(end-start)+"ms");
        //关闭流资源
        fis.close();
        fos.close();
    }
}

快读写优化代码案例

package io;
​
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
​
/**
 * 提高每次读取数据量减少实际读写的次数,可以提高效率
 * 一组字节一组字节的读写:块读写形式
 */
public class CopyDemo2 {
    public static void main(String[] args) throws IOException {
        FileInputStream fis = new FileInputStream("./aaa.jpg");
        FileOutputStream fos = new FileOutputStream("./ccc.jpg");
        /*
         * 1.简单介绍实现思路
         * int read(byte[] data) 一次性读取给定的字节数组data总长度的字节量,
         * 返回的是实际读取到的字节量.如果返回的是-1时,表示读取到了末尾
         * 2.假定该文件就只有7个字节,然后四个字节一读取
         * aaa.jpg文件数据:
         * 10101010 10001101 10101000 00010010 10010110 10010101 01010101
         * byte[] data = new byte[4];
         * int len;该变量返回读取的字节数
         * 3.第一次调用方法读取4个字节
         * int len = read(data);
         * aaa.jpg文件数据:
         * 10101010 10001101 10101000 00010010 10010110 10010101 01010101
         * ^^^^^^^^ ^^^^^^^^ ^^^^^^^^ ^^^^^^^^
         * data:[10101010,10001101,10101000,00010010]
         * len:4 表示实际读取到了4个字节
         * 4:第二次调用方法读取4个字节,只剩三个字节
         * int len = read(data);
         * aaa.jpg文件数据:
         * 10101010 10001101 10101000 00010010 10010110 10010101 01010101
         *                                     ^^^^^^^^ ^^^^^^^^ ^^^^^^^^
         * data:[10010110,10010101,01010101,00010010]
         *      |----本次读到的新数据--------||-旧数据--|
         * len:3 表示实际读取到了3个字节
         * 5:第三次调用方法读取4个字节,但是已经没有内容可以读取了
         * data:[10010110,10010101,01010101,00010010]
         * len:-1 表示文件末尾了
         */
        /* byte[] data = new byte[10];
         * 1KB=1024byte
         * 1MB=1024KB
         * 1GB=1024MB
         * int t = 864000000;
         * int t = 60*60*24*1000
         */
        byte[] data = new byte[1024*10];//10kb
        int len;//记录每次读取到的字节
        long start = System.currentTimeMillis();
        while ((len = fis.read(data))!=-1){//每次循环读取一个字节
            //从下标0处开始写入,写入后面len个的字节
            fos.write(data,0,len);
        }
        long end = System.currentTimeMillis();
        System.out.println("复制完毕!共耗时:"+(end-start)+"ms");
        fis.close();
        fos.close();
    }
}

写入字符串

package io;
​
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.charset.StandardCharsets;
​
/**
 * @author 老安
 * @data 2022/6/14 19:44
 * 向文件中写出字符串
 */
public class WriteStringDemo {
    public static void main(String[] args) throws IOException {
        //向文件demo.txt写出文本数据
        FileOutputStream fos = new FileOutputStream("./demo.txt");
        String line = "smell smelly,taste tasty";//闻着臭吃着香
        //将字符串转换为字节数组,通常要指定转换的编码UTF-8
        //java.nio.charset.StandardCharsets;
        //StandardCharsets.UTF_8 表示UTF-8编码
        byte[] data = line.getBytes(StandardCharsets.UTF_8);
        fos.write(data);
        fos.write("闻着臭,吃着香".getBytes(StandardCharsets.UTF_8));
        fos.close();
    }
}

简易笔记本

package io;
​
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.charset.StandardCharsets;
import java.util.Scanner;
​
/**
 * @author 老安
 * @data 2022/6/14 20:26
 * 实现简易记事本工具
 * 程序启动后,要求将控制台输入的每一行字符串,写入到文件note.txt
 * 当在控制台输入exit时,程序退出
 */
public class TestNotes {
    public static void main(String[] args) throws IOException {
        System.out.println("请开始输入内容,单独输入exit退出记事本!");
        //接收控制台输入的内容的扫描器
        Scanner scanner = new Scanner(System.in);
        //使用文件输出流绑定note.txt文件
        FileOutputStream fos = new FileOutputStream("./note.txt");
        while (true){//因为不知道什么时候写完,所以定义一个死循环
            //接收在控制台输入的一行字符串
            String line = scanner.nextLine();
            //如果line是exit时,退出循环
            //由于line是用户输入的,现在不好控制,所以可能会输入一个空值,
            //空值调用方法,一定会发生空指针异常
            //equalsIgnoreCase String也提供了一个比较字符串向同时,忽略大小写差异
            if ("exit".equalsIgnoreCase(line)){
                break;//break跳出当前循环,直接执行循环之后的内容
            }
            fos.write(line.getBytes(StandardCharsets.UTF_8));
        }
        //执行完就关闭流
        fos.close();
    }
}

文件追加模式案例

package io;
​
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.charset.StandardCharsets;
import java.util.Scanner;
​
/**
 * @author 老安
 * @data 2022/6/14 20:26
 * 实现简易记事本工具
 * 程序启动后,要求将控制台输入的每一行字符串,写入到文件note.txt
 * 当在控制台输入exit时,程序退出
 */
public class TestNotes {
    public static void main(String[] args) throws IOException {
        System.out.println("请开始输入内容,单独输入exit退出记事本!");
        //接收控制台输入的内容的扫描器
        Scanner scanner = new Scanner(System.in);
        //使用文件输出流绑定note.txt文件
        FileOutputStream fos = new FileOutputStream("./note.txt",true);
        while (true){//因为不知道什么时候写完,所以定义一个死循环
            //接收在控制台输入的一行字符串
            String line = scanner.nextLine();
            //如果line是exit时,退出循环
            //由于line是用户输入的,现在不好控制,所以可能会输入一个空值,
            //空值调用方法,一定会发生空指针异常
            //equalsIgnoreCase String也提供了一个比较字符串向同时,忽略大小写差异
            if ("exit".equalsIgnoreCase(line)){
                break;//break跳出当前循环,直接执行循环之后的内容
            }
            fos.write(line.getBytes(StandardCharsets.UTF_8));
        }
        //执行完就关闭流
        fos.close();
    }
}

处理流

缓冲流

• BufferedOutputStream缓冲输出流
• BufferedInputStream 缓冲输入流

复制文件代码案例

package io;
​
import java.io.*;
​
/**
 * @author 老安
 * @data 2022/6/14 21:31
 * 使用缓冲流实现高效率文件复制
 */
public class CopyDemo3 {
    public static void main(String[] args) throws IOException {
        FileInputStream fis = new FileInputStream("./aaa.jpg");
        BufferedInputStream bis = new BufferedInputStream(fis);
        FileOutputStream fos = new FileOutputStream("./ddd.jpg");
        BufferedOutputStream bos = new BufferedOutputStream(fos);
        //此案例还是用单字节读取,之前读取很慢,现在用高级流测试
        int d;
        long start = System.currentTimeMillis();
        while ((d = bis.read())!=-1){//使用缓冲流读取字节
            bos.write(d);//使用缓冲流写入字节
        }
        long end = System.currentTimeMillis();
        System.out.println("耗时:"+(end-start)+"ms");
        //关闭流 如果使用了高级流,就只需要关闭高级流就可以了,会自动关闭所连接的低级流
        bis.close();
        bos.close();
    }
}

flush代码案例

package io;
​
import java.io.BufferedOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.charset.StandardCharsets;
​
/**
 * @author 老安
 * @data 2022/6/14 21:55
 * 缓冲流写出数据的缓冲区问题
 */
public class BOS_flushDemo {
    public static void main(String[] args) throws IOException {
        FileOutputStream fos = new FileOutputStream("./bos.txt");
        BufferedOutputStream bos = new BufferedOutputStream(fos);
        bos.write("你是我的眼~~~~~~".getBytes(StandardCharsets.UTF_8));
        //如果不调用close方法,执行完毕,bos.txt没有内容
        //bos.flush();
        bos.close();
    }
}

对象流

Person代码

package io;
​
import java.io.Serializable;
import java.util.Arrays;
​
/**
 * @author 老安
 * @data 2022/6/16 19:50
 * 使用当前类测试对象流的序列化和反序列化操作
 * 对象序列化:将一个java对象按照其结构转换为一组字节的过程
 * 序列化一个对象时,底层会为当前的Person生成一个版本号serialVersionUID
 * 在读取对象,会先比对被序列化对象的版本号,和还原的对象类型的版本是否一致,
 * 不一致,会抛出异常
 * 如何解决?
 * 开启兼容模式:自己指定一个版本号
 *  static final long serialVersionUID = 1L;
 */
public class Person implements Serializable {
    //控制死当前类的版本号是1,将来如何改当前类的内容,版本号都不会发生改变
    static final long serialVersionUID = 1L;
    private String name;//姓名
    //transient 当一个属性被transient修饰时,序列化时,就会忽略这个属性的值
    //transient 转瞬即逝的,短暂的
    private transient int age;//年龄
    private String gender;//性别
    private transient String[] otherInfo;//其他信息
    //private int salary;//薪资
    //全参构造
    //alt+insert/右键 Generate-->Constructor crtl+A全选属性
    public Person(String name, int age, String gender, String[] otherInfo) {
        this.name = name;
        this.age = age;
        this.gender = gender;
        this.otherInfo = otherInfo;
    }
    //get和set方法
    //alt+insert/右键 Generate-->getter and setter crtl+A全选属性
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public String getGender() {
        return gender;
    }
    public void setGender(String gender) {
        this.gender = gender;
    }
    public String[] getOtherInfo() {
        return otherInfo;
    }
    public void setOtherInfo(String[] otherInfo) {
        this.otherInfo = otherInfo;
    }
    //toString
    //alt+insert/右键 Generate-->toString()
    @Override
    public String toString() {
        return "Person{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", gender='" + gender + '\'' +
                ", otherInfo=" + Arrays.toString(otherInfo) +
                '}';
    }
}

OOSDemo案例

package io;
​
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.ObjectOutputStream;
​
/**
 * @author 老安
 * @data 2022/6/16 20:05
 * 对象流
 * java.io.ObjectOutputStream 对象输出流 序列化流
 * java.io.ObjectInputStream 对象输入流 反序列化流
 * 对象流是一对高级流,在流链接中完成对象与字节的转换,
 * 学会了使用这组流,就可以轻松读取任何的java对象
 */
public class OOSDemo {
    public static void main(String[] args) throws IOException {
        String name = "康荐文";
        int age = 18;
        String gender = "男";
        String[] otherInfo = {"单身的","帅气的","网络鉴黄师","多金"};
        Person p = new Person(name, age, gender, otherInfo);
        System.out.println(p);
        //将p对象序列化到person.obj文件中
        //创建一个文件输出流,绑定文件
        FileOutputStream fos = new FileOutputStream("./person.obj");
        //创建一个对象输出流,连接fos低级流
        ObjectOutputStream oos = new ObjectOutputStream(fos);
        /*
        * writeObject(Object obj)
        * 对象输出流独有的方法:该方法会将对象转换为字节,并将字节通过
        * 所连接的流写出
        * */
        oos.writeObject(p);
        System.out.println("写出完毕!");
        //关闭流资源
        oos.close();
        /*
        * java.io.NotSerializableException 执行这个程序时,出现此异常,
        * 一定要检查序列化的类,是否实现了一个Serializable接口
        * */
    }
}

OISDemo案例

package io;
​
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.ObjectInputStream;
​
/**
 * @author 老安
 * @data 2022/6/16 20:27
 * 使用对象输入流进行对象的反序列化
 */
public class OISDemo {
    public static void main(String[] args) throws IOException, ClassNotFoundException {
        FileInputStream fis = new FileInputStream("./person.obj");
        //创建一个对象输入流,连接fis低级流
        ObjectInputStream ois = new ObjectInputStream(fis);
        /*
        * Object readObject() 可以将文件中的字节读取出来,并且转换为java对象
        * 这个方法的返回值是Object,一般都需要强转为实际类型
        * */
        Person p = (Person) ois.readObject();
        System.out.println(p);
        ois.close();
    }
}

字节流和字符流

在Java中，根据处理的数据单位不同，分为字节流和字符流。

字节流: 一个字节(byte)一个字节的去读取, 或者写出

字符流: 一个字符一个字符的去读取, 或者写出

字节流

字节流(stream)：针对二进制文件(文本,图片,音频,视频...等)

InputStream(包含input都是输入流)

• FileInputStream
• BufferedInputStream
• ObjectInputStream

OutputStream(包含output都是输出流)

• FileOutputStream
• BufferedOutputStream
• ObjectOutputStream

字符流

字符流(Reader,Writer)：针对文本文件，读写容易发生乱码现象，在读写时最好指定编码集为utf-8

Reader(Reader结尾的都是字符输入流)

• FileReader
• BufferedReader
• InputStreamReader

Writer(Writer结尾的都是字符输出流)

• FileWriter
• BufferedWriter
• OutputStreamWriter
• PrintWriter/PrintStream

转换字符流

OutputStreamWriter

代码案例

package io;
​
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter;
import java.nio.charset.StandardCharsets;
​
/**
 * @author 老安
 * @data 2022/6/16 21:22
 * java IO 将流按照读写的单位分为字节流和字符流
 * java.io.InputStream和OutputStream 是所有字节输入流和输出流的超类,
 * 读写的最小单位是字节
 * 而java.io.Reader和Writer 是所有字符输入流和输出流的超类,
 * 读写的最小单位是字符
 * 转换流:是一对常用字符流实现类:(写代码不常用,但是流链接很重要)
 * java.io.InputStreamReader
 * java.io.OutputStreamWriter
 * 作用:
 * 1:在流链接中衔接其他的高级字符流和下面的字节流(这也是转换流名字的由来)
 * 2:负责将字符与对应的字节按照指定的字符集自动转换方便读写操作
 */
public class OSWDemo {
    public static void main(String[] args) throws IOException {
        //向osw.txt写入文本数据
        //创建一个低级的字节流
        FileOutputStream fos = new FileOutputStream("./osw.txt");
        //String line = "super idol的笑容都没你的甜~~~";
        //fos.write(line.getBytes(StandardCharsets.UTF_8));
        //创建一个字符流(转换流),连接低级的字节流fos
        //通常都需要指定字符集编码
        OutputStreamWriter osw = new OutputStreamWriter(fos,StandardCharsets.UTF_8);
        osw.write("super idol的笑容都没你的甜~~~");
        osw.write("八月正午的阳光都没你耀眼");
        osw.write("天天向上");
        osw.close();
    }
}

InputStreamReader

代码案例

package io;
​
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStreamReader;
​
/**
 * @author 老安
 * @data 2022/6/16 21:43
 * 使用转换流测试读取文本数据
 */
public class ISRDemo {
    public static void main(String[] args) throws IOException {
        //将osw.txt中所有内容读取出来,并输出到控制台
        FileInputStream fis = new FileInputStream("./osw.txt");
        //创建一个字符转换流,连接fis低级输入流
        InputStreamReader isr = new InputStreamReader(fis);
        //读取一个字符,返回的int值内容本质上是一个char
        //但是如果返回的是-1,表示读取到了末尾
        //int d = isr.read();
        //System.out.println((char)d);
        int d;
        while ((d = isr.read())!=-1){
            System.out.print((char)d);
        }
        isr.close();
    }
}

缓冲字符流

PrintWriter

代码案例

package io;
​
import java.io.FileNotFoundException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.nio.charset.StandardCharsets;
​
/**
 * 缓冲字符流
 * java.io.BufferedWriter和BufferedReader
 * 缓冲字符流内部维护了一个数组,可以块读写文本数据进行读写性能的提升
 *
 * java.io.PrintWriter 具有自动行刷新功能的缓冲字符输出流,内部总是连接着BufferedWriter
 * 实际开发中,缓冲输出字符流我们就用这个PW
 * 特点:
 * 1:可以按行写字符串
 * 2:可以自动行刷新
 * 3:可以提高读写字符的效率
 */
public class PWDemo {
    public static void main(String[] args) throws FileNotFoundException, UnsupportedEncodingException {
        //向文件pw.txt中写入文本数据
        //此处可以指定编码,但是StandardCharset还没有发现,所以需要字符串指定编码
        PrintWriter pw = new PrintWriter("./pw.txt", "UTF-8");
        //print 不带换行 println 自带换行
        pw.println("该配合你演出的我视而不见");
        pw.println("阿巴阿巴阿巴阿巴阿巴阿巴");
        System.out.println("写出完毕");
        pw.close();
    }
}

代码案例2

package io;
​
import java.io.*;
import java.nio.charset.StandardCharsets;
import java.util.Scanner;
​
public class PWDemo2 {
    public static void main(String[] args) throws FileNotFoundException {
        //文件字节输出流(是一个低级流),向文件中写出数据
        FileOutputStream fos = new FileOutputStream("pw2.txt",true);
        //转换输出流(是一个高级流),1:衔接字符与字节 2:将写出的字符转换字节
        OutputStreamWriter osw = new OutputStreamWriter(fos, StandardCharsets.UTF_8);
        //缓冲输出字符流(是一个高级流) 块写文本数据加速
        BufferedWriter bw = new BufferedWriter(osw);
        //具有自动行刷新功能的缓冲字符输出流
        //当值设置为true时,表示打开了自动行刷新,每次调用println方法时,会自动调用flush一次
        PrintWriter pw = new PrintWriter(bw,true);
        Scanner scanner = new Scanner(System.in);
        while (true){
            String line = scanner.nextLine();
            if ("exit".equalsIgnoreCase(line)){
                break;
            }
            pw.println(line);
        }
        pw.close();
    }
}

JDK8之后,java支持了lambda表达式这个特性.

lambda可以用更精简的代码创建匿名内部类.但是该匿名内部类实现的接口只能有一个抽象方法,否则无法使用!

lambda表达式是编译器认可的,最终会将其改为内部类编译到class文件中

代码案例

package lambda;
​
import java.io.File;
import java.io.FileFilter;
​
/**
 * @author 老安
 * @data 2022/7/1 20:58
 * JDK8之后推出了一个新的特性:lambda表达式
 * lambda表达式可以用更精简的方式创建匿名内部类
 * 语法:
 * (参数列表)->{
 * 方法体
 * }
 * 不是所有的匿名内部类创建的情景都可以替换为lambda表达式,只有实现的接口内部只能有一个抽象方法时,才可以使用lambda表达式
 */
public class LambdaDemo {
    public static void main(String[] args) {
        //匿名内部类
        FileFilter filter = new FileFilter() {
            @Override
            public boolean accept(File pathname) {
                return pathname.getName().contains("o");
            }
        };
        //可以忽略接口名(new FileFilter)和方法名(public boolean accept(){})
        //将方法的参数声明放在接口括号中,然后用->符号连接{}
        //忽略接口名:因为声明时FileFilter filter1,已经表明要实例化的对象了
        //忽略方法名:因为lambda表达式支持的接口只允许有一个抽象方法
        FileFilter filter1 = (File pathname) -> {
            return pathname.getName().contains("o");
        };
        //可以忽略参数类型(File)
        //因为只有一个方法,方法的参数顺序已经固定,所以参数无序表明类型
        FileFilter filter2 = (pathname) -> {
            return pathname.getName().contains("o");
        };
        //如果方法只有一个参数时,()可以省略
        FileFilter filter3 = pathname -> {
            return pathname.getName().contains("o");
        };
        //如果方法体只有一句代码时,那么可以将方法体的"{}"省略,如果含有return,则return要一同忽略
        FileFilter filter4 = pathname -> pathname.getName().contains("o");
        File file = new File(".");
        File[] files = file.listFiles(pathname -> pathname.getName().contains("o"));
        for (int i = 0; i < files.length; i++) {
            System.out.println(files[i]);
        }
    }
}

Java 集合框架 链表（Linked list）是一种常见的基础数据结构，是一种线性表，但是并不会按线性的顺序存储数据，而是在每一个节点里存到下一个节点的地址。

链表可分为单向链表和双向链表。

一个单向链表包含两个值: 当前节点的值和一个指向下一个节点的链接。 一个双向链表有三个整数值: 数值、向后的节点链接、向前的节点链接。 Java LinkedList（链表） 类似于 ArrayList，是一种常用的数据容器。 与 ArrayList 相比，LinkedList 的增加和删除的操作效率更高，而查找和修改的操作效率较低。

以下情况使用 ArrayList :

• 频繁访问列表中的某一个元素。

• 只需要在列表末尾进行添加和删除元素操作。

LinkedList 继承了 AbstractSequentialList 类。

LinkedList 实现了 Queue 接口，可作为队列使用。

LinkedList 实现了 List 接口，可进行列表的相关操作。

LinkedList 实现了 Deque 接口，可作为队列使用。

LinkedList 实现了 Cloneable 接口，可实现克隆。

LinkedList 实现了 java.io.Serializable 接口，即可支持序列化，能通过序列化去传输。 LinkedList 类位于 java.util 包中，使用前需要引入它，语法格式如下：

// 引入 LinkedList 类
import java.util.LinkedList; 

LinkedList<E> list = new LinkedList<E>();   // 普通创建方法
或者
LinkedList<E> list = new LinkedList(Collection<? extends E> c); // 使用集合创建链表

创建一个简单的链表实例：

// 引入 LinkedList 类

//实例
import java.util.LinkedList;

public class RunoobTest {
    public static void main(String[] args) {
        LinkedList<String> sites = new LinkedList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        System.out.println(sites);
    }
}

以上实例，执行输出结果为：

[Google, Runoob, Taobao, Weibo]

更多的情况下我们使用 ArrayList 访问列表中的随机元素更加高效，但以下几种情况 LinkedList 提供了更高效的方法。

在列表开头添加元素：

//实例
// 引入 LinkedList 类
import java.util.LinkedList;

public class RunoobTest {
    public static void main(String[] args) {
        LinkedList<String> sites = new LinkedList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        // 使用 addFirst() 在头部添加元素
        sites.addFirst("Wiki");
        System.out.println(sites);
    }
}

以上实例，执行输出结果为：

[Wiki, Google, Runoob, Taobao]

在列表结尾添加元素：

//实例
// 引入 LinkedList 类
import java.util.LinkedList;

public class RunoobTest {
    public static void main(String[] args) {
        LinkedList<String> sites = new LinkedList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        // 使用 addLast() 在尾部添加元素
        sites.addLast("Wiki");
        System.out.println(sites);
    }
}

以上实例，执行输出结果为：

[Google, Runoob, Taobao, Wiki]

在列表开头移除元素：

//实例
// 引入 LinkedList 类
import java.util.LinkedList;

public class RunoobTest {
    public static void main(String[] args) {
        LinkedList<String> sites = new LinkedList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        // 使用 removeFirst() 移除头部元素
        sites.removeFirst();
        System.out.println(sites);
    }
}

以上实例，执行输出结果为：

[Runoob, Taobao, Weibo]

在列表结尾移除元素：

//实例
// 引入 LinkedList 类
import java.util.LinkedList;

public class RunoobTest {
    public static void main(String[] args) {
        LinkedList<String> sites = new LinkedList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        // 使用 removeLast() 移除尾部元素
        sites.removeLast();
        System.out.println(sites);
    }
}

以上实例，执行输出结果为：

[Google, Runoob, Taobao]

获取列表开头的元素：

//实例
// 引入 LinkedList 类
import java.util.LinkedList;

public class RunoobTest {
    public static void main(String[] args) {
        LinkedList<String> sites = new LinkedList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        // 使用 getFirst() 获取头部元素
        System.out.println(sites.getFirst());
    }
}

以上实例，执行输出结果为：

Google

获取列表结尾的元素：

//实例
// 引入 LinkedList 类
import java.util.LinkedList;

public class RunoobTest {
    public static void main(String[] args) {
        LinkedList<String> sites = new LinkedList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        // 使用 getLast() 获取尾部元素
        System.out.println(sites.getLast());
    }
}

以上实例，执行输出结果为：

Weibo

迭代元素

我们可以使用 for 配合 size() 方法来迭代列表中的元素：

//实例
// 引入 LinkedList 类
import java.util.LinkedList;

public class RunoobTest {
    public static void main(String[] args) {
        LinkedList<String> sites = new LinkedList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        for (int size = sites.size(), i = 0; i < size; i++) {
            System.out.println(sites.get(i));
        }
    }
}

size() 方法用于计算链表的大小。

以上实例，执行输出结果为：

Google
Runoob
Taobao
Weibo

也可以使用 for-each 来迭代元素：

//实例
// 引入 LinkedList 类
import java.util.LinkedList;

public class RunoobTest {
    public static void main(String[] args) {
        LinkedList<String> sites = new LinkedList<String>();
        sites.add("Google");
        sites.add("Runoob");
        sites.add("Taobao");
        sites.add("Weibo");
        for (String i : sites) {
            System.out.println(i);
        }
    }
}

以上实例，执行输出结果为：

Google
Runoob
Taobao
Weibo

常用方法

更多 API 方法可以查看：https://www.runoob.com/manual/jdk11api/java.base/java/util/LinkedList.html

Java 集合框架

Socket

IP和端口号

什么是IP IP是根据TCP/IP协议划定,由32位二进制数组成,而且在因特网上是唯一的数值

例如:某台计算机,连上网的IP是:

11010101 01001001 11110000 11001100

为了便于记忆,会将这32位二进制数,每8位一组,每段之间用小数点分割

11010101.01001001.11110000.11001100

再将每八位转化为十进制

213.73.240.204

如何查看自己电脑的ip

1. 按win+R, 输入cmd,打开dos窗口

2. 在dos窗口输入ipconfig

什么是端口号

端口号(port number)就是计算机为了给每个网络程序分配一个独一无二的区别符,有了这些端口号,就可以准确定位到具体的程序。

端口号是个整数,范围0-65535,分为周知端口和动态端口

1. 周知端口就是众所周知的端口,是端口号中的明星,本身的存在就是有自身用途,这些端口我们一般不使用,范围是0-1023。

2. 动态端口,剩下的端口号都是动态端口,动态端口的意思就是将这些端口动态的分配给每个需要端口号的程序,当开启一个程序时,就分配给它一个端口

Socket概述

在计算机领域中,Socket也被称为套接字编程,它是计算机之间进行通信的一种约定或者说是一种方式。

应用程序可以通过它发送或者接收数据,可以对其发送过来的内容像处理文件一样,打开、关闭或者读写等操作,套接字允许应用程序将I/O插入到互联网上,并与网络中的其他程序进行通信。

Socket常用方法

服务器端ServerSocket

在服务器端选择一个端口号,然后在指定的端口号上等待客户端发起的连接

构造方法:

ServerSocket(int port) 创建一个绑定特定端口号的服务器套接字
accept() 侦听并接受到发送到此套接字的连接
close() 关闭此套接

客户端Socket

构造方法:

Socket(String host,int port) 创建一个套接字,并且连接到host,并且绑定端口号
close() 关闭此套接字
getInputStream() 返回此套接字的输入流
getOutputStram() 返回此套接字的输出流

聊天室

服务器端代码

package socket;
​
import java.io.*;
import java.net.ServerSocket;
import java.net.Socket;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collection;
import java.util.Scanner;
​
/**
 * 聊天室的服务器端
 */
public class Server {
    /*
     * java.net.ServerSocket
     * ServerSocket是运行在服务器端的,它的主要工作:
     * 1:打开服务器端口(客户端就是根据这个端口与服务器链接)
     * 2:监听该服务器端口,一旦一个客户端链接,就会返回一个Socket实例,
     * 并通过这个Socket实例与链接的客户端进行交互
     * 如果我们将Socket比喻为"电话",ServerSocket比喻为"总机"
     */
    private ServerSocket server;
    //该数组用于存放所有客户端的输出流,用于广播消息给所有的客户端
    //private PrintWriter[] allOut = {};
    private Collection<PrintWriter> allOut = new ArrayList<>();
    public Server() {
        try {
            System.out.println("正在启动服务器...");
            server = new ServerSocket(8088);
            System.out.println("服务器启动完毕!!!");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
​
    public void start() {
        try {
            while (true) {
                System.out.println("等待客户端链接...");
                /*
                 * ServerSocket中提供了一个方法:
                 * Socket accept()
                 * 当程序执行到这个方法后,会阻塞,当有一个客户端访问时,
                 * 这个方法就会立即返回一个Socket对象,通过这个Scoket与该客户端进行链接
                 */
                Socket socket = server.accept();
                System.out.println("一个客户端链接了!!!");
                ClientHandler handler = new ClientHandler(socket);
                Thread t = new Thread(handler);
                t.start();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
​
    public static void main(String[] args) {
        Server server = new Server();
        server.start();
    }
​
    /*
     * 该线程负责与特定客户端交互
     * 内部类:可以访问外部类的任意属性
     * */
    private class ClientHandler implements Runnable {
        private Socket socket;
​
        //声明含参构造,负责实例化对象时,接收socket参数
        public ClientHandler(Socket socket) {
            this.socket = socket;
        }
​
        @Override
        public void run() {
            PrintWriter pw = null;
            try {
                /*
                 * 通过Secket的方法:
                 * InputStream getInputStream()
                 * 可以获取一个输入字节流,可以读取来自远端计算机发送过来的字节数据
                 */
                InputStream in = socket.getInputStream();
                InputStreamReader isr = new InputStreamReader(in, StandardCharsets.UTF_8);
                BufferedReader br = new BufferedReader(isr);
                //通过socket获取输出流,用于给客户端发送信息
                OutputStream out = socket.getOutputStream();
                //创建转换流,链接字节流和字符流
                OutputStreamWriter osw =
                        new OutputStreamWriter(out, StandardCharsets.UTF_8);
                //创建缓冲字符流,提高写出效率
                BufferedWriter bw = new BufferedWriter(osw);
                //按行写入字符串,自带行刷新
                pw = new PrintWriter(bw, true);
                //将该客户端的输出流pw存储到allOut数组中
                //由于数组的长度一旦创建不可改变,所以输出流数量不可知,所以每存储一个,需要进行数组扩容
                //this不行,因为this是ClientHandler.
                /*
                 * 一般情况下,同步监视器对象选取时,就选择多个线程并发操作的临界资源就可以了,allOut数组进行了扩容了,数组一旦扩容,数组就变成一个新数组了,内存地址也发生了变化,所以对于多线程而言,此时allOut已经不是唯一的,所以同步代码块失效
                 * */
                synchronized (Server.this) {//内部类指向外部类对象
                    //1.扩容数组,让allOut数组的长度+1
                    //allOut = Arrays.copyOf(allOut, allOut.length + 1);
                    //2.将pw存入到共享的数组中(存储到数组中的最后一个位置)
                    //allOut[allOut.length - 1] = pw;
                    //集合不需要扩容,所以直接添加即可
                    allOut.add(pw);
                }
                //广播通知所有的客户端有新的客户端上线了
                sendMessage("有新的客户端上线了!当前在线人数:" + allOut.size());
                String line;
                while ((line = br.readLine()) != null) {//当读取的内容是null,就停止读取
                    System.out.println("客户端说:" + line);
                    //将消息回复给所有客户端
                    sendMessage(line);//这个方法等效于下面注释的代码
                    //allOut.fori
//                    for (int i = 0; i < allOut.length; i++) {
//                        allOut[i].println(line);
//                    }
                }
            } catch (IOException e) {
                e.printStackTrace();
            } finally {//不论客户端是正常断开还是异常断开,都只要执行取出输出流操作
                synchronized (Server.this) {
                    //遍历allOut数组 allOut.fori
//                    for (int i = 0; i < allOut.length; i++) {
//                        //找到要删除的元素(利用内存地址是否相同判断)
//                        if (allOut[i] == pw) {
//                            //将最后一个元素替换到目标删除元素
//                            allOut[i] = allOut[allOut.length - 1];
//                            //将数组进行缩容
//                            allOut = Arrays.copyOf(allOut, allOut.length - 1);
//                            //由于上面的代码执行了,说明已经将下线的客户端的对应服务器的输出流取出了,就不需要再次执行for循环,因为后面的元素一定不是要删除的元素,所以可以直接利用break关键字停止循环,可以有效地提升效率
//                            break;
//                        }
//                    }
                    //会自动通过equals方法遍历集合,找到要删除的元素,进行删除
                    allOut.remove(pw);
                }
                sendMessage("有客户端下线了!当前在线人数:" + allOut.size());
                //服务器端也关闭电话
                try {
                    socket.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        /*
         * 广播消息给所有的客户端(可以发客户端给服务器发送的内容,也可以发送在线人数)
         *   send 发送 Message 消息
         * */
        private void sendMessage(String msg) {
            synchronized (Server.this){
//                for (int i = 0; i < allOut.length; i++) {
//                    allOut[i].println(msg);
//                }
                for (PrintWriter pw : allOut) {
                    pw.println(msg);
                }
            }
        }
    }
}

客户端代码

package socket;
​
import java.io.*;
import java.net.Socket;
import java.nio.charset.StandardCharsets;
import java.util.Scanner;
​
/**
 * 聊天室客户端
 */
public class Client {
    /*
     * java.net.Socket 套接字,原意是插座
     * Socket封装了TCP协议的通讯细节,我们使用这个工具就可以与远端计算机建立TCP链接,
     * 并基于一堆流的IO操作完成与远端计算机的数据交换
     */
    private Socket socket;
​
    /*
     * 初始化客户端
     */
    public Client() {
        try {
            System.out.println("正在链接服务器...");
            /*
             * 实例化Socket时,需要传入两个参数:
             * 参数1(String):远端计算机的地址信息(IP)
             *              本机地址IP可以选择如下:
             *                  localhost(域名)
             *                  127.0.0.1
             * 参数2(int):远端计算机打开的服务端口
             *           此端口值必须要和服务器端占用的端口保持一致
             *
             */
            socket = new Socket("localhost", 8088);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
​
    /*
     * 客户端开始工作的方法
     */
    public void start() {
        try {
            //启动一个线程来读取服务器端发送的信息
            ServerHandler handler = new ServerHandler();
            Thread t = new Thread(handler);
            //将子线程设置为守护线程,当主线程结束时,也会一同关闭
            t.setDaemon(true);
            t.start();
            /*
             * 通过Socket的方法:
             * OutputStream getOutputStream()
             * 获取的字节输出流写出的字节会通过网络发送给链接的远端计算机
             */
            OutputStream out = socket.getOutputStream();
            OutputStreamWriter osw = new OutputStreamWriter(out, StandardCharsets.UTF_8);
            BufferedWriter bw = new BufferedWriter(osw);
            PrintWriter pw = new PrintWriter(bw, true);
            Scanner scanner = new Scanner(System.in);//创建控制台扫描器
            while (true) {//一直接收控制输入的内容
                String line = scanner.nextLine();//获取本次在控制输入的内容
                if ("exit".equalsIgnoreCase(line)) {//判断输入的内容是否是exit
                    break;//如果是,就跳出循环
                }
                pw.println(line);//如果输入的不是exit,就将内容发送给服务器
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                socket.close();//与远端计算机断开连接,并且进行TCP的挥手,同时关闭连接的流
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
​
    //项目的主入口
    public static void main(String[] args) {
        Client client = new Client();
        client.start();
    }
​
    /*
     * 该线程负责读取服务器端发送的消息
     */
    private class ServerHandler implements Runnable {
        @Override
        public void run() {
            //通过socket获取输入流读取服务器发送的消息
            try {//线程的run方法中,不允许使用throws声明异常异常
                InputStream in = socket.getInputStream();
                InputStreamReader isr =
                        new InputStreamReader(in, StandardCharsets.UTF_8);
                BufferedReader br = new BufferedReader(isr);
                //创建流之后,继续循环读取服务器发送的信息
                String line;
                while ((line = br.readLine()) != null) {
                    System.out.println(line);
                }
            } catch (IOException e) {
                //打印异常代码删除,因为只有客户端异常断开时,才会报,所以不需要看
            }
​
        }
    }
}

测试

切记先运行服务器,后运行客户端！！！

**常见问题: **

表示端口被占用,解决方式：换个没有被占用的端口

表示连接被拒绝,因为服务器没启动,解决方式:先启动服务器,然后再启动客户端

概念

线程是进程中的单个顺序执行流，是一条执行路径。一个进程如果只有一条执行路径，则成为单线程程序；而如果有多条执行路径，则成为多线程程序。

CPU分时调度

时间片，即CPU分配给各个程序的时间，每个进程被分配一个时间段，称作它的时间片。即该进程允许运行的时间，使各个程序从表面上看是同时进行的。

如果在时间片结束时进程还在运行，则CPU将被剥夺并分配给另一个进程，将当前进程挂起。如果进程在时间片结束前阻塞或结束，则CPU当即进行切换，而不会造成CPU资源浪费。当又切换到之前执行的进程，把现场恢复，继续执行。

在宏观上：我们可以同时打开多个应用程序，每个程序并行，同时运行。

在微观上：由于只有一个CPU，一次只能处理程序要求的一部分，如何处理公平，一种方法就是引入时间片，每个程序轮流执行。多核提高了并发能力。

单核CPU和多核CPU(了解):

单核CPU同时只能干一件事情，当启动多个程序时，CPU快速切换轮流处理每个程序，但如果CPU不够强劲，同时排队等待处理的任务太多，就会感觉系统会有延时、反应慢、卡顿等，甚至某一个程序在处理时出现错误，无法响应了，会造成后面排队的其他任务只能等待。

多核CPU是在基板上集成多个单核CPU+任务分配系统，两个核心同时处理两份任务，相比单核执行速度更快，有利于同时运行多个程序，不容易造成卡顿，更流畅！

Java程序的运行过程:

1. 通过eclipse(java命令)运行一个Java程序，java命令会启动JVM(java虚拟机)，等于启动了一个应用程序，也就是启动了一个进程。
2. 该进程会自动启动一个“主线程”，然后主线程去调用某个类的 main 方法，所以 main 方法运行在主线程中。在此之前的所有程序代码都是按照顺序依次调用的，都是单线程的。

如果希望程序中实现多段程序代码交替执行的效果，则需要创建多线程程序。

为什么要使用多线程?

• 单线程程序执行时都只有一条顺序执行流，如果程序执行某行代码时遇到了阻塞(比如:抛异常)，那么程序的运行将会停滞在这一行，其他代码将会无法执行！

• 这就像去银行办理业务，只有1个业务窗口(单线程)，所有的客户都需要在一个窗口排队办理业务，如果业务员在为某一个客户办理业务时，花费了很长时间，那么将会导致后面的客户等待很长时间，这样处理业务的效率也是非常低的。

• 但如果银行为了提高效率，同时开放了5个窗口(多线程)，客户可以分布在这5个窗口分别办理业务，即使某一个窗口在为个别客户办理业务时花费了很长时间，但不影响其他窗口办理业务的进度。

多线程理解起来其实非常简单:

• 单线程的程序只有一个顺序执行流。
• 多线程的程序则可以包括多个顺序执行流，多个顺序流之间互不干扰。

[并行]和[并发]的区别: (这是两个概念)

1. 并行执行指在同一时刻，有多条指令在多个处理器上同时执行；
2. 并发执行指在同一时刻只能有一条指令执行，但多个进程指令被快速轮换执行，使得在宏观上具有多个进程同时执行的效果。

多线程的特性

随机性

多线程的程序在执行时，在某一时间点具体执行哪个线程是不确定的，可以确定的是某一个时间点只有一个线程在执行(单核CPU)。

虽然我们感觉这些线程像是在同时运行，实际上是因为CPU在快速切换轮流执行这些线程，由于切换速度是纳秒级别的，所以我们感觉不到。

如何实现多线程

由于线程是依赖进程存在的，因此首先需要创建一个进程，但进程是操作系统创建的，而Java程序是不能直接调用系统功能的。但Java可以去调用C或C++写好的程序去创建进程从而实现多线程程序。

在Java中要想实现多线程操作有两种方式，一种是继承Thread类，另一种是实现Runnable接口。接下来针对这两种创建多线程的方式分别进行讲解。

实现多线程1: 继承Thread类

Thread类概述

Thread类是在java.lang包中定义的类

JavaSE规范中规定，一个类只要继承了Thread类，此类就是多线程的子类。

在Thread子类中，必须重写该类的run()方法，此方法为线程的主体。

通过继承Thread类创建线程

接下来通过案例演示<通过继承Thread类的方式实现多线程>

下面创建线程，并测试主线程和创建的新线程(子线程)交替执行的效果

代码实现如下:

package thread;
​
/**
 * @author 老安
 * @data 2022/6/21 20:18
 * 多线程
 * 多线程可以并发执行多个任务
 * 线程的第一种创建方式:
 *  1:创建一个线程类,继承Thread类
 *  2:在线程类中重写run方法
 *  3:在run方法中写线程要执行的任务
 *  4:实例化线程类对象
 *  5:线程类对象调用方法start()启动线程
 * 优点:结构简单
 * 缺点:由于java中是单继承,此种方法已经继承了Thread,就无法再继承别的类了,
 * 对于今后的实际开发造成很多不便
 */
public class ThreadDemo1 {
    public static void main(String[] args) {
        MyThread1 t1 = new MyThread1();
        MyThread2 t2 = new MyThread2();
        /*
         * 注意:启动线程不能调用run方法,因为run方法就是普通一个方法,
         * 必须调用start方法,调用start方法后,线程便会纳入线程调度器,
         * 一旦它被分到CPU时间片,就会开始自动执行线程中的run方法
         */
        t1.start();
        t2.start();
    }
}
//Thread 线程的超类
class MyThread1 extends Thread{
    //run方法是Thread类中定义的
    @Override
    public void run() {
        for(int i=0;i<1000;i++){
            System.out.println("你是谁啊?");
        }
    }
}
class MyThread2 extends Thread{
    //run方法是Thread类中定义的
    @Override
    public void run() {
        for (int i = 0; i < 1000; i++) {
            System.out.println("开门,我是查水表的!");
        }
    }
}

从上面的运行结果可以看出，main方法(主线程)和run方法(子线程)中的两个for循环中的输出语句交替执行了，说明通过集成Thread类实现了多线程。

(如果没有测试出主线程和子线程交替执行的效果，可以多测试几次!)

实现多线程2: 实现Runnable接口

Runnable接口概述

通过继承Thread类实现了多线程，但是这种方式有一定的局限性。因为Java中只支持单继承，一个类一旦继承了某个父类就无法再继承Thread类，例如猫类Cat继承了动物类Animal，就无法通过继承Thread类实现多线程。

为了克服这种弊端，在Thread类中提供了两个构造方法:

public Thread（Runnable target）

public Thread（Runnable target，String name）

这两个构造方法都可以接收Runnable的子类实例对象，这样创建的线程将调用实现了Runnable接口类中的run()方法作为运行代码，而不需要调用Thread类的run()方法，所以就可以依靠Runnable接口的实现类启动多线程。

通过实现Runnable接口实现多线程

接下来通过案例演示<通过实现Runnable接口的方式实现多线程>

下面创建线程，并测试主线程和创建的新线程(子线程)交替执行的效果

代码实现如下:

package thread;
​
/**
 * @author 老安
 * @data 2022/6/21 20:53
 * 第二种创建线程方式:
 * 1:创建一个类,实现Runnable接口
 * 2:重写Runnable中的run方法
 * 3:run方法中写线程要执行的任务
 * 4:实例化线程任务对象
 * 5:实例化线程对象,并将任务对象作为参数传入
 * 6:线程对象调用start方法启动线程
 */
public class ThreadDemo2 {
    public static void main(String[] args) {
        //实例化线程要执行的任务对象
        MyRunnable1 r1 = new MyRunnable1();
        MyRunnable2 r2 = new MyRunnable2();
        //实例化线程对象,并将任务对象传入其中
        Thread t1 = new Thread(r1);
        Thread t2 = new Thread(r2);
        //启动线程
        t1.start();
        t2.start();
    }
}
//Runnable不是线程,只是用来承载线程执行的内容的容器而已
class MyRunnable1 implements Runnable{
    @Override
    public void run() {
        for (int i = 0; i < 1000; i++) {
            System.out.println("hello~大姐姐~~");
        }
    }
}
class MyRunnable2 implements Runnable{
    @Override
    public void run() {
        for (int i = 0; i < 1000; i++) {
            System.out.println("来了~老六~~");
        }
    }
}

从上面的运行结果可以看出，main方法(主线程)和run方法(子线程)中的两个for循环中的输出语句交替执行了，说明实现Runnable接口同样也实现了多线程。

package thread;
​
/**
 * @author 老安
 * @data 2022/6/21 21:05
 * 使用匿名内部类创建线程的方式
 */
public class ThreadDemo3 {
    public static void main(String[] args) {
        //直接继承Thread类重写run方法的形式
        Thread t1 = new Thread() {
            @Override
            public void run() {
                for (int i = 0; i < 1000; i++) {
                    System.out.println("who are you~~");
                }
            }
        };
        t1.start();
        //实现Runnable接口重写run方法的形式
//        Runnable r2 = new Runnable() {
//            @Override
//            public void run() {
//                for (int i = 0; i < 1000; i++) {
//                    System.out.println("i'm 老六~");
//                }
//            }
//        };
        Runnable r1 = () -> {
            for (int i = 0; i < 1000; i++) {
                System.out.println("i'm 老六~");
            }
        };
        Thread t2 = new Thread(r1);
        t2.start();
    }
}

Thread的常用方法和总结

CurrentThreadDemo

package thread;
​
/**
 * @author 老安
 * @data 2022/6/21 21:21
 * java中所有的代码都是靠线程运行的,main方法也需要由线程执行,
 * JVM启动后,会创建一个线程,专门执行main方法,这个线程的名字,
 * 叫做main,因此我们通常称这条线程叫做主线程.
 * 但是主线程与我们创建的线程并无区别
 * Thread类中提供了一个静态方法:
 * static Thread currentThread()
 * 该方法可以返回运行这个方法的线程
 */
public class CurrentThreadDemo {
    public static void main(String[] args) {
        Thread main = Thread.currentThread();
        doSome();
        //主线程:Thread[main,5,main]
        // 第一个main:线程名 5:优先级 第二个main:线程组
        System.out.println("主线程:"+main);
        new Thread("无敌霸王鸡"){
            @Override
            public void run() {
                Thread t = Thread.currentThread();
                System.out.println(t);
                doSome();
            }
        }.start();
    }
    public static void doSome(){
        Thread t = Thread.currentThread();
        System.out.println("运行doSome方法的线程:"+t);
    }
}

ThreadInfoDemo

package thread;
​
/**
 * @author 老安
 * @data 2022/6/23 19:37
 * 获取线程相关的一组方法
 */
public class ThreadInfoDemo {
    public static void main(String[] args) {
        Thread main = Thread.currentThread();//获取到主线程
        String name = main.getName();//获取线程名
        System.out.println("名字:"+name);
        long id = main.getId();//获取线程的唯一标识(类似于人的身份证号)
        System.out.println("id:"+id);
        int priority = main.getPriority();//获取线程的优先级
        System.out.println("优先级:"+priority);
​
        boolean alive = main.isAlive();//线程是否还活着
        boolean daemon = main.isDaemon();//线程是否为守护线程
        boolean interrupted = main.isInterrupted();//线程是否被中断了
        System.out.println("是否活着:"+alive);
        System.out.println("是否为守护线程:"+daemon);
        System.out.println("是否被中断:"+interrupted);
    }
}

PriorityDemo

package thread;
​
/**
 * @author 老安
 * @data 2022/6/23 19:46
 * 线程的优先级
 * 线程有10个优先级,分别对应整数1-10,其中1是最低的优先级,10为最高级的优先级,5是默认值
 * 线程start执行后,会被纳入到线程调度器中,统一管理,此时线程只能被动等待被分配时间片,线程不能主动的索取时间片,调度器会尽可能的均匀的分配时间片
 * 但是优先级在多核心的前提下,是不作数了
 */
public class PriorityDemo {
    public static void main(String[] args) {
        Thread min = new Thread(){
            public void run() {
                for (int i = 0; i < 10000; i++) {
                    System.out.println("皇帝来找min啦");
                }
            }
        };
        Thread norm = new Thread(){
            public void run() {
                for (int i = 0; i < 10000; i++) {
                    System.out.println("皇帝来找norm啦");
                }
            }
        };
        Thread max = new Thread(){
            public void run() {
                for (int i = 0; i < 10000; i++) {
                    System.out.println("皇帝来找max啦");
                }
            }
        };
        //min.setPriority(1);
        min.setPriority(Thread.MIN_PRIORITY);
        max.setPriority(10);
        min.start();
        norm.start();
        max.start();
    }
}

进程

什么是进程

进程是操作系统中运行得到一个任务(一个应用程序运行在一个进程中).

进程(process)是一块包含了某些资源的内存区域.操作同利用进程把它的工作划分为一些功能单元.

进程中所包含的一个或者多个执行单元称为线程(thread).进程拥有一个私有的虚拟地址空间,该空间仅能被他所包含的线程访问

线程只能归属于一个进程并且他只能访问该进程所拥有的资源.当操作系统创建一个进程后,该进程会自动申请一个主线程或者首要线程的线程

线程状态

概述

1. 新建状态(New)：当一个线程对象被创建后，线程就处于新建状态。在新建状态中的线程对象从严格意义上看还只是一个普通的对象，还不是一个独立的线程，不会被线程调度程序调度。新建状态是线程生命周期的第一个状态。

例如: Thread t = new MyThread();

1. 就绪状态(Runnable)：处于新建状态中的线程被调用start()方法就会进入就绪状态。处于就绪状态的线程，只是说明此线程已经做好了准备，随时等待CPU调度执行，但并不是说执行了start()方法线程就会立即执行;

另外，在等待/阻塞状态中的线程，被解除等待和阻塞后将不直接进入运行状态，而是首先进入就绪状态

1. 运行状态(Running)：处于就绪状态中的线程一旦被系统选中，使线程获取了 CPU 时间，就会进入运行状态。 线程在运行状态下随时都可能被调度程序调度回就绪状态。在运行状态下还可以让线程进入到等待/阻塞状态。 在通常的单核CPU中，在同一时刻只有一个线程处于运行状态。在多核的CPU中，就可能两个线程或更多的线程同时处于运行状态，这也是多核CPU运行速度快的原因。

注：就绪状态是进入到运行状态的唯一入口，也就是说，线程要想进入运行状态执行，必须先处于就绪状态中；

1. 阻塞状态(Blocked)：根据阻塞产生的原因不同，阻塞状态又可以分为三种 a）等待阻塞：运行状态中的线程执行wait()方法，使当前线程进入到等待阻塞状态； b）锁阻塞：线程在获取synchronized同步锁失败(因为锁被其它线程所占用)，线程会进入同步阻塞状态； c）其他阻塞：通过调用线程的sleep(),suspend(), join(), 或发出了I/O请求时等，线程会进入到阻塞状态。当sleep()睡眠结束、调用resume(),?join()等待的线程终止或者超时、或I/O处理完毕时，线程重新转入就绪状态。

2. 死亡状态(Dead)：当线程中的run方法执行结束后，或者程序发生异常终止运行后，线程会进入死亡状态。处于死亡状态的线程不能再使用 start 方法启动线程。

SleepDemo

package thread;
​
import javafx.scene.transform.Scale;
​
import java.util.Scanner;
​
/**
 * @author 老安
 * @data 2022/6/23 20:50
 * 线程提供了一个静态方法:
 * static void sleep(long ms)
 * 当一个线程调用sleep后,会进入阻塞状态指定的毫秒,超时后,会进入到Runnable状态,再次等待获取CPU的使用权,才能继续运行
 */
public class SleepDemo {
    public static void main(String[] args) {
        System.out.println("程序开始了!");
        /*
         * 倒计时程序
         * 程序启动后,输入一个数字,然后从该数字开始每秒递减,
         * 到0的时候输出时间到!
         * */
        Scanner scanner = new Scanner(System.in);
        System.out.println("请输入一个数字:");
        try {
            for (int num = scanner.nextInt(); num > 0; num--) {
                System.out.println(num);
                Thread.sleep(1000);
            }
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
​
        System.out.println("程序结束了!");
    }
}

SleepDemo2

package thread;
​
/**
 * @author 老安
 * @data 2022/6/23 21:09
 * sleep方法要求必须处理中断异常
 * 当一个线程调用sleep方法处于睡眠阻塞的过程中,此时该线程的interrupt()方法
 * 被调用时,会被立即中断睡眠阻塞,并抛出该异常
 */
public class SleepDemo2 {
    public static void main(String[] args) {
        Thread lin = new Thread(){
            @Override
            public void run() {
                System.out.println("林:刚美完容~睡一会吧~~");
                try {
                    Thread.sleep(500000000);
                    System.out.println("林:睡醒了!");
                } catch (InterruptedException e) {
                    System.out.println("林:干嘛呢!干嘛呢!都破了相了!");
                }
​
            }
        };
        Thread huang = new Thread(){
            @Override
            public void run() {
                System.out.println("黄:大锤80,小锤40,开始砸墙!");
                for (int i = 0; i < 5; i++) {
                    System.out.println("黄:80!");
                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
                System.out.println("咣当!");
                System.out.println("黄:大哥!搞定!");
                lin.interrupt();//当huang线程执行到这里时,会让lin线程中断睡眠阻塞
            }
        };
        lin.start();
        huang.start();
    }
}

DaemonThreadDemo

package thread;
​
/**
 * @author 老安
 * @data 2022/6/23 21:25
 * 守护线程
 * java中将线程分为两类:用户线程和守护线程.也称为前台线程和后台线程.
 * 守护线程和用户线程创建和使用上并无区别,但是最主要的区别:
 * 当进程结束(一个java进程中所有的用户线程结束),
 * 此时会将所有的守护线程全部杀死
 * 守护线程是通过普通的用户线程通过调用setDaemon(true)设置而转变的
 */
public class DaemonThreadDemo {
    public static void main(String[] args) {
        Thread rose = new Thread(){//用户线程
            @Override
            public void run() {
                for (int i = 0; i < 5; i++) {
                    System.out.println("rose:let me go!");
                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
                System.out.println("rose:aaaaaaaaaa~~~");
                System.out.println("扑通!!");
            }
        };
        Thread jack = new Thread(){
            @Override
            public void run() {
                while (true){
                    System.out.println("jack:you jump! i jump!");
                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        };
        rose.start();
        jack.setDaemon(true);//将jack从用户线程设置为守护线程
        jack.start();
        while (true);
    }
}

线程的同步和异步

JoinDemo

package thread;
​
/**
 * @author 老安
 * @data 2022/6/23 21:48
 * 异步:线程各自执行各自的(多线程是并发运行的,本身就是异步的)
 * 同步:多个线程执行是存在了先后顺序的
 * 线程提供了一个方法:join,可以协调线程的同步运行
 */
public class JoinDemo {
    static boolean isFinish = false;//表示图片是否下载完毕
    public static void main(String[] args) {
        Thread download = new Thread() {
            @Override
            public void run() {
                System.out.println("down:开始下载图片...");
                for (int i = 0; i <= 100; i++) {
                    System.out.println("down:" + i + "%");
                    try {
                        Thread.sleep(50);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
                System.out.println("down:图片下载完毕!!!");
                isFinish = true; //true表示图片下载完毕
            }
        };
        Thread show = new Thread(){
            @Override
            public void run() {
                System.out.println("show:开始显示文字...");
                try {
                    Thread.sleep(2000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                System.out.println("show:显示文字完毕!!!");
                //将show线程阻塞,直到download线程执行完毕(图片下载完毕)
                try {
                    /*
                     * 当show线程调用download.join()后便会进入阻塞状态.
                     * 直到download线程执行完毕才会解除阻塞
                     * join 参加
                     */
                    download.join();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                System.out.println("show:开始显示图片...");
                if (!isFinish){//if(true){} !isFinish=true isFinish=false
                    throw new RuntimeException("图片加载失败!!!");
                }
                System.out.println("show:图片显示完毕!!!");
            }
        };
        download.start();
        show.start();
    }
}

同步锁

同步方法

同步方法概述

除了可以将需要的代码设置成同步代码块以外，也可以使用synchronized关键字将一个方法修饰成同步方法，它能实现和同步代码块同样的功能。

具体语法格式如下:

权限修饰符 synchronized 返回值类型/void 方法名([参数1,...]){
  需要同步的代码;
}

被synchronized修饰的方法在某一时刻只允许一个线程访问，访问该方法的其他线程都会发生阻塞，直到当前线程访问完毕后，其他线程才有机会执行该方法。

需要注意的是，同步方法的锁是当前调用该方法的对象，也就是this指向的对象。

同步方法的使用

下面使用同步方法解决上面的多线程售票程序中的线程安全问题

需要注意的是:

1. 将有可能发生线程安全问题的方法使用synchronized修饰，同一时间只允许一个线程进入同步方法中

2. synchronized方法的锁对象是当前调用该方法的对象，也就是this指向的对象。

如果当前方法是非静态方法，this表示的是调用当前方法的对象

如果当前方法的静态方法，this表示的是当前类。

示例1: SyncDemo1

package thread;
​
/**
 * 线程并发安全问题
 * 当多个线程并发操作同一个临界资源,由于线程切换实际不确定,导致操作顺序出现混乱而引起的各种逻辑错误
 * 临界资源:操作该资源的完整过程同一时刻只能由单线程执行
 */
public class SyncDemo1 {
    public static void main(String[] args) {
        Table table = new Table();
        Thread t1 = new Thread("小红"){
            @Override
            public void run() {
                while (true){
                    int bean = table.getBean();
                    Thread.yield();
                    System.out.println(getName()+"抢了一颗豆子,还剩:"+bean);
                }
            }
        };
        Thread t2 = new Thread("小蓝"){
            @Override
            public void run() {
                while (true){
                    int bean = table.getBean();
                    Thread.yield();
                    System.out.println(getName()+"抢了一颗豆子,还剩:"+bean);
                }
            }
        };
        t1.start();
        t2.start();
    }
}
class Table{
    private int beans = 20;//桌子上有20个豆子
​
    /*
     * 当一个方法使用关键字 synchronized后,该方法成为同步方法:
     * 多个线程不能同时执行这个方法,变相的排队了
     * 将多线程并发操作改为同步有先后顺序的排队执行可以有效的解决并发安全问题
     */
    public synchronized int getBean(){//每次调用该方法,可以取桌子上的一颗豆子
        if (beans <= 0){
            throw new RuntimeException("没有豆子了!!!");
        }
        Thread.yield();//让出时间片
        return beans--;
    }
}

同步代码块

同步代码块概述

同步是指多个操作在同一个时间段内只能有一个线程进行，其他线程要等待此线程完成之后才可以继续执行。

Java为线程的同步操作提供了synchronized关键字，使用该关键字修饰的代码块被称为同步代码块。

其语法格式如下:

synchronized( 同步对象 ){
  需要同步的代码;
}

注意: 在使用同步代码块时必须指定一个需要同步的对象，也称为锁对象，这里的锁对象可以是任意对象。但多个线程必须使用同一个锁对象。

同步代码块的使用

下面使用同步代码块解决上面的多线程售票程序中的线程安全问题

需要注意的是:

1. 将有可能发生线程安全问题的代码包含在同步代码块中，同一时间只允许一个线程进入同步代码块中

2. synchronized代码块中的锁对象可以是任意对象，但必须只能是一个锁。

若使用this作为锁对象，需保证多个线程执行时，this指向的是同一个对象

**示例1: **

package thread;
​
/**
 * 同步块的应用
 * 有效的缩小同步范围可以在保证并发安全问题的前提下尽可能的提高并发效率
 * 语法:
 * synchronized(同步监视器对象){
 *     需要多个线程同步执行的代码片段
 * }
 */
public class SyncDemo2 {
    public static void main(String[] args) {
        Shop shop1 = new Shop();
        Shop shop2 = new Shop();
        Thread t1 = new Thread("康荐文"){
            public void run() {
                 shop1.buy();
            }
        };
        Thread t2 = new Thread("薛亚杰"){
            public void run() {
                shop2.buy();
            }
        };
        t1.start();
        t2.start();
    }
}
class Shop{
    //public synchronized void buy(){//买一件衣服,一般需要10s
    public void buy(){
        Thread t = Thread.currentThread();//获取运行buy方法的线程
        try {
            System.out.println(t.getName()+":正在挑衣服...");
            Thread.sleep(5000);
            /*
             * 同步块在使用时,需要在"()"中指定同步监视器对象,该对象可以是任何引用类型的实例.
             * 只要保证多个需要同步执行该代码块的线程看到的这个对象是"同一个"即可.
             * 实际开发中课结合具体情况选取
             */
            synchronized (this){
                System.out.println(t.getName()+":正在试衣服...");
                Thread.sleep(5000);
            }
            System.out.println(t.getName()+":正在结账离开...");
        } catch (InterruptedException e) {
        }
    }
}

静态同步方法

示例1: SyncDemo3

package thread;
​
/**
 * 静态方法锁
 * 如果我们在静态方法上使用synchronized,那么该方法一定是具有同步效果
 */
public class SyncDemo3 {
    public static void main(String[] args) {
        Boo b1 = new Boo();
        Boo b2 = new Boo();
        Thread t1 = new Thread(){
            @Override
            public void run() {
                b1.doSome();
            }
        };
        Thread t2 = new Thread(){
            @Override
            public void run() {
                b2.doSome();
            }
        };
        t1.start();
        t2.start();
    }
}
class Boo {
    /**
     * 静态方法锁对象指的是当前类的类对象
     * 一个类的Class的实例全局唯一
     */
    //public synchronized static void doSome(){
    public static void doSome(){
        synchronized (Boo.class){
            Thread t = Thread.currentThread();
            System.out.println(t.getName()+":正在执行doSome方法...");
            try {
                Thread.sleep(5000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            System.out.println(t.getName()+":执行doSome方法完毕!!!");
        }
    }
}

互斥锁

示例:SyncDemo4

package thread;
​
/**
 * 互斥锁
 * 当使用多个synchronized锁定多个代码片段,并且指定的锁对象相同时,那么这些代码片段之间就是互斥的,多个线程不能同时访问他们
 */
public class SyncDemo4 {
    public static void main(String[] args) {
        Foo foo = new Foo();
        Thread t1 = new Thread(){
            @Override
            public void run() {
                foo.methodA();
            }
        };
        Thread t2 = new Thread(){
            @Override
            public void run() {
                foo.methodB();
            }
        };
        t1.start();
        t2.start();
    }
}
class Foo {
    public synchronized void methodA(){
        Thread t = Thread.currentThread();
        System.out.println(t.getName()+":正在执行A方法...");
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        System.out.println(t.getName()+":执行A方法完毕...");
    }
    public synchronized void methodB(){
        Thread t = Thread.currentThread();
        System.out.println(t.getName()+":正在执行B方法...");
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        System.out.println(t.getName()+":执行B方法完毕...");
    }
}

死锁

示例:DeadLockDemo

package thread;
​
/**
 * 死锁
 * 当多个线程都各自持有一个锁的同时,还等待对方先释放锁,就会形成一种僵持状态,这个就是死锁
 */
public class DeadLockDemo {
    static Object chopsticks = new Object();//筷子
    static Object spoon = new Object();//勺 调羹
    public static void main(String[] args) {
        Thread bf = new Thread() {
            @Override
            public void run() {
                try {//crtl+alt+L快速整理代码格式
                    System.out.println("北方人准备吃饭...");
                    synchronized (chopsticks) {//抢筷子,不释放筷子,别的线程拿不到筷子
                        System.out.println("北方人拿筷子,开始吃饭");
                        Thread.sleep(5000);
                        System.out.println("北方人吃完了饭,去拿勺");
                        synchronized (spoon){//抢勺
                            System.out.println("北方人拿勺,开始喝汤");
                            Thread.sleep(5000);
                            System.out.println("北方人喝完了汤");
                        }
                        System.out.println("北方人放下勺");
                    }
                    System.out.println("北方人放下筷子,吃饭完毕!");
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };
        Thread nf = new Thread() {
            @Override
            public void run() {
                try {//crtl+alt+L快速整理代码格式
                    System.out.println("南方人准备吃饭...");
                    synchronized (spoon) {//抢勺
                        System.out.println("南方人拿勺,开始喝汤");
                        Thread.sleep(5000);
                        System.out.println("南方人喝完了汤,去拿筷子");
                        synchronized (chopsticks){//抢筷子
                            System.out.println("南方人拿起筷子,开始吃饭");
                            Thread.sleep(5000);
                            System.out.println("南方人吃完了饭");
                        }
                        System.out.println("南方人放下筷子");
                    }
                    System.out.println("南方人放下勺,吃饭完毕!");
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };
        nf.start();
        bf.start();
    }
}

DeadLockDemo1

package thread;
​
/**
 * 死锁
 * 当多个线程都各自持有一个锁的同时,还等待对方先释放锁,就会形成一种僵持状态,这个就是死锁
 */
public class DeadLockDemo1 {
    static Object chopsticks = new Object();//筷子
    static Object spoon = new Object();//勺 调羹
​
    public static void main(String[] args) {
        Thread bf = new Thread() {
            @Override
            public void run() {
                try {//crtl+alt+L快速整理代码格式
                    System.out.println("北方人准备吃饭...");
                    synchronized (chopsticks) {//抢筷子,不释放筷子,别的线程拿不到筷子
                        System.out.println("北方人拿筷子,开始吃饭");
                        Thread.sleep(5000);
                        System.out.println("北方人吃完了饭");
                    }
                    System.out.println("北方人放下筷子,去拿勺");
                    synchronized (spoon) {//抢勺
                        System.out.println("北方人拿勺,开始喝汤");
                        Thread.sleep(5000);
                        System.out.println("北方人喝完了汤");
                    }
                    System.out.println("北方人放下勺");
                    System.out.println("吃饭完毕!");
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };
        Thread nf = new Thread() {
            @Override
            public void run() {
                try {//crtl+alt+L快速整理代码格式
                    System.out.println("南方人准备吃饭...");
                    synchronized (spoon) {//抢勺
                        System.out.println("南方人拿勺,开始喝汤");
                        Thread.sleep(5000);
                        System.out.println("南方人喝完了汤");
                    }
                    System.out.println("南方人放下勺,去拿筷子");
                    synchronized (chopsticks) {//抢筷子
                        System.out.println("南方人拿起筷子,开始吃饭");
                        Thread.sleep(5000);
                        System.out.println("南方人吃完了饭");
                    }
                    System.out.println("南方人放下筷子");
​
                    System.out.println("吃饭完毕!");
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };
        nf.start();
        bf.start();
    }
}

概述

异常: 就是指程序出现了不正常的情况

用来封装错误信息的对象。

组成结构：类型，提示，行号。

异常的继承结构

查看Java的API文档可知, Java中所有错误和异常的顶级父类是Throwable类

Throwable类下有两个子类, 分别是Error和Exception, 两者的区别是:

1. Error: 是指不需要捕获的严重问题, 通常是java程序以外的问题, 比如硬件问题或者内存不足导致的问题等 因此, 如果java程序中出现了Error, 我们无需处理。

2. Exception: 称为异常类, 它表示程序本身可以处理的问题

Exception下有很多异常子类, 其中有一个异常子类是RuntimeException类, 这里还可以将异常分为两大类:

1. 编译时异常: 其他异常类以及不是RuntimeException子类的异常类都是检查异常(也叫编译时异常) 在编写完程序后, Java编译器会对其进行检查, 如果检查出此类异常, 就必须要显式处理, 否则程序将无法进行编译。 例如:ClassNotFoundException、 FileNotFoundException、 SQLException等都是编译时异常。

2. 运行时异常: RuntimeException以及子类被称为未经检查的异常(也叫运行时异常) 这类异常通常在编写完程序后没有问题, 但是运行程序才出现异常, 需要我们回来修改代码进行解决的异常 这类异常无需显式处理, 当然也可以像编译时异常一样处理 例如:IndexOutOfBoundsException、 ArithmeticException、 NullPointerException、 ClassCastException 等都是运行时异常。

判断一个异常是不是运行时异常, 可以通过检查这个异常类是不是RuntimeException的子类, 或者检查这个异常是否只有在程序运行时才会出现!

虚拟机的默认处理方式

如果程序在运行时出现了问题，而我们又没有处理该问题，最终虚拟机会做默认的处理，而这种默认处理方式为:

1. 将异常的名称(类型)、异常的原因以及异常出现的位置等信息输出在了控制台（Console窗口）

2. 将程序停止运行（这意味着，出现异常的代码后面的代码将不会再执行）

异常示例-1：

package exception;
​
/**
 * 异常示例
 */
public class ExceptionDemo {
    public static void main(String[] args) {
        //没有报错,表示没有编译期异常
        //执行代码,报错了,说明有运行时异常
        int i = 1/0;
        System.out.println("hahaha");
    }
}
运行结果:
Exception in thread "main" java.lang.ArithmeticException: / by zero
    at exception.ExceptionDemo.main(ExceptionDemo.java:10)
异常示例-2：
package exception;
​
/**
 * 异常示例
 */
public class ExceptionDemo2 {
    public static void main(String[] args) {
        //定义一个数组
        int[] arr = {1,2,3,4,5,6};
        System.out.println(arr[0]);
        System.out.println(arr[1]);
        System.out.println(arr[2]);
        System.out.println(arr[3]);
        System.out.println(arr[4]);
        System.out.println(arr[5]);
        System.out.println(arr[6]);
​
    }
}

运行结果:

Exception in thread "main" java.lang.ArrayIndexOutOfBoundsException: 6
    at exception.ExceptionDemo2.main(ExceptionDemo2.java:16)

如果程序出现了异常, 需要我们自己处理, 有两种方案:

1. 使用try...catch...进行处理(捕获异常)
2. 使用throws进行处理(抛出异常)

异常处理之try...catch...处理

try...catch处理异常的格式为:

try{
  可能出现异常的代码;
}catch(异常类型 变量名){
  异常处理代码; 
  //当try中的代码出现了异常并且这个异常能和catch中的异常类型匹配上, 才会执行catch
  //反之, 如果出现的异常和catch中的异常类型不匹配, 就不会执行catch
}

执行流程为:

1. 程序执行到try{}中的代码时, 如果出现了异常, 将会自动产生一个异常对象, 该异常对象将会被提交给java运行时系统;

2. 当Java运行时系统接收到异常对象时, 回到catch()中寻找匹配的异常类型, 找到后就进入catch{}中进行异常的处理;

3. 执行完毕后, 程序还可以继续执行try...catch之后的代码

代码案例1

package exception;
​
/**
 * try{
 * 可能出现异常的代码
 * }catch(异常类型 异常的变量名){
 * 异常处理代码
 * }
 */
public class TryCatchDemo {
    public static void main(String[] args) {
        System.out.println("程序开始了");
        try {//包裹可能会出现问题的代码
            //String str = null;
            //String str = "";
            String str = "a";
            System.out.println(str.length());
            System.out.println(str.charAt(0));
            //这里执行时,一定会出现数字格式异常
            System.out.println(Integer.parseInt(str));
            //try语句块中某处出错了,这句代码之后的内容不会执行
            System.out.println("老安到此一游");
// 选中要注释的代码,ctrl+/ 快速注释
        } catch (NullPointerException e) {
            //只有try中出现了空指针异常,才会执行这部分代码
            System.out.println("出现了空指针,并在这里得到了解决");
            //catch可以定义多个,针对不同的异常可以有不同的处理方案,此时,可以分别捕获分别处理
        } catch (StringIndexOutOfBoundsException e) {
            System.out.println("出现了字符串下标越界异常,并在这里得到了解决");
            //直接捕获异常超类,那么try中不论出现什么异常,都可以进行捕获,经常用来兜底
        } catch (Exception e) {
            System.out.println("出现了异常,并在这里得到了解决");
        }
        //合并捕获异常,当不同的异常处理手段相同时,可以使用这种方式
        //}catch (NullPointerException|StringIndexOutOfBoundsException e){
​
        System.out.println("程序结束了");
    }
}

finally块

作用就是确保一定要执行某些代码

代码案例

package exception;
​
/**
 * finally块
 * finally块是异常处理机制中最后一块,它可以直接跟在try语句块之后,或者最后一个catch之后
 * finally块特点:
 * 只要程序可以执行到try语句块中,无论是否出现异常,都会最终执行finally块中的内容.
 * 因此我们会将一些必须要执行的内容比如:资源的释放等操作放在finally块中确保执行
 */
public class FinallyDemo {
    public static void main(String[] args) {
        System.out.println("程序开始了!");
        //选中要包裹的代码,然后crtl+alt+T,选择try/catch
        try {
            //此处一定有空指针异常
            String str = null;
            System.out.println(str.length());
            return;//程序执行到return会直接结束方法
        } catch (Exception e) {
            System.out.println("出错了!");
        } finally {//只要程序走到try中,此部分代码一定执行
            System.out.println("finally中的代码执行了!");
        }
        System.out.println("程序结束了");
    }
}

代码案例2

package exception;
​
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
​
/**
 * 异常处理机制在IO操作中的应用
 */
public class FinallyDemo2 {
    public static void main(String[] args) {
        FileOutputStream fos = null;
        try {
            fos = new FileOutputStream("fos.txt");
            fos.write(1);
        } catch (IOException e) {
            System.out.println("出错了!在这里得到了解决");
        } finally {
            try {
                if (fos!=null){
                    fos.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

代码案例3

package exception;
​
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
​
/**
 * JDK7之后,java推出了自动关闭特性.
 * 使得我们在源代码中异常处理机制在IO应用中得到了简化
 * 使用方式:
 * 1:将流对象的创建放在try后的()中
 * 2:try要捕获的其余业务代码依旧还是放在try代码块中
 */
public class AutoCloseableDemo {
    public static void main(String[] args) {
        try (
                FileOutputStream fos = new FileOutputStream("fos.txt");
        ) {
            fos.write(1);
        } catch (IOException e) {
            System.out.println("程序出错了!");
        }
    }
}

throw关键字

当程序发生错误而无法处理的时候,会抛出对应的异常对象,除此之外,在某些时刻,您可能会想要自行抛出异常,例如字异常处理结束后,再将异常抛出,让下一层异常处理块来捕捉,若想要自行抛出异常,您可以使用"throw"关键字,并生成执行的异常对象后抛出.

例如:throw new ArithmeticException();

代码案例

Person

package exception;
​
/**
 * 这个类测试异常的抛出
 */
public class Person {
    private int age;
    //alt+insert
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        if (age<0||age>100){
            //如果抛出的异常不是RuntimeException,需要我们在方法后添加所抛出的异常类型
            //此处,判断年龄是否符合逻辑,只有运行时,才能判断
            throw new RuntimeException("年龄不合法!");
        }
        this.age = age;
    }
}
ThrowDemo
package exception;
​
/**
 * 异常的抛出
 * throw关键字可以主动对外抛出一个异常
 * 通常需要抛异常的情况:
 * 1:当前代码片段出现了异常,但是该异常不应该在当前代码片段被解决时,可以抛出
 * 2:程序可以运行,但是不满足业务要求时,可以对外抛出一个异常告知(满足语法但是不满足业务)
 */
public class ThrowDemo {
    public static void main(String[] args) {
        Person p = new Person();
        try {
            p.setAge(2000);//语法满足,但是不满足业务
        } catch (Exception e) {
            System.out.println("出错了!");
            p.setAge(18);
        }
        System.out.println("此人的年龄:"+p.getAge());
    }
}

异常处理之throws处理

程序中会声明许多的方法,这些方法中可能会因某些错误而引发异常,但是不希望直接在这个方法中处理这些异常,而希望调用这个它的方法来统一处理,这时候可以使用throws关键字来声明这个方法将会抛出的异常

throws 处理异常的格式为:

...方法名() throws 异常类名 {
  方法体
}

代码案例

Person

package exception;
​
/**
 * 这个类测试异常的抛出
 */
public class Person {
    private int age;
    //alt+insert
    public int getAge() {
        return age;
    }
    public void setAge(int age) throws Exception{
        if (age<0||age>100){
            /*
             * 如果抛出的异常不是RuntimeException,需要我们在方法后添加所抛出的异常类型,都是编译器的要求,因为我们此时抛出异常,都是编译器就需要处理的异常
             */
            //此处,判断年龄是否符合逻辑,只有运行时,才能判断
            //throw new RuntimeException("年龄不合法!");
            throw new Exception("年龄不合法!");
        }
        this.age = age;
    }
}

ThrowDemo

package exception;
​
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
​
/**
 * 异常的抛出
 * throw关键字可以主动对外抛出一个异常
 * 通常需要抛异常的情况:
 * 1:当前代码片段出现了异常,但是该异常不应该在当前代码片段被解决时,可以抛出
 * 2:程序可以运行,但是不满足业务要求时,可以对外抛出一个异常告知(满足语法但是不满足业务)
 */
public class ThrowDemo {
    public static void main(String[] args) throws FileNotFoundException {
        Person p = new Person();
        try {
            p.setAge(2000);//语法满足,但是不满足业务
        } catch (Exception e) {
            e.printStackTrace();
        }
        System.out.println("此人的年龄:"+p.getAge());
    }
}

throws的重写规则

代码案例

package exception;
​
import java.awt.*;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.sql.SQLException;
​
/**
 * Throws的重写规则
 */
public class ThrowsDemo {
    public void doSome() throws IOException, AWTException { }
}
class SubClass extends ThrowsDemo{
    //父类方法抛什么异常,重写方法就抛什么异常
    //public void doSome() throws IOException, AWTException {}
    //重写方法只抛出父类部分异常
    //public void doSome() throws IOException {}
    //重写方法什么异常也不抛出
    //public void doSome(){}
    //重写方法可以抛出父类异常的子类 FileNotFoundException继承IOException
    //public void doSome() throws FileNotFoundException {}
    //不允许抛出父类方法没有抛出(一点关系都没有)的异常
    //public void doSome() throws SQLException {}
    //不允许抛出父类的异常的超类
    //public void doSome() throws Exception {}
}

异常常用方法

代码案例

package exception;
​
import java.io.FileOutputStream;
​
/**
 * 异常常用方法
 */
public class ExceptionApiDemo {
    public static void main(String[] args) {
        try {
            String str = "abc";
            System.out.println(Integer.parseInt(str));
        } catch (Exception e) {
            //用来在控制台输出异常信息,便于程序员解决bug
            //打印异常信息
            e.printStackTrace();
            //message 消息 获取错误信息
            String message = e.getMessage();
            System.out.println("错误信息:"+message);
        }
    }
}

自定义异常

代码案例

IllegalAgeException

package exception;
​
/**
 * 自定义异常:通常使用来表达业务错误
 * 1:类名一定要见明知义
 * 2:自定义异常继承Exception类()直接继承或者间接继承
 * 3:提供所继承的类的构造器 alt+insert Constructor 全选回车
 * Illegal 非法的
 */
public class IllegalAgeException extends Exception{
    public IllegalAgeException() {
    }
​
    public IllegalAgeException(String message) {
        super(message);
    }
​
    public IllegalAgeException(String message, Throwable cause) {
        super(message, cause);
    }
​
    public IllegalAgeException(Throwable cause) {
        super(cause);
    }
​
    public IllegalAgeException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
        super(message, cause, enableSuppression, writableStackTrace);
    }
}

Person

package exception;
​
/**
 * 这个类测试异常的抛出
 */
public class Person {
    private int age;
    //alt+insert
    public int getAge() {
        return age;
    }
    public void setAge(int age) throws IllegalAgeException{
        if (age<0||age>100){
            /*
             * 如果抛出的异常不是RuntimeException,需要我们在方法后添加所抛出的异常类型,都是编译器的要求,因为我们此时抛出异常,都是编译器就需要处理的异常
             */
            //此处,判断年龄是否符合逻辑,只有运行时,才能判断
            //throw new RuntimeException("年龄不合法!");
            throw new IllegalAgeException("年龄超过范围:"+age);
        }
        this.age = age;
    }
}

ThrowDemo

package exception;
​
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
​
/**
 * 异常的抛出
 * throw关键字可以主动对外抛出一个异常
 * 通常需要抛异常的情况:
 * 1:当前代码片段出现了异常,但是该异常不应该在当前代码片段被解决时,可以抛出
 * 2:程序可以运行,但是不满足业务要求时,可以对外抛出一个异常告知(满足语法但是不满足业务)
 */
public class ThrowDemo {
    public static void main(String[] args) {
        Person p = new Person();
        try {
            p.setAge(2000);//语法满足,但是不满足业务
        } catch (IllegalAgeException e) {
            e.printStackTrace();
        }
        System.out.println("此人的年龄:"+p.getAge());
    }
}

总结: 什么时候需要try...catch异常, 什么时候需要throws异常?

1. 如果这个异常是方法内部的代码造成的异常, 而不是因为调用者的传参导致的异常(也就是说这个异常和调用者没有关系), 通常需要我们try...catch异常

2. 如果这个异常是调用者的传参导致的异常, 则将异常throws抛出(就是将异常抛给调用者)

3. 不要在main方法上throws抛出异常, 因为这样会将异常抛给虚拟机, 而虚拟机是不会帮我们处理异常的!(虚拟机会按照默认方式处理:输出异常信息以及终止程序执行!)

扩充内容--JAVA常见异常

Java.io.NullPointerException

• null 空的，不存在的
• NullPointer 空指针

空指针异常，该异常出现在我们操作某个对象的属性或方法时，如果该对象是null时引发。

String str = null;
str.length();//空指针异常

上述代码中引用类型变量str的值为null，此时不能通过它调用字符串的方法或引用属性，否则就会引发空指针异常。

解决办法:

找到为什么赋值为null，确保该对象的值不能为null再操作属性或方法即可。

java.lang.NumberFormatException: For input string: "xxxxx"

• Number 数字
• Format 格式

数字格式异常，该异常通常出现在我们使用包装类将一个字符串解析为对应的基本类型时引发。

String line = "123.123";//小数不能转换为整数!
int d = Integer.parseInt(line);//抛出异常NumberFormatException
System.out.println(d);

上述代码中由于line的字符串内容是"123.123".而这个数字是不能通过包装类Integer解析为一个整数因此出现该异常。注:非数字的字符出在解析时也会出现该异常。

解决办法:

确保解析的字符串正确表达了基本类型可以保存的值

String line = "123";
int d = Integer.parseInt(line);
System.out.println(d);//123

java.lang.StringIndexOutOfBoundsException

• index 索引，下标
• Bounds 边界
• OutOfBounds 超出了边界

字符串下标越界异常。该异常通常出现在String对应的方法中，当我们指定的下标小于0或者大于等于字符串的长度时会抛出该异常。

String str = "thinking in java";
char c = str.charAt(20);//出现异常
System.out.println(c);

解决办法:

指定下标时的范围应当在>=0并且<=字符串的长度。

java.io.InvalidClassException

• Invalid 无效的
• Class 类

无效的类异常，该异常出现在使用java.io.ObjectInputStream在进行对象反序列化时在readObject()方法中抛出。这通常是因为反序列化的对象版本号与该对象所属类现有的版本号不一致导致的。

可以通过在类上使用常量:

static final long serialVersionUID = 1L;

来固定版本号，这样序列化的对象就可以进行反序列化了。

JAVA建议我们实现Serializable接口的类主动定义序列化版本号,若不定义编译器会在编译时 根据当前类结构生成版本号,但弊端是只要这个类内容发生了改变,那么再次编译时版本号就会改变,直接的后果就是之前序列化的对象都无法再进行反序列化.

如果自行定义版本号,那么可以在改变类内容的同时不改变版本号,这样一来,反序列化以前的 对象时对象输入流会采取兼容模式,即:当前类的属性在反序列化的对象中还存在的则直接还原,不存在的就是用该属性的默认值

出现该异常的解决办法:

1. 首先使用上述常量固定版本号
2. 重新序列化对象(将对象通过ObjectOutputStream重新序列化并写出)
3. 再进行反序列化即可

需要注意，之前没有定义序列化版本号时序列化后的对象都无法再反序列化回来，所以若写入了文件，可将之前的那些文件都删除，避免读取即可。

java.io.NotSerializableException

• NotSerializable 不能序列化

不能序列化异常，该异常通常出现在我们使用java.io.ObjectOutputStream进行对象序列化(调用writeObject)时。原因时序列化的对象所属的类没有实现java.io.Serializable接口导致

出现该异常的解决办法:

将序列化的类实现该接口即可

java.io.UnsupportedEncodingException

• Unsupported 不支持的
• Encoding字符集

不支持的字符集异常，该异常通常出现在使用字符串形式指定字符集名字时，犹豫字符集名字拼写错误导致。例如

PrintWriter pw = new PrintWriter("pw.txt", "UFT-8");

上述代码中，字符集拼写成"UFT-8"就是拼写错误。 常见的字符集名字:

• GBK:我国的国标编码，其中英文1个字节，中文2字节

• UTF-8:unicode的传输编码，也称为万国码。其中英文1字节，中文3字节。

• ISO8859-1:欧中的字符集，不支持中文。

java.io.FileNotFoundException

• File 文件

• NotFound 没有找到

文件没有找到异常，该异常通常出现在我们使用文件输入流读取指定路径对应的文件时出现

FileInputStream fis = new FileInputStream("f1os.dat");

上述代码如果指定的文件f1os.dat文件不在当前目录下，就会引发该异常：

java.io.FileNotFoundException: f1os.dat (系统找不到指定的文件。)

注:

抽象路径"f1os.dat"等同于"./f1os.dat"。因此该路径表示当前目录下应当有一个名为f1os.dat的文件。

还经常出现在文件输出流写出文件时，指定的路径无法将该文件创建出来时出现

FileOutputStream fos = new FileOutputStream("./a/fos.dat");

上述代码中，如果当前目录下没有a目录，那么就无法在该目录下自动创建文件fos.dat，此时也会引发这个异常。

其他API上出现该异常通常也是上述类似的原因导致的。

解决办法:

在读取文件时，确保指定的路径正确，且文件名拼写正确。

在写出文件时，确保指定的文件所在的目录存在。

java.net.ConnectException: Connection refused: connect

• connection 连接

• refused 拒绝

连接异常,连接被拒绝了.这通常是客户端在使用Socket与远端计算机建立连接时由于指定的地址或端口无效导致无法连接服务端引起的.

System.out.println("正在连接服务端...");
Socket socket = new Socket("localhost",8088);//这里可能引发异常
System.out.println("与服务端建立连接!");

解决办法:

• 检查客户端实例化Socket时指定的地址和端口是否正常

• 客户端连接前,服务端是否已经启动了

java.net.BindException: Address already in use

• bind 绑定
• address 地址
• already 已经
• Address already in use 地址已经被使用了

绑定异常,该异常通常是在创建ServerSocket时指定的服务端口已经被系统其他程序占用导致的.

System.out.println("正在启动服务端...");
ServerSocket serverSocket = new ServerSocket(8088);//这里可能引发异常
System.out.println("服务端启动完毕");

解决办法:

• 有可能是重复启动了服务端导致的,先将之前启动的服务端关闭

• 找到该端口被占用的程序,将其进程结束

• 重新指定一个新的服务端口在重新启动服务端

java.net.SocketException: Connection reset

• socket 套接字
• net 网络
• reset 重置

套接字异常,链接重置。这个异常通常出现在Socket进行的TCP链接时，由于远端计算机异常断开(在没有调用socket.close()的之前直接结束了程序)导致的。

解决办法:

• 无论是客户端还是服务端当希望与另一端断开连接时，应当调用socket.close()方法，此时会进行TCP的挥手断开动作。

• 这个异常是无法完全避免的，因为无法保证程序在没有调用socket.close()前不被强制杀死。

java.lang.InterruptedException

• interrupt 中断

中断异常.这个异常通常在一个线程调用了会产生阻塞的方法处于阻塞的过程中,此时该线程的interrupt()方法被调用.那么阻塞方法会立即抛出中断异常并停止线程的阻塞使其继续运行.

例如:

try {
    Thread.sleep(1000);
} catch (InterruptedException e) {
}

如果线程t1调用Thread.sleep(1000)处于阻塞的过程中,其他线程调用了t1线程的inerrupt()方法,那么t1调用的sleep()方法就会立即抛出中断异常InterruptedException并停止阻塞.

java.util.NoSuchElementException

• such 这个

• Element 元素

没有这个元素的异常.该异常通常发生在使用迭代器Iterator遍历集合元素时由于没有先通过hasNext()方法判断存在下一个元素而贸然通过next()获取下一个元素时产生(当集合所有元素都经过迭代器遍历一遍后还使用next获取).

while(it.hasNext()){
            String str = (String)it.next();
            //这里就可能产生NoSuchException异常
            System.out.println(it.next());
        }

上述代码中循环遍历时,每次调用hasNext()确定存在下一个元素时,循环里面连续调用过两次next()方法,这意味着第二次调用next()方法时并没有判断是否还存在.所以在最后会出现异常.

解决办法:

保证每次调用next()方法前都确定hasNext()为true才进行即可.

java.util.ConcurrentModificationException

• Concurrent 并发

• Modification 修改

并发修改异常.这个异常也经常出现在使用迭代器遍历集合时产生.

当我们使用一个迭代器遍历集合的过程中,通过集合的方法增删元素时,迭代器会抛出该异常.

while(it.hasNext()){
    //出现ConcurrentModificationException
    String str = (String)it.next();
    if("#".equals(str)){
        c.remove(str);//遍历过程中不要通过集合方法增或删元素
    }
    System.out.println(str);
}

解决办法:

使用迭代器提供的remove()方法可以删除通过next()获取的元素.

while(it.hasNext()){
            String str = (String)it.next();
            if("#".equals(str)){
//                c.remove(str);
                it.remove();
            }
            System.out.println(str);
        }

java.lang.UnsupportedOperationException

support 支持

unsupported 不支持的

operation 操作

不支持的操作异常.该异常出现在很多的API中.

例如:常出现在我们对数组转换的集合进行增删元素操作时抛出.

String[] array = {"one","two","three","four","five"};
System.out.println("array:"+ Arrays.toString(array));
List<String> list = Arrays.asList(array);//将数组转换为一个List集合
System.out.println("list:"+list);
​
list.set(0,"six");
System.out.println("list:"+list);
//对该集合的操作就是对原数组的操作
System.out.println("array:"+ Arrays.toString(array));
​
//由于数组是定长的,因此任何会改变数组长度的操作都是不支持的!
list.add("seven");//UnsupportedOperationException

【axios】使用 json-server 搭建 REST API - 使用 axios - 自定义 axios - 取消请求 - 拦截器_YK 菌的博客-CSDN 博客

axios 是什么?

前端最流行的 ajax 请求库

react/vue 官方都推荐使用 axios 发 ajax 请求

axios 特点

1.基于 xhr + promise 的异步 ajax 请求库

2.浏览器端/node 端都可以使用

3.支持请求／响应拦截器

4.支持请求取消

5.请求/响应数据转换

6.批量发送多个请求

axios 常用语法

axios(config): 通用/最本质的发任意类型请求的方式

axios(url[, config]): 可以只指定 url 发 get 请求

axios.request(config): 等同于 axios(config)

axios.get(url[, config]): 发 get 请求

axios.delete(url[, config]): 发 delete 请求

axios.post(url[, data, config]): 发 post 请求

axios.put(url[, data, config]): 发 put 请求

axios.defaults.xxx: 请求的默认全局配置

axios.interceptors.request.use(): 添加请求拦截器

axios.interceptors.response.use(): 添加响应拦截器

axios.create([config]): 创建一个新的 axios(它没有下面的功能)

axios.Cancel(): 用于创建取消请求的错误对象

axios.CancelToken(): 用于创建取消请求的 token 对象

axios.isCancel(): 是否是一个取消请求的错误

axios.all(promises): 用于批量执行多个异步请求

axios.spread(): 用来指定接收所有成功数据的回调函数的方法

axios.create(config)

1. 根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置

2. 新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的

3. 为什么要设计这个语法?

   (1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一 样, 如何处理

   (2) 解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要 求的接口请求中

拦截器函数/ajax 请求/请求的回调函数的调用顺序

1. 说明: 调用 axios()并不是立即发送 ajax 请求, 而是需要经历一个较长的流程
2. 流程: 请求拦截器 2 => 请求拦截器 1 => 发 ajax 请求 => 响应拦截器 1 => 响应拦截器 2 => 请求的回调
3. 注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是 config, 响应 拦截器传递的是 response

取消请求

1. 基本流程

   配置 cancelToken 对象

   缓存用于取消请求的 cancel 函数

   在后面特定时机调用 cancel 函数取消请求

   在错误回调中判断如果 error 是 cancel, 做相应处理

2. 实现功能

   点击按钮, 取消某个正在请求中的请求

   在请求一个接口前, 取消前面一个未完成的请求

常用 API 合集

节点

节点属性

Node.nodeName; //返回节点名称，只读
Node.nodeType; //返回节点类型的常数值，只读
Node.nodeValue; //返回Text或Comment节点的文本值，只读
Node.textContent; //返回当前节点和它的所有后代节点的文本内容，可读写
Node.baseURI; //返回当前网页的绝对路径

Node.ownerDocument; //返回当前节点所在的顶层文档对象，即document
Node.nextSibling; //返回紧跟在当前节点后面的第一个兄弟节点
Node.previousSibling; //返回当前节点前面的、距离最近的一个兄弟节点
Node.parentNode; //返回当前节点的父节点
Node.parentElement; //返回当前节点的父Element节点
Node.childNodes; //返回当前节点的所有子节点
Node.firstChild; //返回当前节点的第一个子节点
Node.lastChild; //返回当前节点的最后一个子节点

//parentNode接口
Node.children; //返回指定节点的所有Element子节点
Node.firstElementChild; //返回当前节点的第一个Element子节点
Node.lastElementChild; //返回当前节点的最后一个Element子节点
Node.childElementCount; //返回当前节点所有Element子节点的数目。

操作

Node.appendChild(node); //向节点添加最后一个子节点
Node.hasChildNodes(); //返回布尔值，表示当前节点是否有子节点
Node.cloneNode(true); // 默认为false(克隆节点), true(克隆节点及其属性，以及后代)
Node.insertBefore(newNode, oldNode); // 在指定子节点之前插入新的子节点
Node.removeChild(node); //删除节点，在要删除节点的父节点上操作
Node.replaceChild(newChild, oldChild); //替换节点
Node.contains(node); //返回一个布尔值，表示参数节点是否为当前节点的后代节点。
Node.compareDocumentPosition(node); //返回一个7个比特位的二进制值，表示参数节点和当前节点的关系
Node.isEqualNode(node); //返回布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
Node.normalize(); //用于清理当前节点内部的所有Text节点。它会去除空的文本节点，并且将毗邻的文本节点合并成一个。

//ChildNode接口
Node.remove(); //用于删除当前节点
Node.before(); //在 node 前面 插入节点或字符串
Node.after(); //在 node 后面 插入节点或字符串
Node.replaceWith(); //将 node 替换为给定的节点或字符串

Document 节点

Document 节点的属性

document.doctype; //返回 HTML 文档的文档类型对象
document.documentElement; //返回当前文档的根节点
document.defaultView; //返回document对象所在的window对象
document.body; //返回当前文档的<body>节点
document.head; //返回当前文档的<head>节点
document.activeElement; //返回当前文档中获得焦点的那个元素。

//节点集合属性
document.links; //返回当前文档的所有a元素
document.forms; //返回页面中所有表单元素
document.images; //返回页面中所有图片元素
document.embeds; //返回网页中所有嵌入对象
document.scripts; //返回当前文档的所有脚本
document.styleSheets; //返回当前网页的所有样式表

//文档信息属性
document.documentURI; //表示当前文档的网址
document.URL; //返回当前文档的网址
document.domain; //返回当前文档的域名
document.lastModified; //返回当前文档最后修改的时间戳
document.location; //返回location对象，提供当前文档的URL信息
document.referrer; //返回当前文档的访问来源
document.title; //返回当前文档的标题
document.characterSet; //属性返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1。
document.readyState; //返回当前文档的状态
document.designMode; //控制当前文档是否可编辑，可读写
document.compatMode; //返回浏览器处理文档的模式
document.cookie; //用来操作Cookie

Document 节点的方法

（1）读写方法

document.open(); //用于新建并打开一个文档
document.close(); //用于关闭一个由 document.open 方法打开的输出流，并显示选定的数据
document.write(); //用于向当前文档写入内容
document.writeIn(); //用于向当前文档写入内容，尾部添加换行符。

（2）查找节点

document.querySelector(selectors); //接受一个CSS选择器作为参数，返回第一个匹配该选择器的元素节点。
document.querySelectorAll(selectors); //接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点。
document.getElementsByTagName(tagName); //返回所有指定HTML标签的元素
document.getElementsByClassName(className); //返回包括了所有class名字符合指定条件的元素
document.getElementsByName(name); //用于选择拥有name属性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等）
document.getElementById(id); //返回匹配指定id属性的元素节点。
document.elementFromPoint(x, y); //返回位于页面指定位置最上层的Element子节点。

（3）生成节点

document.createElement(tagName); //用来生成HTML元素节点。
document.createTextNode(text); //用来生成文本节点
document.createAttribute(name); //生成一个新的属性对象节点，并返回它。
document.createDocumentFragment(); //生成一个DocumentFragment对象

（4）事件方法

document.createEvent(type); //生成一个事件对象，该对象能被element.dispatchEvent()方法使用
document.addEventListener(type, listener, capture); //注册事件
document.removeEventListener(type, listener, capture); //注销事件
document.dispatchEvent(event); //触发事件

（5）其他

document.hasFocus(); //返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。
document.adoptNode(externalNode); //将某个节点，从其原来所在的文档移除，插入当前文档，并返回插入后的新节点。
document.importNode(externalNode, deep); //从外部文档拷贝指定节点，插入当前文档。

Element 节点

Element 节点的属性

（1）特性属性

Element.attributes; //返回当前元素节点的所有属性节点
Element.id; //返回指定元素的id属性，可读写
Element.tagName; //返回指定元素的大写标签名
Element.innerHTML; //返回该元素包含的HTML代码，可读写
Element.outerHTML; //返回指定元素节点的所有HTML代码，包括它自身和包含的的所有子元素，可读写
Element.className; //返回当前元素的class属性，可读写
Element.classList; //返回当前元素节点的所有class集合
Element.dataset; //返回元素节点中所有的data-*属性。

（2）尺寸属性

Element.clientHeight; //返回元素节点可见部分的高度
Element.clientWidth; //返回元素节点可见部分的宽度
Element.clientLeft; //返回元素节点左边框的宽度
Element.clientTop; //返回元素节点顶部边框的宽度
Element.scrollHeight; //返回元素节点的总高度
Element.scrollWidth; //返回元素节点的总宽度
Element.scrollLeft; //返回元素节点的水平滚动条向右滚动的像素数值,通过设置这个属性可以改变元素的滚动位置
Element.scrollTop; //返回元素节点的垂直滚动向下滚动的像素数值
Element.offsetHeight; //返回元素的垂直高度(包含border,padding)
Element.offsetWidth; //返回元素的水平宽度(包含border,padding)
Element.offsetLeft; //返回当前元素左上角相对于Element.offsetParent节点的垂直偏移
Element.offsetTop; //返回水平位移
Element.style; //返回元素节点的行内样式

（3）节点相关属性

Element.children; //包括当前元素节点的所有子元素
Element.childElementCount; //返回当前元素节点包含的子HTML元素节点的个数
Element.firstElementChild; //返回当前节点的第一个Element子节点
Element.lastElementChild; //返回当前节点的最后一个Element子节点
Element.nextElementSibling; //返回当前元素节点的下一个兄弟HTML元素节点
Element.previousElementSibling; //返回当前元素节点的前一个兄弟HTML节点
Element.offsetParent; //返回当前元素节点的最靠近的、并且CSS的position属性不等于static的父元素。

Element 节点的方法

（1）位置方法

getBoundingClientRect();
// getBoundingClientRect返回一个对象，包含top,left,right,bottom,width,height
// width、height 元素自身宽高
// top 元素上外边界距窗口最上面的距离
// right 元素右外边界距窗口左边的距离
// bottom 元素下外边界距窗口最上面的距离
// left 元素左外边界距窗口左边的距离
// width 元素自身宽(包含border,padding)
// height 元素自身高(包含border,padding)

getClientRects(); //返回当前元素在页面上形参的所有矩形。

// 元素在页面上的偏移量
var rect = el.getBoundingClientRect();
return {
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft,
};

（2）属性方法

Element.getAttribute()：读取指定属性
Element.setAttribute()：设置指定属性
Element.hasAttribute()：返回一个布尔值，表示当前元素节点是否有指定的属性
Element.removeAttribute()：移除指定属性

（3）查找方法

Element.querySelector();
Element.querySelectorAll();
Element.getElementsByTagName();
Element.getElementsByClassName();

（4）事件方法

Element.addEventListener(); //添加事件的回调函数
Element.removeEventListener(); //移除事件监听函数
Element.dispatchEvent(); //触发事件

// event对象
var event = window.event || event;

// 事件的目标节点
var target = event.target || event.srcElement;

// 事件代理
ul.addEventListener("click", function (event) {
  if (event.target.tagName.toLowerCase() === "li") {
    console.log(event.target.innerHTML);
  }
});

（5）其他

Element.scrollIntoView(); //滚动当前元素，进入浏览器的可见区域

//解析HTML字符串，然后将生成的节点插入DOM树的指定位置。
Element.insertAdjacentHTML(where, htmlString);
Element.insertAdjacentHTML("beforeBegin", htmlString); // 在该元素前插入
Element.insertAdjacentHTML("afterBegin", htmlString); // 在该元素第一个子元素前插入
Element.insertAdjacentHTML("beforeEnd", htmlString); // 在该元素最后一个子元素后面插入
Element.insertAdjacentHTML("afterEnd", htmlString); // 在该元素后插入

Element.remove(); //用于将当前元素节点从DOM中移除
Element.focus(); //用于将当前页面的焦点，转移到指定元素上

CSS 操作

（1）类名操作

//判断是否有某个类名
function hasClass(element, className) {
  return new RegExp(className, "gi").test(element.className);
}

//移除class
function removeClass(element, className) {
  element.className = element.className.replace(
    new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"),
    ""
  );
}

（2）style 操作

element.setAttribute("style", "");

element.style.backgroundColor = "red";

element.style.cssText; //用来读写或删除整个style属性

//CSS模块的侦测
element.style.setProperty(propertyName, value); //设置css属性
element.style.getPropertyValue(property); //获取css属性
element.style.removeProperty(property); //删除css属性

//操作非内联样式
window.getComputedStyle(); //接受一个DOM节点对象作为参数，返回一个包含该节点最终样式信息的对象

//伪类
window.getComputedStyle(el, ":after")[attrName];

//伪元素
//StyleSheet对象  https://www.jianshu.com/p/09a27917e70e

对象

Object 对象

（1）生成实例对象

var o = new Object();

（2）属性

Object.prototype; //返回原型对象

（3）方法

Object.keys(o); //遍历对象的可枚举属性
Object.getOwnPropertyName(o); //遍历对象不可枚举的属性

对象实例的方法

valueOf(); //返回当前对象对应的值。
toString(); //返回当前对象对应的字符串形式。
toLocaleString(); //返回当前对象对应的本地字符串形式。
hasOwnProperty(); //判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性。
isPrototypeOf(); //判断当前对象是否为另一个对象的原型。
propertyIsEnumerable(); //判断某个属性是否可枚举。

Array对象

（1）生成实例对象

var a = new Array();

（2）属性

a.length; //长度

（3）Array.isArray()

Array.isArray(a); //用来判断一个值是否为数组

（4）Array 实例的方法

a.valueof()   //返回数组本身
a.toString()  //返回数组的字符串形式
a.push(value,vlaue....)   //用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。
pop()   //用于删除数组的最后一个元素，并返回该元素
join()  //以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。
concat()  //用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变。
shift()  //用于删除数组的第一个元素，并返回该元素。
unshift(value)  //用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。
reverse()   //用于颠倒数组中元素的顺序，返回改变后的数组
slice(start_index, upto_index);   //用于提取原数组的一部分，返回一个新数组，原数组不变。第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员。负数表示倒数第几个。
splice(index, count_to_remove, addElement1, addElement2, ...);   //用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，返回值是被删除的元素。第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。
sort()   //对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数，表示按照自定义方法进行排序。该函数本身又接受两个参数，表示进行比较的两个元素。如果返回值大于0，表示第一个元素排在第二个元素后面；其他情况下，都是第一个元素排在第二个元素前面。
map()   //对数组的所有成员依次调用一个函数，根据函数结果返回一个新数组。
map(elem,index,arr)   //map方法接受一个函数作为参数。该函数调用时，map方法会将其传入三个参数，分别是当前成员、当前位置和数组本身。
forEach()   //遍历数组的所有成员，执行某种操作,参数是一个函数。它接受三个参数，分别是当前位置的值、当前位置的编号和整个数组。
filter()   //参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
some()    //用来判断数组成员是否符合某种条件。接受一个函数作为参数，所有数组成员依次执行该函数，返回一个布尔值。该函数接受三个参数，依次是当前位置的成员、当前位置的序号和整个数组。只要有一个数组成员的返回值是true，则整个some方法的返回值就是true，否则false。
every()   //用来判断数组成员是否符合某种条件。接受一个函数作为参数，所有数组成员依次执行该函数，返回一个布尔值。该函数接受三个参数，依次是当前位置的成员、当前位置的序号和整个数组。所有数组成员的返回值都是true，才返回true，否则false。
reduce()   //依次处理数组的每个成员，最终累计为一个值。从左到右处理（从第一个成员到最后一个成员）
reduceRight()  //依次处理数组的每个成员，最终累计为一个值。从右到左（从最后一个成员到第一个成员）
indexOf(s)   //返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1。可以接受第二个参数，表示搜索的开始位置
lastIndexOf()  //返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。

Number 对象

（1）生成对象

var n = new Number();

（2）Number 对象的属性

Number.POSITIVE_INFINITY; //正的无限，指向Infinity。
Number.NEGATIVE_INFINITY; //负的无限，指向-Infinity。
Number.NaN; //表示非数值，指向NaN。
Number.MAX_VALUE; //表示最大的正数，相应的，最小的负数为-Number.MAX_VALUE。
Number.MIN_VALUE; //表示最小的正数（即最接近0的正数，在64位浮点数体系中为5e-324），相应的，最接近0的负数为-Number.MIN_VALUE。
Number.MAX_SAFE_INTEGER; //表示能够精确表示的最大整数，即9007199254740991。
Number.MIN_SAFE_INTEGER; //表示能够精确表示的最小整数，即-9007199254740991。

（4）Number 对象实例的方法

toString(); //用来将一个数值转为字符串形式.可以接受一个参数，表示输出的进制。如果省略这个参数，默认将数值先转为十进制，再输出字符串；否则，就根据参数指定的进制，将一个数字转化成某个进制的字符串。
toFixed(); //用于将一个数转为指定位数的小数，返回这个小数对应的字符串。
toExponential(); //用于将一个数转为科学计数法形式。可传入一个参数，参数表示小数点后有效数字的位数，范围为0到20，超出这个范围，会抛出一个RangeError。
toPrecision(); //用于将一个数转为指定位数的有效数字。

String 对象

（1）生成实例对象

var s = new String();

（2）String 对象的属性

s.length; //返回字符串的长度

（3）方法

s.chatAt(index); //返回指定位置的字符
s.fromCharCode(); //该方法的参数是一系列Unicode码点，返回对应的字符串。
s.charCodeAt(index); //返回给定位置字符的Unicode码点（十进制表示）
s.concat(s2); //用于连接两个字符串
s.slice(start, end); //用于从原字符串取出子字符串并返回，不改变原字符串。第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。
s.substring(start, end); //用于从原字符串取出子字符串并返回，不改变原字符串.第一个参数表示子字符串的开始位置，第二个位置表示结束位置。
s.substr(start, length); //用于从原字符串取出子字符串并返回，不改变原字符串。第一个参数是子字符串的开始位置，第二个参数是子字符串的长度。如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串。
s.indexOf(s); //返回给定元素在字符串中第一次出现的位置，如果没有出现则返回-1。可以接受第二个参数，表示搜索的开始位置
s.lastIndexOf(); //返回给定元素在字符串中最后一次出现的位置，如果没有出现则返回-1。
s.trim(); //用于去除字符串两端的空格，返回一个新字符串
s.toLowerCase(); //用于将一个字符串全部转为小写,返回一个新字符串，不改变原字符串。
s.toUpperCase(); //全部转为大写
s.localeCompare(s2); //用于比较两个字符串。它返回一个整数，如果小于0，表示第一个字符串小于第二个字符串；如果等于0，表示两者相等；如果大于0，表示第一个字符串大于第二个字符串。
s.match(regexp); //用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。
s.search(); //返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。
s.replace(oldValue, newValue); //用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。
s.split(); //按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。还可传入第二个参数，决定了返回数组的成员数。

Math 对象

（1）属性

Math.E; //常数e。
Math.LN2; //2的自然对数。
Math.LN10; //10的自然对数。
Math.LOG2E; //以2为底的e的对数。
Math.LOG10E; //以10为底的e的对数。
Math.PI; //常数Pi。
Math.SQRT1_2; //0.5的平方根。
Math.SQRT2; //2的平方根。

（2）数学方法

Math.abs()	//返回参数的绝对值
Math.ceil()	//向上取整，接受一个参数，返回大于该参数的最小整数。
Math.floor()	//向下取整
Math.max(n,n1,...)	//可接受多个参数，返回最大值
Math.min(n,n1,..)	//可接受多个参数，返回最小值
Math.pow(n,e)	//指数运算, 返回以第一个参数为底数、第二个参数为幂的指数值。
Math.sqrt()	//返回参数值的平方根。如果参数是一个负值，则返回NaN。
Math.log()	//返回以e为底的自然对数值。
Math.exp()	//返回e的指数，也就是常数e的参数次方。
Math.round()	//四舍五入
Math.random()	//返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。

（3）三角函数方法

Math.sin(); //返回参数的正弦
Math.cos(); //返回参数的余弦
Math.tan(); //返回参数的正切
Math.asin(); //返回参数的反正弦（弧度值）
Math.acos(); //返回参数的反余弦（弧度值）
Math.atan(); //返回参数的反正切（弧度值）

JSON 对象

（1）方法

JSON.stringify();
//用于将一个值转为字符串。该字符串应该符合JSON格式，并且可以被JSON.parse方法还原。
//（JSON.stringify(obj, selectedProperties)）还可以接受一个数组，作为第二个参数，指定需要转成字符串的属性。
//还可以接受第三个参数，用于增加返回的JSON字符串的可读性。如果是数字，表示每个属性前面添加的空格（最多不超过10个）；如果是字符串（不超过10个字符），则该字符串会添加在每行前面。

JSON.parse(); //用于将JSON字符串转化成对象。

console 对象

（1）方法

console.log(text,text2,...)   //用于在console窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。如果第一个参数是格式字符串（使用了格式占位符），console.log方法将依次用后面的参数替换占位符，然后再进行输出。
console.info()   //在console窗口输出信息，同时，会在输出信息的前面，加上一个蓝色图标。
console.debug()  //在console窗口输出信息，同时，会在输出信息的前面，加上一个蓝色图标。
console.warn()  //输出信息时，在最前面加一个黄色三角，表示警告；
console.error()  //输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈
console.table()  //可以将复合类型的数据转为表格显示。
console.count()  //用于计数，输出它被调用了多少次。
console.dir()    //用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。
console.dirxml()  //用于以目录树的形式，显示DOM节点。
console.assert()  //接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。

//这两个方法用于计时，可以算出一个操作所花费的准确时间。
console.time()
console.timeEnd()
//time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后，console窗口会显示“计时器名称: 所耗费的时间”。

console.profile()  //用来新建一个性能测试器（profile），它的参数是性能测试器的名字。
console.profileEnd()  //用来结束正在运行的性能测试器。

console.group()
console.groupend()
//上面这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。
console.groupCollapsed()  //用于将显示的信息分组，该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。

console.trace()  //显示当前执行的代码在堆栈中的调用路径。
console.clear()  //用于清除当前控制台的所有输出，将光标回置到第一行。

let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1. 不允许重复声明

2. 块儿级作用域

3. 不存在变量提升

4. 不影响作用域链

应用场景：以后声明变量使用 let 就对了

const 关键字

const 关键字用来声明常量，const 声明有以下特点

1. 声明必须赋初始值

2. 标识符一般为大写

3. 不允许重复声明

4. 值不允许修改

5. 块儿级作用域

注意: 对象属性修改和数组元素变化不会出发 const 错误

应用场景：声明对象类型使用 const，非对象类型声明选择 let

变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称 为解构赋值。

//数组的解构赋值
const arr = ["张学友", "刘德华", "黎明", "郭富城"];
let [zhang, liu, li, guo] = arr;

//对象的解构赋值
const lin = {
  name: "林志颖",
  tags: ["车手", "歌手", "小旋风", "演员"],
};

let { name, tags } = lin;
//复杂解构
let wangfei = {
  name: "王菲",
  age: 18,
  songs: ["红豆", "流年", "暧昧", "传奇"],
  history: [{ name: "窦唯" }, { name: "李亚鹏" }, { name: "谢霆锋" }],
};

let {
  songs: [one, two, three],
  history: [first, second, third],
} = wangfei;

注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

1. 字符串中可以出现换行

2. 可以使用 ${xxx} 形式输出变量

// 定义字符串
let str = `<ul>
            <li>沈腾</li>
            <li>马丽</li>
            <li>魏翔</li>
            <li>艾伦</li>
          </ul>`;
// 变量拼接
let star = "王宁";
let result = `${star}在前几年离开了开心麻花`;

注意：当遇到字符串与变量拼接的情况使用模板字符串

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

let name = "尚硅谷";
let slogon = "永远追求行业更高标准";
let improve = function () {
  console.log("可以提高你的技能");
};
//属性和方法简写
let atguigu = {
  name,
  slogon,
  improve,
  change() {
    console.log("可以改变你");
  },
};

注意：对象简写形式简化了代码，所以以后用简写就对了

箭头函数

ES6 允许使用「箭头」(=>)定义函数。

//1. 通用写法
let fn = (arg1, arg2, arg3) => {
  return arg1 + arg2 + arg3;
};

箭头函数的注意点:

1. 如果形参只有一个，则小括号可以省略

2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的 执行结果

3. 箭头函数 this 指向声明时所在作用域下 this 的值

4. 箭头函数不能作为构造函数实例化

5. 不能使用 arguments

//2. 省略小括号的情况
let fn2 = (num) => {
  return num * 10;
};

//3. 省略花括号的情况
let fn3 = (score) => score * 20;

//4. this 指向声明时所在作用域中 this 的值
let fn4 = () => {
  console.log(this);
};

let school = {
  name: "尚硅谷",
  getName() {
    let fn5 = () => {
      console.log(this);
    };
    fn5();
  },
};

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适

rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

//作用与 arguments 类似
function add(...args) {
  console.log(args);
}
add(1, 2, 3, 4, 5);

//rest 参数必须是最后一个形参
function minus(a, b, ...args) {
  console.log(a, b, args);
}
minus(100, 1, 2, 3, 4, 5, 19);

注意：rest 参数非常适合不定个数参数函数的场景

spread 扩展运算符

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

//展开数组
let tfboys = ["德玛西亚之力", "德玛西亚之翼", "德玛西亚皇子"];
function fn() {
  console.log(arguments);
}
fn(...tfboys);
//展开对象
let skillOne = {
  q: "致命打击",
};
let skillTwo = {
  w: "勇气",
};
let skillThree = {
  e: "审判",
};
let skillFour = {
  r: "德玛西亚正义",
};
let gailun = { ...skillOne, ...skillTwo, ...skillThree, ...skillFour };

应用

//1．数组的合并情圣误杀唐探
const kuaizi =['王太利','肖央'];
const fenghuang =['曾毅',"'玲花'];
//const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [ ...kuaizi, ...fenghuang];

//2．数组的克隆
const sanzhihua =[ 'E', 'G', 'M' ];
const sanyecao = [ ...sanzhihua];

//3．将伪数组转为真正的数组

Symbol

Symbol 基本使用

​ ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol 特点

1. Symbol 的值是唯一的，用来解决命名冲突的问题

2. Symbol 值不能与其他数据进行运算

3. Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名

//创建 Symbol
let s1 = Symbol();
console.log(s1, typeof s1);

//添加标识的 Symbol（Symbol好比身份证号，参数是姓名）
let s2 = Symbol("尚硅谷");
let s2_2 = Symbol("尚硅谷");
console.log(s2 === s2_2); //false

//使用 Symbol for 定义
let s3 = Symbol.for("尚硅谷");
let s3_2 = Symbol.for("尚硅谷");
console.log(s3 === s3_2); //true

注: 遇到唯一性的场景时要想到 Symbol

对象添加 Symbol 类型属性

//向对象中添加方法 up down
let game = {
  name: "俄罗斯方块",
  up: function () {},
  down: function () {},
};
//第一种方法
//声明一个对象
let methods = {
  up: Symbol(),
  down: Symbol(),
};

game[methods.up] = function () {
  console.log("我可以改变形状");
};

game[methods.down] = function () {
  console.log("我可以快速下降!!");
};

//第二种方法
let youxi = {
  name: "狼人杀",
  [Symbol("say")]: function () {
    console.log("我可以发言");
  },
  [Symbol("zibao")]: function () {
    console.log("我可以自爆");
  },
};

Symbol 内置值

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场 景下自动执行。

迭代器

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提 供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

1. ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费

2. 原生具备 iterator 接口的数据(可用 for of 遍历)

      (1) Array

      (2) Arguments

      (3) Set

      (4) Map

      (5) String

      (6) TypedArray

      (7) NodeList

1. 工作原理

      (1) 创建一个指针对象，指向当前数据结构的起始位置

      (2) 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员

      (3) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员

      (4) 每调用 next 方法返回一个包含 value 和 done 属性的对象

注: 需要自定义遍历数据的时候，要想到迭代器。

生成器

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

function * gen() {
  yield "一只没有耳朵";
  yield "一只没有尾巴";
  return "真奇怪";
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

代码说明：

1. * 的位置没有限制

2. 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到 yield 语句后的值

3. yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next 方法，执行一段代码

4. next 方法可以传递实参，作为 yield 语句的返回值

//模拟获取  用户数据  订单数据  商品数据
function getUsers() {
  setTimeout(() => {
    let data = "用户数据";
    //调用 next 方法, 并且将数据传入
    iterator.next(data);
  }, 1000);
}

function getOrders() {
  setTimeout(() => {
    let data = "订单数据";
    iterator.next(data);
  }, 1000);
}

function getGoods() {
  setTimeout(() => {
    let data = "商品数据";
    iterator.next(data);
  }, 1000);
}

function* gen() {
  let users = yield getUsers();
  let orders = yield getOrders();
  let goods = yield getGoods();
}

//调用生成器函数
let iterator = gen();
iterator.next();

Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。

1. Promise 构造函数: Promise (excutor) {}

2. Promise.prototype.then 方法

3. Promise.prototype.catch 方法

Promise 异步方案*

5 分钟彻底学会使用 Promise，你真的懂 Promise 吗？_哔哩哔哩_bilibili

Promise 就是一个对象，用来表示一个异步任务最终结束过后，究竟是成功还是失败。就像是一个承诺，一开始是待定的状态 - Pending ，成功后叫 Fulfilled，失败后叫 Rejected。承诺明确后会有对应的任务执行，onFilfilled, onRejected.

const p = new Promise(function (resolve, reject) {
  // 兑现承诺

  // resolve(100)  // 承诺达成

  reject(new Error("promise rejected")); // 承诺失败
});

p.then(
  function (value) {
    console.log("resolved", value);
    return 1;
  },
  function (error) {
    console.log("rejected", error);
  }
).then(function (value) {
  console.log(value); // 1
});

• Promise 对象的 then 方法会返回一个全新的 Promise 对象，所以可以使用链式调用
• 后面的 then 方法就是在为上一个 then 返回的 Promise 注册回调
• 前面 then 方法中回调函数的返回值会作为后面的 then 方法回调的参数
• 如果回调中返回的值是 Promise 那后面的 then 方法回调会等待这个 Promise 结束

异常处理：

function ajax(url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "json";
    xhr.onload = function () {
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    xhr.send();
  });
}

// then方法的第二个回调函数进行异常捕获
ajax("/api/users.json").then(
  function onFulfilled(value) {
    console.log("onFulfilled", value);
  },
  function onRejected(error) {
    console.log("onRejected", error);
  }
);

// 使用catch进行异常捕获
ajax("/api/users.json")
  .then(function onFulfilled(value) {
    console.log("onFulfilled", value);
  })
  .catch(function onRejected(error) {
    console.log("onRejected", error);
  });

使用 then 的第二个回调捕获异常，只能捕获到前一个抛出的异常，而使用 catch，因为每一个 then 都会返回一个 Promise 对象 所以 catch 首先捕获的是一个 then 的异常，然后会捕获链上往前的异常，也就是 catch 会捕获 catch 以前的异常

Promise 静态方法

Promise.resolve（）

Promise.reject()

Promise 并行执行

Promise.all()

// Promise.all 返回一个全新的Promise
var promise = Promise.all([ajax("/api/user.json"), ajax("api/posts.json")]);
// 所有的Promise完成，全新的promise才会完成
// 所以的异步任务都成功，promise才成功
// 只要有一个异步任务失败，promise就失败
promise
  .then(function (values) {
    // 接收的是数组，包含每个异步任务执行的结果
    console.log(values);
  })
  .catch(function (error) {
    console.log(error);
  });

Promise.race()

Promise.race()也会将多个 promise 对象组合返回一个新的 promise 对象，但与 all 不同的是：

all 等待所有任务结束，它才会结束

race 只会等待第一个结束的任务，也就是只要有一个任务完成了，新的 promise 对象也就完成了。

const request = ajax("/api/posts.json");
const timeout = new Promise(
  (resolve,
  (reject) => {
    setTimeout(() => reject(new Error("timeout")), 500);
  })
);

// Promise.race()将多个异步任务组合后返回一个新的promise对象
// 多个异步任务中只要有一个完成（成功或失败），新的promise对象就完成了
// 这里如果request请求在500毫秒内请求成功，就返回成功，使用.then方法
// 如果500毫秒请求没有返回结果，就会reject一个错误，走到catch
Promise.race([require, timeout])
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  });

const p = Promise.all([p1, p2, p3]);
p.then(() => {}).catch((err) => {});

• Promise.all(): p1, p2, p3 全部返回成功，p 才会返回成功， p1, p2, p3 中任意一个返回失败，p 就返回失败。 失败后，其他异步任务仍会继续执行。
• Promise.race(): p1, p2, p3 任意一个返回成功，p 就返回成功， p1, p2, p3 中任意一个返回失败，p 就返回失败。 失败后，其他异步任务仍会继续执行。
• Promise.allSettled()：等到 p1，p2，p3 全部执行完，不管成功失败，p 的状态为 fulfilled。监听函数接收到的参数时数组[{status:'fulfilled', value: 42}, {status:'rejeceted}, reason:-1]
• Promise.any(): p1, p2, p3 只要有一个成功，p 就返回成功，p1，p2，p3 全部失败，p 才返回失败

Promise 执行顺序

console.log('global start')

setTimeout(() => {
  console.log('setTimeout')
}, 0)

Promise.resolve()
  .then(() => {
    console.log('promise')
  })
  .then(() => {
    console.log('promise 2')
  })
  .then(() => {
    console.log('promise 3')
  })
console.log('global end')
计时器最后执行 先执行两个内置命令
// global start
// global end
// promise
// promise 2
// promise 3
// setTimeout

按照前面说的，回调进入回调队列，依次执行，可能我们会认为先打印 setTimeout，再打印 promise，但是结果不是这样的。这是因为 js 将任务分为了宏任务和微任务。微任务会插队，在本轮任务的末尾直接执行。

大部分异步任务都会作为宏任务。

微任务包括Promise，MutationObserver, process.nextTick/Generator异步方案

手撕 Promise

/**
 * 手撕Promise
 * 首先，promise是一个类,传入一个函数作为参数，直接调用
 * promise 有三个状态， pending， fulfilled， rejected
 * 在 resolve 和 reject调用后状态修改，且状态修改后不能再修改
 * 将 resolve 和 reject 中的参数记录下来，作为 then 方法成功和失败回调的参数
 * 如果 promise 中执行出错，要捕获错误，可以使用try catch来捕获
 * 需要捕获错误的地方包括promise传入的函数执行器，和 then 方法的回调
 */
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECRED = "rejected";
class MyPromise {
  constructor(fn) {
    try {
      // promise 传入一个函数，直接调用，函数的参数为 resolve 和 reject
      fn(this.resolve, this.reject);
    } catch (err) {
      this.reject(err);
    }
  }
  // 定义初始状态
  status = PENDING;
  // then 方法成功回调的参数
  value = undefined;
  // then 方法失败回调的参数
  error = undefined;
  // 初始化存储 then 回调的值
  sCallback = [];
  fCallback = [];
  resolve = (value) => {
    // 如果状态不是 pending ，不做修改
    if (this.status !== PENDING) return;
    // resolve 后将状态修改为成功
    this.status = FULFILLED;
    // 将结果记录
    this.value = value;
    // 如果有储存的成功回调，则调用，数组需要循环调用
    // this.sCallback && this.sCallback(value)
    while (this.sCallback.length) this.sCallback.shift()();
  };
  reject = (error) => {
    // 如果状态不是 pending ，不做修改
    if (this.status !== PENDING) return;
    // reject 后将状态修改为失败
    this.status = REJECRED;
    // 将结果记录
    this.error = error;
    // 如果有储存的失败回调，则调用，数组需要循环调用
    // this.fCallback && this.fCallback(error)
    while (this.fCallback.length) this.fCallback.shift()();
  };
  /**
   * then 方法参数为成功回调和失败回调
   * 根据状态判断执行哪个回调
   * 如果是异步调用，执行 then 方法时状态还是 pending，则要将两个回调储存起来
   * 储存的方法在 resolve 和 reject 的方法里+
   对应的调用
   * 同一个promise可能会有多个 then 调用，也就会有多组成功和失败的回调，将异步时回调储存为数组
   * then 方法可以链式调用，所以它返回的是一个promise对象，将回调中返回的值作为下一个then方法的参数
   * then 方法返回的promise对象不能是自身,将 newPromise 与 返回值进行判断
   * 在pending状态也要判断不能返回自身
   * then 方法可以不传递参数，不传递参数时，下一个then可以拿到这个then应该拿到的结果
   * 所以 then 不传递参数时，相当于把结果传递到下一个then
   */
  then(
    sCallback = (value) => value,
    fCallback = (error) => {
      throw error;
    }
  ) {
    let newPromise = new MyPromise((resolve, reject) => {
      // 这里是同步执行，所以可以将要执行的操作放在这里
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            // 调用后获取返回的值
            const x = sCallback(this.value);
            // 判断返回的值如果是 promise 对象，根据promise的结果进行resolve和reject
            // 如果是普通值，直接resolve
            // 这个操作在失败是也会调用，所以包装成一个方法
            // then 方法不能返回自己，所以将 newPromise 传进去判断
            // 但是这里其实拿不到newPromise，可以将这段代码放入 setTimeout 中
            // 放入setTimeout 中并不是为了延时，只是为了等 newPromise 创建好了可以引用，所以时间设为0
            thenValue(newPromise, x, resolve, reject);
          } catch (err) {
            reject(err);
          }
        }, 0);
      } else if (this.status === REJECRED) {
        setTimeout(() => {
          try {
            const x = fCallback(this.error);
            thenValue(newPromise, x, resolve, reject);
          } catch (err) {
            reject(err);
          }
        }, 0);
      } else {
        // 调用 then 方法时，promise的异步还没执行完，状态还是pending，把两个回调储存
        // 判断不能返回自身
        this.sCallback.push(() => {
          setTimeout(() => {
            try {
              const x = sCallback(this.value);
              thenValue(newPromise, x, resolve, reject);
            } catch (err) {
              reject(err);
            }
          }, 0);
        });
        this.fCallback.push(() => {
          setTimeout(() => {
            try {
              const x = fCallback(this.error);
              thenValue(newPromise, x, resolve, reject);
            } catch (err) {
              reject(err);
            }
          }, 0);
        });
      }
    });
    return newPromise;
  }
  /**
   * 实现finally方法, finally 方法不管promise成功失败都会执行回调
   * finally 会将promise的结果往下传
   * 可以利用 then 方法来实现
   * finally 方法返回一个新的promise对象,由于then方法就是返回一个promise对象，所以直接返回
   * 如果finally返回一个promise对象，要等promise对象有了结果，才会执行下方的 then
   */
  finally(callback) {
    return this.then(
      (value) => {
        return MyPromise.resolve(callback()).then(() => value);
      },
      (err) => {
        return MyPromise.resolve(callback()).then(() => {
          throw err;
        });
      }
    );
  }
  /**
   * 实现 catch,catch方法只有一个回调，就是失败回调,返回一个promise
   */
  catch(callback) {
    return this.then(undefined, callback);
  }
  /**
   * 实现一个all方法, all 方法传入一个数组，数组中会有异步调用，返回一个新的promise对象
   * 数组中所有异步都成功，将结果以数组形式返回，否则一个出错就出错
   */
  static all(args) {
    let results = [];
    let index = 0;
    return new MyPromise((resolve, reject) => {
      function addData(key, value) {
        results[key] = value;
        // index代表给results中添加了几个值，如果index和args长度相等，说明全部成功
        // 不能用results长度来判断，因为results赋值不是通过 push 方法，而是针对 key 来赋值的
        index++;
        if (index == args.length) {
          resolve(results);
        }
      }
      for (let i = 0; i < args.length; i++) {
        // 判断是promise对象还是普通值，普通值直接加入results数组
        if (args[i] instanceof MyPromise) {
          // promise 对象
          args[i].then((value) => {
            addData(i, value);
          }, reject);
        } else {
          // 普通值
          addData(i, args[i]);
        }
      }
    });
  }
  /**
   * 实现一个Promise.resolve方法
   * Promise.resolve方法后面要接 then 方法
   * 参数如果是个promise对象，就按照这个promise执行，返回它
   * 参数如果是个普通值，创建一个新的promise对象
   */
  static resolve(value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise((resolve) => {
      resolve(value);
    });
  }
  /**
   * Promise.reject 方法，返回一个新的Promise，状态为reject
   * 参数原封不动的作为reject的理由
   */
  static reject(reason) {
    return new Promise((resolve, reject) => {
      reject(reason);
    });
  }
}
function thenValue(newPromise, x, resolve, reject) {
  if (newPromise === x) return reject(new TypeError("then方法不能返回自己"));
  if (x instanceof MyPromise) {
    // 如果是promise对象
    x.then(resolve, reject);
  } else {
    // 如果是普通值
    resolve(x);
  }
}

Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯 一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：

1. size 返回集合的元素个数

2. add 增加一个新元素，返回当前集合

3. delete 删除元素，返回 boolean 值

4. has 检测集合中是否包含某个元素，返回 boolean 值

5. clear 清空集合，返回 undefined

//创建一个空集合
let s = new Set();
//创建一个非空集合
let s1 = new Set([1, 2, 3, 1, 2, 3]);

//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
//1. 数组去重
let result = [...new Set(arr)];
console.log(result); //[1,2,3,4,5]
//2. 交集
let arr2 = [4, 5, 6, 5, 6];
// let result = [...new Set(arr)].filter(item => {
//     let s2 = new Set(arr2);// 4 5 6
//     if(s2.has(item)){
//         return true;
//     }else{
//         return false;
//     }
// });

//简写
let result = [...new Set(arr)].filter((item) => new Set(arr2).has(item));
console.log(result); //[4,5]

//3. 并集
let union = [...new Set([...arr, ...arr2])];
console.log(union); //[1,2,3,4,5,6]

//4. 差集
let diff = [...new Set(arr)].filter((item) => !new Set(arr2).has(item));
console.log(diff); //[1,2,3]

Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属 性和方法：

1. size 返回 Map 的元素个数

2. set 增加一个新元素，返回当前 Map

3. get 返回键名对象的键值

4. has 检测 Map 中是否包含某个元素，返回 boolean 值

5. clear 清空集合，返回 undefined

//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
  ["name", "尚硅谷"],
  ["slogon", "不断提高行业标准"],
]);

//属性和方法
//获取映射元素的个数
console.log(m2.size); //2
//添加映射值
console.log(m2.set("age", 6));
//获取映射值
console.log(m2.get("age")); //6
//检测是否有该映射
console.log(m2.has("age")); //true
//清除
console.log(m2.clear());

class 类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对 象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是 一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象 原型的写法更加清晰、更像面向对象编程的语法而已。 知识点：

1. class 声明类

2. constructor 定义构造函数初始化

3. extends 继承父类

4. super 调用父级构造方法

5. static 定义静态方法和属性

6. 父类方法可以重写

//父类
class Phone {
  //构造方法
  constructor(brand, color, price) {
    this.brand = brand;
    this.color = color;
    this.price = price;
  }
  //对象方法
  call() {
    console.log("我可以打电话!!!");
  }
}

//子类
class SmartPhone extends Phone {
  constructor(brand, color, price, screen, pixel) {
    super(brand, color, price);
    this.screen = screen;
    this.pixel = pixel;
  }

  //子类方法
  photo() {
    console.log("我可以拍照!!");
  }
  playGame() {
    console.log("我可以玩游戏!!");
  }

  //方法重写
  call() {
    console.log("我可以进行视频通话!!");
  }

  //静态方法
  static run() {
    console.log("我可以运行程序");
  }
  static connect() {
    console.log("我可以建立连接");
  }
}

//实例化对象
const Nokia = new Phone("诺基亚", "灰色", 230);
const iPhone6s = new SmartPhone("苹果", "白色", 6088, "4.7inch", "500w");

//调用子类方法
iPhone6s.playGame();
//调用重写方法
iPhone6s.call();
//调用静态方法
SmartPhone.run();

数值扩展

Number.EPSILON 是 JavaScript 表示的最小精度 EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16

二进制和八进制

ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示。

Number.isFinite() 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的

Number.isNaN() 用来检查一个值是否为 NaN

Number.parseInt() 与 Number.parseFloat()

ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变。

Number.isInteger

Number.isInteger() 用来判断一个数值是否为整数

Math.trunc

用于去除一个数的小数部分，返回整数部分。

Math.sign

判断一个数是正、负还是 0

对象扩展

ES6 新增了一些 Object 对象的方法

1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）

2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象

3. __proto__、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处

模块化的优势有以下几点：

1. 防止命名冲突

2. 代码复用

3. 高维护性

模块化规范产品

ES6 之前的模块化规范有：

1. CommonJS => NodeJS、Browserify

2. AMD => requireJS

3. CMD => seaJS

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import。

• export 命令用于规定模块的对外接口
• import 命令用于输入其他模块提供的功能

export 三种暴露方式

分别暴露

export let school = "尚硅谷";

export function teach() {
  console.log("我们可以教给你开发技能");
}

统一暴露

let school = "尚硅谷";

function findJob() {
  console.log("我们可以帮助你找工作!!");
}

export { school, findJob };

默认暴露

export default {
  school: "ATGUIGU",
  change: function () {
    console.log("我们可以改变你!!");
  },
};

import 引入方式

通用的导入方式

//引入 m1.js 模块内容
import * as m1 from "./src/js/m1.js";
//引入 m2.js 模块内容
import * as m2 from "./src/js/m2.js";
//引入 m3.js
import * as m3 from "./src/js/m3.js";

解构赋值形式

import { school, teach } from "./src/js/m1.js";
import { school as guigu, findJob } from "./src/js/m2.js";
import { default as m3 } from "./src/js/m3.js"; //default必须要用别名

简便形式 针对默认暴露

import m3 from "./src/js/m3.js";

ECMASript 7 新特性

Array.prototype.includes

Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值

指数操作符

在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同

ECMASript 8 新特性

async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样

async 函数

1、async 函数的返回值为 promise 对象

2、promise 对象的结果由 async 函数执行的返回值决定

await 表达式

1、await 必须写在 async 函数中

2、await 右侧的表达式一般为 promise 对象

3、await 返回的是 promise 成功的值

4、await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理

Async/Await 语法糖

基本使用

// 比普通的函数多了一个 *
function* foo() {
  console.log("start");

  // 用 yield 返回一个值，next 方法返回的就是这个值
  // yield 不会结束生成器的执行，只是 暂停
  // 如果next方法传入一个参数，会作为上一个yield 的返回值
  // yield 'foo'
  // const res = yield 'foo'
  // console.log(res) // bar

  try {
    const res = yield "foo";
    console.log(res); // bar
  } catch (e) {
    console.log(e);
  }
}

// 调用生成器并不会立即执行，而是得到一个生成器对象
const generator = foo();

// 调用next方法，函数体才会执行
const result = generator.next();
// 返回结果中有一个done属性，表示生成器是否一起执行完了
console.log(result); //{value: "foo", done: false}

// 再一次调用next方法时，会从 yield 位置开始执行
// generator.next('bar')

// 如果调用生成器的throw方法，也会继续往下执行，但是它会抛出一个异常
// 在生成器内部使用try{}catch(){}语句来接收异常
generator.throw(new Error("Generator error"));

function* main() {
  try {
    const users = yield ajax(url1);
    console.log(users);

    const posts = yield ajax(url2);
    console.log(posts);
  } catch (e) {
    console.log(e);
  }
}
function co(generator) {
  const g = generator();

  function handleResult(result) {
    if (result.done) return;
    result.value.then(
      (data) => {
        handleResult(g.next(data));
      },
      (error) => {
        g.throw(error);
      }
    );
  }

  handleResult(g.next());
}

co(main);

Async / Await 语法糖

// 将生成器的 * 改为 async ，yield 改为 await
async function main() {
  try {
    const users = await ajax(url1);
    console.log(users);

    const posts = await ajax(url2);
    console.log(posts);
  } catch (e) {
    console.log(e);
  }
}
// 直接调用，不需要 co
// async 函数返回一个promise对象
const promise = main();
promise.then(() => {
  console.log("all completed");
});

Object.values 和 Object.entries

1、Object.values()方法返回一个给定对象的所有可枚举属性值的数组

2、Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组

Object.getOwnPropertyDescriptors0

该方法返回指定对象所有自身属性的描述对象

ECMASript 9 新特性

Rest/Spread 属性

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组， 在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符

function connect({ host, port, ...user }) {
  console.log(host);
  console.log(port);
  console.log(user);
}
connect({
  host: "127.0.0.1",
  port: 3306,
  username: "root",
  password: "root",
  type: "master",
});

正则表达式命名捕获组

ES9 允许命名捕获组使用符号『?<name>』,这样获取捕获结果可读性更强

let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result.groups.url);
console.log(result.groups.text);

正则表达式反向断言

ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选。

//声明字符串
let str = "JS5211314 你知道么 555 啦啦啦";
//正向断言
const reg = /\d+(?=啦)/; //判断后面是不是 啦
const result = reg.exec(str);
//反向断言
const reg = /(?<=么)\d+/; //判断前面是不是 么
const result = reg.exec(str);
console.log(result);

正则表达式

dotAll 模式 正则表达式中点 . 匹配除回车(换行符)外的任何单字符，标记『s』改变这种行为，允许行 终止符出现

let str = `
<ul>
	<li>
 		<a>肖申克的救赎</a>
 		<p>上映日期: 1994-09-10</p>
 	</li>
 	<li>
 		<a>阿甘正传</a>
 		<p>上映日期: 1994-07-06</p>
 	</li>
</ul>`;
//声明正则
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
//执行匹配
const result = reg.exec(str);
let result;
let data = [];
while ((result = reg.exec(str))) {
  data.push({ title: result[1], time: result[2] });
}
//输出结果
console.log(data);

ECMASript 10 新特性

Object.fromEntries

trimStart 和 trimEnd

清除字符串左边与右边空白

Array.prototype.flat 与 flatMap

//flat将多维数组转化为低维数组
const arr = [1, 2, 3, 4, [5, 6]];
console.log(arr.flat()); //[1,2,3,4,5,6]

const arr = [1, 2, 3, 4, [5, (6)[(7, 8, 9)]]];
//参数为深度是一个数宁
console.log(arr.flat(2)); //[1,2,3,4,5,6,7,8,9]

//flatMap
const arr = [1, 2, 3, 4];
const result = arr.flatMap((item) => [item * 10]);
console.log(result); //[10,20,30,40]

Symbol.prototype.description

let s = Symbo1("尚硅谷');
console.log(s.description);		//尚硅谷

ECMASript 11 新特性

String.prototype.matchAll方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器

类的私有属性

在私有属性前面加#代表类的私有属性

Promise.allSettle

//声明两个promise对象
const p1 = new Promise((resolve, reject)=>{
	setTimeout(()=>{
		resolve('商品数据-1');
    },1000)
});
const p2 = new Promise((resolve, reject)=>{
	setTimeout(()=>{
		//resolve('商品数据– 2');
        reject('出错啦!');
	},1000)
});
//调用allsettled方法
const resul = Promise.allSettled([p1，p2]);
console.log(result);	//返回结果始终是成功的，返回的值是promise对象的值

可选链操作符

function main(config) {
  //const dbHost = config && config.db 8& config.db.host;
  const dbHost = config?.db?.host; //?. 判断前面的config是否传入，没传入则为undefined，传入之后判断是否有db再获取host
  console.log(dbHost); //192.168.1.100
}
main({
  db: {
    host: "192.168.1.100",
    username: "root",
  },
  cache: {
    host: "192.168.1.208",
    username: "admin",
  },
});

动态 import 导入

//给btn按钮绑定事件
const btn = document.getElementById('btn');
btn.onclick = function(){
	import('./hello.js').then( module => {}\
		module.hello();
	});
}

hello.js 文件

export function hello() {
  alert("Hello");
}

BigInt

//大整形
let n = 521n;
console.log(n, typeof n); //521n "bigint"
//函数
let n = 123;
console.log(BigInt(n)); //123n
console.log(BigInt(1.2)); //不能进行浮点型转换

//大数值运算
let max = Number.MAX_SAFE_INTEGER;
console.log(max); //9007199254740991
console.log(max + 1); //9007199254740992
console.log(max + 2); //9007199254740992

console.log(BigInt(max)); //9007199254740991n
console.log(BigInt(max) + BigInt(1)); //9087199254740992n
console.log(BigInt(max) + BigInt(2)); //9007199254740993n

globalThis 对象 始终指向全局对象

<!-- Knife Spring Boot 在线API文档-->
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>knife4j-spring-boot-starter</artifactId>
            <version>2.0.9</version>
        </dependency>

Controller控制器Api注解配置

类配置 :Api@Api(tags = "xxx")

方法配置 : @ApiOperation("xxx") , @ApiOperationSupport(order = 1~n)

@Slf4j
//@Lazy
@Api(tags = "3.图片管理模块")
@RestController
@RequestMapping("/album")
public class AlbumController {
    public AlbumController() {
        log.info("创建相册控制器对象.AlbumController");
    }
    @Autowired
    private IAlbumService albumService;

    public AlbumController(IAlbumService albumService) {
        log.info("创建相册控制器对象.AlbumController");
    }
    @ApiOperation("添加相册")
    @ApiOperationSupport(order = 10)
    @PostMapping("/add-new")
    public String addNew(AlbumAddNewDTO albumAddNewDTO){
         albumService.addNew(albumAddNewDTO);
    }
}

Knife4jConfiguration配置类

@Configuration
@EnableSwagger2WebMvc
public class Knife4jConfiguration {
//测试 http://localhost:9080/doc.html#/home
    /**
     * 【重要】指定Controller包路径
     */
    private String basePackage = "cn.tedu.jsdvn2203.csmall.server.controller";//导入控制器包
    /**
     * 分组名称
     */
    private String groupName = "product";
    /**
     * 主机名
     */
    private String host = "http://java.tedu.cn";
    /**
     * 标题
     */
    private String title = "酷鲨商城在线API文档--商品管理";
    /**
     * 简介
     */
    private String description = "酷鲨商城在线API文档--商品管理";
    /**
     * 服务条款URL
     */
    private String termsOfServiceUrl = "http://www.apache.org/licenses/LICENSE-2.0";
    /**
     * 联系人
     */
    private String contactName = "Java教学研发部";
    /**
     * 联系网址
     */
    private String contactUrl = "http://java.tedu.cn";
    /**
     * 联系邮箱
     */
    private String contactEmail = "java@tedu.cn";
    /**
     * 版本号
     */
    private String version = "1.0.0";

    @Autowired
    private OpenApiExtensionResolver openApiExtensionResolver;

    @Bean
    public Docket docket() {
        String groupName = "1.0.0";
        Docket docket = new Docket(DocumentationType.SWAGGER_2)
                .host(host)
                .apiInfo(apiInfo())
                .groupName(groupName)
                .select()
                .apis(RequestHandlerSelectors.basePackage(basePackage))
                .paths(PathSelectors.any())
                .build()
                .extensions(openApiExtensionResolver.buildExtensions(groupName));
        return docket;
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title(title)
                .description(description)
                .termsOfServiceUrl(termsOfServiceUrl)
                .contact(new Contact(contactName, contactUrl, contactEmail))
                .version(version)
                .build();
    }

}

命令提示符

[root@rockylinux8 ~]# #表示超级权限，当前用户是管理员/root

[rockylinux@rockylinux8 ~]$ $表示普通用户权限

[root@rockylinux8 ~] 这个格式表示[登录的账户名称@主机名 表示用户所在目录]

命令格式

命令、选项、参数之间必须有空格

执行时，命令必须有，选项和参数可有可无

选项和参数同时可以有多个

执行多个选项时，可以拼写在一起，比如ls -a -l 可以写成ls -al

执行时有多个参数，参数之间必须用空格隔开

ls /root /etc

执行时，没有选项和参数

ifconfig

目录相关的常见命令

用户管理

案例：

创建一个普通用户，使用默认值即可

useradd tom

创建一个普通用户tony，指定家目录是 /tedu/tony

useradd -d /tedu/tony tony

创建一个普通用户，指定用户的shell程序为/bin/sh ,用户Id为8000

useradd -s /bin/sh -u 8000 test1

需要注意，UID默认是有65536个(0-65535),但是可以手动指定它的UID超出此范围，超出范围后后续创建的用户不会顺延+1，但是没有超过次范围，后续创建用户默认顺延+1

修改上述uid为8000的用户，修改uid为9000

usermod -u 9000 test1

userdel test1 

执行上面的命令之后，在home目录下依然保留了test1的家目录

userdel -r test2

执行上面的命令之后,home目录中的test2目录会一并删除，且不会保留他的工作文件

passwd可以没有选项、用户名，默认是修改自己的账号密码

修改别人密码，必须具备管理员权限只能是root用户

锁定用户和删除密码都可以达到不允许账户远程登录的效果

普通用户切换root时，直接su即可

文本相关的常见命令

VIM

是一个类似vi的文本编辑器，不过在vi的基础上增加了很多新特性

vim被公认为类vi编辑器中最好用的一个

vim操作的文件如果存在，直接打开该文件，如果不存在就会创建该文件并打开

vim模式

查看模式(命令模式)、编辑模式、命令底行模式

命令模式转成命令底行模式：shift+":"

命令模式转成编辑模式：i

编辑模式转成命令模式：“Esc”

命令底行模式退出并保存修改内容: wq

命令底行模式退出不保存修改内容: q! 强制退出

命令底行模式退出并没有修改内容: q

命令模式(一般模式)

编辑模式

命令底行模式

Docker

开发运维一体化的核心技术

VMWare重量级的虚拟机：完整的虚拟了操作系统，启动速度慢，以分钟为单位，占用资源多，不适合大面积使用

Docker可以看成是轻量级的虚拟机：使用了宿主机的环境，启动速度快，以秒为单位，占用资源少，可以部署上千台

可以简化开发运维的流程

三个核心概念

image

镜像，可以看成是一堆静态文件，类比成java中类

container

容器，可以看成是从静态文件中启动的虚拟机，类比成java中的对象

repository

镜像仓库，镜像的命名由两部分组成 name:tag

如果不指定tag，默认是latest

docker使用

给大家提供的虚拟机中已经安装好docker，可以直接使用

后续安装过程，以笔记的形式下发

验证docker是否启动

docker version

docker run hello-world

执行一个镜像时，如果本地没有该镜像，就会从docker仓库中下载(https://hub.docker.com/)

镜像操作

下载镜像

docker pull centos:7

查看镜像

docker images 或
docker image ls

镜像加速

由于国内网络问题，需要配置加速器来加速，修改配置文件: /etc/docker/daemon.json，添加以下内容

{
    "registry-mirrors":["http://hub-mirror.c.163.com"]
}

之后重启服务

# 重新加载docker配置
systemctl daemon-reload
# 重启docker服务
systemctl restart docker
# 如果重启docker的命令一直为响应，我们可以执行下面的命令
# 停止docker服务
systemctl stop docker
# 启动docker服务
systemctl start docker

#如果以上命令都不生效，直接重启虚拟机

镜像导入

不需要网络了

docker load -i hello-wolrd.tar.gz
docker load < hello-wolrd.tar.gz

镜像导出

docker save centos:7 redis:6.2.6 > app.tar.gz

运行centos:7镜像

docker run -it centos:7 bash
或
docker run -it image-id bash

image-id通常写前三位，只要能区分开即可

删除镜像

只允许删除未使用的镜像

docker image rm mongo

如果想要删除正在使用的镜像需要加上 -f选项，强制删除

容器操作

启动容器

docker run -it centos:7 bash

后台运行

docker run -dit centos:7

-d 后台运行容器，容器运行的长久和-d参数无关，是和docker run指定的命令有关

查看容器

docker ps -a
或
docker container ls -a

容器详情

CONTAINER ID     容器id，用于区分不同的容器
IMAGE            启动的镜像或者镜像id                  
COMMAND          启动容器指定的命令           
CREATED          该容器创建时间   
STATUS           容器状态，up是运行，exited是终止，created创建失败的容器
NAMES            容器名称，可以通过--name指定，如果不指定自动生成

终止容器

docker container stop centos7/containerId

重新启动容器

docker container restart centos7/containerId

进入容器

docker exec -it centos7/containerId bash

删除容器

docker rm f80 

只能删除终止状态的容器，如果要删除运行状态的容器，需要加上-f参数强制删除

清理所有终止状态的容器

docker container prune

访问Docker服务

查看防火墙状态

firewall-cmd --state

如果是running说明防火墙开启，我们在Windows系统中是无法直接访问虚拟机中的服务

如果想要远处访问，我们可以选择开放服务对应的端口，或者关闭防火墙(慎做！！)

#临时关闭防火墙
systemctl stop firewalld.service
#永久关闭防火墙
systemctl disable firewalld.service

重新启动docker服务

数据库的用户名是root，密码是tarena2017Up;

访问RabbitMQ路径： 虚拟机ip:15672

rabbitMQ的用户名user，密码是123456

注意：关闭虚拟机时，选择休眠

酷鲨商城前台项目对虚拟机进行配置

修改配置文件

front

my:
  server:
    addr: 192.168.66.227

leaf

leaf.jdbc.url=jdbc:mysql://192.168.66.227:3306/leafdb?useUnicode=true&characterEncoding=utf8&useSSL=false&allowPublicKeyRetrieval=true
leaf.jdbc.username=root
leaf.jdbc.password=tarena2017Up;

order

addr: 192.168.66.227
password: tarena2017Up;

product

addr: 192.168.66.227
password: tarena2017Up;

search

addr: 192.168.66.227

seckill

addr: 192.168.66.227

password: tarena2017Up;

rabbitmq:
    host: ${my.server.addr}
    port: 5672
    username: user
    password: 123456
    virtual-host: /

sso

addr: 192.168.66.227
# 有两个密码要改!!!!
    admin
      password: tarena2017Up;
    user
      password: tarena2017Up;

在微服务架构中，一个系统往往由多个微服务组成，而这些服务可能部署在不同机房、不同地区、不同域名下。这种情况下，客户端（例如浏览器、手机、软件工具等）想要直接请求这些服务，就需要知道它们具体的地址信息，例如 IP 地址、端口号等。

这种客户端直接请求服务的方式存在以下问题：

• 当服务数量众多时，客户端需要维护大量的服务地址，这对于客户端来说，是非常繁琐复杂的。

• 在某些场景下可能会存在跨域请求的问题。

• 身份认证的难度大，每个微服务需要独立认证。

我们可以通过 API 网关来解决这些问题，下面就让我们来看看什么是 API 网关。

API 网关

API 网关是一个搭建在客户端和微服务之间的服务，我们可以在 API 网关中处理一些非业务功能的逻辑，例如权限验证、监控、缓存、请求路由等。

API 网关就像整个微服务系统的门面一样，是系统对外的唯一入口。有了它，客户端会先将请求发送到 API 网关，然后由 API 网关根据请求的标识信息将请求转发到微服务实例。 图1：两种服务访问方式对比

对于服务数量众多、复杂度较高、规模比较大的系统来说，使用 API 网关具有以下好处：

• 客户端通过 API 网关与微服务交互时，客户端只需要知道 API 网关地址即可，而不需要维护大量的服务地址，简化了客户端的开发。
• 客户端直接与 API 网关通信，能够减少客户端与各个服务的交互次数。
• 客户端与后端的服务耦合度降低。
• 节省流量，提高性能，提升用户体验。
• API 网关还提供了安全、流控、过滤、缓存、计费以及监控等 API 管理功能。

常见的 API 网关实现方案主要有以下 5 种：

• Spring Cloud Gateway
• Spring Cloud Netflix Zuul
• Kong
• Nginx+Lua
• Traefik

本节，我们就对 Spring Cloud Gateway 进行详细介绍。

Spring Cloud Gateway

Spring Cloud Gateway 是 Spring Cloud 团队基于 Spring 5.0、Spring Boot 2.0 和 Project Reactor 等技术开发的高性能 API 网关组件。

Spring Cloud Gateway 旨在提供一种简单而有效的途径来发送 API，并为它们提供横切关注点，例如：安全性，监控/指标和弹性。

Spring Cloud Gateway 是基于 WebFlux 框架实现的，而 WebFlux 框架底层则使用了高性能的 Reactor 模式通信框架 Netty。

Spring Cloud Gateway 核心概念

Spring Cloud GateWay 最主要的功能就是路由转发，而在定义转发规则时主要涉及了以下三个核心概念，如下表。

Spring Cloud Gateway 的特征

Spring Cloud Gateway 具有以下特性：

• 基于 Spring Framework 5、Project Reactor 和 Spring Boot 2.0 构建
• 能够在任意请求属性上匹配路由。
• predicates（断言） 和 filters（过滤器）是特定于路由的。
• 集成了 Hystrix 熔断器。
• 集成了 Spring Cloud DiscoveryClient（服务发现客户端）。
• 易于编写断言和过滤器。
• 能够限制请求频率。
• 能够重写请求路径。

Gateway 的工作流程

Spring Cloud Gateway 工作流程如下图。 图2：Spring Cloud Gateway 工作流程

Spring Cloud Gateway 工作流程说明如下：

1. 客户端将请求发送到 Spring Cloud Gateway 上。
2. Spring Cloud Gateway 通过 Gateway Handler Mapping 找到与请求相匹配的路由，将其发送给 Gateway Web Handler。
3. Gateway Web Handler 通过指定的过滤器链（Filter Chain），将请求转发到实际的服务节点中，执行业务逻辑返回响应结果。
4. 过滤器之间用虚线分开是因为过滤器可能会在转发请求之前（pre）或之后（post）执行业务逻辑。
5. 过滤器（Filter）可以在请求被转发到服务端前，对请求进行拦截和修改，例如参数校验、权限校验、流量监控、日志输出以及协议转换等。
6. 过滤器可以在响应返回客户端之前，对响应进行拦截和再处理，例如修改响应内容或响应头、日志输出、流量监控等。
7. 响应原路返回给客户端。

总而言之，客户端发送到 Spring Cloud Gateway 的请求需要通过一定的匹配条件，才能定位到真正的服务节点。在将请求转发到服务进行处理的过程前后（pre 和 post），我们还可以对请求和响应进行一些精细化控制。

Predicate 就是路由的匹配条件，而 Filter 就是对请求和响应进行精细化控制的工具。有了这两个元素，再加上目标 URI，就可以实现一个具体的路由了。

Predicate 断言

Spring Cloud Gateway 通过 Predicate 断言来实现 Route 路由的匹配规则。简单点说，Predicate 是路由转发的判断条件，请求只有满足了 Predicate 的条件，才会被转发到指定的服务上进行处理。

使用 Predicate 断言需要注意以下 3 点：

• Route 路由与 Predicate 断言的对应关系为“一对多”，一个路由可以包含多个不同断言。
• 一个请求想要转发到指定的路由上，就必须同时匹配路由上的所有断言。
• 当一个请求同时满足多个路由的断言条件时，请求只会被首个成功匹配的路由转发。 图3：Predicate 断言匹配

常见的 Predicate 断言如下表（假设转发的 URI 为 http://localhost:8001 ）。

示例

下面我们就通过一个实例，来演示下 Predicate 是如何使用的。