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

XJHui發表於2020-06-14

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

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

Hexo-Donate

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

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

寫在前面

  1. 作者是大二軟工學生,在程式碼規範系統強壯性等方面肯定存在欠缺,但也在努力提升自己能力。

  2. 自己的 個人部落格 搭建好後,又用之前學的Web前端知識寫了打賞頁面,思路是:

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

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

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

    新版本思路:

    給你看看小白博主開發的打賞系統
  3. 系統用到的資料庫PHP等方面知識我還是個小白,但能憑自己能力把它實現出來就已經很滿意了。

  4. 問題或不足歡迎開 issues 或到 XJHui's Blog 留言。

關於系統

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

打賞列表demohttps://xingjiahui/donate

問卷頁面demohttps://donate.xingjiahui.top

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

已支援的功能

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

待更新內容

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

系統介面圖

  1. 打賞列表:

    給你看看小白博主開發的打賞系統 給你看看小白博主開發的打賞系統
  2. 問卷頁面:

    給你看看小白博主開發的打賞系統 給你看看小白博主開發的打賞系統
  3. 操作GIF實錄:

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

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

安裝系統要求

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

使用該系統

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

下載並上傳

  1. 在專案頁clone or download選擇Download ZIP

    給你看看小白博主開發的打賞系統
  2. 在虛擬主機控制皮膚選擇線上檔案管理器並進入www目錄下:

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

    解壓後如圖:

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

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

匯入資料庫

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

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

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

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

將這個密碼填入,即可匯入成功(無視警告⚠):

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

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

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

系統測試完成後請刪除!

搭建問卷網站

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

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

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

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

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

配置虛擬主機

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

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

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

注:如果不知道怎麼回主皮膚,點選上圖左上角頭像試試!

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

  1. 配置getJsonData.php

    點選編輯

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

    找到下圖框選出的位置:

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

    還記得賬戶主機資訊麼,將對應的資訊替換。

  2. 配置regist.php

    點選編輯,找到下圖框選出的位置:

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

    下圖位置也要修改:

    給你看看小白博主開發的打賞系統
  3. 測試資料庫是否配置成功

    訪問上面那個域名,填寫上資訊:

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

    上傳,判斷是否配置成功:

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

    ​ 注意:只要是提示錯誤/警告一定是操作問題,認真檢查。

  4. 檢查資料匯出是否正常:

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

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

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

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

編輯前端頁面

  1. forkgithub專案:

    給你看看小白博主開發的打賞系統
  2. 編輯pageJs.js檔案

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

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

    修改內容為:

    給你看看小白博主開發的打賞系統
  3. 編輯下面的程式碼並貼上到前面準備的空白頁面:

    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不符合規範,但暫時沒有找到替代的方法。

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

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

提醒功能

  1. Qmsg醬 這裡登陸並選擇一個Qmsg醬小姐姐

    給你看看小白博主開發的打賞系統
  2. 新增一個QQ號,然後新增1中的選擇的小姐姐為好友:

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

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

  3. 點選文件,用介面地址替換下面程式碼中的介面地址

    給你看看小白博主開發的打賞系統
    echo '<script>function Qmsg(){var xhr=new XMLHttpRequest();url="介面地址?msg=收到新的打賞啦!";url=encodeURI(url);xhr.open("GET",url,true);xhr.send()}Qmsg();</script>';
    
  4. www目錄下編輯regist.php檔案,將上面的程式碼貼上在下圖位置:

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

後期使用

  1. 填寫打賞問卷後,點選返回打賞列表會跳轉到作者的打賞列表:

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

    想修改為自己的,可以修改虛擬主機www目錄下的index.html檔案:

    給你看看小白博主開發的打賞系統
  2. 後期維護:

    當有人打賞後,根據填寫的打賞方式去賬戶看有沒有到賬。

    • 收到打賞:將資料庫中donate_confirm欄位修改為YES

      給你看看小白博主開發的打賞系統
    • 未收到打賞:在資料庫中將該記錄刪除

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

至此,Hexo-Donate打賞系統全部安裝完成!

感謝

愛網雲JsDelivrQmsg醬亂世中的單純

FLORIN POP濤歌依舊Yiven程式小能手

怪我咯SweetAlert2BigShow百度經驗


不足之處,歡迎留言,會及時回覆,及時更正!

創作不易,感謝支援!

本文由部落格群發一文多發等運營工具平臺 OpenWrite 釋出

相關文章