reg.vue:
思路是：前端調用獲取驗證碼的接口 ==> 后端生成驗證碼返回給前端 ==> 前端渲染驗證碼
<template> <div> <input class="sl-input" v-model="phone" type="tel" maxlength="11" placeholder="手機號" /> <button @click="sendSms">短信注冊</button> </div>
</template> <script>
export default { data() { return { phone: '' }; }, methods: { sendSms() { console.log('電話號：', this.phone); uni.request({ url: 'http://localhost:3000/valisms', // 你的后端服務地址 method: 'POST', data: { phoneNumbers: this.phone }, success: (res) => { if (res.data.success) { console.log('短信發送成功:', res.data.response); uni.showToast({ title: '短信發送成功', icon: 'success' }); } else { console.log('短信發送失敗:', res.data.message); uni.showToast({ title: '短信發送失敗', icon: 'none' }); } }, fail: (err) => { console.error('發送請求失敗:', err); uni.showToast({ title: '請求失敗', icon: 'none' }); } }); }, }
};
</script> <style> </style>client.js:
地址：短信服務_云產品主頁-阿里云OpenAPI開發者門戶 (aliyun.com)
'use strict';
// This file is auto-generated, don't edit it
// 依賴的模塊可通過下載工程中的模塊依賴文件或右上角的獲取 SDK 依賴信息查看
const Dysmsapi20170525 = require('@alicloud/dysmsapi20170525');
const OpenApi = require('@alicloud/openapi-client');
const Console = require('@alicloud/tea-console');
const Util = require('@alicloud/tea-util');
const Tea = require('@alicloud/tea-typescript');class Client {
?? ??? ?? static createClient() {
?? ??? ??? ?// 工程代碼泄露可能會導致 AccessKey 泄露，并威脅賬號下所有資源的安全性。以下代碼示例僅供參考。
?? ??? ??? ?// 建議使用更安全的 STS 方式，更多鑒權訪問方式請參見：https://help.aliyun.com/document_detail/378664.html。
?? ??? ??? ?let config = new OpenApi.Config({
?? ??? ??? ?? // 必填，請確保代碼運行環境設置了環境變量 ALIBABA_CLOUD_ACCESS_KEY_ID。
?? ??? ??? ?? accessKeyId: 'xxxx',
?? ??? ??? ?? // 必填，請確保代碼運行環境設置了環境變量 ALIBABA_CLOUD_ACCESS_KEY_SECRET。
?? ??? ??? ?? accessKeySecret: 'xxxxxx',
?? ??? ??? ?});
?? ??? ??? ?// Endpoint 請參考 https://api.aliyun.com/product/Dysmsapi
?? ??? ??? ?config.endpoint = `dysmsapi.aliyuncs.com`;
?? ??? ??? ?return new Dysmsapi20170525.default(config);
?? ??? ?? }?? ? static async sendSms(phoneNumbers, code) {
?? ???? let client = Client.createClient();
?? ??? ?console.log('驗證碼是：',code);
?? ???? let sendSmsRequest = new Dysmsapi20170525.SendSmsRequest({
?? ?????? signName: 'xxx', // 替換為你的短信簽名名稱
?? ?????? templateCode: 'xxxx', // 替換為你的短信模板 CODE
?? ?????? phoneNumbers: phoneNumbers,
?? ?????? templateParam: JSON.stringify({ code:code }),
?? ???? });
?? ???? let runtime = new Util.RuntimeOptions({});
?? ??? ??? ?try {
?? ??? ??? ?? let response = await client.sendSmsWithOptions(sendSmsRequest, runtime);
?? ??? ??? ?? return response;
?? ??? ??? ?} catch (error) {
?? ??? ??? ? console.error('錯誤的原因是:',error);
?? ??? ??? ?}
?? ??? ?}
?}
module.exports = Client;
Client.sendSms(process.argv.slice(2));
server.js :
// server.js
const express = require('express');
const bodyParser = require('body-parser');
const Client? = require('./client');const app = express();
const port = 3000;app.use(bodyParser.json());
app.post('/valisms', async (req, res) => {
? const { phoneNumbers} = req.body;
? console.log('電話號：',phoneNumbers);
? const code = Math.floor(100000 + Math.random() * 900000).toString(); ?
? console.log('驗證碼是：',code);
? try {
??? const response = await Client.sendSms(phoneNumbers, code);
??? res.json({ success: true, message: '短信發送成功', response });
? } catch (error) {
?? ?console.error('短信發送失敗的具體原因:', error);
??? res.status(500).json({ success: false, message: '短信發送失敗' });
? }
});app.listen(port, () => {
? console.log(`Server running on http://localhost:${port}`);
});
?三個文件搞定，要使用nod命令啟動server，如進入相對應的路徑執行：node server.js
)
)
