文享日志

博客功能实现细节

博客

发表于2017年11月02日18:39:02

0条评论 358次阅读

感觉有说头的一些点我就说一下吧。。


翻页功能

        翻页功能实现每10条记录出现‘下一页’按钮,点‘下一页’出现后10条记录。开始在实现‘下一页’功能的时候不知道要怎么传递参数,来表明当前是第几个10.。。想过在后台弄个变量来记录点击'下一页'的次数,来给前台传送第几个10条数据。。弄来弄去的特别麻烦,关键最后也没有实现。后来想的在当前链接中传递参数,表明当前是第几个10,每点一下‘下一页’后台从get到的链接中获取到这个变量,标志一个10的一个变量加1。在构建页面时,for循环初始从这个变量扫描,显示当前到显示的评论或者文章简要,这样就实现了'下一页'的功能。。不知道别人是怎么写的。。我感觉我这样写挺完美的。。


评论功能

        开始用的畅言插件,但是我后台记录发表的文章的时候,并没有为文章弄一个具体唯一的ID,没办法用畅言定位当前文章。所以我在A文章发表的评论,在我把A删掉以后,A文章的评论就跑到了B文章。当时想了好多用什么来标识文章,文章名不可以,因为修改文章的时候改文章名。发表的时间也想过,但我在记录文章发表的时间时在后台经过一系列处理,时间数据返回前台为了美观又进行了处理。标识文章感觉有点不合适。然后畅言没办法用,我自己写了一个评论的功能。评论框中有说道的就是那个网址吧,当用户输入网址,发表评论,别人点击你评论的用户名,会跳转到你写的那个网址。当然当用户乱七八糟输入时不会发表成功的,因为也是经过正则来判断当前输入是否有效。后来进行其他功能实现时,发现没有文章ID,真的太不方便了,然后就将就的把那个处理过的时间当文章ID。再后来读Underscore源码发现时间戳函数,然后修改博客文章存入的属性。。为文章添加了一个还算完美的ID标识。。然后就是利用html5的本地存储,记录了评论用户输入的用户名,邮箱和网站的信息。方便了用户输入评论。


动画部分。

        当访问https://hanblog.herokuapp.com/,会经过初始动画页面,在滑稽消失的那一刻会上传访客IP信息。我调用了免费的IP查询API,可以查询到访客是哪个地方的人。在后台我发现,手机流量访问我的站,它会记录省会的地址,此外都会记录到你在哪个市(除了国外访问或者挂VPN)。。在微信朋友圈点开我的站,不知道为什么都会定位到天津。我测试在朋友圈打开百度,百度IP查询到的却是实际地址。。真是困惑。。滑稽动画部分还有加速访问我的站的能力,在没进行动画这部分时,当用户打开我的站的链接时,会等很长时间,因为他要进行激活远程数据库(我用的是国外的在线数据库),打开数据库,取数据等。当访问https://hanblog.herokuapp.com时,后台获取到消息,第一时间请求打开数据库。当动画完毕,进入主页时载入数据也就变快了。。不想我记录IP的可以直接访问https://hanblog.herokuapp.com/idx/0就可以了。

        然后是侧边框微博微信QQ的那个图标的动画。由于本博客放在heroku了,所以当用户点击这三个图标时,再下载加载会很慢,影响美观效果,然后利用图片的预加载技术,利用js在后台下载了这三张图片,当用户点击这三个图标时,图片会从缓存中读取。算是一个小优化吧。预加载技术在我以前的博文里有。。


访客功能

        实现每点一下文章链接,访问量+1。开始的时候没想清楚逻辑就仓促下手,在访客数据库链接文件中设置了全局变量,并且在文件中只写了保存函数,后来测试的时候,看到每点一下文章,数据库进行一条记录,我获取访客量的时候,要获取相同ID的记录的长度,时间发表越早的文章,浏览量越多(这是出bug了)。。。并且访问量少可能还能凑合,多的时候,数据库记录会很大。后来仔细想了想逻辑,添加了更新函数,每点一下文章链接,找到有当前文章ID的那条记录进行更新。。实现的时候有些困难啊,我的文章ID是在文章数据库链接文件中创建的,想了很多解决办法,最终还是决定在文章发表页面,点‘提交’的时候创建,后台获得到这个post时,提出文章ID,为这个文章初始化浏览量。。

        经过一系列过程复杂的操作,以前的一篇文章开始的时候忘记点了,导致没有初始化浏览量。上一段提到的初始化是对新发表的文章才可以,以前的文章没有浏览量,需要每一篇都点一下来初始化浏览量。然后我写了一段脚本,获取文章url,来初始化以前写的文章的浏览量,没想到把删除文章的url也获取到了。。然后for循环打开了100+个页面。。。博客崩溃了。。。浏览器还坚挺(这里说明谷歌Chrome就是牛🐂 )。。到mlab数据库看了看,数据都没有了。。心如死灰。😢 。。。联系了mlab,他们帮我恢复了数据。。感谢。。


点赞和点踩

        点赞或点踩,后台记录加一。这里利用了ajax和localStroge本地存储。ajax发送用户点赞请求,后台获取到请求的url,实现记录。。localStroge记录用户在当前页面点过赞了。当用户再点击时,不会再发送数据。


👍 3  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广