前端学习-短信验证码登录

短信验证码登录是我们在项目开发的过程中很常见的一种方式，也是前端与后端接通数据的重要渠道，本文将详细介绍实现的整个流程，希望对大家有所帮助。

由于短信接口不是免费的，为了防止攻击者恶意盗刷，这里仅分享主要的实现流程，在后端将验证码默认为246810

主要步骤

分为以下几个：

1在utils/request.js中配置axios请求基地址

2手机手机号和验证码数据

3基于axios调用验证码登录接口

4使用bootstrap的alert警告框反馈结果给用户

接下来，是详细步骤：

1配置axios请求基地址

axios.defaults.baseURL = 'http://geek.itheima.net';

2封装获取表单数据的函数：

document.querySelector('.btn').addEventListener('click',  ()=> {
  const form = document.querySelector('.login-form')
  const data = serialize(form, { hash: true, empty:true })
  console.log(data)

保存之后，回到控制台，可以看到后台已经成功拿到了表单中提交的数据：

<