博客的每篇文章都是需要有标签的,它与文章也是多对多的关系 这篇笔记也是记录了实现标签的步骤逻辑。

在我们之前的笔记中创建了Tag的控制器和路由了 所以这篇笔记不在重复


1 创建模型与迁移文件

迁移文件如下:

    public function up()
{
Schema::create('tags', function (Blueprint $table) {
$table->increments('id');
// tag的名字 唯一
$table->string('tag')->unique();
// tag的标题
$table->string('title');
// tag副标题
$table->string('subtitle');
// tag的图片
$table->string('page_image');
// tag的描述
$table->string('meta_description');
// 要使用的布局
$table->string('layout')->default('blog.layouts.index');
// 排序
$table->boolean('reverse_direction');
$table->timestamps();
});
}

2 展示Tag

在TagController的index方法添加如下代码:

    public function index()
{
$tags = Tag::all();
return view('admin.tag.index')->withTags($tags);
}

创建 index.blade.php 路径是:views/admin/tag

@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.error')
@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

注意:在上面的代码片段中我们运用了fontawesome和DataTable 可以自行用Bower和Gulp集成一下


3 创建Tag

在我们进入到创建视图是需要自动填入一些默认值,可以这么做:在TagController里添加一个属性fields数组:

    protected $fields = [
'tag' => '',
'title' => '',
'subtitle' => '',
'meta_description' => '',
'page_image' => '',
'layout' => 'blog.layouts.index',
'reverse_direction' => 0,
];

然后在create方法中运用:

    public function create()
{
$data = [];
foreach ($this->fields as $field => $default) {
// 这里使用old方法是因为如果验证规则没有通过的话 将之前填入的值返回给页面
// 这样就避免了一个问题:某个字段没有通过规则要求 重定向回创建页面时之前填入的数据不会消失。
$data[$field] = old($field, $default);
}
return view('admin.tag.create', $data);
}

创建 create.blade.php 路径是:views/admin/tag

@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 From</h3>
</div>
<div class="panel-body">
@include('admin.partials.error')
<form action="/admin/tag" method="post" role="form" class="form-horizontal">
<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 class="btn btn-primary btn-md" type="submit">
<i class="fa fa-plus-circle"></i>
Add New Tag
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection

上面的代码片段中include一个_form.blade.php 是因为有一段HTML是可以重复利用的

接下来就创建_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>

创建一个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()
{
// 我们可以直接在rules中做一些验证处理 这根Validate效果是一样的
return [
'tag' => 'required|unique:tags,tag',
'title' => 'required',
'subtitle' => 'required',
'layout' => 'required',
];
}
}

实现store方法:

    public function store(Requests\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');
}

4 修改Tag

在TagController中添加如下代码:

    public function edit($id)
{
$tag = Tag::findOrFail($id);
$data = ['id' => $id];
foreach (array_keys($this->fields) as $key) {
$data[$key] = old($key, $tag->$key);
}
return view('admin.tag.edit', $data);
}

创建edit视图:

@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.error')
@include('admin.partials.success')
<form action="/admin/tag/{{ $id }}" class="form-horizontal" role="form" method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="id" value="{{ $id }}">
<input type="hidden" name="_method" value="put">
<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 class="btn btn-primary btn-md" type="submit">
<i class="fa fa-save"></i>
Save Changes
</button>
<button class="btn btn-danger btn-md" type="button" 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 class="close" type="button" data-dismiss="modal">x</button>
<h4 class="modal-title">Please Confirm</h4>
</div>
<div class="modal-body">
<p class="lead">
<i class="fa fa-question-circle"></i>
Are you sure you want to delete this tag?
</p>
</div>
<div class="modal-footer">
<form action="/admin/tag/{{ $id }}" method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="_method" value="delete">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancl</button>
<button class="btn btn-danger" type="submit">
<i class="fa fa-times-circle"></i>
Yes
</button>
</form>
</div>
</div>
</div>
</div>
@endsection

同样的 我们需要创建一个TagUpdateRequest:

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',
];
}
}

然后在update方法中添加如下代码:

    public function update(Request $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.');
}

5 删除Tag

我们在edit视图中添加了删除的表单 现在只需要实现以下TagController中的destroy方法就可以了:

    public function destroy($id)
{
$tag = Tag::findOrFail($id);
$tag->delete(); return redirect('/admin/tag')->withSuccess("The '$tag->tag' tag has been deleted.");
}

6 其他

我们不需要实现show方法,因此我们需要把路由改成这样:

Route::resource('tag', 'TagController', ['except' => 'show']);

然后删除TagController中的show方法就行了。

