tutorial.html•47.2 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用教程 - Memory Bank</title>
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">Memory Bank MCP 服务器</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">项目管理</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="tutorial.html">使用教程</a>
</li>
<li class="nav-item">
<a class="nav-link" href="api.html">API 文档</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">关于</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-lg-3">
<div class="sticky-top pt-4">
<div class="list-group">
<a href="#intro" class="list-group-item list-group-item-action">教程简介</a>
<a href="#setup" class="list-group-item list-group-item-action">环境设置</a>
<a href="#van" class="list-group-item list-group-item-action">VAN 模式 - 项目初始化</a>
<a href="#plan" class="list-group-item list-group-item-action">PLAN 模式 - 计划制定</a>
<a href="#creative" class="list-group-item list-group-item-action">CREATIVE 模式 - 创意构思</a>
<a href="#implement" class="list-group-item list-group-item-action">IMPLEMENT 模式 - 实施开发</a>
<a href="#reflect" class="list-group-item list-group-item-action">REFLECT 模式 - 回顾反思</a>
<a href="#archive" class="list-group-item list-group-item-action">ARCHIVE 模式 - 归档整理</a>
<a href="#workflow" class="list-group-item list-group-item-action">完整工作流程</a>
<a href="#cursor-config" class="list-group-item list-group-item-action">Cursor配置教程</a>
<a href="#springboot-example" class="list-group-item list-group-item-action">SpringBoot示例</a>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card shadow-sm mb-5">
<div class="card-body">
<h1 class="mb-4">Memory Bank 使用教程</h1>
<section id="intro" class="mb-5">
<h2>教程简介</h2>
<p>Memory Bank MCP服务器是一个符合MCP(Model Context Protocol)协议的服务器，用于管理Markdown格式的项目文档和规则。本教程将指导您如何使用Memory Bank的核心功能，包括项目管理、文档编辑以及遵循标准工作流程进行项目开发。</p>
<p>Memory Bank采用一套结构化的工作流模式，从项目验证初始化(VAN)到最终归档整理(ARCHIVE)，形成一个完整的项目生命周期管理体系。</p>
</section>
<section id="setup" class="mb-5">
<h2>环境设置</h2>
<p>在开始使用Memory Bank之前，请确保您已经完成以下准备工作：</p>
<ol>
<li>安装Node.js (推荐版本 16.x 或更高)</li>
<li>克隆Memory Bank MCP服务器仓库</li>
<li>运行 <code>npm install</code> 安装依赖</li>
<li>运行 <code>npm start</code> 启动服务器</li>
</ol>
<div class="alert alert-info">
<strong>提示：</strong> 服务器成功启动后，您可以通过浏览器访问 <code>http://localhost:3000</code> 来使用Web界面。
</div>
</section>
<section id="van" class="mb-5">
<h2>VAN 模式 - 项目初始化</h2>
<p>VAN模式用于项目验证与初始化，确保项目基础设施完备，验证关键文件存在性和完整性。</p>
<h4>核心功能：</h4>
<ul>
<li>初始化新项目或验证现有项目状态</li>
<li>检查核心文档的完整性</li>
<li>确认项目设置正确</li>
<li>创建缺失的必要文件</li>
</ul>
<h4>使用示例：</h4>
<div class="code-example">
<pre><code class="language-javascript">// 初始化新项目
{
"name": "van_init",
"arguments": {
"projectName": "我的项目", // 可选，如不提供则使用默认项目名
"description": "这是一个测试项目" // 可选
}
}
// 验证现有项目状态
{
"name": "van_verify",
"arguments": {
"projectId": "project-id-123"
}
}</code></pre>
</div>
<div class="alert alert-success">
<strong>关键步骤：</strong> 在VAN阶段，确保创建项目并验证所有必要的核心文档已存在，如projectbrief.md、tasks.md、activeContext.md等。
</div>
</section>
<section id="plan" class="mb-5">
<h2>PLAN 模式 - 计划制定</h2>
<p>PLAN模式用于计划制定与任务分解，明确项目目标，并将项目分解为可管理的任务。</p>
<h4>核心功能：</h4>
<ul>
<li>定义项目范围和边界</li>
<li>将项目分解为可管理的任务</li>
<li>估算工作量和设置期限</li>
<li>确定任务优先级和依赖关系</li>
</ul>
<h4>使用示例：</h4>
<div class="code-example">
<pre><code class="language-javascript">// 获取任务列表
{
"name": "plan_get_tasks",
"arguments": {
"projectId": "project-id-123"
}
}
// 添加新任务
{
"name": "plan_add_task",
"arguments": {
"projectId": "project-id-123",
"task": "实现用户认证功能",
"priority": "high",
"deadline": "2023-12-31"
}
}</code></pre>
</div>
<div class="alert alert-success">
<strong>关键步骤：</strong> 在PLAN阶段，专注于任务分解和优先级设定，确保tasks.md文档中包含完整的任务列表。
</div>
</section>
<section id="creative" class="mb-5">
<h2>CREATIVE 模式 - 创意构思</h2>
<p>CREATIVE模式专注于创意构思和方案设计，探索不同解决方案的可行性。</p>
<h4>核心功能：</h4>
<ul>
<li>头脑风暴解决方案</li>
<li>评估不同技术方案</li>
<li>设计系统架构</li>
<li>原型设计与验证</li>
</ul>
<h4>使用示例：</h4>
<div class="code-example">
<pre><code class="language-javascript">// 添加创意记录
{
"name": "creative_add_idea",
"arguments": {
"projectId": "project-id-123",
"title": "移动端适配方案",
"content": "使用响应式设计 + 特定断点优化",
"tags": ["设计", "移动端", "UI"]
}
}
// 获取创意列表
{
"name": "creative_get_ideas",
"arguments": {
"projectId": "project-id-123",
"tag": "设计" // 可选，按标签筛选
}
}</code></pre>
</div>
<div class="alert alert-success">
<strong>关键步骤：</strong> 在CREATIVE阶段，记录和整理创意方案，并更新systemPatterns.md文档，记录系统设计决策。
</div>
</section>
<section id="implement" class="mb-5">
<h2>IMPLEMENT 模式 - 实施开发</h2>
<p>IMPLEMENT模式用于项目实施和代码开发，跟踪开发进度并更新任务状态。</p>
<h4>核心功能：</h4>
<ul>
<li>代码开发和功能实现</li>
<li>单元测试和集成测试</li>
<li>进度跟踪和状态更新</li>
<li>解决实施过程中的问题</li>
</ul>
<h4>使用示例：</h4>
<div class="code-example">
<pre><code class="language-javascript">// 更新任务进度
{
"name": "implement_update_progress",
"arguments": {
"projectId": "project-id-123",
"taskId": "task-789",
"status": "in_progress",
"completion": 60 // 百分比
}
}
// 记录实现细节
{
"name": "implement_add_note",
"arguments": {
"projectId": "project-id-123",
"title": "用户认证实现",
"content": "使用JWT进行身份验证，令牌有效期设置为24小时...",
"relatedTasks": ["task-789"]
}
}</code></pre>
</div>
<div class="alert alert-success">
<strong>关键步骤：</strong> 在IMPLEMENT阶段，实时更新activeContext.md文档，记录开发进度和实现细节，同时更新任务状态。
</div>
</section>
<section id="reflect" class="mb-5">
<h2>REFLECT 模式 - 回顾反思</h2>
<p>REFLECT模式用于项目回顾和反思，总结经验教训，并规划改进措施。</p>
<h4>核心功能：</h4>
<ul>
<li>分析项目成功与失败因素</li>
<li>识别瓶颈和问题点</li>
<li>总结经验教训</li>
<li>制定改进计划</li>
</ul>
<h4>使用示例：</h4>
<div class="code-example">
<pre><code class="language-javascript">// 创建反思记录
{
"name": "reflect_create",
"arguments": {
"projectId": "project-id-123",
"title": "第一阶段回顾",
"content": "# 第一阶段回顾\n\n## 成功之处\n- 按时完成了核心功能\n\n## 问题\n- 测试覆盖率不足\n\n## 改进措施\n- 增加单元测试"
}
}
// 获取历史反思记录
{
"name": "reflect_get_history",
"arguments": {
"projectId": "project-id-123",
"limit": 5 // 可选，最多返回记录数
}
}</code></pre>
</div>
<div class="alert alert-success">
<strong>关键步骤：</strong> 在REFLECT阶段，记录项目反思，分析问题和成功因素，同时更新progress.md文档，记录项目进展。
</div>
</section>
<section id="archive" class="mb-5">
<h2>ARCHIVE 模式 - 归档整理</h2>
<p>ARCHIVE模式用于项目归档和知识沉淀，整理项目文档，归档完成的任务和总结项目成果。</p>
<h4>核心功能：</h4>
<ul>
<li>归档已完成任务</li>
<li>整理项目文档</li>
<li>生成项目总结报告</li>
<li>导出项目交付物</li>
</ul>
<h4>使用示例：</h4>
<div class="code-example">
<pre><code class="language-javascript">// 归档已完成任务
{
"name": "archive_completed_tasks",
"arguments": {
"projectId": "project-id-123",
"destination": "completed_tasks.md" // 可选，归档目标文件
}
}
// 生成项目总结报告
{
"name": "archive_generate_summary",
"arguments": {
"projectId": "project-id-123",
"title": "项目总结报告",
"includeSections": ["overview", "achievements", "challenges", "lessons"] // 可选
}
}</code></pre>
</div>
<div class="alert alert-success">
<strong>关键步骤：</strong> 在ARCHIVE阶段，归档已完成任务，生成项目总结报告，沉淀项目知识，方便未来参考。
</div>
</section>
<section id="workflow" class="mb-5">
<h2>完整工作流程方法</h2>
<p>下面是一个从VAN到ARCHIVE的完整工作流程方法，帮助您理解如何在实际项目中应用这些模式：</p>
<div class="card mb-4">
<div class="card-header bg-primary text-white">
工作流程：VAN → PLAN → CREATIVE → IMPLEMENT → REFLECT → ARCHIVE
</div>
<div class="card-body">
<ol>
<li class="mb-3">
<strong>VAN - 项目初始化</strong>
<ul>
<li>使用<code>van_init</code>创建新项目</li>
<li>使用<code>van_verify</code>确认核心文档已创建</li>
<li>在projectbrief.md中定义项目基本信息</li>
</ul>
</li>
<li class="mb-3">
<strong>PLAN - 任务规划</strong>
<ul>
<li>分析项目需求，确定项目范围</li>
<li>使用<code>plan_add_task</code>添加项目任务</li>
<li>设置任务优先级和截止日期</li>
<li>检查并审核任务列表的完整性</li>
</ul>
</li>
<li class="mb-3">
<strong>CREATIVE - 方案设计</strong>
<ul>
<li>头脑风暴解决方案和设计思路</li>
<li>使用<code>creative_add_idea</code>记录创意构思</li>
<li>评估不同方案的可行性</li>
<li>确定最终技术方案和系统架构</li>
<li>更新systemPatterns.md记录设计决策</li>
</ul>
</li>
<li class="mb-3">
<strong>IMPLEMENT - 实施开发</strong>
<ul>
<li>按照任务优先级开始开发</li>
<li>使用<code>implement_update_progress</code>更新任务进度</li>
<li>使用<code>implement_add_note</code>记录实现细节</li>
<li>实时更新activeContext.md反映当前工作状态</li>
<li>进行单元测试和功能验证</li>
</ul>
</li>
<li class="mb-3">
<strong>REFLECT - 回顾反思</strong>
<ul>
<li>项目里程碑或阶段性完成后进行回顾</li>
<li>使用<code>reflect_create</code>记录项目反思</li>
<li>分析成功因素和存在问题</li>
<li>总结经验教训和改进措施</li>
<li>更新progress.md记录项目进展</li>
</ul>
</li>
<li class="mb-3">
<strong>ARCHIVE - 归档整理</strong>
<ul>
<li>使用<code>archive_completed_tasks</code>归档完成任务</li>
<li>使用<code>archive_generate_summary</code>生成项目总结报告</li>
<li>使用<code>archive_export_project</code>导出项目文档</li>
<li>整理项目资料，确保知识沉淀</li>
<li>总结项目经验，为未来项目提供参考</li>
</ul>
</li>
</ol>
</div>
</div>
<div class="alert alert-warning">
<strong>注意：</strong> 实际项目中，这些模式可能会交替使用或迭代执行，不必严格按照线性顺序。根据项目特点和进展情况灵活应用每个模式。
</div>
</section>
<section id="cursor-config" class="mb-5">
<h2>Cursor中的配置教程</h2>
<p>Cursor是一个强大的代码编辑器，集成了AI辅助功能，可以与Memory Bank MCP服务器无缝协作。本节将介绍如何在Cursor中配置Memory Bank，以实现高效的项目管理和代码开发。</p>
<h4>配置步骤</h4>
<div class="card mb-4">
<div class="card-header bg-primary text-white">
在Cursor中设置Memory Bank MCP服务器
</div>
<div class="card-body">
<ol>
<li class="mb-3">
<strong>启动Memory Bank服务器</strong>
<p>确保Memory Bank MCP服务器已经启动并运行在默认端口（通常是3000端口）。</p>
<div class="code-example">
<pre><code class="language-bash">cd memory-bank-mcp-server
npm start</code></pre>
</div>
</li>
<li class="mb-3">
<strong>在Cursor中创建项目配置</strong>
<p>在Cursor中打开你的项目根目录，创建一个<code>.cursor</code>文件夹（如果不存在）。</p>
</li>
<li class="mb-3">
<strong>创建Memory Bank配置文件</strong>
<p>在<code>.cursor</code>目录中创建<code>memory-bank.json</code>文件，添加以下配置：</p>
<div class="code-example">
<pre><code class="language-json">{
"serverUrl": "http://localhost:3000",
"projectId": "your-project-id", // 你的项目ID，可在创建项目后获取
"autoSync": true,
"workingMode": "implement", // 当前工作模式，可选: van, plan, creative, implement, reflect, archive
"editorIntegration": {
"enabled": true,
"contextMenuEnabled": true,
"statusBarEnabled": true
}
}</code></pre>
</div>
</li>
<li class="mb-3">
<strong>创建项目关联文件</strong>
<p>在<code>.cursor</code>目录中创建<code>memory-bank-project.md</code>文件，用于将项目信息与代码库关联：</p>
<div class="code-example">
<pre><code class="language-markdown"># Memory Bank 项目关联
项目ID: your-project-id
项目名称: 你的项目名称
服务器: http://localhost:3000
## 快速访问链接
- [项目概览](http://localhost:3000/projects/your-project-id)
- [任务列表](http://localhost:3000/projects/your-project-id/documents/tasks)
- [当前上下文](http://localhost:3000/projects/your-project-id/documents/activeContext)
</code></pre>
</div>
</li>
<li class="mb-3">
<strong>配置AI助手设置</strong>
<p>在Cursor中，打开设置面板，找到"AI Assistant"部分，配置自定义指令以集成Memory Bank：</p>
<div class="code-example">
<pre><code class="language-text">你是一个与Memory Bank MCP服务器集成的AI编码助手。
当用户询问相关任务或请求帮助时，请执行以下操作：
1. 检查当前项目的Memory Bank文档，特别是activeContext.md和tasks.md
2. 基于项目文档提供相关的上下文和帮助
3. 在生成代码或解决方案时，确保遵循项目中定义的系统架构和技术上下文
如果需要查询Memory Bank文档，请使用以下API：
- GET http://localhost:3000/api/projects/{projectId}/documents/activeContext
- GET http://localhost:3000/api/projects/{projectId}/documents/tasks
- GET http://localhost:3000/api/projects/{projectId}/documents/systemPatterns
</code></pre>
</div>
</li>
</ol>
</div>
</div>
<h4>在Cursor中使用Memory Bank</h4>
<p>配置完成后，你可以在Cursor中使用以下功能：</p>
<div class="card mb-4">
<div class="card-body">
<ul>
<li class="mb-2"><strong>访问项目上下文</strong> - 在Cursor中右键点击，选择"Memory Bank" > "查看当前上下文"</li>
<li class="mb-2"><strong>更新任务状态</strong> - 在代码注释中使用特殊标记：<code>// MB:TASK-UPDATE: 任务ID, 状态, 进度</code></li>
<li class="mb-2"><strong>添加反思记录</strong> - 在代码中添加注释：<code>// MB:REFLECT: 标题, 内容</code></li>
<li class="mb-2"><strong>同步代码更改</strong> - 使用命令面板执行"Memory Bank: Sync Changes"命令</li>
<li class="mb-2"><strong>快速导航</strong> - 使用状态栏上的Memory Bank图标访问项目文档</li>
</ul>
</div>
</div>
<div class="alert alert-info">
<strong>提示：</strong> 当你的工作模式变化时，记得更新<code>memory-bank.json</code>中的<code>workingMode</code>设置，以便Cursor中的AI助手能够提供最相关的帮助。
</div>
</section>
<section id="springboot-example" class="mb-5">
<h2>SpringBoot用户管理功能示例</h2>
<p>本节将展示如何使用Memory Bank MCP服务器和Cursor来开发一个基于SpringBoot的用户管理功能，包括前后端代码实现。通过这个示例，你将看到Memory Bank如何帮助你在开发过程中管理项目文档和任务。</p>
<h4>需求描述</h4>
<div class="alert alert-primary mb-4">
<p class="mb-1"><strong>用户管理系统需求：</strong></p>
<ol>
<li>实现用户注册、登录和注销功能</li>
<li>实现用户信息的CRUD操作</li>
<li>实现用户权限管理</li>
<li>前端使用Vue.js构建用户界面</li>
<li>后端使用SpringBoot + Spring Security + JPA</li>
<li>数据库使用MySQL</li>
</ol>
</div>
<h4>步骤1: VAN - 项目初始化</h4>
<div class="card mb-4">
<div class="card-header bg-primary text-white">
在Cursor中创建项目并初始化Memory Bank
</div>
<div class="card-body">
<p>首先，我们创建一个新项目，并在Memory Bank中进行初始化：</p>
<div class="code-example">
<pre><code class="language-text">// 在Cursor的AI面板中输入
VAN: 初始化项目，创建一个新的SpringBoot用户管理系统项目</code></pre>
</div>
<p>AI助手将会：</p>
<ol>
<li>创建一个新的SpringBoot项目</li>
<li>初始化基本项目结构</li>
<li>创建.cursor目录和Memory Bank配置</li>
<li>调用Memory Bank API创建新项目</li>
</ol>
<p>项目结构示例：</p>
<div class="code-example">
<pre><code class="language-text">user-management/
├── .cursor/
│ ├── memory-bank.json
│ └── memory-bank-project.md
├── src/
│ ├── main/
│ │ ├── java/com/example/usermanagement/
│ │ │ ├── UserManagementApplication.java
│ │ │ ├── controller/
│ │ │ ├── model/
│ │ │ ├── repository/
│ │ │ └── service/
│ │ └── resources/
│ │ ├── application.properties
│ │ ├── static/
│ │ └── templates/
│ └── test/
├── pom.xml
└── README.md</code></pre>
</div>
</div>
</div>
<h4>步骤2: PLAN - 任务规划</h4>
<div class="card mb-4">
<div class="card-header bg-primary text-white">
制定项目计划和任务分解
</div>
<div class="card-body">
<p>接下来，我们在Cursor中向AI助手描述需要制定的计划：</p>
<div class="code-example">
<pre><code class="language-text">// 在Cursor的AI面板中输入
PLAN: 为用户管理系统制定详细的开发计划和任务分解</code></pre>
</div>
<p>AI助手会帮助创建任务列表并更新到Memory Bank的tasks.md文档中：</p>
<div class="code-example">
<pre><code class="language-markdown"># 用户管理系统任务清单
## 后端开发任务
- [ ] [高] 设计用户数据模型和数据库表
- [ ] [高] 实现用户注册和登录API
- [ ] [中] 实现用户CRUD操作API
- [ ] [中] 添加Spring Security配置
- [ ] [中] 实现权限控制和角色管理
- [ ] [低] 添加API文档（使用Swagger）
- [ ] [低] 实现日志记录和监控
## 前端开发任务
- [ ] [高] 创建Vue项目结构
- [ ] [高] 设计用户界面组件
- [ ] [高] 实现登录和注册页面
- [ ] [中] 实现用户管理页面
- [ ] [中] 实现权限控制UI
- [ ] [低] 添加数据验证
- [ ] [低] 优化用户体验和响应式设计
## 测试任务
- [ ] [高] 编写单元测试
- [ ] [中] 编写集成测试
- [ ] [中] 执行API测试
- [ ] [低] 执行性能测试
## 部署任务
- [ ] [低] 准备部署文档
- [ ] [低] 配置CI/CD流程
- [ ] [低] 部署到测试环境
</code></pre>
</div>
</div>
</div>
<h4>步骤3: CREATIVE - 系统设计</h4>
<div class="card mb-4">
<div class="card-header bg-primary text-white">
设计系统架构和技术选型
</div>
<div class="card-body">
<p>在这一阶段，我们通过Cursor中的AI助手进行系统设计：</p>
<div class="code-example">
<pre><code class="language-text">// 在Cursor的AI面板中输入
CREATIVE: 设计用户管理系统的架构，包括技术选型和数据模型</code></pre>
</div>
<p>AI助手会帮助创建系统架构文档并更新到Memory Bank中：</p>
<div class="code-example">
<pre><code class="language-markdown"># 用户管理系统架构设计
## 技术栈
- 后端：Spring Boot 3.0, Spring Security, Spring Data JPA
- 前端：Vue.js 3, Axios, Vuex/Pinia, Element Plus
- 数据库：MySQL 8.0
- 构建工具：Maven (后端), npm (前端)
- 文档：Swagger/OpenAPI
## 系统架构
- 前后端分离架构
- RESTful API设计
- JWT认证机制
- 分层架构（控制层、服务层、数据访问层）
## 数据模型
### User 实体
```java
@Entity
@Table(name = "users")
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false, unique = true)
private String username;
@Column(nullable = false)
private String password;
@Column(nullable = false, unique = true)
private String email;
@Column(name = "full_name")
private String fullName;
@Column(name = "created_at")
private LocalDateTime createdAt;
@Column(name = "updated_at")
private LocalDateTime updatedAt;
@ManyToMany(fetch = FetchType.EAGER)
@JoinTable(
name = "user_roles",
joinColumns = @JoinColumn(name = "user_id"),
inverseJoinColumns = @JoinColumn(name = "role_id")
)
private Set<Role> roles = new HashSet<>();
// getters, setters, etc.
}
```
### Role 实体
```java
@Entity
@Table(name = "roles")
public class Role {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Enumerated(EnumType.STRING)
@Column(nullable = false, unique = true)
private ERole name;
// getters, setters, etc.
}
public enum ERole {
ROLE_USER,
ROLE_MODERATOR,
ROLE_ADMIN
}
```
## API设计
- POST /api/auth/signup - 用户注册
- POST /api/auth/signin - 用户登录
- POST /api/auth/signout - 用户注销
- GET /api/users - 获取用户列表
- GET /api/users/{id} - 获取用户详情
- PUT /api/users/{id} - 更新用户信息
- DELETE /api/users/{id} - 删除用户
- GET /api/users/profile - 获取当前用户信息
- PUT /api/users/profile - 更新当前用户信息
</code></pre>
</div>
</div>
</div>
<h4>步骤4: IMPLEMENT - 实现后端代码</h4>
<div class="card mb-4">
<div class="card-header bg-primary text-white">
实现用户管理后端代码
</div>
<div class="card-body">
<p>现在，我们通过Cursor实现后端API：</p>
<div class="code-example">
<pre><code class="language-text">// 在Cursor的AI面板中输入
IMPLEMENT: 实现用户实体类、仓库接口和服务类</code></pre>
</div>
<p>AI助手会帮助实现相应的代码，下面是示例代码：</p>
<p><strong>用户实体类 (User.java):</strong></p>
<div class="code-example">
<pre><code class="language-java">package com.example.usermanagement.model;
import jakarta.persistence.*;
import java.time.LocalDateTime;
import java.util.HashSet;
import java.util.Set;
@Entity
@Table(name = "users")
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false, unique = true)
private String username;
@Column(nullable = false)
private String password;
@Column(nullable = false, unique = true)
private String email;
@Column(name = "full_name")
private String fullName;
@Column(name = "created_at")
private LocalDateTime createdAt;
@Column(name = "updated_at")
private LocalDateTime updatedAt;
@ManyToMany(fetch = FetchType.EAGER)
@JoinTable(
name = "user_roles",
joinColumns = @JoinColumn(name = "user_id"),
inverseJoinColumns = @JoinColumn(name = "role_id")
)
private Set<Role> roles = new HashSet<>();
@PrePersist
protected void onCreate() {
createdAt = LocalDateTime.now();
updatedAt = LocalDateTime.now();
}
@PreUpdate
protected void onUpdate() {
updatedAt = LocalDateTime.now();
}
// Getters and setters
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
// ... 其他getter和setter
}
</code></pre>
</div>
<p><strong>用户仓库接口 (UserRepository.java):</strong></p>
<div class="code-example">
<pre><code class="language-java">package com.example.usermanagement.repository;
import com.example.usermanagement.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.Optional;
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
Optional<User> findByUsername(String username);
Optional<User> findByEmail(String email);
Boolean existsByUsername(String username);
Boolean existsByEmail(String email);
}
</code></pre>
</div>
<p><strong>用户服务接口和实现 (UserService.java):</strong></p>
<div class="code-example">
<pre><code class="language-java">package com.example.usermanagement.service;
import com.example.usermanagement.model.User;
import java.util.List;
import java.util.Optional;
public interface UserService {
List<User> findAllUsers();
Optional<User> findById(Long id);
Optional<User> findByUsername(String username);
Optional<User> findByEmail(String email);
User saveUser(User user);
void deleteUser(Long id);
boolean existsByUsername(String username);
boolean existsByEmail(String email);
}
</code></pre>
</div>
<div class="code-example">
<pre><code class="language-java">package com.example.usermanagement.service.impl;
import com.example.usermanagement.model.User;
import com.example.usermanagement.repository.UserRepository;
import com.example.usermanagement.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Optional;
@Service
public class UserServiceImpl implements UserService {
private final UserRepository userRepository;
@Autowired
public UserServiceImpl(UserRepository userRepository) {
this.userRepository = userRepository;
}
@Override
public List<User> findAllUsers() {
return userRepository.findAll();
}
@Override
public Optional<User> findById(Long id) {
return userRepository.findById(id);
}
@Override
public Optional<User> findByUsername(String username) {
return userRepository.findByUsername(username);
}
@Override
public Optional<User> findByEmail(String email) {
return userRepository.findByEmail(email);
}
@Override
public User saveUser(User user) {
return userRepository.save(user);
}
@Override
public void deleteUser(Long id) {
userRepository.deleteById(id);
}
@Override
public boolean existsByUsername(String username) {
return userRepository.existsByUsername(username);
}
@Override
public boolean existsByEmail(String email) {
return userRepository.existsByEmail(email);
}
}
</code></pre>
</div>
</div>
</div>
<h4>步骤5: REFLECT - 项目回顾</h4>
<div class="card mb-4">
<div class="card-header bg-primary text-white">
项目回顾与总结
</div>
<div class="card-body">
<p>完成主要功能后，我们进行项目回顾：</p>
<div class="code-example">
<pre><code class="language-text">// 在Cursor的AI面板中输入
REFLECT: 帮我回顾项目实现，总结经验和改进点</code></pre>
</div>
<p>AI助手会帮助总结经验并更新到Memory Bank的reflections.md文档：</p>
<div class="code-example">
<pre><code class="language-markdown"># 用户管理系统开发回顾
## 成功之处
- 成功实现了用户注册、登录和基本CRUD功能
- Spring Security配置正确，JWT认证工作良好
- 数据模型设计合理，满足了业务需求
- 前端界面简洁直观，用户体验良好
## 遇到的挑战
- Spring Security与JWT集成时遇到了一些配置问题
- 角色权限管理的粒度控制较复杂
- 前端表单验证与后端验证的一致性维护
- 处理并发用户操作时的数据一致性问题
## 技术经验
- Spring Boot 3的新特性使用体验良好，尤其是依赖注入和自动配置
- JPA仓库简化了数据访问层的开发，但复杂查询仍需要自定义
- Spring Security的注解式安全控制非常方便
- Vue.js 3的组合式API提高了代码复用性
## 改进点
- 添加更完善的异常处理机制
- 改进用户会话管理，支持多设备登录控制
- 优化数据库查询性能，添加适当的索引
- 增强密码策略，添加密码强度检查
- 添加用户操作审计日志
- 实现更细粒度的权限控制
## 后续计划
- 添加二次认证功能
- 实现用户头像上传
- 添加邮件通知系统
- 开发用户活动分析统计功能
</code></pre>
</div>
</div>
</div>
<div class="alert alert-success">
<strong>小贴士：</strong> 在整个开发过程中，Memory Bank会持续记录项目进展，帮助团队成员了解当前状态，同时为未来项目提供参考经验。Cursor的AI助手能够访问这些文档，提供更符合项目上下文的帮助和建议。
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container text-center">
<p class="mb-1">Memory Bank MCP Server © 2023 版权所有</p>
<p class="mb-0 text-muted">遵循MCP协议，为项目文档管理提供支持</p>
</div>
</footer>
<script src="lib/bootstrap/bootstrap.bundle.min.js"></script>
<script src="lib/highlight/highlight.min.js"></script>
<script src="lib/highlight/javascript.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
hljs.highlightAll();
// 平滑滚动
document.querySelectorAll('.list-group-item').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const targetId = link.getAttribute('href');
const targetElement = document.querySelector(targetId);
window.scrollTo({
top: targetElement.offsetTop - 100,
behavior: 'smooth'
});
});
});
});
</script>
</body>
</html>