一:数据提交(提交手机验证码)
核心思路整理
利用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