基於Vue.js的杭電刷題排行榜

項目地址

https://github.com/736248591/hdu_rank

說明

本項目是一款基於基於Flask和BootstrapVue的杭電刷題排行榜前後端分離的網站。

DEMO頁面:

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

3.0 我們添加了什麼?

  • 用戶登錄、修改、註冊
  • 用戶自定義網頁代碼
  • 管理員添加與刪除
  • 管理員管理員用戶以及其他管理員
  • 一鍵初始化和運行
  • 可以在Windows和Linux上運行
  • 多進程、高併發
  • 使用pip直接安裝

2.0原有的功能

  • 添加用戶
  • 爬取用戶題數
  • 顯示公告
  • 管理員登錄
  • 管理員管理用戶
  • 爬蟲狀態管理

環境需求

操作系統:Windows或者Linux均可。
python3.x pip3 MySQL8.x

快速入門

安裝所需的運行環境

# 安裝所需的PIP庫
pip3 install flask pymysql requests flask_cors
# 國內用戶可以使用在pip安裝時候添加參數,如:
pip3 install -i https://mirrors.ustc.edu.cn/pypi/web/simple/ flask pymysql requests flask_cors
# 下載項目
wget https://github.com/736248591/hdu_rank/archive/3.0.0.zip
tar -zxvf 3.0.0.zip
# 進入項目
cd hdu_rank
# 運行安裝助手
python3 helper.py
# 啓動爬蟲進程
python3 hdu_crawl.py &

注:以下方式二選一即可

1. 獨立運行

注意在windows下tornado無法以多進程運行。

# 安裝所需的PIP庫
pip3 install tornado
# 國內用戶可以使用以下命令來替換上面命令
pip3 install -i https://mirrors.ustc.edu.cn/pypi/web/simple/ tornado
cd 3.0.0
# 啓動tornado
python3 run_tornado.py

2. 在NGINX下運行

# 安裝所需的PIP庫
pip3 install uWSGI
# 增加hdurank的用戶名和組
/usr/sbin/groupadd hdurank
/usr/sbin/useradd -g hdurank hdurank
# 新建域名
lnmp vhost add
# 按照提示填寫你的域名和項目本地存放的地址。注意,網站的根目錄填寫的是hdu_rank/static

在這裏插入圖片描述

# 編輯NGINX的配置
vim /usr/local/nginx/conf/vhost/你的域名.conf
# 在server的子級location的同級加入以下內容。
location ~* /api/{
    include  uwsgi_params;
    uwsgi_pass  127.0.0.1:5007;
}
# 重啓nginx服務器
lnmp nginx restart
# 開啓新的一個screen,這樣在關閉終端以後程序不會被關閉
screen -R hdu_rank
# 創建管理員密碼 
vim admin.key
# 修改服務器配置文件
vim my_setting.py
USE_STATIC 設置爲False
# 啓動uwsgi服務器
uwsgi --ini uwsgi.ini 

3. mod_wsgi(Apache)、其他獨立WSGI容器、FastCGI、CGI

這些方式可以查看Flask官方中文文檔,這裏不再贅述。

進階開發

數據庫邏輯表

數據庫邏輯表.xlsx

API接口

  • /api/get_rank 獲取排行榜

參數: (無)
響應數據:

  {
      status: 操作狀態 Boolean,
      notice: 公告 string,
      crawl_status: 爬蟲狀態 union("runnable","running","sleeping","stopped")
      users: 用戶列表(當狀態爲True時,擁有這個字段)
      [
          {
              id: 用戶ID unsigned int,
              uid 登錄賬號 string,
              class_name 班級 string,
              name 姓名 string,
              motto 格言 string,
              account 賬號 string,
              solved_num 題數 int,
              status 狀態 union("unchecked","fetching","active","disconnect")
          }
      ],
      user:{
          id 用戶ID unsigned int,
          uid 登錄賬號 string,
          class 班級 string,
          name 姓名 string,
          motto 格言 string,
          account 賬號 string,
          solved_num 題數 int,
          status 狀態 union("unchecked","fetching","active"),
          html 自定義頁面代碼 string
      },
      admin:{
          id: 管理員ID int,
          uid: 管理員 string,
          is_super: 是否可以管理其他用戶 bool,
      }
  }
  • /api/login 用戶登錄

說明: 不填寫任何信息的時候,則返回當前登錄信息。
參數:

字段名 數據類型 默認值 描 述
uid string(16) 賬號
pwd string(16) “” 密碼,sha3-512(原始密碼),重複加密6次

響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string,
      // 當登錄成功時候顯示以下信息
      user:{
          id 用戶ID unsigned int,
          uid 登錄賬號 string,
          class 班級 string,
          name 姓名 string,
          motto 格言 string,
          account 賬號 string,
          solved_num 題數 int,
          status 狀態 union("unchecked","fetching","active"),
          html 自定義頁面代碼 string
      },
      admin:{
          id: 管理員ID int,
          uid: 管理員 string,
          is_super: 是否可以管理其他用戶 bool,
      }
  }
  • /api/put_user 添加或者修改用戶

說明: 修改時候,只需提交ID和修改的字段即可。添加用戶時候,不需要id。
參數:

字段名 數據類型 默認值 描 述
id int 用戶唯一標識
uid string(16) 登錄賬號
pwd string(16) “” 密碼,sha3-512(原始密碼),重複加密6次
class_name string(24) “” 班級
name string(16) 姓名
account string(64) 杭電賬號
motto string(255) 格言
status ‘unchecked’,‘fetching’,‘active’ 狀態,只有管理層才能修改
html string 自定義代碼

響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string
  }
  • /api/validate_user 驗證字段

