当前位置：首页 > web >正文

【AI编程工具】使用Cursor快速搭建一套小型项目管理系统

web 2025/9/4 16:36:38

【AI编程工具】使用Cursor快速搭建一套小型项目管理系统

前言

在AI技术飞速发展的今天，编程方式正在发生革命性变化。AI编程助手能够帮助我们快速生成代码、解决技术难题，甚至搭建完整应用系统。本文将介绍如何使用Cursor——一款强大的AI原生编程工具，快速搭建一个小型项目管理系统。

一、什么是Cursor？

Cursor是一款专为开发者设计的AI辅助编程工具，它基于OpenAI的GPT模型，能够理解自然语言描述并生成高质量的代码。与传统的IDE不同，Cursor将AI编程助手深度集成到编辑环境中，让开发者能够通过对话方式快速生成和修改代码。

二、项目需求分析

我们要构建的小型项目管理系统需要具备以下功能：

项目列表展示
项目添加/编辑/删除
任务分配与状态跟踪
简单的数据持久化

三、环境准备

首先，我们需要安装Cursor编辑器（可从官网https://cursor.sh/下载），然后创建一个新的项目目录。

四、使用Cursor生成前端页面

1. 生成基础HTML结构

在Cursor中新建一个index.html文件，然后使用Ctrl+K（或Cmd+K）调出AI命令面板，输入提示：

"创建一个项目管理系统的前端页面，使用Vue.js框架，包含导航栏和主要内容区域"

