Vue.js教学第二十章:Vue 实战项目,任务管理应用

Vue 实战项目：任务管理应用

---

一、项目概述

本项目是一个基于 Vue.js 的任务管理应用，具有任务列表展示、任务详情查看、任务创建与编辑、任务状态管理等功能。通过该项目，我们将学习 Vue 的组件化开发、路由管理、状态管理以及与后端 API 的交互。

---

二、技术栈

• Vue.js ：前端框架，用于构建用户界面。

• Vue Router ：Vue 官方路由管理器，用于实现单页面应用的页面切换。

• Vuex ：Vue 官方状态管理库，用于管理应用的全局状态。

• Axios ：基于 Promise 的 HTTP 客户端，用于与后端 API 进行数据交互。

• Element UI ：基于 Vue 2.0 的桌面端组件库，提供丰富的 UI 组件。

---

三、项目搭建

（一）创建 Vue 项目

使用 Vue CLI 创建项目：

npm install -g @vue/cli
vue create task-manager
cd task-manager
npm run serve

（二）安装依赖

安装 Vue Router、Vuex 和 Axios：

npm install vue-router vuex axios

安装 Element UI：

npm install element-ui

（三）项目结构

task-manager/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── TaskItem.vue
│   │   ├── TaskForm.vue
│   │   └── TaskFilter.vue
│   ├── views/
│   │   ├── TaskList.vue
│   │   ├── TaskDetail.vue
│   │   └── NotFound.vue
│   ├── store/
│   │   └── index.js
│   ├── router/
│   │   └── index.js
│   ├── App.vue
│   └── main.js
├── package.json
└── babel.config.js

---

四、功能实现

（一）任务列表展示

在 TaskList.vue 中，展示任务列表，包括任务的标题、描述、状态等信息，并支持通过 Axios 从后端获取任务数据。

<template>
  <div>
    <el-card class="task-list">
      <div slot="header" class="clearfix">
        <span>任务列表</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="openTaskForm"
        >
          添加任务
        </el-button>
      </div>
      <el-table :data="tasks" style="width: 100%">
        <el-table-column prop="id" label="ID" width="50"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusTypeFilter">
              {
  { scope.row.status | statusTextFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="viewTaskDetail(scope.row.id)"
            >
              查看
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="editTask(scope.row.id)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteTask(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalTasks"
      ></el-pagination>
      <task-form
        ref="taskForm"
        :visible.sync="taskFormVisible"
        @task-created="fetchTasks"
        @task-updated="fetchTasks"
      ></task-form>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';
import TaskForm from './TaskForm.vue';

export default {
  components: {
    TaskForm
  },
  data() {
    return {
      tasks: [],
      currentPage: 1,
      pageSize: 10,
      totalTasks: 0,
      taskFormVisible: false
    };
  },
  filters: {
    statusTextFilter(status) {
      const statusTextMap = {
        pending: '待处理',
        processing: '处理中',
        completed: '已完成'
      };
      return statusTextMap[status] || '未知';
    },
    statusTypeFilter(status) {
      const statusTypeMap = {
        pending: 'info',
        processing: 'primary',
        completed: 'success'
      };
      return statusTypeMap[status] || 'info';
    }
  },
  created() {
    this.fetchTasks();
  },
  methods: {
    fetchTasks() {
      axios
        .get('/api/tasks', {
          params: {
            page: