使用 Cursor AI 开发多端笔记系统全过程分享


前言

本文将分享如何使用 Cursor AI 辅助开发一个基于 ASP Classic + Vue3 + UniApp 的多端笔记系统。通过 AI 辅助开发,不仅可以提高开发效率,还能学习到更多最佳实践。


项目概述


主要功能


界面预览


1. 登录和注册


2. 笔记本管理


2. 新建和编辑笔记本


4. 笔记管理


5. 新建和编辑笔记


6. 标签管理


7. 用户中心


8. 系统功能



开发流程


1. 项目规划与设计

首先向 Cursor AI 描述项目需求:

我想开发一个记事本系统，使用 ASP Classic + Vue3 + UniApp + SQL Server 技术栈。
需要实现用户管理、笔记本管理、笔记管理、标签管理等功能。
请帮我:
1. 设计数据库结构
2. 规划功能模块
3. 设计API接口
4. 制定开发计划

2. 数据库设计

根据 AI 建议,设计了以下核心表:


2.1 用户表 (pre20250214_user)

CREATE TABLE pre20250214_user (
    id INT PRIMARY KEY IDENTITY(1,1),        -- 用户ID
    username VARCHAR(50) NOT NULL UNIQUE,     -- 用户名
    password VARCHAR(32) NOT NULL,            -- 密码(MD5加密)
    nickname VARCHAR(50) NOT NULL,            -- 昵称
    email VARCHAR(100) NOT NULL UNIQUE,       -- 邮箱(用于找回密码)
    role TINYINT NOT NULL,                   -- 角色:1超级管理员,2管理员,3普通用户
    token VARCHAR(32),                        -- 登录token
    token_expire DATETIME,                    -- token过期时间
    status TINYINT DEFAULT 1,                 -- 状态:1启用,0禁用
    create_time DATETIME DEFAULT GETDATE(),   -- 创建时间
    update_time DATETIME DEFAULT GETDATE()    -- 更新时间
)

-- 插入测试数据 (密码都是123456的MD5加密: 14e1b600b1fd579f47433b88e8d85291)
INSERT INTO pre20250214_user (username, password, nickname, email, role, status) VALUES 
('admin', '14e1b600b1fd579f47433b88e8d85291', '小孙', 'admin@xiyueta.com', 1, 1),
('test', '14e1b600b1fd579f47433b88e8d85291', '小张', 'test@xiyueta.com', 2, 0),
('demo', '14e1b600b1fd579f47433b88e8d85291', '小红', 'demo@xiyueta.com', 3, 1);

测试账号说明:

1. admin: 超级管理员账号(role=1)

3. test: 禁用状态的测试账号(status=0)

4. demo: 演示账号(role=2)


所有账号的初始密码都是: 123456


2.2 笔记本表 (pre20250214_notebooks)

CREATE TABLE pre20250214_notebooks (
    notebook_id INT IDENTITY(1,1) PRIMARY KEY,  -- 笔记本ID
    user_id INT NOT NULL,                       -- 所属用户ID
    title NVARCHAR(100) NOT NULL,              -- 笔记本标题
    description NVARCHAR(500),                  -- 描述
    sort_order INT DEFAULT 0,                   -- 排序号
    create_time DATETIME DEFAULT GETDATE(),     -- 创建时间
    update_time DATETIME DEFAULT GETDATE(),     -- 更新时间
    status TINYINT DEFAULT 1                   -- 状态：1正常，0删除 
)

-- 插入测试数据
INSERT INTO pre20250214_notebooks (user_id, title, description) 
VALUES (1, '我的第一个笔记本', '这是一个测试笔记本')

2.3 笔记表 (pre20250214_notes)

CREATE TABLE pre20250214_notes (
    note_id INT IDENTITY(1,1) PRIMARY KEY,      -- 笔记ID
    notebook_id INT NOT NULL,                   -- 所属笔记本ID
    user_id INT NOT NULL,                       -- 所属用户ID
    title NVARCHAR(200) NOT NULL,              -- 笔记标题
    content NTEXT,                              -- 笔记内容
    is_starred TINYINT DEFAULT 0,               -- 是否星标：1是，0否
    create_time DATETIME DEFAULT GETDATE(),     -- 创建时间
    update_time DATETIME DEFAULT GETDATE(),     -- 更新时间
    status TINYINT DEFAULT 1                   -- 状态：1正常，0删除
)

