給你看看小白博主開發的打賞系統

XJHui發表於2020-06-14

本文章最初發表在XJHui's Blog，未經允許，任何人禁止轉載！

為使您獲得最好的閱讀體驗，強烈建議您點選這裡前往 XJHui's Blog 檢視！

Hexo-Donate

❤打賞系統；打賞並填寫問卷後資訊可以自動在打賞列表中展示；

GitHub專案地址：https://github.com/xingjiahui/Hexo-Donate

寫在前面

作者是大二軟工學生，在程式碼規範、系統強壯性等方面肯定存在欠缺，但也在努力提升自己能力。
自己的個人部落格搭建好後，又用之前學的Web前端知識寫了打賞頁面，思路是：

給 IamZLT 體驗後，也是覺得體驗不太友善（從填寫問卷到看到自己的打賞資訊需要等待的時間太長）

決定改版，從05.27到06.02用一週的時間從確定思路到測試思路可行性，從測試版釋出再到功能完善，最終有了此係統。

新版本思路：
系統用到的資料庫、PHP等方面知識我還是個小白，但能憑自己能力把它實現出來就已經很滿意了。
問題或不足歡迎開 issues 或到 XJHui's Blog 留言。

關於系統

理論上不管什麼框架，只要有一個空白頁面就能安排上...

打賞列表demo：https://xingjiahui/donate

問卷頁面demo：https://donate.xingjiahui.top

後臺管理暫時需要操作資料庫(視覺化介面)，如有必要可以新增後端管理頁面

已支援的功能

打賞列表可統計總打賞人數、打賞金額
不同打賞方式字型顯示顏色不同
填寫打賞問卷併成功上傳，可在打賞列表中顯示填寫的資訊
資料上傳成功後，博主會收到QQ訊息提醒

待更新內容

區分已核實、未核實金額
豐富QQ訊息提醒內容
接入微信推送
支援自動稽核

系統介面圖

打賞列表：
問卷頁面：
操作GIF實錄：

注：QQ訊息提醒內容以後會豐富。

安裝系統要求

虛擬主機（有免費版本在這裡購買）或雲伺服器（小白建議安裝寶塔皮膚）
為打賞列表準備一個頁面

使用該系統

教程中用到的免費虛擬主機維護結束，已開放購買。

下載並上傳

在專案頁clone or download選擇Download ZIP：
在虛擬主機控制皮膚選擇線上檔案管理器並進入www目錄下：

解壓後如圖：

框選出的檔案/資料夾可刪除

匯入資料庫

點選donate_info.sql檔案後的匯入，提示輸入資料庫密碼：

當你開通虛擬主機時，會看到如下頁面：

將這個密碼填入，即可匯入成功（無視警告⚠）：

為了便於測試，匯入的資料庫中自帶了兩條資料：

系統測試完成後請刪除！

搭建問卷網站

其實，將專案檔案匯入後，網站已經搭建完成：

但訪問這個頁面需要域名，依次點選控制皮膚-基本功能-域名繫結，就能看到自己網站的域名啦：

瀏覽器訪問這個域名就能看到上面那個頁面了，但並不代表系統就弄好了！

配置虛擬主機

回到皮膚首頁，找到賬戶主機資訊：

將右下角的PHP版本更換為php73。

注：如果不知道怎麼回主皮膚，點選上圖左上角頭像試試！

以下操作需要在www目錄下完成！

配置getJsonData.php

點選編輯：

找到下圖框選出的位置：

還記得賬戶主機資訊麼，將對應的資訊替換。
配置regist.php

點選編輯，找到下圖框選出的位置：

下圖位置也要修改：
測試資料庫是否配置成功

訪問上面那個域名，填寫上資訊：

上傳，判斷是否配置成功：

注意：只要是提示錯誤/警告一定是操作問題，認真檢查。
檢查資料匯出是否正常：

瀏覽器訪問：域名/getJsonData.php

檢視能否匯出資料庫內容：

目前為止，打賞頁面和資料庫已經配置好了，最後就是在前端把資料庫中的資料展現出來。

編輯前端頁面

forkgithub專案：
編輯pageJs.js檔案

點選下圖位置可以線上修改檔案：

修改內容為：

編輯下面的程式碼並貼上到前面準備的空白頁面：

Hexo框架下無論post（部落格）還是page（頁面）都是markdown格式，但markdown相容html提供了很大的便利性。

修改下圖位置程式碼：

貼上到空白頁面（markdown/html均可）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/custom.min.css">
<p>截至 <span class="inline-tag red">nowDate</span>，共收到來自 <span class="inline-tag red">personNum</span>位小夥伴的打賞，金額為
    <span class="inline-tag red">sumDonate</span> 元！</p>
<table>
    <thead>
    <tr>
        <th align="center">使用者名稱</th>
        <th align="center">打賞方式</th>
        <th align="center">打賞金額</th>
        <th align="center">賞金去向</th>
    </tr>
    </thead>
</table>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/改成你的github使用者名稱/Hexo-donate@latest/pageJs.js"></script>

注意：上面引用css不符合規範，但暫時沒有找到替代的方法。

檢查前端頁面是否能夠正常顯示資料：

提醒功能

到 Qmsg醬這裡登陸並選擇一個Qmsg醬小姐姐：
新增一個QQ號，然後新增1中的選擇的小姐姐為好友：

注意：登陸賬號(如果QQ登陸)和新增的賬號都要新增“她”為好友。

點選文件，用介面地址替換下面程式碼中的介面地址：

echo '<script>function Qmsg(){var xhr=new XMLHttpRequest();url="介面地址?msg=收到新的打賞啦！";url=encodeURI(url);xhr.open("GET",url,true);xhr.send()}Qmsg();</script>';

在www目錄下編輯regist.php檔案，將上面的程式碼貼上在下圖位置：

後期使用

填寫打賞問卷後，點選返回打賞列表會跳轉到作者的打賞列表：

想修改為自己的，可以修改虛擬主機www目錄下的index.html檔案：
後期維護：

當有人打賞後，根據填寫的打賞方式去賬戶看有沒有到賬。
- 收到打賞：將資料庫中donate_confirm欄位修改為YES
- 未收到打賞：在資料庫中將該記錄刪除