Vue进阶篇（一）之实现发送短信验证码登陆

最近在学习Vue,在做登陆界面时，想用发送手机验证码的方式来访的登陆。结果发现网上没找到通过发送短信验证码的文档，所以我来分享啦！

申请SMS的**
到SMS官网注册一个账号，注册我就不多说了，很简单的。
注册完之后，找到自己的**和API接口网址，我选择的是UTF-8的，如下图：
Vue axios
再讲Vue发送短信之前，要顺一下Vue发送请求不是使用Ajax，而是axios来发送请求。这里就不过多的解释什么是axios,就只需要知道它是用来干什么的。
Vue axios安装和配置跨域
Vue axios安装
cmd打开到项目的目录下，输入npm install axios，等待安装完毕！
再到Vue项目的man.js文件下引用，如下图：

Vue 配置跨域
打开项目config目录下的index.js，添加蓝色选中的部分。
注:必须配置跨域，否则再发送请求时会报错。
Vue 短信发送
其实发送短信并不难，只是听起来感觉很难而已，通过我下面的
代码展示你们就感觉其实很简单。上代码：
这是我zaiVue项目中写的一个发短信的方法

  send_note(tel,code){//tel:电话号码，code：自定义的验证码
      const text='验证码：'+code+',您正在使用登陆功能,该验证码仅用于身份验证,在五分钟之内有效，请勿泄露给其他人使用。' //短信内容模板，已经在sms平台绑定此内容，所以会比普通的更快到达用户手机。
    let param = new URLSearchParams();
    param.append('Uid',用户名);
    param.append('Key',**);
    param.append('smsMob',tel);
    param.append('smsText',text);
    this.$http.post(‘/apis/’,param,{//post请求，在请求时会自动把param拼接再Param后面
        headers:{
     'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'//必须要加头
       },
     }).then(function (response) {
       console.log(response)}
     )
    },

5.例子（附图片）
我的登陆界面，如下图：
Vue进阶篇（一）之实现发送短信验证码登陆
功能演示，我就不弄了，功能步骤就是点击获取验证码，倒计时60s,
并发送短信到手机。

想要登陆界面完整代码，可以给我留言！

Vue进阶篇（一）之实现发送短信验证码登陆

Vue进阶篇（一）之实现发送短信验证码登陆

相关推荐