本文章最初發表在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://www.cnblogs.com/ldu-xingjiahui/p/"https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/custom.min.css">
截至 nowDate，共收到來自 personNum位小伙伴的打賞，金額為
    sumDonate 元！

    
    
        用戶名
        打賞方式
        打賞金額
        賞金去向
    
    

<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
- 未收到打賞：在資料庫中將該記錄洗掉