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

前言

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

后端

创建迁移文件

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);
    }
}

前端