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


本节我们将会完成博客后台管理系统的文章发布功能:我们将会继续完善 posts 表迁移、引入一些额外前端资源、并实现文章创建、修改和删除。

1、修改 posts 表

我们在十分钟创建博客应用中已经创建了 posts 表迁移,现在要对其进行修改和完善。

安装 Doctrine 依赖包

在 Laravel 中如果需要修改数据表的列,则需要安装 Doctrine 依赖包,我们使用 Composer 安装该依赖包:

创建表迁移文件

接下来使用 Artisan 命令创建新的迁移文件:

然后编辑刚刚创建的迁移文件:

我们对表字段略作说明:

  • subtitle:文章副标题
  • content_raw:Markdown 格式文本
  • content_html:使用 Markdown 编辑内容但同时保存 HTML 版本
  • page_image:文章缩略图(封面图)
  • meta_description:文章备注说明
  • is_draft:该文章是否是草稿
  • layout:使用的布局

运行迁移

迁移文件已经创建并编辑好了,接下来我们登录到 Laradock 中运行该迁移:

现在数据库部分已经完成了!

2、创建 Markdown 服务

在本博客项目中我们将支持 Markdown 格式编辑文章。Markdown 是一种轻量级的标记语言,Markdown 的理念是能让文档更容易读、写和随意改。Markdown 格式文本可以被轻松转化为 HTML。

安装 Markdown 依赖包

有很多 PHP 包可用于将 Markdown 转化为 HTML。这里我们使用 Michel Fortin 提供的包 SmartyPants,在本地主机上使用 Composer 安装下面两个依赖包:

创建 Markdowner 服务

这里我们创建一个封装前面使用 Composer 安装的 php-markdownphp-smartypants 包的简单服务类。

app/Services 目录下新建 Markdowner.php 文件,编辑该文件内容如下:

3、修改相关模型

接下来我们来编辑 Post 模型类和 Tag 模型类来建立两者之间的关联关系。

首先编辑 app/Models/Tag.php 文件内容如下:

然后修改 app/Models/Post.php 文件内容如下:

4、引入 Selectize.js 和 Pickadate.js

下面为后台文章功能引入两个前端 JS 资源,我们使用 NPM 下载资源,然后通过 Laravel Mix 引入。

使用 NPM 下载资源

首先是 Selectize.js。Selectize.js 是一个基于 jQuery 的 UI 控件,对于标签选择和下拉列表功能非常有用。我们将使用它来处理文章标签输入。使用 NPM 下载 Seletize.js:

接下来下载 Pickadate.js。Pickadate.js 是一个轻量级的 jQuery 日期时间选择插件,日期时间插件很多,选择使用 Pickadate.js 的原因是它在小型设备上也有很好的体验。下面我们使用 NPM 下载安装 Pickadate.js:

使用 Laravel Mix 管理前端资源

现在相应的前端资源已经下载好了,接下来我们使用 Laravel Mix 来管理这些资源。编辑根目录下的 webpack.mix.js 配置文件如下:

运行 npm run dev 重新编译前端资源。

5、创建表单请求类

正如我们在上一节处理标签时所做的一样,我们使用表单请求类来验证文件创建及更新请求。

首先,使用 Artisan 命令创建表单请求处理类,对应文件会生成在 app/Http/Requests 目录下:

编辑新创建的 PostCreateRequest.php 内容如下:

这是一个包含 authorize()rules() 方法的标准表单请求类,此外我们还添加了一个 postFillData() 方法,使用该方法可以轻松从请求中获取数据填充 Post 模型。

然后修改 PostUpdateRequest.php 内容如下:

该类继承自 PostCreateRequest,当然目前来看这连个类做的事情完全一样,我们也可以使用同一个请求类处理文章创建和修改,但是为了方便以后扩展这里我们使用两个请求类分别处理创建和更新请求。

6、添加辅助函数

我们还需要两个辅助函数,因此我们编辑 app/helpers.php 文件内容添加这两个函数:

checked() 方法用于在视图的复选框和单选框中设置 checked 属性。

page_image() 方法用于返回上传图片的完整路径。

7、修改 Post 模型

你可能已经注意到我们将 published_at 分割成了 publish_datepublish_time,下面我们在 Post 模型中添加这两个字段:

此外我们还添加了 getContentAttribute() 方法作为访问器以便返回 $this->content_raw。现在如果我们使用 $post->content 就会执行该方法。

8、修改 PostController 控制器

现在我们在 PostController 类中实现所有需要的功能。由于我们将表单验证分散到表单请求类中完成,控制器的代码量将会很小:

接下来唯一要做的就是创建相应视图了。

9、创建文章视图

现在我们来创建 PostController 中用到的所有视图。

首先修改已经存在的位于 resources/views/admin/post 目录下的 index.blade.php

该视图很简单,就是使用文章数据填充表格然后使用 DataTables 初始化表格。

接下来,在 resources/views/admin/post 目录下新建一个 create.blade.php

这里我们引入了 Selectize 和 Pickadate 库。你可能还注意到了我们还引入了一个尚未创建的局部视图 admin.post._form。下面我们就在 resources/views/admin/post 目录下创建这个视图,在该目录先新建一个 _form.blade.php,编辑其内容如下:

我们创建这个局部视图的目的是让 createedit 视图可以共享它。

下面我们在同一目录下创建 edit.blade.php

至此,所有后台文章管理所需的视图都已经创建好了。

10、移除 show 路由

最后要做的收尾工作是移除显示文章详情路由 show。编辑 routes/web.php 如下:

好了,接下来可以在后台测试文章创建、编辑、删除了。

11、测试后台文章增删改查功能

在浏览器中访问 http://blog57.test/admin/post,点击「创建新文章」按钮,进入发布文章页面:

点击「保存新文章」按钮,发布文章成功后跳转到后台文章列表:

第一篇即为我们刚刚发布的文章,其它是之前十分钟创建博客的测试数据。接下来我们可以点击「编辑」按钮编辑文章:

在该页面可以删除文章。「保存 - 继续」与「保存 - 完成」区别在于前者保存后会停留在编辑页面,后台保存后跳转到文章列表页。

在文章列表页我们还可以点击「查看」按钮查看文章详情:

当然现在页面还比较丑,而且并没有对 Markdown 格式内容做处理(其实只要将 posts 表中 content_html 字段内容输出即可),下一节我们将开始优化博客前台页面。


<< 上一篇: 在后台实现文件上传删除管理功能

>> 下一篇: 给博客套上 Claen Blog 主题 & 完善博客前台功能