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

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

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

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

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

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

接下来我们写个获取短信验证码接口,我这边直接使用NodeSDK快速引入开发:

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

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

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

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

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

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

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

我们可以看下效果:

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

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

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

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

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

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

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

接着需要实现文章详情界面的开发,上篇文章开发文章发表界面的时候介绍了mavon-editor这个vuemd插件的使用方法。在文章发表界面我们是使用双屏进行书写与预览,文章详情界面我们依旧采用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

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

原文发布于微信公众号 - 周先生自留地(zhanyue_org)

原文发表时间:2019-08-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券