說明: 註冊的時候用來驗證字段。
參數:

字段名 數據類型 默認值 描 述
field string 字段
value string 數值

響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string
  }
  • /api/logout 登出 用戶和管理員均可使用。

參數: (無)
響應數據:

  {
      status: 操作狀態 Boolean
  }
  • /api/remove_user 刪除用戶

說明: 必須先登錄才能使用該接口。用戶只能刪除自己,只有管理員可以刪除任意用戶。
參數:

字段名 數據類型 默認值 描 述
id unsigned int 用戶ID

響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string
  }
  • /api/login_admin 管理員登錄

說明: 不填寫任何信息的時候,則返回當前登錄信息。
參數:

字段名 數據類型 默認值 描 述
uid unsigned int 管理員ID
pwd string 密碼,sha3-512(原始密碼),重複加密6次

響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string,
      admin:{
          id: 管理員ID int,
          uid: 管理員 string,
          is_super: 是否可以管理其他用戶 bool,
      }
  }
  • /api/list_admin 管理員列表

參數: (無)
響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string,
      admins:[
      	{
            id: 管理員ID int,
            uid: 管理員登錄賬號 int,
            is_super: 是否可以管理其他管理員 bool
        }
      ]
  }
  • /api/validate_admin 驗證管理員字段

說明: 添加管理員的時候用來驗證字段。
參數:

字段名 數據類型 默認值 描 述
field string 字段
value string 數值

響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string
  }
  • /api/put_admin 添加或修改管理員

說明: 修改時候,只需提交ID和修改的字段即可。
參數:

字段名 數據類型 默認值 描 述
id unsigned int ID
uid string(16) 管理員ID
is_super bool 是否可以管理其他用戶
pwd string(128) 密碼,sha3-512(原始密碼),重複加密6次

響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string,
  }
  • /api/remove_admin 刪除管理員

說明: 必須先登錄才能使用該接口。只有超級管理員才能刪除其他管理員。
參數:

字段名 數據類型 默認值 描 述
id unsigned int 用戶ID

響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string
  }
  • /api/crawl_start 開始滾版

說明: 只有管理員才能使用該接口。
參數:(無)
響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string
  }
  • /api/crawl_stop 停止滾榜

說明: 只有管理員才能使用該接口。
參數:(無)
響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string
  }
  • /api/add_notice 添加通知

說明: 只有管理員才能使用該接口。
參數:

字段名 數據類型 默認值 描 述
notice string 通知

響應數據:

  {
      status: 操作狀態 Boolean,
      mgs: 錯誤原因 (當狀態爲false時,擁有這個字段)string
  }

手動編譯客戶端

安裝Node.js和Yarn

cd hdu_rank
yarn global add @vue/cli
yarn install
yarn build

更新日記

2020年6月18日(3.0)

  • 大幅度修改和重構前端和後端代碼。
  • 增加了用戶登錄、修改、註冊功能。
  • 增加了用戶自定義網頁代碼功能。
  • 增加了管理員添加與刪除、管理員用戶以及其他管理員功能
  • 一鍵初始化和運行
  • 可以在Windows和Linux上運行
  • 多進程、高併發

2020年3月17日

  • 更新客戶端依賴庫並重新編譯客戶端。

2019年12月27日

  • 更新庫。
  • 刪除fibers依賴。

2019年10月22日

  • 增大爬蟲重試連接次數。
  • 更新並重新編譯客戶端。

2019年9月27日

  • 修改uwsgi服務器配置。

  • 修正了爬蟲連接的一些問題。

2019年9月25日

  • 刪除了沒用的右上角絲帶,github地址添加到頁腳,避免移動端的頁面變得很噁心。
  • 修改頁面語言標籤的錯誤。
  • 在賬號合法性判斷之前,添加了對杭電OJ連接的判斷。
  • 改善移動端的顯示體驗。

2019年9月23日

  • 修改數據庫Users表中name字段大小,從長度爲8改爲16。
  • 在添加賬號之前,先對賬號進行驗證。
  • 修正了無法寫入日記的錯誤。日記寫入位置爲/tmp/uwsgi.pid
  • 更新了依賴包,重新編譯網頁客戶端。

2019年9月3日

  • 修改設定的備註,並且修改主循環默認爲30分鐘循環一次。

2019年9月2日

  • 更新了依賴包,重新編譯網頁客戶端。

2019年7月28日

  • 修正輸入管理員密碼回車時候,不登錄而刷新頁面的操作。
  • 公告支持Markdown語法高亮。
  • 更新了所有組件。
  • 右上角添加了包含github項目鏈接的絲帶。
  • 修正添加用戶成功以後,用戶信息仍然存在表單中的問題。
  • 修正管理員登錄以後,密碼仍然儲存在表單中問題。
  • 修正重新開啓網頁以後,公告不可以修改,只能新建的問題。
  • 刪除產品模式下的所有console.log輸出。

2019年5月31日

  • 更新所有組件,移除安全隱患。
  • 移除了富文本編輯器。
  • 增加了添加公告功能。
  • 修復長時間不使用的時候,MySQL連接掉線問題。

2019年5月31日

  • 更新AXIOS到0.19.0使得修復其安全漏洞。
  • 順帶更新一下其他的組件。

2019年5月26日

  • 升級了依賴包的版本,解決安全隱患。

  • 修復了數據庫文件導入的BUG。

  • 添加了說明文檔中python3.7需要的依賴。

  • 未創建管理員密碼錯誤。

  • 添加了網站的圖標和標題。

2019年4月24日

  • 當密碼不存在的時候會自動生成新密碼保存在admin.key文件裏面。

2019年4月9日

1.0 初次發佈

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章