支持 Markdown 语法，拖拽或粘贴图片可自动上传

# Markdown Note System 项目设计说明 本文详细阐述了 Markdown Note System 项目的设计原理、实现方法及背后的设计哲学，旨在提供对整个系统构建思路的全面认识。 --- ## 1. 项目概述 Markdown Note System 是一个基于 Flask 框架构建的轻量级笔记管理系统。系统主要采用 Markdown 作为笔记书写格式，实现对笔记的创建、编辑、预览、自动备份等功能，同时提供图片上传和管理功能。系统以文件系统和 JSON 文件为数据存储方式，不依赖传统数据库，追求简单、灵活和高效的设计理念。 --- ## 2. 系统架构与关键技术 ### 2.1 后端架构（Flask） - **RESTful API 设计** 后端通过 REST 风格的 API 对项目、笔记和图片进行 CRUD 操作，保证前后端分离和接口统一。 - 项目和笔记数据均以 JSON 格式存储在项目目录下的 `metadata.json` 中。 - 图片信息存储在全局的 `data/images.json` 文件中。 - **文件系统存储** 所有笔记内容和项目元数据均存储在文件系统中，通过目录和文件名称进行组织。 - 每个项目对应一个目录，笔记内容保存在独立的 Markdown 文件中。 - 文件读写采用 Python 标准库 IO 操作，并对日期时间进行了序列化处理。 - **数据完整性与安全性** 系统在每次保存笔记时通过 SHA256 算法计算内容哈希，后续通过比对哈希值检测笔记内容是否被篡改。这种策略体现了对数据一致性和安全的重视。 - **跨域支持** 使用 after_request 钩子添加 CORS 头信息，保证图片等资源跨域访问的兼容性。 ### 2.2 前端设计 - **模板引擎与前端渲染** 使用 Jinja2 作为模板引擎，通过 `base.html`、`index.html`、`project_detail.html`、`note_edit.html`、`note_preview.html` 等模板实现页面动态渲染。 前端页面均以 Bootstrap 5 为基础实现响应式布局，使系统在不同设备上都能获得良好体验。 - **Markdown 编辑与实时功能** 集成 SimpleMDE 实现 Markdown 编辑器，支持拖拽与粘贴上传图片，采用实时字符统计方法提升用户交互体验。 前端同时利用 localStorage 实现自动备份，每隔一定时间存储当前编辑内容，并在页面加载时通过对比备份内容与原始内容来进行恢复操作。 - **用户交互和提示** 使用 SweetAlert2 提供交互式弹窗，用于确认删除、移动操作以及自动恢复备份等场景，极大优化了用户体验。 同时集成 MathJax 实现 LaTeX 渲染，满足用户对复杂公式排版的需求。 --- ## 3. 设计原理与系统哲学 ### 3.1 简洁性与优雅设计 - **简洁高效的系统架构** 系统抛弃传统数据库，直接使用文件系统和 JSON 文件管理数据，这种设计不仅降低了系统的复杂度，而且方便开发人员在本地环境进行调试和维护。 简洁的架构使系统易于扩展，当需求变化时也能快速集成新功能（如自动备份、图片处理）。 - **前后端分离的设计理念** 利用 REST API 架构，系统实现了前后端分离，前端通过模板引擎渲染页面，并借助现代浏览器 API 完成诸如自动备份、图片上传等功能。 这种方式鼓励模块化开发，便于后续对各个子模块的独立修改和优化。 ### 3.2 稳定与安全 - **哈希校验机制** 每次保存笔记时计算哈希，后续比对当前内容与历史哈希，保证数据未被恶意篡改，反映了系统对数据安全性的高度重视。 - **自动备份与恢复策略** 通过定时将编辑内容保存在 localStorage 中，降低因网络或意外关闭导致的数据丢失风险，体现了以用户数据安全为核心的设计思路。 ### 3.3 用户体验至上 - **极简操作界面** 利用 Bootstrap 和现代前端框架构建直观、清爽的用户界面，无论是项目管理、笔记编辑还是图片管理，都能做到操作简洁、响应迅速。 - **直观的交互反馈** 无论是笔记保存、内容篡改检测、图片上传或删除，系统都通过 SweetAlert2 弹窗及时给予用户反馈，减少用户的猜疑和不安，增强系统友好性。 ### 3.4 自由与扩展性 - **开源与自由的理念** 该系统在设计上保持高度自由，开发者和用户可以对系统进行个性化修改和扩展，不受传统闭源数据库和复杂系统架构的限制。 - **模块化设计** 每个功能模块（如笔记管理、图片管理、备份机制）都相对独立，后续新功能的增加不会造成整体系统的耦合，便于进行持续迭代和升级。 --- ## 4. 总结 Markdown Note System 的设计既注重技术实现的高效与稳定，也强调以用户为中心的体验和系统的易扩展性。从简洁的文件系统数据管理、RESTful API 的智能设计，到前端自动备份、直观提示的精细交互，每一项设计都蕴含着对“自由、简洁、优雅”系统哲学的追求。这种哲学不仅降低了系统复杂度、提高了开发效率，更为用户提供了一种轻量但功能全面的笔记管理解决方案。 这种平衡技术实现与用户体验，追求简洁与灵活的设计思路，正是现代 Web 应用开发的一种理想状态和发展方向。

笔记ID：8e3ef854-38b3-43d4-ad5d-9890c6fbb4b4

上次保存哈希：f07d83e676391a5572ab06c0fedab1c922aa30b71a4d48e152019b11d5d650d2

检测是否篡改