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

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

  • 13
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。Uniapp 是一种跨平台的应用开发框架,能够使用一份代码同时在不同的移动端应用平台运行。因此,在使用 Node.jsUniapp 开发直播系统时,你可以使用 Node.js 来搭建后端服务器,使用 Uniapp 来开发直播应用的前端界面。 ### 回答2: Node.jsUniapp是两种不同的技术,可以结合使用来构建直播系统。 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它可以在服务器端运行JavaScript代码。在搭建直播系统时,可以使用Node.js来处理服务器端的逻辑和数据传输,例如实现直播流的推送和拉取、用户认证和权限控制等功能。Node.js提供了丰富的模块和工具,使得直播系统的开发更加方便和高效。 Uniapp是一个跨平台的应用开发框架,通过使用一套代码可以同时开发iOS、Android和Web应用。在直播系统中,可以使用Uniapp来构建前端用户界面,实现直播间的展示、直播间搜索、用户登录和账户管理等功能。Uniapp使用了Vue.js作为其核心框架,开发者可以利用Vue.js的优秀特性和丰富的生态系统来快速构建直播系统的前端界面。 通过结合使用Node.jsUniapp,可以实现完整的直播系统。Node.js负责处理服务器端的逻辑和数据传输,Uniapp负责构建用户界面,并通过与Node.js进行通信来获取数据和操作服务器。这样可以使得直播系统具有良好的实时性和可扩展性,同时又能够提供跨平台的用户体验。 总结起来,Node.jsUniapp可以配合使用,使得直播系统的开发更加高效,同时能够提供良好的用户体验和可扩展性。通过这种组合,可以构建出功能强大、稳定可靠的直播系统。 ### 回答3: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,可以用于构建高效的网络应用程序。而 Uniapp 是一款跨平台的开发框架,可以快速开发同时支持多个平台(如小程序、手机 App、H5 等)的应用程序。 直播系统是一种通过网络实时传输音频和视频数据的应用方式,它可以让用户实时观看和参与到正在发生的事件中。在构建 Node.jsUniapp 结合的直播系统时,可以借助 Node.js 的强大后端能力以及 Uniapp 的跨平台特性,实现一个功能完善的直播应用。 首先,在后端使用 Node.js 可以搭建一个强大的服务器,处理直播系统的后台逻辑。这个服务器可以实现用户注册登录、创建直播间、上传/下载直播视频、管理用户权限等功能。Node.js 的事件驱动和非阻塞 I/O 特性可以保证服务器在高并发场景下的稳定性和流畅性。 然后,利用 Uniapp 跨平台的特性,可以快速开发直播系统的前端界面。Uniapp 可以将代码编译成小程序、App 或者 H5 页面,并且支持多种前端框架(如 Vue、React 等)。通过 Uniapp,可以方便地实现用户界面的交互、实时聊天、弹幕、礼物赠送等功能,提升用户体验。 最后,Node.jsUniapp 的结合还可以实现实时推流和播放的功能。通过 Node.js 的实时通信技术,可以将用户上传的音/视频数据实时推送给观众端,实现直播的实时性。同时,Uniapp 支持音/视频播放的组件,可以实现观众端对直播音/视频的实时播放。 综上所述,利用 Node.jsUniapp 结合起来开发直播系统,可以充分发挥它们各自的优势,实现高效稳定的后端逻辑和跨平台的前端界面,为用户提供一个功能完善、流畅稳定的直播应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值