1、支援使用者的登入、登出
2、支援使用者註冊
3、支援根據輸入資訊查詢結果
4、支援查詢內容分頁顯示
5、支援依據使用者許可權返回查詢資訊
本專案前端使用vue作為客戶端伺服器框架,後端使用golang + blotdb作為後端伺服器框架。
此部落格主要介紹專案中的前端伺服器的實現。這是專案位址。
我在這個專案中負責前端的實現。由於是第一次使用vue進行前端伺服器的搭建,而且時間比較緊,因此專案只是基本完成了上述的所有基本功能,網頁結構比較簡陋,網頁樣式等額外設計基本沒有。所以接下來我將著重介紹相關功能的是如何使用vue實現的。
(1) 使用者登入
使用者登入分兩種情況:註冊使用者登入和遊客模式登入。
註冊使用者登入:向服務端傳送乙個post請求,假如使用者成功登陸,那麼後端伺服器將返回乙個token用於後續操作的身份驗證id,前端伺服器使用cookies儲存此id,並跳轉至查詢介面。
遊客模式登入:前端伺服器的cookies儲存名為「guest」的特殊值,用於區分兩種模式,然後跳過登陸操作直接跳轉至查詢介面。
// signin.vue
post:
function()
,).then
(function
(res));
}else},
function()
);},
guessmode:
function()
(2) 使用者註冊
使用者註冊功能的提交訊息到伺服器的相關邏輯與使用者登入功能相近,不同之處在於對後端伺服器返回值的請求的處理邏輯。由於使用者不一定能夠成功註冊,因此當新使用者註冊失敗時,後端伺服器會傳送乙個錯誤訊息到前端並由前端通知使用者。當註冊成功後,系統缺省會跳轉到登入介面,進行使用者的登入操作。
// signup.vue
post:
function()
,).then
(function
(res));
}else}}
,function
(res));
}
(3) 資訊查詢// search.vue
}
(4) 分頁查詢// search.vue
nextpage:
function()
,function());}
(5) 許可權查詢
這裡的實現主要使用了vue自帶的***的功能。每當前端伺服器向後端伺服器傳送請求時,假如前端儲存的cookies的值不為「guest」,那麼證明當前正在使用的使用者是註冊使用者,那麼在報文頭部加乙個authorization的鍵值對,用於實現jwt的token驗證服務,伺服器的jwt通過解析這個鍵值對確認使用者是否有許可權獲取受限內容。若成功,返回相應內容;否則,返回錯誤資訊。
(1) 登入介面
(2) 註冊介面
註冊失敗
(3) 查詢介面
(4) 受限查詢
① 查詢成功(註冊使用者訪問/api/)
② 查詢失敗(遊客模式訪問/api/)
(1) 跨域訪問功能的實現
由於瀏覽器為了安全而禁止了跨域訪問的功能,因此在測試的時候需要輸入以下命令關閉瀏覽器的安全功能,從而實現跨域訪問。同時後端的報文還要附加上「access-control-allow-origin」和「access-control-allow-method」的鍵值對才能正常通訊。我嘗試過使用jsonp進行跨域請求,但經常出現格式錯誤,上網查詢後推薦不使用jsonp進行跨域訪問。我也嘗試過修改報文頭部的origin、host、referer的值進行訪問,但還是達不到預期的效果。後面可能會繼續嘗試實現在不關閉瀏覽器安全功能的情況下進行跨域訪問的功能。
// 我測試使用的是chromium瀏覽器
chromium-browser --disable-web-security --user-data-dir
(2) 受限訪問功能的實現
本專案使用了jwt和token實現了註冊使用者的許可權認證。這個功能的關鍵在於,前端伺服器在傳送請求報文的時候,需要在請求報文的頭部附加上「authronization: bearer ***」這一鍵值對。我一開始是想通過直接修改vue-resource的get操作的header引數實現,結果發現傳出去的報文實際上並沒有附加上這個資訊。後來通過查閱資料和實踐得知,可以使用vue的***改變請求報文頭部資訊。***的工作原理是:當前端在傳送乙個請求時,會先經過***,然後才傳送到目標位址;同樣的,前端在接收到乙個響應報文時,也會先經過***,在呼叫相關處理程式。因此我們可以在***設定某些條件,動態新增或刪除報文的頭部資訊,以達到目標功能。
專案結案報告
專案結案報告是專案管理過程中一項重要的活動。與開工會類似,形式大於內容,但對於專案具有極大的意義。雖然系統上線1 2月後,專案型轉運維型後,專案才算完結。但領導層 關鍵干係人對於專案的印象,會直接受到結案報告的影響。對於專案經理個人及組織的專案管理能力,通過對專案的總結反思,可加深對專案的理解力 掌...
團隊專案報告
我們的團隊目標 wbs 團隊專案的主要工作專案 利用sqlite資料庫和eclipse實現登入和註冊。在訊息模組發布訊息通知。個人主頁的設定。整個專案的wbs過程 中層目標 特徵 使用者角度 美觀的介面,簡單及時地獲取相關詳細資訊,能夠同相關人員溝通報名,以期達到提公升自己綜合素質的目的。底層目標 ...
團隊專案報告
1.團隊目標wbs 團隊專案 作業派 整個專案的wbs過程 中層目標 特徵 使用者角度 老師隨時隨地,方便快捷的發布作業,檢視作業,批改作業,打出成績,解決學生的問題,學生隨時隨地上傳作業,檢視成績,詢問問題,方便老師學生的交流,更好享受作業派帶來的好處 底層目標 功能實現 團隊角度 pm,test...