当前位置：首页 > VUE

vue实现短信发送

2026-03-10 03:51:28VUE

短信发送功能实现

在Vue中实现短信发送功能通常需要结合后端服务，前端主要负责用户界面交互和请求发送。以下是具体实现方法：

前端实现步骤

安装必要依赖 使用axios进行HTTP请求：

npm install axios

创建短信发送组件

<template>
  <div>
    <input v-model="phone" placeholder="输入手机号">
    <button @click="sendSms">发送验证码</button>
    <p v-if="countdown > 0">剩余{{countdown}}秒</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      phone: '',
      countdown: 0
    }
  },
  methods: {
    async sendSms() {
      if (!this.phone || !/^1[3-9]\d{9}$/.test(this.phone)) {
        alert('请输入正确手机号');
        return;
      }

      if (this.countdown > 0) return;

      try {
        const response = await axios.post('/api/send-sms', {
          phone: this.phone
        });

        if (response.data.success) {
          this.startCountdown();
        }
      } catch (error) {
        console.error('发送失败:', error);
      }
    },
    startCountdown() {
      this.countdown = 60;
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    }
  }
}
</script>

后端接口实现

Node.js示例

const express = require('express');
const axios = require('axios');
const app = express();

app.post('/api/send-sms', async (req, res) => {
  const { phone } = req.body;

  // 这里替换为实际短信服务商API
  const result = await axios.post('https://sms-service.com/api', {
    phone,
    templateId: '123'
  });

  res.json({ success: result.data.code === 200 });
});

app.listen(3000);

短信服务商对接

常见短信服务商对接方式：

阿里云短信服务
腾讯云短信服务
云片短信
创蓝253

阿里云短信示例配置

const Core = require('@alicloud/pop-core');

const client = new Core({
  accessKeyId: 'yourAccessKey',
  accessKeySecret: 'yourSecret',
  endpoint: 'https://dysmsapi.aliyuncs.com',
  apiVersion: '2017-05-25'
});

const params = {
  PhoneNumbers: phone,
  SignName: '签名',
  TemplateCode: '模板ID'
};

client.request('SendSms', params).then(() => {
  console.log('短信发送成功');
});