Vue+SpringBoot项目实战（十八）：博客功能开发

其实项目一开始的时候我就暗搓搓地安装了这个编辑器，所以如果你们复制过我的 package.json 文件或者直接从 github 上下的源码，就不用再安装了。

目前常见的文本编辑器有两种，即富文本编辑器和 markdown 编辑器，我一直写作用的都是 markdown，基本不用动鼠标，而且在各个平台样式比较统一，方便迁移。一开始可能觉得语法麻烦，其实用的多的就那么几个，写几篇就熟悉了。

简单介绍一下，这个 mavon-editor 编辑器应该是最火的国产开源 markdown 编辑器里最火的一个，github 3.4k star。功能比较齐全，界面比较舒服，作者也很热情地解决使用者的问题，我用了一下，暂时没发现什么 BUG。仓库地址：

博客功能大概可以分为三个部分，分别是文章展示、文章管理和编辑器，文章展示又可以划分为文章列表与文章详情两个部分。


虽然编辑器提供预览功能，但一般我们在前台只不需要向用户展示 markdown 原文，所以最好还是单独编写一个文章详情页面渲染出 html。有两种思路：

• 第一种，在数据库中仅保存 markdown 语法的文本，在需要使用时解析为 html，并在前台渲染


• 第二种，markdown、html 均保存在数据库中，需要使用时取出 html 并在前台渲染

第一种的好处就是节省传输的数据量与数据库空间，坏处就是需要自己编写解析方法，相当于又重写了一遍编辑器，而且难以保证解析出来的样式跟原编辑器一致（用一些公开的解析函数也存在这个问题）。

当然，如果编辑器提供了解析的 API 那就比较舒服了，但我暂时没找到相关的内容。作者可能并不想这么做，而是提供了一个可以传递 markdown 与 html 值的 save 方法，因此就这个编辑器而言，我觉得选择第二种方法方便一些。

下面是各个页面的初步设计与功能介绍：

文章列表：

展示文章的题目、摘要、封面等信息，提供文章详情页面入口。主要是前端设计与分页功能实现，后期可以扩展分类标签、检索、归档等功能，还可以在侧边栏加入作者简介等信息。

文章详情：

这个页面用于展示文章的具体内容，也就是渲染从数据库中取出的 html。打码的部分说明了我是一个遵守平台规则的老实人。

文章管理：

后台的管理页面，提供查看、发布、修改文章的入口以及删除功能，需要内容管理权限。

编辑器：

核心页面，在开源编辑器的基础上，添加了标题、摘要及封面设置功能。

• 第一步，添加标题输入栏


• 第二步，插入自定义工具，提供摘要与封面录入功能


• 第三步，编写 save 方法，与后端交互

实现标题的输入只需要添加一个

<el-input
v-model="article.articleTitle"
style="margin: 10px 0px;font-size: 18px;"
placeholder="请输入标题">el-input>


插入自定义工具，文档中并没有相关内容，但是我寻思肯定有人会问，就搜了一下 issues，果然


作者在 2018 年 8 月份就这个问题提交了一次更新。当然其实也可以直接看源码，里面设置了 4 个插槽，对应不同的插入位置。


为了保证我们插入的图标跟原来的图标样式一致，需要再瞅一眼 tool-bar 的源码。里面的按钮大概是这样写的

<button type="button"
v-if="toolbars.save"
@click="$clicks('save')"
class="op-icon fa fa-mavon-floppy-o"
aria-hidden="true"
:title="`${d_words.tl_save} (ctrl+s)`">button>


我们照葫芦画瓢设置一下 type、class 和 title 属性，弄一个添加摘要和封面的按钮：

<button type="button"
class="op-icon el-icon-document"
:title="'摘要/封面'"
slot="left-toolbar-after"
@click="dialogVisible = true">button>


其实样式主要是 class 里的 op-icon 控制的。

添加摘要和封面的表单被我做在弹出框里了。上传文章封面复用之前上传图书封面的组件。

