vue博客实战---博客后台开发

上一篇介绍了博客首页的开发，本篇文章主要讲讲登陆注册和博客后台功能的开发。本篇文章的重点：注册/登陆，后台文章列表，文章修改/删除，文章发表。博客文章发表界面使用到了maven-editor插件，用户注册登录生成token凭证则使用了jsonwebtoken这个包。将顺便介绍这两个技术点的基本使用。我们先看看今天要实现的效果图：

(由于没有UI个人审美极致只能这样了)

首先我们先来设计用户注册登录界面，注册界面需要上传用户头像，头像我直接只用element-ui中的el-upload组件进行上传：

这边对el-upload组件携带的属性做下解释：

action：后端上传图片接口，在这里使用Node实现。
:on-success：图片上传成功进行回调
:before-upload：图片上传前进行回调
:show-file-list：是否显示图片列表名称
v-loading：定义的变量，如果为true则会显示加载提示框
element-loading-text：出现加载提示框会显示的文字

头像上传其实就是你选择本地图片，然后会先调用：before-upload所对应的的回调方法对上传操作做前置判断，然后对action指定的上传接口发起请求进行头像上传，头像上传成功则执行on-success中的成功回调方法获得图片路径，并在img标签中进行渲染。我们可以看下两个回调方法：

后端上传图片逻辑我之前写过一篇文章讲解，因为比较懒那部分逻辑直接ctrl + v过来本项目了：Node上传文件(1)

然后头像区域下面其实就是五个input区域，最下方有两个按钮根据注册或登录显示不同按钮。接下来我们可以看下效果：

登录界面其实就是通过v-if将额外的input组件以及el-upload组件进行隐藏。布局就不多说了(反正也很丑没啥好说的)，直接贴截图：

前后端交互实际上篇文章已经有涉及了，通过axios发起post请求，我就直接贴下代码：

后端注册逻辑我不想多说，就是一堆业务逻辑，用户注册或登录成功的时候需要给用户生成一个登陆凭证token，文章开头我讲过了我直接使用jsonwebtoken将用户信息转化为token。那什么是jsonwebtoken呢？

之前有专门对jsonwebtoken写了一篇文章进行入门教学：jsonwebtoken生成与解析token ，用户注册或者登录成功，使用如下方法将用户信息加密成token：

jwt.sign(params, secret, options)

然后将token返回给前端，前端将用户信息保存到localstorage中。然后路由跳转到博客后台文章列表界面，我们看下返回的用户信息示例：

跳转到后台首页之后，需要渲染文章列表。所以在mounted阶段调用后端文章列表接口请求文章列表，判断localstorage中的用户信息是否存在，不存在则返回登录界面：

文章列表使用element-ui的el-card组件开发，以卡片形式显示文章列表，卡片上的图片目前是写死的，后期会改成从文章内容中筛选出一张图片

el-col的:span属性一行上限24，所以设置成12刚好一行显示两篇文章，我们可以看下界面效果：

在文章列表可以对每一篇文章进行修改或者删除。删除会弹出对话框确认删除，再次点击确认则通过axios发起post请求调取删除文章接口从数据库中删除该文章：

后台就不介绍了，其实就是一个简单的sql语句。当我们对某一篇文章点击修改时，会携带文章id跳转到文章发表界面：

进入文章发表界面，在mounted时期会请求获取文章详情接口获取文章详情，然后渲染到对应的输入框进行重新编辑。文章发表界面标签使用了element-ui中的el-tag组件进行开发：

文章正文我使用了刚才说的mavon-editor插件，支持MarkDown编写文章。首先在项目根目录安装mavon-editor插件，命令为：

npm install --save-dev mavon-editor

然后打开index.js文件，引入mavon-editor插件：

进入文章发表界面articleEdit.vue文件，将mavon-editor引入文章正文区域：

这里对mavon-editor的属性做下必要的解释：

@imgAdd：插入图片会触发该方法，进行图片上传操作
@imgDel: 删除图片
:ishljs：开启代码高亮props
toolbars:开启的工具栏的选项

那说到toolbars可以选择开启的工具栏选项，那我直接贴下可选择开启的工具栏选项：

至于可选事件我是只使用到图片添加和图片删除两个方法，我直接贴出所有支持的事件供需要的人参考：

接着我们可以看下$imgAdd和$imgDel两个方法：

首先和上传头像一致，首先将插入的图片上传服务器。当图片上传成功将服务器返回的图片url替换文本中的图片路径。我们可以先看下文章发表界面效果，如果我们点击左边菜单栏文章发表，会进入文章发表界面，如果选择文章列表修改文章则会打开旧文章进行修改：

点击下方的保存按钮，对发表的文章进行保存。这时候会判断路径是否携带id，若携带id表示本次操作为更新文章操作，会通过axios发起post请求更新文章接口：

若路径不携带id，则表示本次操作为发表文章操作，会通过axios发起post请求发表文章接口：

文章发表成功会路由跳转回博客后台文章列表，后台博客增删改查的功能就全部实现了，本篇内容到这里也结束了，下一篇将实现文章详情界面与文章底部评论区，下一篇再见！