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

作者: 逆月翎 | 来源:发表于2019-08-13 18:45 被阅读0次

欢迎关注我的个人公众号：周先生自留地，简书文章不定时更新。

经过前三篇文章的介绍，其实博客基本功能已经实现。目前还缺少一个博客详情界面。本篇的主要目的修复前两篇留下的一些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阶段，查询文章详情数据以及文章评论数据。我这里暂时是两个接口实现，可以整合到一个接口进行优化下：