<el-dialog
:visible.sync="dialogVisible"
width="30%">
<el-divider content-position="left">摘要el-divider>
<el-input
type="textarea"
v-model="article.articleAbstract"
rows="6"
maxlength="255"
show-word-limit>el-input>
<el-divider content-position="left">封面el-divider>
<div style="margin-top: 20px">
<el-input v-model="article.articleCover" autocomplete="off" placeholder="图片 URL">el-input>
<img-upload @onUpload="uploadImg" ref="imgUpload" style="margin-top: 5px">img-upload>
div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消el-button>
<el-button type="primary" @click="dialogVisible = false">确 定el-button>
span>
el-dialog>


界面是这个样子：


然后我惊奇地发现图片上传不了，好像之前也有同学反映过这个问题，我没当回事。后来折腾半天，发现是图片上传这个组件比较狗，需要单独设置属性才能带上 COOKIE，不带 COOKIE 后端就拿不到 sessionId，就会被 shiro 拦截。修改后的组件模板部分如下：

<template>
<el-upload
class="img-upload"
ref="upload"
action="http://localhost:8443/api/admin/content/books/covers"
with-credentials
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="handleSuccess"
multiple
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kbdiv>
el-upload>
template>


相比之前添加了 with-credentials。

最后一步编写保存方法，常规操作，向后端发送数据即可。

组件完整的代码如下：

<template>
<div>
<el-row style="margin: 18px 0px 0px 18px ">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/admin/dashboard'}">管理中心el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/admin/content/book'}">内容管理el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/admin/content/article'}">文章管理el-breadcrumb-item>
<el-breadcrumb-item>编辑器el-breadcrumb-item>
el-breadcrumb>
el-row>
<el-row>
<el-input
v-model="article.articleTitle"
style="margin: 10px 0px;font-size: 18px;"
placeholder="请输入标题">el-input>
el-row>
<el-row style="height: calc(100vh - 140px);">
<mavon-editor
v-model="article.articleContentMd"
style="height: 100%;"
ref=md
@save="saveArticles"
fontSize="16px">
<button type="button" class="op-icon el-icon-document" :title="'摘要/封面'" slot="left-toolbar-after"
@click="dialogVisible = true">button>
mavon-editor>
<el-dialog
:visible.sync="dialogVisible"
width="30%">
<el-divider content-position="left">摘要el-divider>
<el-input
type="textarea"
v-model="article.articleAbstract"
rows="6"
maxlength="255"
show-word-limit>el-input>
<el-divider content-position="left">封面el-divider>
<div style="margin-top: 20px">
<el-input v-model="article.articleCover" autocomplete="off" placeholder="图片 URL">el-input>
<img-upload @onUpload="uploadImg" ref="imgUpload" style="margin-top: 5px">img-upload>
div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消el-button>
<el-button type="primary" @click="dialogVisible = false">确 定el-button>
span>
el-dialog>
el-row>
div>
template>
<script>
import ImgUpload from './ImgUpload'
export default {
name: 'Editor',
components: {ImgUpload},
data () {
return {
article: {},
dialogVisible: false
}
},
mounted () {
if (this.$route.params.article) {
this.article = this.$route.params.article
}
},
methods: {
saveArticles (value, render) {
// value 是 md，render 是 html
this.$confirm('是否保存并发布文章?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$axios
.post('/admin/content/article', {
id: this.article.id,
articleTitle: this.article.articleTitle,
articleContentMd: value,
articleContentHtml: render,
articleAbstract: this.article.articleAbstract,
articleCover: this.article.articleCover,
articleDate: this.article.articleDate
}).then(resp => {
if (resp && resp.status === 200) {
this.$message({
type: 'info',
message: '已保存成功'
})
}
})
}
).catch(() => {
this.$message({
type: 'info',
message: '已取消发布'
})
})
},
uploadImg () {
this.article.articleCover = this.$refs.imgUpload.url
}
}
}
script>


后端部分首先是 pojo、DAO、service 一套，目前没什么可说的，不想自己写可以参考源码：