登錄功能

設置好登錄界面，當然要符合用戶審美的登錄頁面。以所學項目點餐系統爲例。首先登錄的彈出框要設置在登錄窗口的居中位置，可以引入插件bootstrap-4.1.3-dist，css樣式（justify-content-center align-items-centerv）實現效果。登錄的彈出框用class="card"的div封裝，然後是一個form表單封裝全部登錄信息的輸入框。代碼如圖顯示：

Label標籤封裝全部登錄的字段，如：placeholder=「密碼」，顯示剛登錄時未輸入信息的默認值。密碼輸入要用intput標籤type=「password」，以確保用戶登錄安全性。

驗證碼設計時，一個文本類型的input輸入框，還有驗證碼提示框，可理解爲圖片，在控制器端設置圖片的樣式，數字+字母隨意組合，再添加一些干擾線或點，就能完成驗證碼設置。每次點擊驗證碼提示框，就使照片的改變事件發生一次。爲了提高用戶使用時舒適感，改變事件發生一次便及時清空一次驗證碼輸入框。如：

生成驗證碼方法：

用戶登錄時需選擇自己的身份，select標籤封裝不同的身份，可以通過下拉框選擇。如：


是否記住登錄部分，相當於用戶是否選擇將必要的登錄信息自動回填，便於下次登錄，當然這些信息要從cookie中獲取。如何刪除cookie？（「刪除cookie即從用戶的硬盤中物理移除cookie是修改cookie的一種形式。Cookie在用戶的計算機中，無法將它直接移除，但可以讓瀏覽器刪除cookie，創建一個與要刪除的cookie同名的新cookie，將其到期日期設置爲早於當前日期的某個日期，當瀏覽器檢查到cookie到期時，瀏覽器便會丟棄現在已經過期的cookie」）。

寫js時，記得引入layui插件，使用layer模塊。加載&初始化layui模塊,彈出層模塊layui.use([‘layer’],function () {layer =layui.layer;});
點擊驗證碼圖片，切換驗證碼，加上參數ts（以時間速度更新驗證碼，就算客戶點擊再快也能即使切換更新驗證碼），解決瀏覽器緩存問題：

驗證登錄：添加登錄按鈕點擊事件，js插件serializeArray()方法序列化表單，post提交數據，信息判斷正確便可跳轉到主頁面，否則登錄失敗，登錄成功與否都必須清空驗證碼和密碼框，以及刷新驗證碼，給它們賦值爲空即可【KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲PassWord").val(…("#VerificationCode").val("");】。