项目方案:简单的任务管理系统

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>

7. 甘特