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

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

ds 2025/9/5 7:11:48

前言

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

项目介绍

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

核心技能与技术栈

前端: 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://localhostLOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debugDB_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

<?phpnamespace 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

<?phpnamespace 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

<?phpuse 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);