一:數據提交(提交手機驗證碼)
核心思路整理
利用form-serialize插件,收集對象形式的表單數據后,一并提交給服務器。后得到返回值,進一步操作
基地址:
axios.defaults.baseURL = 'http://geek.itheima.net'
設置基地址作用:為多個頁面的axios請求設置統一的基礎服務器地址,用來獲取或提交數據。
如果多個頁面要同時修改服務器的地址,可以通過修改基地址的方式進行快速統一修改。因為數據的獲取以及請求,是根據具體的需求,利用baseURL+url的字符串拼接方式訪問的。
二:警告框的顯示和隱藏(alert)
顯示登錄成功或者顯示登錄失敗的alert提示框
核心思路:
- 該功能會多次在不同頁面和場景下使用,因此首要的是選擇封裝函數的思想
- 函數首先實現的是彈出框的顯示以及顯示后的隱藏
- 三元表達式+setTimeout實現
- 在js中只需要利用函數調用方式,傳遞布爾值以及提示消息
function myAlert(isSuccess, msg) {const alert = document.querySelector('.alert')alert.classList.add(isSuccess ? 'alert-success' : 'alert-danger')alert.innerHTML = msgalert.classList.add('show')setTimeout(() => {alert.classList.remove(isSuccess ? 'alert-success' : 'alert-danger')alert.innerHTML = ''alert.classList.remove('show')}, 1500);
}
為什么可以只在js調用函數
我們對于警示框的顯示或隱藏是基于服務器對于我們的返回值是正確或錯誤,因此利用axios函數中then、catch已經達到判斷是正確或錯誤(then是標記成功后可以執行、catch是標記失敗后執行的)。因此,我們可以利用函數傳遞true或false