AI导哈

待办事项应用

一个全栈待办事项应用，包含Node.js/Express后端和Vue 3前端，采用MCP风格的API架构。

  • by emngheo174
  • Vue
  • 本地部署
  • 更新于
在 GitHub 查看 emngheo174/mcp

使用说明

MCP待办事项列表

一个完整的todo列表应用程序，带有Node.js/Express后端服务器和Vue 3前端，展示了类似MCP的API架构。

📋 项目结构

mcp-todo-list/
├── client/                 # Vue 3 frontend application
│   ├── src/
│   │   ├── App.vue        # Main todo list component
│   │   ├── app.css        # Global styles
│   │   └── main.js        # App entry point
│   ├── index.html         # HTML template
│   ├── vite.config.js     # Vite configuration
│   └── package.json       # Client dependencies
└── server/                # Node.js/Express backend
    ├── server.js          # Main API server
    └── package.json       # Server dependencies

🚀 快速开始

先决条件

  • Node.js：v20.19.0+或v22.12.0+
  • npm：包含在Node.js中

安装

  1. 安装服务器依赖项：

    cd server
npm install

  2. 安装客户端依赖关系：

    cd ../client
npm install

运行应用程序

启动后端服务器

从 server/ 目录：

npm start

或用于自动重新加载的开发：

npm run dev

服务器将在上运行 http://localhost:3000

启动前端客户端

从 client/ 目录：

npm run dev

客户可在 http://localhost:5173 （或终端显示的端口）

生产建设

建立生产客户：

npm run build

这在 dist/ 目录。

📡 API终点

服务器公开以下REST端点（基于POST的MCP样式）：

端点 方法 描述 正文
/tools/todo_create POST 创建新待办事项 { "text": "string" }
/tools/todo_list POST 获取所有待办事项 {}
/tools/todo_update POST 更新待办事项 { "id": number, "text": "string" }
/tools/todo_delete POST 删除待办事项 { "id": number }

API使用示例

创建待办事项：

curl -X POST http://localhost:3000/tools/todo_create \
  -H "Content-Type: application/json" \
  -d '{"text":"Learn Vue 3"}'

列出所有待办事项：

curl -X POST http://localhost:3000/tools/todo_list \
  -H "Content-Type: application/json" \
  -d '{}'

更新待办事项：

curl -X POST http://localhost:3000/tools/todo_update \
  -H "Content-Type: application/json" \
  -d '{"id":1,"text":"Updated todo text"}'

删除待办事项：

curl -X POST http://localhost:3000/tools/todo_delete \
  -H "Content-Type: application/json" \
  -d '{"id":1}'

🎨 前端功能

  • 创建 简单表单的新待办事项
  • 阅读 服务器上的所有待办事项
  • 更新 todo文本内联编辑模式
  • 删除 完成确认
  • 刷新 从服务器重新加载待办事项的按钮
  • 状态消息 用于用户反馈
  • 加载状态 用于异步操作
  • 响应式设计 使用顺风CSS

技术栈（客户端）

  • 视图3 -渐进式JavaScript框架
  • 维特 -下一代构建工具
  • 顺风 CSS -实用程序优先的CSS框架
  • 顺风UI -预构建组件

🔧 后端功能

  • Express.js -最小的web框架
  • 跨域资源共享 -已启用跨源请求
  • 内存存储 -简单的数据持久性（重启时重置）
  • 基于邮局的API -受MCP启发的刀具图案

技术栈（服务器）

  • Node.js -JavaScript运行时
  • 快速 -Web框架
  • 跨域资源共享 -跨源资源共享中间件
  • Nodemon （dev）-文件更改时自动重启

📝 可用脚本

服务器

cd server
npm start          # Run the server
npm run dev        # Run with auto-reload (requires nodemon)

客户端

cd client
npm run dev        # Start development server with HMR
npm run build      # Build for production
npm run preview    # Preview the production build
npm run format     # Format code with Prettier

🔌 配置

服务器

  • 端口：默认值为3000（可通过环境变量设置 PORT)
  • 跨域资源共享：接受来自所有来源的请求(*)

客户端

  • API基本URL: http://localhost:3000 （配置于 App.vue)
  • 编辑 API_BASE 组件中的属性以更改服务器URL

📦 依赖项

服务器

  • 表达: ^4.18.2
  • 跨域资源共享: ^2.8.5
  • ajv：^8.12.0（JSON模式验证）

客户端

  • 视图: ^3.5.22
  • 尾风CSS: ^4.1.17
  • @尾风css/vite: ^4.1.17
  • 快：最新的邀请

🛠️ 发展

格式化代码

使用Prettier格式化客户端代码：

cd client
npm run format

扩展API

要添加新端点，请编辑 server/server.js:

app.post("/tools/your_endpoint", (req, res) => {
  // Your logic here
  res.json({ result: "..." });
});

修改UI

编辑 client/src/App.vue 自定义界面。该组件包括：

  • data() -反应状态
  • methods -事件处理程序和API调用
  • template -带有Tailwind类的HTML结构
  • <style scoped> -组件特定样式

🐛 故障排除

前端无法连接到后端：

  • 确保服务器在端口3000上运行
  • 检查 API_BASE 在 App.vue 匹配您的服务器URL
  • 验证CORS是否已启用（默认情况下）

端口已在使用中：

  • 服务器：设置 PORT 环境变量到其他端口
  • 客户端：Vite将提示另一个端口

重新启动后Todo状态丢失：

  • 这是意料之中的——待办事项仅存储在内存中
  • 要持久化数据，请修改 server.js 使用数据库

📄 许可证

未指定。考虑添加一个LICENSE文件（MIT、Apache 2.0等）

🤝 贡献

欢迎投稿！拜托：

  1. 复刻仓库
  2. 创建要素分支
  3. 提交您的更改
  4. 提交拉取请求

编码愉快！ 🎉

相关 MCP