一位正在转型AI全栈的前端工程师-优快云博客

原创 Python知识体系概录

1.入门1.1变量和简单数据类型1.2列表1.3if 语句1.4字典1.5while 循环1.6函数1.7类2.爬虫3.数据分析

2021-11-29 09:49:21 578

原创前端进阶系列知识汇总目录

1、css世界2、js进阶系列3、网络4、浏览器5、框架篇6、性能优化7、设计模式8、工程化

2020-12-03 16:39:40 364

原创安卓app根据页面在window上快速定位代码

安卓里没有完全等价于前端「点 DOM → 看 component class」的统一机制，但有，熟练了比前端还快。核心区别是：安卓页面通常不是“一个 class 渲染出来的”，而是两部分拼起来的。

2026-10-22 10:17:09 229

原创从 0 到 1 搭建生产级 RAG 系统：切片、召回与重排序调优实录

从零到一搭建生产级 RAG 系统，不仅仅是写几行代码那么简单。本文记录了切片粒度、向量模型选择、重排序、Prompt 设计、依赖管理等关键环节的踩坑与调优。最终的系统能够准确回答书中 90% 以上的问题，上下文注入长度稳定在 1000~2000 字符，Rerank 最高分可达 0.95。希望这份实录能帮助你快速避开我走过的弯路，构建属于自己的高效 RAG 系统。如果你有任何问题或改进建议，欢迎在评论区留言交流！附录：常用命令速查pwd=6dza。

2026-08-27 15:31:57 137

原创前端转全栈：从 502 到 200，我的第一个 Docker+Nginx+Node.js 项目

作为一名做了10年前端的开发者，我一直渴望突破“纯前端”的边界。这次，我决定用 Docker + Nginx + Node.js 搭建一个完整的全栈项目：前端静态页面通过 Nginx 托管，后端 API 通过 Nginx 反向代理，三个后端容器做负载均衡。本以为半天搞定，结果在 502 和 404 的泥潭里挣扎了两天……这篇文章记录了从“一脸懵”到“curl 200 OK”的全过程，希望能帮到同样在转型路上的你。后端自测（确认后端活着）容器互测→（确认网络通）模拟请求（确认 Nginx 转发逻辑）

2026-08-27 15:28:09 217

原创 AI 全栈学习之旅 - Week4：容器化部署与生产环境实战

经过前三周的洗礼，我们的 AI 聊天应用已经从零到一具备了完整的前后端功能。但作为一名全栈工程师，让应用真正跑在公网上才是检验学习成果的最终标准。本周的任务就是将 Week3 的应用部署到云服务器，并通过自定义域名访问。这篇文章记录了我在部署过程中踩过的每一个坑，希望能帮你少走弯路。Week4 的核心收获不是学会了某个新框架，而是打通了从代码到用户的最后一公里。容器化思维：将应用及其依赖打包成标准单元，实现“一次构建，到处运行”。网络拓扑理解。

2026-08-27 15:25:32 190

原创 AI 全栈学习之旅 - Week3：前端深度开发与 SQLAlchemy 实战

在 Week2 中，我们从零搭建了一个可部署的 AI 聊天应用，实现了用户认证、多会话管理、流式输出和 Docker 容器化部署。把“能用的应用”变成“好用的产品”。引入 Element Plus UI 框架，统一界面风格增强用户交互体验（编辑、删除、搜索、导出、文件上传）实现主题切换和移动端适配深入理解 SQLAlchemy 数据库操作巩固 Python 核心语法这是 Week3 最大的收获之一。下面是我在实际项目中用到的所有数据库操作模式。python# if 条件判断。

2026-08-27 15:24:09 189

原创 AI 全栈学习之旅 - Week2：从零搭建一个可部署的 AI 聊天应用

在 Week1 中，我们完成了 Python 基础语法、FastAPI 入门和 DeepSeek API 的调用，实现了一个能在终端聊天的 AI 助手。把这个终端聊天工具，变成一个真正的 Web 应用。搭建 FastAPI 后端框架，实现用户认证和多会话管理使用 Vue 3 开发前端界面，实现组件化架构集成 WebSocket 实现实时通信使用 Docker 容器化部署。

2026-08-27 15:16:40 228

原创 AI全栈之旅 · 第一周总结

