• node.js+uniapp(vue),阿里云短信验证码


    reg.vue:

    思路是:前端调用获取验证码的接口 ==> 后端生成验证码返回给前端 ==> 前端渲染验证码

    1. <template>
    2. <div>
    3. <input class="sl-input" v-model="phone" type="tel" maxlength="11" placeholder="手机号" />
    4. <button @click="sendSms">短信注册</button>
    5. </div>
    6. </template>
    7. <script>
    8. export default {
    9. data() {
    10. return {
    11. phone: ''
    12. };
    13. },
    14. methods: {
    15. sendSms() {
    16. console.log('电话号:', this.phone);
    17. uni.request({
    18. url: 'http://localhost:3000/valisms', // 你的后端服务地址
    19. method: 'POST',
    20. data: {
    21. phoneNumbers: this.phone
    22. },
    23. success: (res) => {
    24. if (res.data.success) {
    25. console.log('短信发送成功:', res.data.response);
    26. uni.showToast({
    27. title: '短信发送成功',
    28. icon: 'success'
    29. });
    30. } else {
    31. console.log('短信发送失败:', res.data.message);
    32. uni.showToast({
    33. title: '短信发送失败',
    34. icon: 'none'
    35. });
    36. }
    37. },
    38. fail: (err) => {
    39. console.error('发送请求失败:', err);
    40. uni.showToast({
    41. title: '请求失败',
    42. icon: 'none'
    43. });
    44. }
    45. });
    46. },
    47. }
    48. };
    49. </script>
    50. <style>
    51. </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

  • 相关阅读:
    uniapp/小程序 onload方法每次打开页面都执行解读
    利用开源代码提高写代码能力
    Nginx之Openresty缓存解读
    全栈自动化测试之 python基础语法介绍
    【C++代码】平衡二叉树,二叉树的所有路径,左叶子之和--代码随想录
    Spring 事务编程实践
    TCP 拥塞控制对数据延迟的影响
    Seata中的AT事务模式是如何实现行锁
    宝塔配置tomcat
    java设计模式4,不要和陌生人说话
  • 原文地址:https://blog.csdn.net/weixin_73480865/article/details/140095773