MirkoRinke/devnotes

# 🚀 DevNotes – 全栈开发文档 **状态：** 🚧 **积极开发中 (Pre-MVP)** 该项目是一个“正在进行的工作”，尚未达到最小可行性产品 (MVP) 状态。我目前正利用它来记录自己从纯前端开发者向全栈领域的转型，并在这一过程中探索新的技术领域。 

社区流程可视化：从社区中心的入口到最终的技术帖子视图。

### 💡 关于本项目与我的学习之旅 在深度专注于前端设计之后，*DevNotes* 标志着我的**首个独立全栈项目**。它反映了我在过去几个月里的成长： * **入门系统逻辑：** 使用 Laravel 构思自定义 REST API，并操作关系型数据库 (MySQL)。 * **专注安全与结构：** 实现 Rate-Limiting 和 API-Key 验证等安全机制，以构建健壮的应用程序。 * **Angular 中的可复用性：** 深化模块化模式，通过动态路由灵活地将组件用于不同的任务。 ### 🛠️ 基础设施与透明度 为了在真实的条件下测试应用程序，我运行了自己的**本地服务器环境**： * **部分容器化：** 后端 (API) 和数据库已完全 **Dockerized**，实现了现代数据管理工作流。前端目前以原生方式运行 (`ng serve`)，以在开发过程中保持较高的迭代速度。 * **硬件基础：** 这些服务运行在专用的 **ThinClient** 上，作为我的私人开发服务器。 * **当前进度：** 由于该项目经历了较长时间的演进，代码记录了我个人的学习曲线。与其说它是一个成品，不如说它是为了透明地展示我**目前在系统性解决问题方面的能力**。 🎨 [**前端仓库 (Angular)**](https://github.com/MirkoRinke/devnotes_frontend) ### 📘 概念与基础 * **起源 (v1.0)：** 我最初的项目——一个用于理解 HTML、CSS 和 JavaScript 的个人知识库。 * **演进 (v2.0)：** 完全重构为一个现代的全栈枢纽，以在专业的结构中应用所学的概念。 * **核心效用：** 开发者的“第二大脑”和交流枢纽。 * **社区与隐私：** 结合公共交流与私人笔记的混合模式。 * **技术栈：** Angular 前端，Laravel REST-API，MySQL，以及用于语法高亮的 Prism.js。 ### ⚙️ 后端逻辑与安全 * **安全层：** * **API 保护：** X-API-Key 验证和 Rate Limiting。 * **身份验证：** Laravel Sanctum (Bearer-Token) 结合设备指纹识别系统。 * **合规性：** 自动检查隐私政策同意情况，并集成 token 管理。 * **功能：** * **交互：** 帖子的 CRUD 操作，Like/Favorite 系统以及 Follower 逻辑。 * **内容审核：** 敏感词过滤和用于跟踪更改的 Audit Logs。 * **特殊服务：** GuestAccountService（例如用于测试访问）和受控的帖子阅读跟踪。 * **动态过滤：** 使用 Custom Trait 通过 URL 参数直接进行复杂的数据库查询（包括关系的 Dot-Notation）。 ### 🎨 前端与导航概念 * **Angular 服务：** * **中心 API 包装器：** 统一的 endpoint 处理和自动化的 Auth-Header 注入。 * **SVG & i18n 服务：** 集中的图标管理和用于语言切换的自定义 pipe (DE/EN)。 * **引导流程：** * 策略性地引导用户从技术选择过渡到内容类型，再到结果列表。 * **混合搜索：** 在单个输入框中智能区分标题搜索和 hashtag 搜索 (`#tag`)。 * **循环导航：** “向后跳转”会保留活动的过滤器，以支持“Deep Work”流程。 ### 📘 详情视图与资源保护 * **帖子管理：** * **版本控制：** 通过时间戳下拉菜单访问帖子的历史版本。 * **上下文菜单：** 基于用户角色的动态选项（所有者可编辑/删除，访客可举报）。 * **内容呈现：** * **交互式框：** 用于描述和代码的独立区域，具备 **Expand/Collapse** 和 **Copy-to-Clipboard** 功能。 * **资源安全门：** * 外部资源（图像/视频）仅在明确同意后加载，以保护用户隐私 (**Privacy-by-Design**)。 * **同意模态框：** 用户可以通过用户设置临时（1小时、12小时、24小时）或永久解锁内容。 ### ✍️ 内容管理 (编辑器) * **就地编辑 (WIP)：** * 直接在最终布局 (WYSIWYG) 中进行编辑，以获得即时的视觉反馈。 * **智能代码块：** 获得焦点时切换为 `textarea`，失去焦点时立即重新渲染语法高亮。 * **技术协同：** * **响应式表单：** 前端结构映射后端 API body，确保无需复杂映射即可实现无错误的数据传输。 * **验证：** 前端 (Angular) 和后端 (Laravel) 之间的验证逻辑保持同步。 ### 🚀 结构与模块化逻辑 * **通用工作流：** * 通过在 URL 中一致地使用参数（`context` 和 `endPoint`），同一个组件可以用于完全不同的部分。 * **示例：** 只需更改参数，`posts-list?context=community&endPoint=POSTS` 就可以转化为个人的收藏列表或帖子管理视图。 * **路线图 (展望)：** * 将现有的后端评论区集成到前端。 * 扩展用户个人资料和社交互动（Activity Feeds）。 * 完成编辑器内的媒体管理。

标签：API鉴权, Docker, Laravel, RESTful API, Syscall, Web开发, 后端开发, 安全防御评估, 提示词优化, 请求拦截