Node.js Express和Nexmo，如何將備用路由連接到Vue.js前端

Question

我的app.js服務器中有一條可行的路由，該服務器通過郵遞員使用Nexmo發送SMS。

const Nexmo = require('nexmo')

const nexmo = new Nexmo({
apiKey: 'myKey',
apiSecret: 'mySecret'
}, {debug: true})

app.post('/send', (req, res) => {
// Sending SMS via Nexmo
nexmo.message.sendSms(
    '4542542445', req.body.toNumber, req.body.message, {type: 'unicode'},
  (err, responseData) => {if (responseData) {console.log(responseData)}}
    );
  });

我正在嘗試在前端添加按鈕，單擊后將調用post方法發送短信。 這是我簡單的前端代碼。

<template>

    <panel title="Send SMS

      <v-flex>
      <v-text-field
        label="number"
        id="number"
        v-model="reservation.telefon"
        ></v-text-field>

      <v-text-field
        label="message"
        id="msg"
        v-model="message"
        ></v-text-field>
      <v-btn id="button" @click="sendSms">Send</v-btn>
      </v-flex>
      </panel>

      </v-layout>
 </template>

我的問題是，如何編寫一個使用Nexmo發送短信的簡單方法，其中Reservation.telefon是toNumber，消息是我發送的消息。

Answer 1

您必須在vue代碼中實現一個功能，該功能向節點服務器發出POST請求。 它看起來像這樣：

function sendSms(number, message) {
  var httpRequest = new XMLHttpRequest();

  httpRequest.onreadystatechange = console.log;
  httpRequest.open('POST', '/send');
  httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  httpRequest.send('toNumber=' + encodeURIComponent(number) + '&message=' + encodeURIComponent(message));
}

您還需要稍微更改前端以更新@click處理程序

<v-btn id="button" @click="sendSms(reservation.telefon, message)">Send</v-btn>