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

博客项目 laravel vue mysql 第五章标签功能

news 2025/7/14 12:19:47

前言

前面章节没看过的朋友请先从第一章开始看。这章主要写标签相关功能。

后端

创建迁移文件

php artisan make:migration create_tags_table

编辑迁移文件

public function up()
{Schema::create('tags', function (Blueprint $table) {$table->id(); // 主键，自增ID$table->string('name')->unique(); // 标签名称，唯一，如“Laravel”$table->string('slug')->unique(); // 标签别名，URL 友好，如“laravel”$table->timestamps(); // 创建时间和更新时间});
}

运行迁移

php artisan migrate

编辑种子文件database/seeders/DatabaseSeeder.php

// 创建8个标签
use App\Models\Tag;$tags = [Tag::create(['name' => 'Laravel', 'slug' => 'laravel']),Tag::create(['name' => 'Vue.js', 'slug' => 'vue']),Tag::create(['name' => 'PHP', 'slug' => 'php']),Tag::create(['name' => 'JavaScript', 'slug' => 'javascript']),Tag::create(['name' => 'MySQL', 'slug' => 'mysql']),Tag::create(['name' => 'CSS', 'slug' => 'css']),Tag::create(['name' => 'Git', 'slug' => 'git']),Tag::create(['name' => 'Docker', 'slug' => 'docker']),
];

创建模型命令

php artisan make:model Tag

编辑文件

protected $fillable = ['name', 'slug'];

创建控制器命令

php artisan make:controller TagController

编辑控制器

<?php
namespace App\Http\Controllers;use App\Models\Tag;
use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;class TagController extends Controller
{
/*** 查询所有标签（分页，支持文章计数）** @param Request $request* @return JsonResponse*/public function all(Request $request): JsonResponse{$perPage = $request->input('per_page', 10);$page = $request->input('page', 1);$search = $request->input('search');$query = Tag::withCount('articles')->orderBy('created_at', 'desc');if ($search) {$query->where(function($q) use ($search) {$q->where('name', 'like', "%{$search}%")->orWhere('slug', 'like', "%{$search}%");});}$tags = $query->paginate($perPage, ['id', 'name', 'slug'], 'page', $page);return response()->json(['data' => $tags->items(),'meta' => ['current_page' => $tags->currentPage(),'per_page' => $tags->perPage(),'total' => $tags->total(),'last_page' => $tags->lastPage(),'from' => $tags->firstItem(),'to' => $tags->lastItem(),],'links' => ['first' => $tags->url(1),'last' => $tags->url($tags->lastPage()),'prev' => $tags->previousPageUrl(),'next' => $tags->nextPageUrl(),],'message' => '成功获取标签列表',], 200);}
}