项目方案:简单的任务管理系统
1. 项目背景和目标
本项目旨在开发一个简单的任务管理系统,供用户创建、查看和管理任务。任务可以包含标题、描述、截止日期和状态等信息。
2. 功能需求
- 用户可以创建新任务并添加到系统中。
- 用户可以查看所有任务的列表。
- 用户可以根据任务的不同状态(待办、进行中、已完成)对任务进行分类和筛选。
- 用户可以将任务标记为已完成或重新打开。
- 用户可以编辑任务的标题、描述和截止日期等信息。
- 用户可以删除任务。
3. 技术选型
本项目将使用Java语言进行开发。以下是主要的技术选型:
- 后端框架:Spring Boot
- 数据库:MySQL
- 前端框架:Vue.js
4. 数据库设计
4.1 任务表(task)
字段名 | 类型 | 备注 |
---|---|---|
id | int | 主键 |
title | varchar(100) | 任务标题 |
description | varchar(500) | 任务描述 |
deadline | date | 任务截止日期 |
status | int | 任务状态(0-待办,1-进行中,2-已完成) |
5. 后端开发
5.1 创建任务管理服务
@Service
public class TaskService {
@Autowired
private TaskRepository taskRepository;
public Task createTask(Task task) {
return taskRepository.save(task);
}
public List<Task> getAllTasks() {
return taskRepository.findAll();
}
public List<Task> getTasksByStatus(int status) {
return taskRepository.findByStatus(status);
}
public Task getTaskById(int id) {
return taskRepository.findById(id);
}
public Task updateTask(Task task) {
return taskRepository.save(task);
}
public void deleteTask(int id) {
taskRepository.delete(id);
}
}
5.2 创建控制器
@RestController
@RequestMapping("/tasks")
public class TaskController {
@Autowired
private TaskService taskService;
@PostMapping
public Task createTask(@RequestBody Task task) {
return taskService.createTask(task);
}
@GetMapping
public List<Task> getAllTasks() {
return taskService.getAllTasks();
}
@GetMapping("/status/{status}")
public List<Task> getTasksByStatus(@PathVariable int status) {
return taskService.getTasksByStatus(status);
}
@GetMapping("/{id}")
public Task getTaskById(@PathVariable int id) {
return taskService.getTaskById(id);
}
@PutMapping("/{id}")
public Task updateTask(@PathVariable int id, @RequestBody Task task) {
task.setId(id);
return taskService.updateTask(task);
}
@DeleteMapping("/{id}")
public void deleteTask(@PathVariable int id) {
taskService.deleteTask(id);
}
}
6. 前端开发
6.1 创建任务列表页面
<template>
<div>
任务列表
<ul>
<li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
tasks: [],
};
},
mounted() {
this.fetchTasks();
},
methods: {
fetchTasks() {
axios.get("/tasks").then((response) => {
this.tasks = response.data;
});
},
},
};
</script>
6.2 创建添加任务页面
<template>
<div>
添加任务
<form @submit.prevent="createTask">
<label>标题</label>
<input v-model="task.title" required>
<label>描述</label>
<textarea v-model="task.description"></textarea>
<label>截止日期</label>
<input type="date" v-model="task.deadline">
<button type="submit">添加</button>
</form>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
task: {
title: "",
description: "",
deadline: "",
},
};
},
methods: {
createTask() {
axios.post("/tasks", this.task).then(() => {
this.$router.push("/tasks");
});
},
},
};
</script>