🖥️  Cursor 项目进阶：销售数据分析（前端 Vue.js 框架部分）

6.1 前置工作

在开始编写代码之前，需要完成以下准备工作：

1. 本地开发环境配置：确保已安装 Vue.js 框架所需的工具和软件。
2. 项目需求理解：明确项目的基本需求和技术架构。

前端项目关键部分

• 数据可视化展示：展示销售趋势和分类统计数据。
• 数据上传功能：支持 CSV 文件的上传和处理。
• 数据查询页面：支持用户按多个条件查询销售记录。
• 响应式布局：确保在各种设备上实现良好的显示效果。

技术框架：采用 Vue.js 3 作为主要的前端框架，结合 Cursor 的智能辅助功能加速开发。

6.1.1 创建前端项目

项目创建步骤

1. 在 Cursor 中，单击 "File" 下拉菜单，选择 "New Window" 新建一个窗口。
2. 在新窗口中，单击 "Open project" 按钮，新建一个项目。
3. 建议将前端项目的文件夹和后端项目的文件夹放在同一目录下，命名为 sales_analysis_web。
4. 打开新建的文件夹，完成前端项目的创建。

6.1.2 为项目添加文档

获取 API 文档

1. 启动后端项目，确保 run.py 文件正常运行。
2. 在浏览器中访问 http://localhost:8000/docs，查看 Swagger UI 页面（后端项目的在线 API 文档）。

让 Cursor 读懂文档的三种方式

1. 引用文件：在 "CHAT" 面板中输入 @，选择 "Files" 引用项目中的文件。
2. @Docs 选项：选择 "Docs" 添加新文档，填写文档地址并确认。
3. Cursor Settings：通过 "Features" 选项一次性添加文档。

文档管理

• 刷新文档：每天手动刷新文档，确保本地与在线文档同步。
• 文档索引：查看索引页面数量，判断文档是否更新。

特殊情况处理

• 本地文档地址无法添加：目前不支持本地文档地址的直接导入。
• 解决方案：复制后端项目 API 文档的 JSON 定义，创建文件用于后续引用。

6.2 实现前端代码

6.2.1 用 "CHAT" 面板确定开发步骤

1. 在 "CHAT" 面板中引用 api.md 和 Vue.js 文档作为上下文。
2. 输入提示词，确定开发步骤：

   textCopy

   我希望你基于 api.md 中的 API 内容, 开发一个前端项目。 项目需要用到 Vue.js 和其他一些配套的前端组件。 整体页面风格希望可以做得简洁、大方。 对于一些数据展示的业务模块,希望可以增加图表组件的支持, 看上去更加直观。 我希望你可以清晰罗列每个步骤,方便我后续在 "COMPOSER" 面板中与 Cursor 进行沟通

3. 根据 Cursor 的回复，整理开发步骤。

环境搭建

1. 安装 Node.js：下载并安装 Node.js LTS 版本。
2. 验证安装：在控制台输入 node -v 和 npm -v，确认安装成功。

6.2.2 用 "COMPOSER" 面板创建项目

1. 切换到 "COMPOSER" 面板，引用 Notepad 中的 note 文件。
2. 输入提示词：现在帮我创建 Vue 项目。
3. 按照 Cursor 给出的命令执行以下操作：
   • 使用 Vue CLI 创建项目：vue create sales-analysis-system。
   • 选择特性：Babel、TypeScript、Router、Pinia、Linter/Formatter、CSS Pre-processors。
4. 加速 npm 安装：设置国内镜像源：

   bashCopy

   npm config set registry https://registry.npmmirror.com

5. 解决文件读写权限问题：根据控制台报错信息，让 Cursor 提供解决方案。

项目启动

1. 执行 npm run dev 命令启动前端项目。
2. 如果遇到 404 错误，创建基础的 index.html 文件并修复问题。

htmlCopy

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>销售数据分析系统</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html> # 🖥️ 销售数据分析系统开发 ## 📂 文件结构与路由配置 1. **前端文件结构**： - 创建 `src/views/sales/UploadView.vue` 文件，用于实现数据上传功能。 - 路由中引用了 `UploadView.vue` 组件。 2. **HTML 结构**： ```html <div id="app"></div> <script type="module" src="/src/main.ts"></script>

📊 数据上传功能实现

前端上传组件

vueCopy

<template> <div class="upload-container"> <h2>数据上传</h2> <el-upload class="upload-demo" drag action="/api/upload" :auto-upload="false" > <el-icon class="el-icon--upload"><upload-filled /></el-icon> <div class="el-upload_text"> 拖拽文件到此处或 <em>点击上传</em> </div> </el-upload> </div> </template>

后端测试数据生成

1. 生成测试 CSV 文件：

   • 使用 Cursor 生成测试数据脚本，运行后生成 CSV 文件。
   • 测试数据用于前端上传功能的测试。

2. 前端上传测试：

   • 上传 CSV 文件后，页面无反应。
   • 后端控制台未收到上传请求，需优化前端代码。

前端优化

1. 添加进度条与成功提示：

   • 使用 Cursor 优化上传组件，添加进度条和成功提示。
   • 修改上传组件的请求地址，确保发起对后端的请求。

2. 文件格式校验：

   • 修改上传组件的文件格式校验，仅允许 .csv 格式文件上传。

3. 代理配置：

   • 采用代理形式解决跨域问题，确保上传请求成功。

后端处理

1. 上传 API 实现：

   • 上传 API 解析 CSV 文件，并将数据写入数据库。
   • 后端控制台显示请求和处理日志，确保数据成功写入。

2. 数据库验证：

   • 打开数据库管理软件，验证 products 表和 sale_records 表数据是否正确写入。

📈 销售数据管理模块

产品列表功能

1. 前端实现：

   • 使用 Cursor 生成产品列表页面代码。
   • 修改分页参数与数据结构验证，确保数据正确显示。

2. 后端 API 优化：

   • 修改后端 API 定义，返回总记录数，确保分页功能正常。

销售记录功能

1. 前端实现：

   • 使用 Cursor 生成销售记录页面代码。
   • 确保数据正确显示，分页功能正常。

2. 后端 API 优化：

   • 修改后端 API 定义，返回总记录数，确保分页功能正常。

🐛 Bug 修复与优化

1. total_amount 计算错误：

   • 发现 sale_records 表中部分记录的 total_amount 计算错误。
   • 使用 Cursor 分析原因并给出解决方案，确保数据计算正确。

2. AI 辅助开发经验：

   • Cursor 能快速定位问题并给出解决方案，但偶尔会犯低级错误。
   • 使用 AI 辅助开发时需谨慎，确保代码质量。

📝 总结与最佳实践

1. Notepad 使用技巧：

   • 在 Notepad 中引用其他上下文，避免手动引用遗漏。
   • 使用 Cursor 生成 Notepad 规则，确保后续代码生成无误。

2. 前后端协作：

   • 前后端开发需紧密协作，确保 API 定义与数据格式一致。
   • 定期验证数据库数据，确保数据正确写入。

3. 分页功能实现：

   • 前后端需统一分页参数与数据结构，确保分页功能正常。
   • 后端 API 需返回总记录数，确保前端分页功能符合预期。

📊 销售数据管理模块实现

分页查询功能

"所有返回数据的接口需要支持分页查询，并返回总记录数，数据结构类似 { items: ProductResponse[], total: number }，方便前端进行分页处理。"

分页模型实现

1. 分页请求模型：

   pythonCopy

   from typing import TypeVar, Generic, List from pydantic import BaseModel T = TypeVar('T') class PaginationParams(BaseModel): """分页参数""" page: int = 1 page_size: int = 10

2. 分页响应模型：

   pythonCopy

   class PageResponse(BaseModel, Generic[T]): items: List[T] total: int

分页功能调试

• 前后端联调后，分页功能正常，每页显示 10 条数据。
• 测试数据生成逻辑优化：相同产品名称和价格仅插入一次，但可有多条销售记录。

数据分析模块实现

销售汇总功能

• 问题：API 请求方式错误，导致 405 (Method Not Allowed) 错误。
• 解决：通过 Cursor 修改后端 API 请求逻辑，修复后销售汇总功能正常。

品类分析功能

• 优化：光标悬浮在饼图上时，显示具体数字。
• 实现：通过 Cursor 优化前端代码，添加悬浮显示功能。

销售趋势图表

• 问题：图表未绘制，API 请求无报错。
• 原因：数据格式不正确。
• 解决：通过 Cursor 定位并修复数据格式问题，最终图表正常显示。

项目总结

开发工具与流程

• 后端：Python
• 前端：Vue.js
• 辅助工具：Cursor（AI 辅助编程助手）

开发原则

1. 分步骤提出需求：将复杂功能拆分为多个小功能，逐步实现。
2. 提供上下文信息：在反馈问题时，提供代码片段、报错信息、页面截图等。
3. 及时验证和反馈：每完成一个功能模块后，立即验证并反馈问题。
4. 保持代码一致性：注意代码风格和架构的一致性。
5. 善用版本控制：重大修改前保存当前代码版本，方便回退。
6. 理解生成代码：开发者需理解 Cursor 生成的代码，便于维护和优化。

开发效率与质量

• AI 辅助编程：Cursor 能够快速生成代码，减少开发时间。
• 开发者角色：开发者需发挥专业判断力和创造力，确保代码质量和业务需求。

---

通过以上步骤和原则，销售数据管理模块和数据分析模块顺利实现，展示了 AI 辅助编程在提高开发效率和质量方面的潜力。