在后台实现文章标签增删改查功能

Created 8 years ago by 学院君, Updated 8 years ago Revision #1 46028 views 22 likes 0 collects

我们在十分钟开发博客项目一节开发的博客应用只是一个基本的博客系统，还有许多地方需要进一步完善。对大多数博客平台而言，例如 Wordpress，都可以给博客文章添加分类或标签，本节我们就来为博客文章添加标签功能。

1、创建标签模型和迁移

首先需要创建 Tag 模型类：

php artisan make:model --migration Tag

该命令会在 app 目录下创建模型文件 Tag.php，由于我们在 make:model 命令中使用了 --migration 选项，所以同时会创建 Tag 模型对应的数据表迁移。在标签（Tag）和文章（Post）之间存在多对多的关联关系，因此还要按照下面的命令创建存放文章和标签对应关系的数据表迁移：

php artisan make:migration --create=post_tag_pivot create_post_tag_pivot

编辑标签迁移文件

在 database/migrations 目录下编辑新创建的标签迁移文件内容如下：

<?php

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

class CreateTagsTable extends Migration
{
    /**
     * Run the migrations.
     */
    public function up()
    {
        Schema::create('tags', function (Blueprint $table) {
            $table->increments('id');
            $table->string('tag')->unique();
            $table->string('title');
            $table->string('subtitle');
            $table->string('page_image');
            $table->string('meta_description');
            $table->string('layout')->default('blog.layouts.index');
            $table->boolean('reverse_direction');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down()
    {
        Schema::drop('tags');
    }
}

下面我们对上面迁移文件中新增的字段作简要说明：

page_image：标签图片
meta_description：标签介绍
layout：博客终归要使用布局
reverse_directions：在文章列表按时间升序排列博客文章（默认是降序）

编辑文章与标签对应关系迁移

编辑文章与标签对应关系表迁移文件内容如下：

<?php

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

class CreatePostTagPivot extends Migration
{
    /**
     * Run the migrations.
     */
    public function up()
    {
        Schema::create('post_tag_pivot', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('post_id')->unsigned()->index();
            $table->integer('tag_id')->unsigned()->index();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down()
    {
        Schema::drop('post_tag_pivot');
    }
}

运行迁移

登录到 Homestead 虚拟机在项目根目录下通过运行如下 Artisan 命令以生成这两个数据表：

php artisan migrate

2、实现 admin.tag.index

在博客后台管理一节中我们已经创建了 TagController 并定义了相应的路由。实现 admin.tag.index 就跟玩儿似地，只需要更新 TagController 的 index 方法，然后为其提供一个渲染视图即可。

实现 TagController@index

在 app/Http/Controllers/Admin 目录下修改 TagController 的 index 方法如下：

// 在 TagController 顶部添加如下语句
use App\Tag;

// 替换 index 方法如下
public function index()
{
    $tags = Tag::all();
    return view('admin.tag.index')->withTags($tags);
}

很简单吧，只需要返回一个传递 $tags 变量的视图。

创建 admin.tag.index 视图

接下来我们来渲染这个视图，首先在 resources/views/admin 目录下创建一个 tag 子目录，然后在该目录下创建 index.blade.php 并编辑其内容如下：

@extends('admin.layout')

@section('content')
    <div class="container-fluid">
        <div class="row page-title-row">
            <div class="col-md-6">
                <h3>Tags <small>» Listing</small></h3>
            </div>
            <div class="col-md-6 text-right">
                <a href="/admin/tag/create" class="btn btn-success btn-md">
                    <i class="fa fa-plus-circle"></i> New Tag
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">

                @include('admin.partials.errors')
                @include('admin.partials.success')

                <table id="tags-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Tag</th>
                            <th>Title</th>
                            <th class="hidden-sm">Subtitle</th>
                            <th class="hidden-md">Page Image</th>
                            <th class="hidden-md">Meta Description</th>
                            <th class="hidden-md">Layout</th>
                            <th class="hidden-sm">Direction</th>
                            <th data-sortable="false">Actions</th>
                        </tr>
                     </thead>
                    <tbody>
                    @foreach ($tags as $tag)
                        <tr>
                            <td>{{ $tag->tag }}</td>
                            <td>{{ $tag->title }}</td>
                            <td class="hidden-sm">{{ $tag->subtitle }}</td>
                            <td class="hidden-md">{{ $tag->page_image }}</td>
                            <td class="hidden-md">{{ $tag->meta_description }}</td>
                            <td class="hidden-md">{{ $tag->layout }}</td>
                            <td class="hidden-sm">
                                @if ($tag->reverse_direction)
                                    Reverse
                                @else
                                    Normal
                                @endif
                            </td>
                            <td>
                                <a href="/admin/tag/{{ $tag->id }}/edit" class="btn btn-xs btn-info">
                                    <i class="fa fa-edit"></i> Edit
                                </a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <script>
        $(function() {
            $("#tags-table").DataTable({
            });
        });
    </script>
@stop

这个模板很简单，我们使用了后台布局，在文件顶部是页面标题和创建新标签的按钮，然后用表格来显示所有标签，最后，在页面顶部我们引入了一些 JavaScript 脚本将表格转化为 DataTables。还有两个被包含进来的局部视图：admin.partials.errors 和 admin.partials.success。admin.partials.errors 已经在构建后台管理系统一节中创建了，但 admin.partials.success 还没有创建。下面我们就来创建这个局部视图。

创建返回成功信息局部视图

在 resources/views/admin/partials 目录下创建 success.blade.php 文件，编辑其内容如下：

@if (Session::has('success'))
    <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>
            <i class="fa fa-check-circle fa-lg fa-fw"></i> Success. 
        </strong>
        {{ Session::get('success') }}
    </div>
@endif

访问后台标签管理列表

在浏览器中访问 http://blog.app/admin/tag： Laravel 博客后台标签管理页面

现在还没有任何数据，所以是个空的列表。

3、实现 admin.tag.create

接下来我们将会实现添加标签功能，这样当你点击“添加标签”按钮时就会跳转到填写标签表单页面。

实现 TagController@create

修改 app/Http/Controllers/Admin 目录下的 TagController 如下：

// 在 TagController 控制器顶部添加 $fields 属性
class TagController extends Controller
{
    protected $fields = [
        'tag' => '',
        'title' => '',
        'subtitle' => '',
        'meta_description' => '',
        'page_image' => '',
        'layout' => 'blog.layouts.index',
        'reverse_direction' => 0,
    ];

    // 替换 create() 方法如下
    /**
     * Show form for creating new tag
     */
    public function create()
    {
        $data = [];
        foreach ($this->fields as $field => $default) {
            $data[$field] = old($field, $default);
        }

        return view('admin.tag.create', $data);
    }

该方法会在点击“添加新标签”或者表单被填充但是验证失败时执行，对于后者我们会将传过来的数据通过 old 方法回写到表单中。

创建 admin.tag.create 视图

在 resources/views/admin/tag 目录下新建 create.blade.php 文件，编辑其内容如下：

@extends('admin.layout')

@section('content')
<div class="container-fluid">
    <div class="row page-title-row">
        <div class="col-md-12">
            <h3>Tags <small>» Create New Tag</small></h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">New Tag Form</h3>
                </div>
                <div class="panel-body">

                    @include('admin.partials.errors')

                    <form class="form-horizontal" role="form" method="POST" action="/admin/tag">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">

                            <div class="form-group">
                                <label for="tag" class="col-md-3 control-label">Tag</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="tag" id="tag" value="{{ $tag }}" autofocus>
                                </div>
                            </div>

                            @include('admin.tag._form')

                            <div class="form-group">
                                <div class="col-md-7 col-md-offset-3">
                                    <button type="submit" class="btn btn-primary btn-md">
                                        <i class="fa fa-plus-circle"></i>
                                        Add New Tag
                                    </button>
                                </div>
                            </div>

                        </form>

                 </div>
             </div>
        </div>
    </div>
</div>

@stop

由于我们会在添加和编辑标签时共用同一个表单，所以我们将表单部分放到一个独立的局部视图 admin.tag._form 中，下面我们就来创建这个局部视图：

创建 admin.tag._form 局部视图

在 resources/views/admin/tag 目录下新建一个 _form.blade.php 文件，编辑其内容如下：

<div class="form-group">
    <label for="title" class="col-md-3 control-label">
        Title
    </label>
    <div class="col-md-8">
        <input type="text" class="form-control" name="title" id="title" value="{{ $title }}">
    </div>
</div>

<div class="form-group">
    <label for="subtitle" class="col-md-3 control-label">
        Subtitle
    </label>
    <div class="col-md-8">
        <input type="text" class="form-control" name="subtitle" id="subtitle" value="{{ $subtitle }}">
    </div>
</div>

<div class="form-group">
    <label for="meta_description" class="col-md-3 control-label">
        Meta Description
    </label>
    <div class="col-md-8">
        <textarea class="form-control" id="meta_description" name="meta_description" rows="3">
            {{ $meta_description }}
        </textarea>
    </div>
</div>

<div class="form-group">
    <label for="page_image" class="col-md-3 control-label">
        Page Image
    </label>
    <div class="col-md-8">
        <input type="text" class="form-control" name="page_image" id="page_image" value="{{ $page_image }}">
    </div>
</div>

<div class="form-group">
    <label for="layout" class="col-md-3 control-label">
        Layout
    </label>
    <div class="col-md-4">
        <input type="text" class="form-control" name="layout" id="layout" value="{{ $layout }}">
    </div>
</div>

<div class="form-group">
    <label for="reverse_direction" class="col-md-3 control-label">
        Direction
    </label>
    <div class="col-md-7">
        <label class="radio-inline">
            <input type="radio" name="reverse_direction" id="reverse_direction"
                    @if (! $reverse_direction)
                        checked="checked"
                    @endif
                     value="0"> 
            Normal
        </label>
        <label class="radio-inline">
            <input type="radio" name="reverse_direction"
                @if ($reverse_direction)
                    checked="checked"
                @endif
                value="1"> 
            Reversed
        </label>
    </div>
</div>

在后台标签列表中点击“新建标签”（New Tag）按钮访问刚刚创建的页面： Laravel博客后台新建标签页面

4、实现 admin.tag.store

现在我们已经有了创建标签表单，还需要编写表单被提交后保存标签的业务逻辑代码。

创建表单请求类 TagCreateRequest

Laravel 5.1 的一个优秀特性就是表单请求类，这些类可以对指定表单字段进行验证。使用如下 Artisan 命令创建一个新的 TagCreateRequest：

php artisan make:request TagCreateRequest

创建的类存放在 app/Http/Requests 目录下，编辑刚刚创建的 TagCreateRequest.php 文件内容如下：

<?php 

namespace App\Http\Requests;

use App\Http\Requests\Request;

class TagCreateRequest extends Request
{

    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */ 
    public function rules()
    {
        return [
            'tag' => 'required|unique:tags,tag',
            'title' => 'required',
            'subtitle' => 'required',
            'layout' => 'required',
        ];
    }
}

该类继承自 Illuminate\Foundation\Http\FormRequest，当该类实例化的时候就会对请求进行验证，需要验证的项目有两个：

authorize() ：验证用户是否经过登录认证
rules()：返回验证规则数组

表单请求的神奇之处在于会在表单请求类实例化的时候对请求进行验证，如果验证失败，会直接返回表单提交页面并显示错误信息。这意味着如果将表单请求作为控制器方法参数，那么验证工作将会在执行对应方法第一行代码之前进行。接下来我们就来定义保存的控制器方法。

实现 TagController@store

编辑控制器 TagController.php 代码如下：

<?php

// 在TagController顶部添加这个use语句
use App\Http\Requests\TagCreateRequest;

// 修改 store() 方法代码如下
/**
 * Store the newly created tag in the database.
 *
 * @param TagCreateRequest $request
 * @return Response
 */
public function store(TagCreateRequest $request)
{
    $tag = new Tag();
    foreach (array_keys($this->fields) as $field) {
        $tag->$field = $request->get($field);
    }
    $tag->save();

    return redirect('/admin/tag')
                    ->withSuccess("The tag '$tag->tag' was created.");
}

现在，通过依赖注入，TagCreateRequest 被构造、表单被验证，只有验证通过后才会将请求参数传递到 store 方法。store 方法接下来才会创建并保存新的 Tag 实例。最后，页面重定向到后台标签列表，并带上保存成功消息： Laravel博客后台新建标签

点击“Add New Tag”按钮提交表单，保存成功： Laravel博客后台新建标签成功页面

5、实现 admin.tag.edit

接下来，我们来编辑路由方法 admin.tag.edit 来显示标签编辑表单。

实现 TagController@edit

更新 TagController 类，编辑 edit 方法如下：

/**
 * Show the form for editing a tag
 *
 * @param int $id
 * @return Response
 */
public function edit($id)
{
    $tag = Tag::findOrFail($id);
    $data = ['id' => $id];
    foreach (array_keys($this->fields) as $field) {
        $data[$field] = old($field, $tag->$field);
    }

    return view('admin.tag.edit', $data);
}

创建 admin.tag.edit 视图

在 resources/views/admin/tag 目录中，创建 edit.blade.php 并编辑其内容如下：

@extends('admin.layout')

@section('content')
<div class="container-fluid">
    <div class="row page-title-row">
        <div class="col-md-12">
            <h3>Tags <small>» Edit Tag</small></h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Tag Edit Form</h3>
                </div>
                <div class="panel-body">

                    @include('admin.partials.errors')
                    @include('admin.partials.success')

                    <form class="form-horizontal" role="form" method="POST" action="/admin/tag/{{ $id }}">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="_method" value="PUT">
                        <input type="hidden" name="id" value="{{ $id }}">

                        <div class="form-group">
                            <label for="tag" class="col-md-3 control-label">Tag</label>
                            <div class="col-md-3">
                                <p class="form-control-static">{{ $tag }}</p>
                            </div>
                        </div>

                        @include('admin.tag._form')

                        <div class="form-group">
                            <div class="col-md-7 col-md-offset-3">
                                <button type="submit" class="btn btn-primary btn-md">
                                    <i class="fa fa-save"></i>
                                    Save Changes
                                </button>
                                <button type="button" class="btn btn-danger btn-md" data-toggle="modal" data-target="#modal-delete">
                                    <i class="fa fa-times-circle"></i>
                                    Delete
                                </button>

                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

{{-- 确认删除 --}}
<div class="modal fade" id="modal-delete" tabIndex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    ×
                </button>
                <h4 class="modal-title">Please Confirm</h4>
            </div>
            <div class="modal-body">
                <p class="lead">
                    <i class="fa fa-question-circle fa-lg"></i>
                    Are you sure you want to delete this tag?
                </p>
            </div>
            <div class="modal-footer">
                <form method="POST" action="/admin/tag/{{ $id }}">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="_method" value="DELETE">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-danger">
                        <i class="fa fa-times-circle"></i> Yes
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@stop

在浏览器中访问编辑页面

现在如果点击标签的编辑按钮，就会看到编辑表单，如果点击删除按钮则会弹出确认按钮： Laravel博客后台标签编辑页面

当然，标签现在还不能真的被删除或更新，接下来我们要在后台实现其业务逻辑。

6、实现 admin.tag.update

和 admin.tag.store 路由处理 admin.tag.create 表单一样，我们使用 admin.tag.update 路由处理 admin.tag.edit 表单。

创建表单请求类 TagUpdateRequest

我们使用如下 Artisan 命令生成处理更新表单请求类 TagUpdateRequest：

php artisan make:request TagUpdateRequest

然后编辑刚刚生成的 TagUpdateRequest.php 文件（该文件位于 app/Http/Requests 目录下）：

<?php

namespace App\Http\Requests;

use App\Http\Requests\Request;

class TagUpdateRequest extends Request
{

    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'title' => 'required',
            'subtitle' => 'required',
            'layout' => 'required',
        ];
    }
}

该请求处理类和 TagCreateRequest 基本一样。

实现 TagController@update

接下来我们更新 TagController.php 文件内容如下：

// 在TagController顶部添加新的use语句
use App\Http\Requests\TagUpdateRequest;

// 替换 update() 方法如下
/**
 * Update the tag in storage
 *
 * @param TagUpdateRequest $request
 * @param int $id
 * @return Response
 */
public function update(TagUpdateRequest $request, $id)
{
    $tag = Tag::findOrFail($id);

    foreach (array_keys(array_except($this->fields, ['tag'])) as $field) {
        $tag->$field = $request->get($field);
    }
    $tag->save();

    return redirect("/admin/tag/$id/edit")
                    ->withSuccess("Changes saved.");
}

现在我们就可以编辑标签并点击“保存更改”（Save Changes）按钮实现标签修改操作。

7、实现标签删除功能

到目前为止，我们已经基本完成后台标签功能了（我们后续将会在博客文章创建及编辑中实现标签与文章的绑定），剩下来要做的就是实现标签删除功能了。

实现 TagController@destroy

要在编辑标签页面实现删除标签功能，首先要修改 TagController.php 的 destroy 方法如下：

/**
 * Delete the tag
 *
 * @param int $id
 * @return Response
 */
public function destroy($id)
{
    $tag = Tag::findOrFail($id);
    $tag->delete();

    return redirect('/admin/tag')
                    ->withSuccess("The '$tag->tag' tag has been deleted.");
}

没有任何神奇的地方：获取标签、删除标签，删除成功后重定向到标签列表页： Laravel博客后台标签删除成功页面

移除 admin.tag.show

你可能已经注意到还有一个路由到目前为止还没有被使用，admin.tag.show 用来显示标签详情，该路由通常用于给那些没有编辑权限的用户查看详情。在本系统中我们不需要查看标签详情（实际上这个功能也没有什么意义），所以将其删除。首先在 app/Http/routes.php 中修改路由如下：

// 将如下这行代码
 resource('admin/tag', 'TagController');
// 修改成
 resource('admin/tag', 'TagController', ['except' => 'show']);

然后在控制器 TagController.php 中移除 show() 方法。下一节我们将会为博客系统实现文件上传功能。

Vote Vote Cancel

Collect Collect Cancel

Donate

47 Comments

php不是这么开发的，简单的东西复杂化

博客系列不错！

感谢博主！在这学到了很多！

如果有前面的内容都顺利做完，做到这里发现tag页面这个表格却莫名其妙的样式不对的同学。检查一下vendor/bower_dl/datatables-plugins/这个目录名，如果是vendor/bower_dl/datatables.net-plugins这样的话，需要在gulpfile.js里修改（var dtDir = （加一个.net）），再重新移动、合并文件。可能是最新的datatables-plugins默认目录名改变了吧，之前按照教程里的gulpfile.js合并文件时，它找不到文件也不报错，就那么通过了卧槽。不太熟悉前端，找了几个小时才找出来为什么，神特么烦。

还有就是调样式的问题一定要Ctrl+F5，直接鼠标点重新加载会加载缓存样式。chrome的话可以F12，在network的Size那里看你页面里的每一个请求是否使用了缓存。难受啊马飞

123

admin.tag.create视图和实际文件名对不上号，要改其中一个

登录后即可添加评论

项目必备软件安装

设置 Windows 本地开发环境

设置 Linux/Mac 本地开发环境

Homestead 和 Laravel 安装器

从测试开始（一）：创建项目和PHPUnit

从测试开始（二）：使用Gulp实现自动化测试

十分钟搭建博客系统

构建博客后台管理系统

使用Bower+Gulp集成前端资源

在后台实现文章标签增删改查功能

实现文件上传管理功能

后台文章增删改查功能实现（支持Markdown）

前台功能优化：给博客换上漂亮的主题 & 完善博客功能

联系我们 & 发送邮件 & 队列使用（基于数据库）

添加评论、RSS 订阅和站点地图功能实现

创建项目和测试驱动开发

十分钟完成博客系统搭建

构建博客后台管理系统

在后台实现文章标签增删改查功能

在后台实现文件上传删除管理功能

在后台实现文章增删改查功能（支持Markdown）

给博客套上 Claen Blog 主题 & 完善博客前台功能

博客前台联系我们 & 邮件发送功能实现

添加评论、RSS 订阅和站点地图功能实现

将博客应用自动部署到线上服务器完整流程详解

在后台实现文章标签增删改查功能

1、创建标签模型和迁移

编辑标签迁移文件

编辑文章与标签对应关系迁移

运行迁移

2、实现 admin.tag.index

实现 TagController@index

创建 admin.tag.index 视图

创建返回成功信息局部视图

访问后台标签管理列表

3、实现 admin.tag.create

实现 TagController@create

创建 admin.tag.create 视图

创建 admin.tag._form 局部视图

4、实现 admin.tag.store

创建表单请求类 TagCreateRequest

实现 TagController@store

5、实现 admin.tag.edit

实现 TagController@edit

创建 admin.tag.edit 视图

在浏览器中访问编辑页面

6、实现 admin.tag.update

创建表单请求类 TagUpdateRequest

实现 TagController@update

7、实现标签删除功能

实现 TagController@destroy

移除 admin.tag.show

47 Comments