Vue项目：如何实现短信验证码登录？

1.选择一个短信平台，这里选择网建短信通，在该平台进行注册。
http://sms.webchinese.cn/index.shtml
2.在该平台进行登录，点开接口设置功能可以看到用户名，安全密钥以及短信签名，如果发送的短信内容是验证码的话，最好加上短信签名，如在短信签名输入框中写：安全公司


3.在项目中进行功能的实现
Step1：安装axios依赖
方法：
1.在package.json中的dependencies中添加"axios": "^0.21.1",
2.在终端命令行中输入npm install，进行安装

Step2：在vue.config.js中配置跨域

devServer: {
    proxy: {
      '/note': {
        target: 'http://utf8.api.smschinese.cn/',
        changeOrigin: true,
        pathRewrite: {
          '^/note': ''
        }
      }
    }
  },

tips：此处target是短信网站的url，采用utf-8编码，可以在该网站更换编码方式

Step3：在登陆页面实现功能
在本项目中要实现点击获取验证码的链接，就能收到验证码短信

<el-link class="get-code-link" type="primary" @click="createCodeAndSend">获取验证码</el-link>

      // 生成六位的数字验证码并发送短信
      createCodeAndSend() {
        if (this.loginForm.phone != null) {
          // this.$refs.loginFormRef.validate(async valid => {
          //   if (!valid) return
            // 生成六位数字验证码
            var codeLength = 6
            var createPhoneCode = ''
            // foreach循环，六次
            for (var i = 0; i < codeLength; i++) {
              var index = Math.floor(Math.random() * (9))
              index = index.toString()
              createPhoneCode += index
            }

            // 发送验证码短信给用户
            const text = '【验证码】' + createPhoneCode + '\n【您正在使用登陆功能,该验证码仅用于身份验证,在五分钟之内有效，请勿泄露给其他人使用。】' 
            const param = new URLSearchParams()
            param.append('Uid', 之前登录后看到的用户名（字符串）)
            param.append('Key', 之前登录后看到的安全密钥（字符串）)
            param.append('smsMob', this.loginForm.phone)
            param.append('smsText', text)
            this.$http.post('/note/', param, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
              }
            }).then(function (response) {
              console.log(response)
            })
          // })
        } else {
          this.$message.warning('清输入手机号！')
        }
      }

---

实现效果：

点击获取验证码后收到短信

---

                                           感谢收阅