前言项目概况Day1-3：环境配置与API调用（痛苦但必要）虚拟环境：第一个拦路虎API调用：模型名称的陷阱环境变量管理Day4：前端项目搭建（从零到有）选择Vite的理由Node版本兼容问题Day5：流式输出（高光时刻）什么是SSE？跨域问题（CORS）异步生成器的坑Day6：体验优化（打磨细节）消息时间显示localStorage持久化Markdown渲染停止生成的实现Day7：数据库持久化（质的飞跃）为什么需要数据库？SQLAlchemy ORM入门安装依赖的教训数据库写入时机。

2026-08-27 15:14:21 245

原创 Spring Boot 第五周：前后端联调与项目部署实战

在第四周，我们完成了后端用户认证与 JWT 鉴权的搭建，并初始化了 Vue3 + Vite 前端项目。本周的任务是将前后端彻底打通，实现完整的用户交互流程，并添加文件上传、API 文档等实用功能，最后将项目打包部署到生产环境。Spring Security 配置、JWT 工具类、过滤器等细节请看Spring Boot 第四周：集成 Spring Security 与 JWT 鉴权实践，第五周重点学习前后端联调过程中遇到的真实问题和解决方案。

2026-07-14 14:21:16 219

原创 Spring Boot 第四周：集成 Spring Security 与 JWT 鉴权实践

在前后端分离的开发模式下，传统的 Session 认证方式已逐渐被 Token 认证取代。JWT（JSON Web Token）因其无状态、跨域友好、易于扩展等特点，成为 RESTful API 最流行的认证方案。本周我从零开始，在 Spring Boot 项目中集成了 Spring Security 和 JWT，并初始化了 Vue3 + Vite 前端项目，为前后端联调做好了准备。本文将详细记录这一过程，包括每一步的实现思路、关键代码和踩坑记录。

2026-07-13 15:16:07 323

原创 Spring Boot 第三周：Spring Boot 数据库关联与异常处理实践

在前两周完成了基础 CRUD 和三层架构后，本周我深入学习了数据库关联映射、自定义查询、性能优化（索引）以及健壮性保障（全局异常处理和参数校验）。本文将记录这一周的学习和实践过程。方法名生成的 SQL打开// 根据分类 ID 查询所有书籍理解 JPQL 和 @Query 是一种面向对象的查询语言，它操作的是实体对象和属性，而不是数据库表和字段。对比项SQLJPQL操作对象数据库表、列Java 实体类、属性表名booksBook（实体类名）列名title（属性名）

2026-07-09 15:49:26 275

原创 Spring Boot 第二周：Spring Boot CRUD 与三层架构实战

在完成了第一周的 Spring Boot 入门后，本周我深入学习了标准的三层架构（Controller → Service → Repository），引入了 DTO 数据传输对象，并实现了统一的返回格式。本文将记录这一过程，希望能给同样在学习 Spring Boot 的朋友一些参考。Controller（表现层）→ Service（业务逻辑层）→ Repository（数据访问层）层次职责类比Controller接收 HTTP 请求，调用 Service，返回响应餐厅服务员，负责接待顾客和上菜。

2026-07-02 15:33:06 260

原创 Spring Boot 第一周：从0到第一个REST API

作为一名有着10年前端经验的开发者，我决定拓展自己的技术栈，学习 Java 后端开发。本文记录了我在第一周内从零开始搭建 Spring Boot 项目、理解核心概念并成功写出第一个 REST API 的全过程。希望能给同样从零开始的朋友一些参考。第一周的学习让我完成了：✅ 搭建 Spring Boot 开发环境✅ 理解 Maven 和项目结构✅ 掌握 @RestController、@GetMapping、@PostMapping、@PutMapping 等核心注解。

2026-06-29 11:38:48 291 1

原创前端对Commands（斜杠命令）一些常用

在语境下，，指的就是，用来驱动 Claude 做。用来做：代码生成、审查、测试、提交、初始化等在终端里长这样👇。有了它，你和团队对 Claude 的使用方式会变得像 Git 命令一样稳定、可预期。

2026-05-09 17:35:11 325

原创 .claude/目录结构示例（前端）

claude/├── CLAUDE.md # Claude 行为总纲（项目级）├── review.md # 代码审查标准├── hooks.yaml # Hooks 配置（守门员）│ ├── code-reviewer.md # 代码审查子代理│ ├── type-guardian.md # 类型安全子代理│ └── component-architect.md # 组件设计子代理。

2026-05-09 17:07:20 464

原创 Claude code在Vscode编辑器中使用整理

首次运行 Claude Code 时会提示登录账户。但是也可以通过下面方法跳过此步骤。这是因为还没有配置代理+登录验证，请继续完成以下步骤。新增 Claude Code 设置文件。（Windows 系统路径为。

