小白開發程式的一天

技術背景,前後端分離,前端 vue 後端 .Net Core

小白有一個需求,在他費盡千辛萬苦之力,寫了N行sql才完成的匯總數據報表中,根據表頭和首列類別定位的單元格上添加點擊事件。點擊單元格後,跳轉至匯總數據的詳細列表。經其分析,詳細列表本身帶有高級篩選功能,篩選時,會在表格上方顯示篩選條件。所以,小白決定點擊單元格跳轉到詳細列表頁的同時帶上參數做為篩選條件。

因為,詳細列表頁面為某位大哥開發,已經具備了一定的程式碼和基礎。所以充分了解其已編輯程式碼,在其基礎上開發可以達到寫最少的程式碼量,減少不必要的重複的目的。

小白首先寫了一個測試的url,在url中帶入了測試的參數數據。然後在頁面用某位大哥的方式

$route.params.name

接收參數時,發現接收不到。小白對 vue 沒有經過深刻的系統的學習,只是根據教程籠統的學習過,再經過各種項目的洗禮。雖然可以說對 vue 非常熟悉,但對於細節的技術點,還是沒有把握。不過小白是一位愛學習的好孩子,經其努力補充上了此技術點。獲取route參數的方式有下面兩種:

$route.query.name
$route.params.name
//name 為參數名

其中query寫入參數的方式為

{name: '路由名', query: {參數名:值}} 
或者 
{path:'路由地址', query: {參數名:值}}

 此種方式類似於http請求的GET方式。

其中params寫入參數的方式為

{name: '路由名', params: { 參數名: 值 }} 
或者 
'/path/參數1/參數2'  此種方式需要在路由中的path指定 :參數名成,確認參數1、參數2的是ID還是Name

此種方式類似於http請求的POST方式

最後通過push的方式壓入route即可

$route.push(obj)

解決完參數傳遞的方式之後,小白髮現,由於高級篩選正常情況下是通過手動點擊後,記錄篩選條件到 tag,tag 綁定到表頭的 dom 。

其中表頭的組件又是引用到列表頁面的,所以小白考慮在 created 中構造 tag,然後以屬性的方式傳遞至表頭組件。

這種方式雖然可以實現效果,但是在小白寫完程式碼測試過程中,發現之前的開發大哥已經寫過類型的功能,並且是在mounted中使用nextTick實現的。

經對比小白慚愧不已,發現自己不光有知識盲點,還對頁面的載入過程不甚了解。

使用nextTick不光在頁面的Dom元素載入完畢後可以非同步的更新數據,還要比把構造 tag 放到 created 中優雅的多。

查看nextTick說明,更是覺得nextTick是專門為處理此任務而生

nexttick使用場景:有時需要根據數據動態的為頁面某些dom元素添加事件,這就要求在dom元素渲染完畢時去設置
在使用某個第三方插件時 ,希望在vue生成的某些dom動態發生變化時重新應用該插件,也會用到該方法。

 解決完這兩個問題,小白想起最近讓寫的一些簡單的Go腳本程式。小白雖然白了點,但是技術面還是可以的,不光大學的專業就學過多種語言(只能是學過,學完就還給老師)。應大佬要求,了解了一些Go的知識後,使用Go寫了一些簡單的小程式。

但是在剛剛開始寫一個以上文件時,小白遇上了,他覺著很多自學初學者都會遇到的問題,引用包!默認情況下Go的引用路徑是Go的安裝路徑,具體路徑可以看錯誤提示,會提示在某個路徑下找不到所要的包。小白又經過一番努力,發現了go.mod,按官方介紹其就是一個Modules。使用方式很簡單:

在項目的根目錄下使用命令

go mod init modname 

此命令將引用目錄指定到當前項目目錄。
需要注意的是創建的每個包,都需要創建相同名稱的文件夾,在文件夾內創建go文件。
引用時一般使用 modname/packname 即可。

小白記錄完這些問題之後興緻很高,於是乎,小白將其半年前做單點登錄時收藏的幾篇文章又做了一個總結:

有關單點登錄,小白已知的單點登錄協議主要有 CAS OAuth OIDC

根據多種單點登錄方式的協議可知,單點是一種協商後的登錄方式,各方按照相關協議開發登錄驗證模組,並接入單點系統即可實現單點登錄

對於前後端不分離系統,使用Session Cookie做單點登錄

對於前後端分離系統,通常使用token localStorage的方式開發。

下面舉個實際的例子,比如:

拿CAS來說,新接入系統首頁加入登錄驗證,如果未登錄,即跳轉至單點登錄系統,並以參數的方式帶入回調地址。

在單點登錄系統登錄驗證成功之後,形成票據,同樣以參數的形式跳轉至回調地址。

新接入系統獲得票據(ticket)之後,將票據傳遞至後台。後台API調用單點登錄系統介面驗證ticket。

驗證通過後,形成自身系統的登錄驗證token或者說Session,之後新接入系統即可訪問自己系統的後台,每次訪問都帶有驗證資訊。

以上是小白同學,一天中所學的知識點,不歡迎批評,歡迎吹水😄。如寫內容讓初學者困惑請忘記即可!

最後小白又想起來了一個特別好用的DatePicker組件,可以輕鬆的設置日期選擇是選到月、還是選擇到天。只需設置其屬性 maximumView 和 minimumView 的值為day或month即可。可實驗的地址:測試 vue DatePicker