[開源考試系統前端]基於vben建立專案(一)

語言: CN / TW / HK

theme: condensed-night-purple

'考試有我'專案預覽

專案預覽

github倉庫地址

vben官網及預覽

vben官網

預覽

開始

獲取'考試有我'專案

git clone https://github.com/h-sina/Online-examination-platform

yarn dev

以登入為例分析

  1. 登入表單完成之後,點選觸發login方法,首先驗證輸入的格式合法性,然後呼叫寫在store裡的登入方法
  2. 在store的登入方法中呼叫登入的api,傳入表單資料
  3. 對返回的資料進行一個處理,呼叫store裡的登入之後的動作,判斷store裡儲存的token存在與否,若不存在則直接返回空,若存在則繼續呼叫獲取使用者資訊的方法,獲取到返回
  4. 返回使用者的資訊給登入頁面
  5. 如果要退出則呼叫logout方法,首先判斷token是否存在的,存在就呼叫登出介面,然後設定token,userinfo為空

過程

  1. 改logo,改首頁資訊,登入表單以及換上自己的api登入介面,處理請求邏輯
  2. 處理工具類裡的axios請求邏輯,處理登入之後的許可權管理部分
  3. 處理選單的路由,更改資訊,新增子頁面
  4. 最後寫專案頁面的業務程式碼

總結

  1. 主要是處理登入邏輯,比如整個登入的流程是怎樣的,我們需要把個人資訊儲存在公共區域,[vuex的定義獲取修改],那麼登入的api請求在此處發起,登入成功呼叫登入之後的動作方法,判斷token是否有效個人資訊的獲取,是否覆蓋,然後返回.
  2. 以及不同角色呈現不同的選單,這是登入完成之後的邏輯處理
  3. 然後是業務程式碼,核心的是試卷的呈現,學生答題部分,需要自己封裝元件,比如判斷題,單選題,多選題的元件,然後到考試頁面進行引入註冊呼叫,元件的通訊在此使用,通過props.emit進行.其他方式請看元件的通訊方式[vue3]
  4. 總體的難點如上,其他比如批卷,加入班級,註冊(填寫邀請碼->驗證邀請碼->驗證郵箱->註冊成功),組卷, -excel批量匯入學生(姓名/學號/個人資訊等)返回邀請碼.excel,對題目/知識點的一個CRUD
  5. 涉及跨域(cors後端配置),axios請求,HTTP欄位含義,狀態碼解讀,如何封裝元件來達到程式碼的最高複用(元件通訊),處理清空資料(封裝函式減少程式碼量,比如清空答題情況,針對預設值不同,給定引數進行覆蓋),如何使用vben封裝的元件(瞭解它的封裝思想和元件使用方法),打包以及優化策略,伺服器的購買,nginx配置快取以及Gzip壓縮,為了專注於開發使用CI/CD託管給github進行打包以及釋出至雲伺服器.最重要的一點,前後端聯調以及和成員之間的溝通.