html点赞计数插件,ViLike.js - 一款轻量级的访问量&点赞统计插件

ViLike.js

👀👍 一款基于Bmob后端云轻量级的访问量&点赞插件

官方文档

特性

简单功能简单实现，封装十几行代码实现超轻量的JS插件。

无需在个人服务器上搭建后端系统，数据访问更加安全。

借助Bmob创建后端平台，创建、管理更加方便快捷。

什么情况需要它

✅ 当你想在你的博客显示访客统计时；

✅ 当你想在你的文章页显示阅读量时；

✅ 当你想给你的文章或者作品实现点赞功能时；

...

关于它

ViLike.js 是继 左撇峰子 开发 VuePress 主题 AntDocs 之后的一款 JavaScript 插件，整个插件在 Bmob 官方库基础之上封装了一些方法，方便小伙伴直接上手使用。ViLike.js 的目标很明确，旨在解决那些静态服务器因各种原因未能实现需后端搭配的功能的痛处。目前主要实现的功能为站点访问量统计、文章页阅读量统计以及常用的点赞功能。希望小伙伴们会喜欢这款插件~

准备工作

创建应用

请先登录或注册 Bmob, 进入控制台后点击左下角创建应用：

输入应用名称，并选择【开发版】进行创建：

创建数据表

应用创建完毕后，点击刚创建的应用，进入应用后，在左上角找到“添加表”并点击它，接着自行输入表名称进行创建：

创建相关字段

创建好数据表后，找到按钮组的“添加列”，并根据下列表格创建好相应的字段：

列名称列类型默认值是否唯一键skeyString(空)是

visitNumber0否

likeNumber0否

创建好的字段如图所示：

创建安全码

点击左侧边栏的“设置”，找到“安全验证”，并设置好 API 安全码：

至此，基本的准备工作就绪，接下来可以开始使用。

开始使用

引用库

在使用之前，你需要给你的项目引入 Bmob 和 ViLike.js ：

复制代码

当然，你也可以以包的形式进行安装：

npm i vilike

复制代码

或

yarn add vilike

复制代码

初始化

引用完毕后，在你项目入口文件进行以下配置：

ViLike.configure({

secretKey: 'Your Secret Key',

safeKey: 'Your Safe Key',

table: 'Table Name',

key: 'Key Prop Name(Not Value)',

visit: 'Visit Prop Name',

like: 'Like Prop Name'

});

复制代码

其中，相关参数说明如下：

secretKey：填写你的 Secret Key ，在 Bmob 后台“设置”-“应用密钥”即可看到 Secret Key；

safeKey：填写你的安全码；

table：数据表名称；

key：表字段名称，用于索引；

visit：表字段名称，用于访问量记录；

like：表字段名称，用于点赞记录；

配置相关信息后，就可以开始进行初始化：

ViLike.init();

复制代码

很棒！接下来就尝试一下插件的功能吧！

APIs

ViLike.get

ViLike.get(key,(visit,like,islike)=>{})

用于获取访问量、点赞数以及点赞状态，例如：

ViLike.get('1192a75ccf48e109',(visit,like,islike)=>{

// 依次显示 访问量、点赞数、点赞状态

console.log(visit,like,islike)

});

复制代码

key 是从 Bmob 后端云写入和读取的唯一标识，获取或操作访问量和点赞数都会使用到它，所以请确保 key 存入时是唯一的(建议 Bmob 后台设置好唯一键，预防错误情况产生)。

而 islike 是用于获取点赞的状态：当用户已经点赞过时，其返回值为 True，反之为 False。一般可用于判断点赞按钮的状态，比如当用户点赞过这篇文章时，点赞按钮的状态应当是不可用。

关于周期

考虑一般情况下用户不会经常清理浏览器数据，所以插件采用 Localstorage 技术来判别访问量计数和点赞的状态，这样可以使访问量计数和点赞的状态保持较长的周期。当用户一旦清空浏览器数据，访问量计数会继续统计，点赞状态也会恢复默认状态。

ViLike.like

ViLike.like(key,(like)=>{})

用于实现点赞计数功能，例如：

ViLike.like('1192a75ccf48e109',(like)=>{

// 显示点赞后最新的点赞数

console.log(like)

})

复制代码

一般用于按钮的 Click 事件：用户每点击按钮一次，点赞数就会+1。