Cursor会生成类似以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>项目管理系统</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"><style>.completed { text-decoration: line-through; color: #6c757d; }.project-card { transition: all 0.3s ease; }.project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }</style>
</head>
<body><div id="app"><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><a class="navbar-brand" href="#">项目管理系统</a></nav><div class="container mt-4"><!-- 项目列表区域 --><div class="row"><div class="col-md-8"><h2>项目列表</h2><div class="card mb-3" v-for="project in projects" :key="project.id" :class="{'border-success': project.completed}"><div class="card-body"><h5 class="card-title" :class="{'completed': project.completed}">{{ project.name }}<span class="badge" :class="project.completed ? 'badge-success' : 'badge-primary'">{{ project.completed ? '已完成' : '进行中' }}</span></h5><p class="card-text">{{ project.description }}</p><p class="card-text"><small class="text-muted">截止日期: {{ project.deadline }}</small></p><button @click="toggleProjectStatus(project)" class="btn btn-sm" :class="project.completed ? 'btn-warning' : 'btn-success'">{{ project.completed ? '标记为未完成' : '标记为完成' }}</button><button @click="editProject(project)" class="btn btn-sm btn-info ml-2">编辑</button><button @click="deleteProject(project)" class="btn btn-sm btn-danger ml-2">删除</button></div></div></div><!-- 项目表单区域 --><div class="col-md-4"><div class="card"><div class="card-body"><h5 class="card-title">{{ editingProject ? '编辑项目' : '添加新项目' }}</h5><form @submit.prevent="saveProject"><div class="form-group"><label for="projectName">项目名称</label><input type="text" class="form-control" id="projectName" v-model="currentProject.name" required></div><div class="form-group"><label for="projectDescription">项目描述</label><textarea class="form-control" id="projectDescription" v-model="currentProject.description" rows="3"></textarea></div><div class="form-group"><label for="projectDeadline">截止日期</label><input type="date" class="form-control" id="projectDeadline" v-model="currentProject.deadline"></div><button type="submit" class="btn btn-primary">{{ editingProject ? '更新' : '添加' }}</button><button type="button" v-if="editingProject" @click="cancelEdit" class="btn btn-secondary ml-2">取消</button></form></div></div></div></div></div></div><script>new Vue({el: '#app',data: {projects: [],currentProject: {id: null,name: '',description: '',deadline: '',completed: false},editingProject: false},created() {this.loadProjects();},methods: {loadProjects() {// 从本地存储加载项目或初始化示例数据const savedProjects = localStorage.getItem('projects');if (savedProjects) {this.projects = JSON.parse(savedProjects);} else {// 示例数据this.projects = [{ id: 1, name: '网站重构', description: '对公司官网进行全新设计和开发', deadline: '2023-12-15', completed: false },{ id: 2, name: '移动应用开发', description: '开发公司业务的移动端应用', deadline: '2024-02-28', completed: true }];this.saveToLocalStorage();}},saveToLocalStorage() {localStorage.setItem('projects', JSON.stringify(this.projects));},saveProject() {if (this.editingProject) {// 更新现有项目const index = this.projects.findIndex(p => p.id === this.currentProject.id);this.projects.splice(index, 1, {...this.currentProject});} else {// 添加新项目const newId = this.projects.length > 0 ? Math.max(...this.projects.map(p => p.id)) + 1 : 1;this.projects.push({...this.currentProject,id: newId});}this.saveToLocalStorage();this.resetForm();},editProject(project) {this.currentProject = {...project};this.editingProject = true;},cancelEdit() {this.resetForm();},deleteProject(project) {if (confirm(`确定要删除项目"${project.name}"吗？`)) {this.projects = this.projects.filter(p => p.id !== project.id);this.saveToLocalStorage();}},toggleProjectStatus(project) {project.completed = !project.completed;this.saveToLocalStorage();},resetForm() {this.currentProject = {id: null,name: '',description: '',deadline: '',completed: false};this.editingProject = false;}}});</script>
</body>
</html>

2. 添加任务管理功能

接下来，我们扩展系统以支持任务管理。再次使用Cursor，输入提示：

"在项目管理系统中添加任务管理功能，每个项目可以包含多个任务，任务可以标记完成状态"

Cursor会帮助我们添加任务相关的HTML结构和JavaScript代码：

<!-- 在项目卡片内添加任务区域 -->
<div class="mt-3"><h6>任务列表</h6><ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center" v-for="task in project.tasks" :key="task.id"><div><input type="checkbox" v-model="task.completed" @change="saveToLocalStorage"><span :class="{'completed': task.completed}">{{ task.name }}</span></div><button @click="deleteTask(project, task)" class="btn btn-sm btn-outline-danger">删除</button></li></ul><div class="input-group mt-2"><input type="text" class="form-control" v-model="project.newTask" placeholder="新任务名称"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button" @click="addTask(project)">添加</button></div></div>
</div>

同时，我们需要更新Vue实例的数据结构和方法来支持任务管理：

// 在数据模型中添加任务支持
data: {projects: [],currentProject: {id: null,name: '',description: '',deadline: '',completed: false,tasks: [],newTask: ''},editingProject: false
},// 添加任务相关方法
methods: {addTask(project) {if (project.newTask.trim()) {const newTaskId = project.tasks.length > 0 ? Math.max(...project.tasks.map(t => t.id)) + 1 : 1;project.tasks.push({id: newTaskId,name: project.newTask.trim(),completed: false});project.newTask = '';this.saveToLocalStorage();}},deleteTask(project, task) {project.tasks = project.tasks.filter(t => t.id !== task.id);this.saveToLocalStorage();}
}

五、模拟后端API数据

为了模拟真实的应用场景，我们可以创建一个简单的JSON API。使用Cursor生成一个模拟的API响应：

"创建一个模拟API，返回项目数据，包含项目和任务信息"

创建api.js文件：

// 模拟项目数据API
const projects = [{id: 1,name: "网站重构",description: "对公司官网进行全新设计和开发",deadline: "2023-12-15",completed: false,tasks: [{ id: 1, name: "需求分析", completed: true },{ id: 2, name: "UI设计", completed: true },{ id: 3, name: "前端开发", completed: false },{ id: 4, name: "后端开发", completed: false }]},{id: 2,name: "移动应用开发",description: "开发公司业务的移动端应用",deadline: "2024-02-28",completed: true,tasks: [{ id: 1, name: "市场调研", completed: true },{ id: 2, name: "原型设计", completed: true },{ id: 3, name: "iOS开发", completed: true },{ id: 4, name: "Android开发", completed: true }]}
];// 模拟API响应
export function getProjects() {return new Promise((resolve) => {setTimeout(() => {resolve([...projects]);}, 500); // 模拟网络延迟});
}export function addProject(project) {return new Promise((resolve) => {setTimeout(() => {const newId = projects.length > 0 ? Math.max(...projects.map(p => p.id)) + 1 : 1;const newProject = {...project,id: newId,tasks: []};projects.push(newProject);resolve(newProject);}, 500);});
}export function updateProject(updatedProject) {return new Promise((resolve) => {setTimeout(() => {const index = projects.findIndex(p => p.id === updatedProject.id);if (index !== -1) {projects[index] = {...updatedProject};}resolve(projects[index]);}, 500);});
}export function deleteProject(projectId) {return new Promise((resolve) => {setTimeout(() => {const index = projects.findIndex(p => p.id === projectId);if (index !== -1) {projects.splice(index, 1);}resolve(true);}, 500);});
}

六、整合API到前端

修改前端代码以使用模拟API：

// 在Vue实例中添加API调用方法
methods: {async loadProjects() {try {// 在实际应用中，这里会调用真实的API// const response = await fetch('/api/projects');// this.projects = await response.json();// 使用模拟数据this.projects = await getProjects();} catch (error) {console.error('加载项目失败:', error);}},async saveProject() {try {if (this.editingProject) {await updateProject({...this.currentProject});} else {await addProject({...this.currentProject});}await this.loadProjects(); // 重新加载项目列表this.resetForm();} catch (error) {console.error('保存项目失败:', error);}},async deleteProject(project) {if (confirm(`确定要删除项目"${project.name}"吗？`)) {try {await deleteProject(project.id);await this.loadProjects(); // 重新加载项目列表} catch (error) {console.error('删除项目失败:', error);}}}
}

七、样式优化与响应式设计

使用Cursor进一步优化界面样式：

"优化项目卡片的样式，添加动画效果，并确保在移动设备上良好显示"

Cursor会生成相应的CSS代码：

/* 添加更多样式优化 */
.project-card {transition: all 0.3s ease;margin-bottom: 1.5rem;border: 1px solid rgba(0,0,0,0.125);border-radius: 0.5rem;overflow: hidden;
}.project-card:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}.task-item {transition: all 0.2s ease;
}.task-item:hover {background-color: #f8f9fa;
}/* 响应式设计 */
@media (max-width: 768px) {.container {padding: 0 15px;}.card-body {padding: 1rem;}.btn {margin-bottom: 0.5rem;}
}/* 动画效果 */
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}