前言
本项目旨在从一个基础的个人待办事项应用,逐步升级为一个功能强大的部门级任务分发与协作平台。
项目介绍
本项目是一个功能全面的任务管理工具,支持任务的创建、分类和优先级排序。其核心目标是为团队提供一个高效的协作环境,使任务分发和进度追踪变得简单直观。
核心技能与技术栈
前端: 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两个必备下载,小皮面板我是当数据库来用了。大家也可以自己下载mysql。
vscode
编辑器用的vscode,毕竟免费好用。这个大家自己选
加速器
这个看大家,composer速度和后面我用github仓库我要用到加速器。你们可以用镜像或者gitee之类的
OK,开始把
apifox
用来测试api和生成文档的
后端
环境搭建
php
composer create-project laravel/laravel taskflow-laravel-api
配置.env
php
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(跨域)
php
安装Laravel CORS 中间件
composer require fruitcake/laravel-cors
编辑config/cors.php
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:5173'],
'allowed_headers' => ['*'],
创建模型
php
php artisan make:model Task -m
定义迁移
编辑文件2025_09_02_084149_create_tasks_table.php
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
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
php artisan db:seed --class=TaskSeeder
修改文件database/seeders/TaskSeeder.php
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
php artisan migrate
生成控制器
php
php artisan make:controller TaskController --api
编辑app/Http/Controllers/TaskController.php
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
<?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);