办公任务分发项目 laravel vue mysql 第一章:核心功能构建 API

前言

本项目旨在从一个基础的个人待办事项应用，逐步升级为一个功能强大的部门级任务分发与协作平台。

项目介绍

本项目是一个功能全面的任务管理工具，支持任务的创建、分类和优先级排序。其核心目标是为团队提供一个高效的协作环境，使任务分发和进度追踪变得简单直观。

核心技能与技术栈

前端: Vue.js (用于构建响应式用户界面)

后端: Laravel (用于构建健壮的 RESTful API)

状态管理: Pinia 或 Vuex (确保前端数据源的唯一性和可维护性)

数据持久化: Laravel Eloquent ORM (高效地管理数据库中的任务数据)

API 设计: RESTful API (遵循最佳实践，实现清晰、易于维护的接口)

实时通信: WebSocket (用于实现任务状态和通知的实时同步)

项目分阶段规划

第一阶段：核心功能构建

目标: 打造一个稳定、可靠的个人待办事项管理工具。

任务管理: 支持任务的创建、查看、编辑和删除。状态的切换

数据持久化: 使用 Laravel Eloquent ORM 将任务数据高效地存入数据库。

基本 API 设计: 遵循 RESTful 风格为任务资源设计 API 端点。

前端状态管理: 使用 Pinia 或 Vuex 管理任务列表的全局状态。

第二阶段：高级功能与用户体验提升

目标: 升级为更完善、易用的个人管理工具。

任务分类与优先级: 增加任务分类（如工作、生活）和优先级排序功能。

高级管理: 增加截止日期提醒和任务子列表等功能。增加优先级排序、截止日期提醒、任务子列表、文件上传和评论等复杂功能

用户认证与授权: 实现注册和登录功能，并确保每个用户只能操作自己的任务。

第三阶段：部门任务分发与协作平台升级

目标: 将应用转变为一个面向部门内部的任务分发与协作平台。

部门管理: 允许管理员创建和管理部门。

成员管理: 部门管理员可以添加、删除部门成员。

任务分发与指派: 支持将任务指派给部门内的特定成员，并可进行批量分发。

任务进度追踪: 提供部门任务看板，实时展示任务完成情况。

实时同步: 利用 WebSocket 技术，实现任务状态的实时更新。

权限管理: 精细化权限控制，确保只有部门内成员才能查看和操作相关任务。

可用软件

composer
node
小皮面板
composer和node两个必备下载,小皮面板我是当数据库来用了。大家也可以自己下载mysql。
vscode
编辑器用的vscode,毕竟免费好用。这个大家自己选
加速器
这个看大家，composer速度和后面我用github仓库我要用到加速器。你们可以用镜像或者gitee之类的
OK,开始把
apifox
用来测试api和生成文档的

后端

环境搭建

composer create-project laravel/laravel taskflow-laravel-api

配置.env

APP_NAME=TaskFlow
APP_ENV=local
APP_KEY=base64:iKPaXpQW6W6f/nap3pj+N7H+w/LmMoTjocPvvEcr+E4=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=taskflow-laravel-api
DB_USERNAME=root
DB_PASSWORD=root

配置cors(跨域)

安装Laravel CORS 中间件
composer require fruitcake/laravel-cors

编辑config/cors.php
'paths' => ['api/*'],
   'allowed_methods' => ['*'],
   'allowed_origins' => ['http://localhost:5173'],
   'allowed_headers' => ['*'],

创建模型

php artisan make:model Task -m

定义迁移
编辑文件2025_09_02_084149_create_tasks_table.php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTasksTable extends Migration
{
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();
            $table->string('title'); // 任务标题
            $table->text('description')->nullable(); // 任务描述
            $table->boolean('completed')->default(false); // 任务状态
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('tasks');
    }
}

更新模型
编辑app/Models/Task.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    use HasFactory;
    protected $fillable = ['title', 'description', 'completed'];
}

生成种子文件,测试数据

php artisan db:seed --class=TaskSeeder

修改文件database/seeders/TaskSeeder.php

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\Task;

class TaskSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        // 创建一个待处理的任务
        Task::create([
            'title' => '撰写第一季度项目总结报告',
            'description' => '整理所有部门成员的业绩数据和项目亮点，并在本周五前完成初稿。',
            'status' => 'pending',
        ]);

        // 创建一个正在进行中的任务
        Task::create([
            'title' => '为新员工准备入职材料',
            'description' => '准备入职表格、电脑配置以及部门介绍文档，确保所有材料齐全。',
            'status' => 'in_progress',
        ]);

        // 创建一个已完成的任务
        Task::create([
            'title' => '与市场部进行需求沟通',
            'description' => '讨论下季度产品推广计划，并记录相关需求。',
            'status' => 'completed',
        ]);

        // 创建一个已逾期的任务
        Task::create([
            'title' => '完成项目二期用户访谈',
            'description' => '与5位目标用户进行深度访谈，收集对新功能的反馈。',
            'status' => 'overdue',
        ]);
        
        // 创建另一个正在进行中的任务
        Task::create([
            'title' => '部署线上服务器',
            'description' => '配置Nginx、PHP环境，并部署最新的代码版本。',
            'status' => 'in_progress',
        ]);
    }
}

运行迁移

php artisan migrate

生成控制器

php artisan make:controller TaskController --api

编辑app/Http/Controllers/TaskController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Task;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Response;

class TaskController extends Controller
{
    /**
     * Display a listing of the resource with pagination and status filtering.
     */
    public function index(Request $request): JsonResponse
    {
        $validated = $request->validate([
            'per_page' => 'nullable|integer|min:1|max:100',
            // 根据表结构，增加状态筛选的验证
            'status' => 'nullable|string|in:pending,in_progress,completed,on_hold,cancelled',
        ]);

        $perPage = $validated['per_page'] ?? 10;
        $query = Task::query();

        // 根据请求参数筛选任务状态
        if ($request->has('status')) {
            $query->where('status', $validated['status']);
        }
        
        $tasks = $query->paginate($perPage);

        return response()->json($tasks, 200);
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request): JsonResponse
    {
        $validated = $request->validate([
            'title' => 'required|string|max:255',
            'description' => 'nullable|string',
            // 根据表结构，增加状态验证
            'status' => 'nullable|string|in:pending,in_progress,completed,on_hold,cancelled',
        ]);

        $task = Task::create($validated);

        return response()->json($task, 201);
    }

    /**
     * Display the specified resource.
     */
    public function show($id): JsonResponse
    {
        $task = Task::findOrFail($id);
        return response()->json($task, 200);
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(Request $request,int $id): JsonResponse
    {
        $validated = $request->validate([
            'title' => 'required|string|max:255',
            'description' => 'nullable|string',
        ]);

        $task = Task::findOrFail($id);
        $task->update($validated);

        return response()->json($task, 200);
    }

    /**
     * Update the status of the specified resource in storage.
     * 专门用于更新任务状态的独立方法。
     *
     * @param Request $request
     * @param int $id
     * @return JsonResponse
     */
    public function updateStatus(Request $request, int $id): JsonResponse
    {
        $validated = $request->validate([
            'status' => 'required|string|in:pending,in_progress,completed,on_hold,cancelled',
        ]);

        $task = Task::findOrFail($id);
        $task->update($validated);

        return response()->json($task, 200);
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy($id): Response
    {
        $task = Task::findOrFail($id);
        $task->delete();
        return response()->noContent();
    }

    /**
     * Remove multiple specified resources from storage.
     * 从存储中删除多个指定的资源.
     * @param Request $request
     * @return Response
     */
    public function batchDestroy(Request $request): Response {
        $validated = $request->validate([
            'ids' => 'required|array',
            'ids.*' => 'required|integer|exists:tasks,id'
        ]);

        $deletedCount = Task::whereIn('id', $validated['ids'])->delete();

        return response()->noContent();
    }
}

编辑路由routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TaskController;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('/test', function() {
    return response()->json([
        'data' => [
            'name' => 'yyf',
            'qq' => '506717715'
        ],
        'status' => 'success'
    ], 200);
});

Route::delete('tasks/batch-destroy', [TaskController::class, 'batchDestroy']);
Route::patch('tasks/{task}/status', [TaskController::class, 'updateStatus']);
Route::apiResource('tasks', TaskController::class);