-- 插入测试数据
INSERT INTO pre20250214_notes (notebook_id, user_id, title, content) 
VALUES (1, 1, '第一条笔记', '这是我的第一条笔记内容')

2.4 标签表 (pre20250214_tags)

CREATE TABLE pre20250214_tags (
    tag_id INT IDENTITY(1,1) PRIMARY KEY,       -- 标签ID
    user_id INT NOT NULL,                       -- 所属用户ID
    name NVARCHAR(50) NOT NULL,                 -- 标签名称
    color NVARCHAR(20),                         -- 标签颜色
    create_time DATETIME DEFAULT GETDATE(),     -- 创建时间
    update_time DATETIME DEFAULT GETDATE(),     -- 更新时间
    status TINYINT DEFAULT 1,                -- 状态:1启用,0禁用
)

-- 插入测试数据
INSERT INTO pre20250214_tags (user_id, name, color) 
VALUES (1, '工作', '#FF5733')

2.5 笔记标签关联表 (pre20250214_note_tags)

CREATE TABLE pre20250214_note_tags (
    note_id INT NOT NULL,                       -- 笔记ID
    tag_id INT NOT NULL,                        -- 标签ID
    create_time DATETIME DEFAULT GETDATE(),     -- 创建时间
    status TINYINT DEFAULT 1,                -- 状态:1启用,0禁用
)

-- 插入测试数据
INSERT INTO pre20250214_note_tags (note_id, tag_id) 
VALUES (1, 1)

2.6 系统日志表(pre20250214_logs)

-- 创建系统日志表
CREATE TABLE pre20250214_logs (
  log_id int IDENTITY(1,1) PRIMARY KEY,
  user_id int NOT NULL,                -- 操作用户ID
  username varchar(50) NOT NULL,       -- 操作用户名
  action varchar(255) NOT NULL,        -- 操作内容
  ip varchar(50) NOT NULL,            -- 操作IP
  create_time datetime NOT NULL        -- 操作时间
)

-- 添加默认日志记录
INSERT INTO pre20250214_logs (user_id, username, action, ip, create_time) 
VALUES (1, 'admin', '系统初始化', '127.0.0.1', GETDATE())

3. 前端开发

使用 Cursor AI 辅助开发前端页面:

1. 项目初始化

请帮我使用 Vue3 + UniApp 创建项目,需要:
1. 配置路由
2. 封装请求
3. 添加UI组件库
4. 设置全局样式

2. 页面开发

请帮我开发[具体页面],要求:
1. 使用 Vue3 组合式API
2. 实现响应式布局
3. 添加加载状态
4. 处理错误情况

4. 后端开发

同样使用 AI 辅助开发后端接口:

请帮我实现[具体接口],要求:
1. 使用 ASP Classic
2. 添加参数验证
3. 规范错误处理
4. 优化SQL查询

5. 项目优化

在基础功能完成后,向 AI 请教优化建议:

请帮我优化项目,重点关注:
1. 性能优化
2. 安全加固
3. 代码重构
4. 用户体验

开发难点与解决方案


1. 跨端兼容性问题

问题: H5端和App端的导航栏表现不一致

解决方案:


2. 标签统计优化

问题: 标签下笔记数量统计性能问题

解决方案:


3. 数据安全性

问题: 用户数据隔离和权限控制

解决方案:


4. 移动端适配

问题: 不同设备屏幕适配问题

解决方案:



项目亮点


1. AI 驱动开发


2. 最佳实践示范


3. 实用功能集成


Cursor AI 使用技巧


1. 提示词编写


2. 代码生成


3. 问题解决



开发心得


1. AI 辅助开发的优势


2. 开发技巧分享

1. 善用 AI 提示词


2. 代码管理建议


3. 项目优化要点


交流学习

如果您对本项目感兴趣,欢迎交流:


特别感谢


希望本文能帮助大家了解如何使用 AI 辅助开发,提高开发效率。如果对您有帮助,欢迎点赞关注！