Vue-实现发送短信验证码功能

2,572 阅读1分钟

短信验证码Api平台连接👉www.loktong.com/sms/index

image.png

一、注册

当你注册号一个账号后,这个时候就可以进入后台管理页面了

二、登录

进入后台管理页面后,我们来做开始阶段的准备工作,要有耐心的看完,就可以一次点亮~

image.png

三、API文档

Api文档连接👉yun.loktong.com/book/apimd/…

image.png

四、配置Api接口

  • package.json

image.png

  • scr/api/code.api.js
import request from "@/utils/request.js";
import md5 from "js-md5";
import qs from "qs";
import moment from 'moment'

//参数
let action = "sendtemplate";
let url = "http://www.lokapi.cn/smsUTF8.aspx";
let rece = "json";
// 平台账号
let username = ""; 
// 平台密码
let password = ""; 
// 短信类型token
let token = "dsadsada"; 
let param = `18555555555|你是憨批`;
// 模板id
let templateid = "dsadsada";
let dstime=`${moment().format("yyyy-MM-DD HH:mm:ss")}`
let passwd = md5(password).toLocaleUpperCase();
let timestamp = Date.now();

console.log(dstime);

let body = qs.stringify({
  action,
  username,
  password:passwd,
  token,
  timestamp,
});

let sign = md5(decodeURIComponent(body));
// 用于请求的选项
let contents = qs.stringify({
  action,
  username,
  password:passwd,
  token,
  timestamp,
  sign: sign.toLocaleUpperCase(),
  rece,
  dstime,
  templateid,
  param,
});

let options = {
  url,
  method: "POST",
  data: decodeURIComponent(contents),
};

export const telCode = () => {
  return request({
    ...options,
  });
};

  • 记得搞proxy代理