2026-05-08 10:32:19 494

原创 React中类组件和函数组件的理解和区别

react代码模块分为类组件和函数组件。从语法和定义、内部状态管理、生命周期、性能、可读性和维护性、上下文、集成状态管理库等角度对比React中类组件和函数组件。

2024-11-07 17:32:58 2047

原创 vue2的mixins和vue3的自定义hook整理

vue2的mixins和vue3的自定义hook整理，对比

2024-11-05 16:20:21 641

原创 Vue2和Vue3中key差异整理

因此，将key设计成用于跟踪节点的身份，是Vue3在提高渲染效率和性能方面的一个重要的优化。有效地避免DOM重排和重新渲染，提高了渲染性能，同时也可以避免出现错误的数据更新。使用key就可以精确地判断哪些节点是新增的、哪些节点是删除的。的唯一性是必须保证的，否则会导致节点身份混乱，从而导致错误的渲染结果。结点的变化，而哈希表只能通过字符串或者数字来进行快速的查找和匹配。的值来判断哪些节点是新增的、哪些节点是删除的，然后对。key的值可以是非可预测的，例如随机生成的值。的值必须具有可预测性，不能随机生成。

2024-11-05 09:24:32 734

原创 vue常用的修饰符有哪些

在Vue 中，修饰符处理了许多 DOM 事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步。的时候，子组件传递的事件名格式必须为 update:value，其中 value 必须与子组件中。自动将用户的输入值转为数值类型，但如果这个值无法被paresFloat解析，则会返回原来的值。事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给。

2024-11-01 15:52:49 924

原创 vue2 的12种 vs vue3 的9种组件通信整理

通过 this.$attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v。：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法等。把子组件的数据通过插槽的方式传给父组件使用，然后再插回来。可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后。如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过。把子组件的数据通过插槽的方式传给父组件使用，然后再插回来。

2024-10-31 10:16:37 1224 1

原创 vue2和vue3的数据双向绑定差异整理

劫持的是对象中每一个属性。由于使用发布-订阅模式，当数据变化时，所有订阅者都需要被通知，这可能导致性能问题，尤其是在大型应用中。参数一： target:劫持对象，参数二：prop:劫持对象属性 , 参数三：vaule:新的属性值, p:本身。参数一： obj:劫持对象，参数二："name":劫持对象属性 , 参数三：给属性添加set,get方法。对象以及对象属性的劫持+发布订阅模式来实现双向数据绑定。将用户输入的数据赋值于变量的时间有输入时延迟到数据改变时。劫持的是对象中每一个属性。2.2、子组件中使用。

2024-10-30 09:12:23 713

原创 vue2与vue3生命周期差异整理

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。这些新增和改进的生命周期钩子函数使得 Vue 3 的开发更加高效和便捷。() 函数中，我们可以直接访问组件的实例属性和方法，以及通过。钩子函数会在组件的渲染跟踪列表中触发，可以用于优化渲染性能。钩子函数合并为了一个。

2024-10-29 15:03:35 1158

原创 electron有关mac构建

执行下面命令，检查下按照的 node.js 版本是不是 intel x64 指令集，如果是的话安装下 arm64 指令集的 node.js终端中执行以下命令：node -p process.arch。针对 Mac M1/2/3 芯片的设备，proces.arch=arm64.勾选以 Rosetta 打开（Open using Rosetta）。右键点击终端应用并选择获取简介（Get Info）。在 Rosetta 终端中安装nvm与 Node.js。打开应用程序文件夹中的终端应用。

2024-09-11 11:46:54 1106

原创 js有关深度优先遍历和广度优先遍历

‌当节点v的所有边都已访问，‌或者没有未被访问的边时，‌DFS会回溯到发现节点v的节点，‌继续搜索其他路径。则是另一种图遍历算法，‌它从图的某一节点（‌源或起始节点）‌出发，‌探索所有相邻的节点，‌然后对这些相邻节点的未被访问的邻接节点进行探索，‌直到所有可达的节点都被访问。‌BFS按层次顺序进行搜索，‌首先访问离起始节点最近的节点，‌然后逐渐向外扩展到更远的节点。‌深度优先遍历适合用于寻找图中是否存在环或者特定路径的情况，‌而广度优先遍历则更适合于寻找最短路径或者需要遍历图中所有可达节点的情况。

2024-07-19 18:30:25 543

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

WebKit技术内幕高清全书441页

逸岛旅游网代码

网站设计解构：有效的交互设计框架和模式

空空如也