23.使用腾讯云短信接口发送短信 做登陆功能

从图一到图二

 {{ codeMsg }}

 data里面

  disabled: false,
      codeNum: 8,
      codeMsg: "获取短信验证码",
      code: "",

sendCode方法里

 //点击获取短信验证码
    sendCode() {
      //验证
      if (!this.validate("userTel")) return;

      //请求短信验证码接口
      http
        .$axios({
          url: "/api/code",
          method: "POST",
          data: {
            phone: this.userTel,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.success) {
            this.code = res.data;
          }
        });

      //禁用按钮
      this.disabled = true;
      //倒计时
      let timer = setInterval(() => {
        --this.codeNum;
        this.codeMsg = ` 重  新  发  送  ${this.codeNum} `;
      }, 1000);
      //判断什么时候停止定时器
      setTimeout(() => {
        clearInterval(timer);
        this.codeNum = 8;
        this.disabled = false;
        this.codeMsg = "获取短信验证码";
      }, 8000);
    },

到后台接口做验证

具体方法看上篇 自己注册腾讯云帐号。

安装 cnpm install qcloudsms_js -S

引入 

var QcloudSms = require("qcloudsms_js");

 下面的appid    appkey    添写自己腾讯云的 

 phoneNumbers是前台传来的手机号

params  是随机产生的4位随机数发送到手机上的

else后面是返回前端的具体信息

res和上面的冲突  所以改成ress 

//发送短信验证码
router.post("/api/code", function (req, res, next) {
  let tel = req.body.phone;
  // 短信应用SDK AppID
  var appid = 140018xxxx; // SDK AppID是1400开头

  // 短信应用SDK AppKey
  var appkey = "dc9dc3391896235ddc23256850xxxxx";

  // 需要发送短信的手机号码
  var phoneNumbers = [tel];

  // 短信模板ID，需要在短信应用中申请
  var templateId = 285590; // NOTE: 这里的模板ID`7839`只是一个示例，真实的模板ID需要在短信控制台中申请

  // 签名
  var smsSign = "Justion提醒您"; // NOTE: 这里的签名只是示例，请使用真实的已申请的签名, 签名参数使用的是`签名内容`，而不是`签名ID`

  // 实例化QcloudSms
  var qcloudsms = QcloudSms(appid, appkey);

  // 设置请求回调处理, 这里只是演示，用户需要自定义相应处理回调
  function callback(err, ress, resData) {
    if (err) {
      console.log("err: ", err);
    } else {
      // console.log("request data: ", ress.req);
      // console.log("response data: ", resData);
      res.send({
        code: 200,
        data: {
          success: true,
          data: ress.req.body.params[0],
        },
      });
    }
  }
  //指定模板ID单发短信
  var ssender = qcloudsms.SmsSingleSender();
  //往手机上发送的短信  给他一个随机数

  var params = [Math.floor(Math.random() * (9999 - 1000)) + 1000];
  ssender.sendWithParam(
    86,
    phoneNumbers[0],
    templateId,
    params,
    smsSign,
    "",
    "",
    callback
  ); // 签名参数不能为空串
});

测试成功

接着点击登录   判断手机接收的号码 和后台传给前端的号码做对比   

 //点击登陆
    login() {
      if (this.code == this.userCode) {
        //证明用户输入的短信验证码是正确的
        //发送请求
        http
          .$axios({
            url: "/api/addUser",
            method: "POST",
            data: {
              phone: this.userTel,
            },
          })
          .then((res) => {
            // console.log(res);
            if (!res.success) return;
            console.log(res);
          });
      }
    },

后台 

添加插入方法 

userSql.js

//新增用户
  inserData(option) {
    let userTel = option.userTel;
    return (
      'insert into user (tel,pwd,imgUrl,nickName,token) values ( "' +
      userTel +
      '" ,"666666","1.jpg","2","1")'
    );
  },

接口

 

//增加一个用户
router.get("/api/addUser", function (req, res, next) {
  let params = {
    userTel: req.body.phone,
  };
  //查询用户是否存在
  connection.query(user.queryUserTel(params), function (error, results) {
    if (error) throw error;
    //用户存在
    if (results.length > 0) {
      res.send({
        code: 200,
        data: {
          success: true,
          msg: "登录成功",
          data: results[0],
        },
      });
    } else {
      //不存在，新增一条
      connection.query(user.inserData(params), function (err, result) {
        connection.query(user.queryUserTel(params), function (e, r) {
          res.send({
            code: 200,
            data: {
              success: true,
              msg: "登录成功",
              data: r[0],
            },
          });
        });
      });
    }
  });
});