Laravel5.1 搭建博客 --构建标签的更多相关文章

  1. Laravel5.1 搭建博客 --编译前端文件

    上篇文章写了Gulp编译前端文件,这篇记录下在搭建博客中使用Gulp 1 引入bootstrap和js 1.1 首先先在项目本地安装Bower sudo npm install bower 1.2 创 ...

  2. Laravel5.1 搭建博客 --展示简单的首页

    今天起开始搭建博客,把之前学的东西运用下. 1 创建 配置项目 1.1 创建项目 composer create-project laravel/laravel blog 5.1.1 1.2 配置数据 ...

  3. Laravel5.1 搭建博客 --文章的增删改查

    教程源于:Laravel学院 继文件上传后呢,咱来搞一搞文章的事情. 1 更改数据表 我们需要改改数据表的结构 因为涉及到重命名列名 所以咱需要引入一个包:Doctrine: composer req ...

  4. Laravel5.1 搭建博客 --后台登录

    今天咱来实现后台的登录. 首先我们的后台需要三个控制器: PostController:管理文章. TagController:管理文章标签. UploadController:上传文件. 当我们访问 ...

  5. Laravel5.1 搭建博客 --上传文件及文件管理

    教程源自:Laravel学院 这一节 咱来说说上传文件的功能实现,我们会把上传的文件保存到项目本地,不仅上传 还有删除和预览功能. 1 配置 我们先从配置开始做起,先修改我们自己创建的 blog.ph ...

  6. flask tutorial => make a blog :) flask 搭建博客系统从零开始!

    please follow the tutorial from the official site :) http://flask.pocoo.org/docs/ You could download ...

  7. Django搭建博客网站(二)

    Django搭建自己的博客网站(二) 这里主要讲构建系统数据库Model. Django搭建博客网站(一) model 目前就只提供一个文章model和一个文章分类标签model,在post/mode ...

  8. django学习笔记——搭建博客网站

    1. 配置环境,创建django工程 虚拟环境下建立Django工程,即创建一个包含python脚本文件和django配置文件的目录或者文件夹,其中manage.py是django的工程管理助手.(可 ...

  9. 基于Hexo和Github搭建博客

    搭建自己的个人博客. 准备工作 确保电脑需要已下载安装node和npm.查看安装是否成功,windows只需在命令行输入以下两条命令即可. 1 2 $ node -v $ npm -v 安装hexo ...

随机推荐

  1. git——分布式版本控制系统

    Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件 ...

  2. Asp.Net Core + SignalR 实现实时通信

    一.搭建项目 1.创建一个ASP.NET Core MVC 项目 2.nuget 下载和安装 MicroSoft.AspNetCore.SignalR vs提示版本冲突 这时我们选择低版本即可 二.S ...

  3. Ajax异步打开新页面弹框被拦截,无法将参数值传递到后台

    一.Form提交,打开新页面被拦截 手动触发Form提交打开新页面是不会被拦截的,但是如果通过Ajax异步处理回调后再程序自动触发Form提交的话,就会被浏览器当成广告弹框拦截 1.暂时的解决办法:如 ...

  4. 会话过程保存数据对象cookie和session

    1 cookie是以键值对保存在浏览器端,服务器端可以创建.接收.发送 cookie 信息. request可以接收 cookie, response 可以发送 cookie. 1)cookie 可以 ...

  5. [Jobdu] 题目1377:缓变序列

    题目描述: 陈博在写论文时碰到一个难题:如何将给定的整数序列变换成缓变序列:即任意两个相邻的元素相差均为1,第1个元素和最后一个元素相差也为1. 变换是指改变原整数序列中各元素的顺序.例如整数序列1, ...

  6. IOS基于XMPP协议开发--XMPPFramewok框架(二):服务器连接

    连接服务器前需准备事项: 1.搭建好XMPP服务器 2.设置服务器地址和端口 [_xmppStream setHostName:@"127.0.0.1"]; [_xmppStrea ...

  7. linux kill 关闭进程命令

    杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志. 首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令: # kill -pid 注释:标准的kill命令通常都能达到目的 ...

  8. 通过CLR API实现C++调用C#代码交互

    对于某些跨平台程序,这也就意味着只能在windows下使用了 不过最近.Net开源或许以后可以跨平台 之前花了一些时间研究COM方式调用,太繁琐不推荐. COM方式调用总结 后来尝试使用CLR C++ ...

  9. CXSprite.cpp文件

    #include "XSprite.h" CXSprite::CXSprite(void) { m_strPic.clear(); } CXSprite::~CXSprite() ...

  10. cocos2d-x 之 CCProgressTimer

    --绕圆心转动的进度动画 local function SpriteProgressToRadial() local leftProgress = CCProgressTimer:create(CCS ...