vue博客实战---逻辑优化及详情界面开发

经过前三篇文章的介绍，其实博客基本功能已经实现。目前还缺少一个博客详情界面。本篇的主要目的修复前两篇留下的一些bug以及开发文章详情界面。

注册界面开发时只判断账号是否注册，未注册填写信息就可以进行注册。但是这个架构是非常不合理的。所以我们需要添加验证码验证操作。之前有写过对接阿里云短信API的文章，有需要的可以自行阅读：阿里云--获取短信验证码。本篇文章将使用腾讯云短信服务，短信服务使用有三大前提工作：

1.创建应用
2.创建签名
3.创建短信模板

这部分和阿里云操作类似，在这里我就不准备重复举例了。

创建成功应用会生成AppID，App Key，使用短信业务需要进行鉴权，需要使用这两个参数：

接下来我们写个获取短信验证码接口，我这边直接使用Node的SDK快速引入开发：

引入SDK的一大好处就是可以跳过鉴权等操作，SDK会帮助进行鉴权操作，而且短信业务的各种API都是已经封装好的。当我们验证码发送成功，我们需要保存验证码进行数据库层的业务逻辑判断，我这边保存验证码的操作主要为以下两步：

1.删除数据表中本号码的所有验证码
2.插入验证码数据到数据表

接下来需要去注册接口增加验证码验证的逻辑，验证逻辑分为以下几步：

1.判断验证码是否存在
2.如果验证码存在则判断验证码是否过期
3.判断验证码错误次数是否超过五次,超过五次则删除验证码
4.如果验证码验证成功，则删除验证码

注册接口增加完验证码操作成功，我们回到vue项目在前端加上验证码操作。首先这里需要两个button标签用于显示获取验证码按钮和显示倒计时以及一个input标签用于输入验证码：

可以看到我在获取验证码按钮上绑定了click事件，调用接口获取手机验证码：

验证码获取成功则要将获取验证码按钮隐藏，改成显示倒计时，使用定时器来实现这个效果：

我们可以看下效果：

接下来进入首页，我们需要对文章增加三个显示按钮：文章点赞数，文章评论数，以及文章浏览数。在便签右边新增三个div存放按钮：

这边我使用了element-ui的icon图标，对点赞按钮绑定click事件，用户点击会判断用户是否点赞过本文章，如果已点赞则取消点赞，如果未点赞则进行点赞：

在首页加载mounted阶段，会调用获取文章列表的接口。对该接口进行修改，使用子查询同时查询文章浏览数，文章评论数以及文章点赞数：

这里存在一个细节需要优化：用户每次进入文章详情界面该文章浏览次数就会+1，这样浏览次数是不准确的。可以根据ip来进行判断身份。需要的可以自行优化。右侧导航栏之前因为博客还未搭建所以界面写死，现在将右侧导航栏分成三大部分：顶部微信精选文章，中间博客精选文章，底部友情链接，布局直接使用elmenet-ui的el-card组件：

微信精选文章我是直接调用聚合的免费API实现的：

获取博客精选文章目前没有优秀文章，我暂时选择随机从博客返回1--4篇文章：

我们可以看下首页的效果：

接着需要实现文章详情界面的开发，上篇文章开发文章发表界面的时候介绍了mavon-editor这个vue版md插件的使用方法。在文章发表界面我们是使用双屏进行书写与预览，文章详情界面我们依旧采用mavon-editor来进行文章回显，不过我们只开启预览区，关闭编辑区。

mavon-editor组件的属性值我设置在computed中：

这里主要对mavon-editoreditor标签的几个属性做下解释：

class：文章回显直接使用class=markdown-body
subfield：false则表示只开启单栏
defaultOpen：edit表示开启的为编辑单栏，preview表示开启预览单栏
editable：是否允许编辑
toolbarsFlag：是否开启工具栏
ishljs:是否开启代码高亮

在文章详情界面的mounted阶段，查询文章详情数据以及文章评论数据。我这里暂时是两个接口实现，可以整合到一个接口进行优化下：

可以先看下文章回显效果：

在文章底部添加评论区以及精选评论展示区：

对发表评论按钮添加click事件，保存用户评论信息：

评论成功将会在底部精彩评论区域显示文章的所有评论：

来自直男的审美，UI可以自行优化，没有UI的情况下我的审美只能做到这样了。到这里文章详情界面也开发完成，博客基本功能开发完成，整个博客网站首页部分功能全部实现，还剩下相册，留言板以及资源下载尚待开发。

vue博客实战源码已同步到码云，地址：

https://gitee.com/mqzuimeng/vue_blog.git

如果喜欢我的文章，欢迎关注我的个人公众号：周先生自留地