ViLike.js - 一款輕量級的訪問量&點贊統計插件

ViLike.js

👀👍 一款基於Bmob後端雲輕量級的訪問量&點贊插件

官方文檔

官方文檔：ViLike.js
在線演示：ViLike.js Demo

特性

• 簡單功能簡單實現，封裝十幾行代碼實現超輕量的JS插件。
• 無需在我的服務器上搭建後端系統，數據訪問更加安全。
• 藉助Bmob建立後端平臺，建立、管理更加方便快捷。

什麼狀況須要它

• ✅ 當你想在你的博客顯示訪客統計時；
• ✅ 當你想在你的文章頁顯示閱讀量時；
• ✅ 當你想給你的文章或者做品實現點贊功能時；
• ...

關於它

ViLike.js 是繼 左撇峯子 開發 VuePress 主題 AntDocs 以後的一款 JavaScript 插件，整個插件在 Bmob 官方庫基礎之上封裝了一些方法，方便小夥伴直接上手使用。ViLike.js 的目標很明確，旨在解決那些靜態服務器因各類緣由未能實現需後端搭配的功能的痛處。目前主要實現的功能爲站點訪問量統計、文章頁閱讀量統計以及經常使用的點贊功能。但願小夥伴們會喜歡這款插件~

---

準備工做

建立應用

請先登陸或註冊 Bmob, 進入控制檯後點擊左下角建立應用：

輸入應用名稱，並選擇【開發版】進行建立：

建立數據表

應用建立完畢後，點擊剛建立的應用，進入應用後，在左上角找到「添加表」並點擊它，接着自行輸入表名稱進行建立：

建立相關字段

建立好數據表後，找到按鈕組的「添加列」，並根據下列表格建立好相應的字段：

列名稱	列類型	默認值	是否惟一鍵
skey	String	(空)	是
visit	Number	0	否
like	Number	0	否

建立好的字段如圖所示：

建立安全碼

點擊左側邊欄的「設置」，找到「安全驗證」，並設置好 API 安全碼：

至此，基本的準備工做就緒，接下來能夠開始使用。

---

開始使用

引用庫

在使用以前，你須要給你的項目引入 Bmob 和 ViLike.js ：

<script src="https://cdn.jsdelivr.net/gh/bmob/hydrogen-js-sdk@2.2.3/dist/Bmob-2.2.3.min.js"></script>
<script src="https://unpkg.com/browse/vilike@0.1.0-beta.3/dist/ViLike-0.1.0-beta.3.min.js"></script>
複製代碼

固然，你也能夠以包的形式進行安裝：

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。