Node.js Express und Nexmo, wie man eine unterstützte Route mit dem Vue.js-Frontend verbindet

Question

Ich habe eine Arbeitsroute in meinem app.js-Server, die SMS mit Nexmo über Postman sendet.

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)}} 
    ); 
    }); 

Was ich versuche, es zu tun Knopf in meinem Frontend hinzuzufügen, die auf einen Klick die Post-Methode aufrufen würde SMS zu senden. Das ist mein einfacher Frontend-Code.

<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> 

Meine Frage ist, wie kann ich eine einfache Methode, schreiben Sie eine SMS mit Nexmo zu schicken, wo reservation.telefon die toNumber und Botschaft ist die Botschaft, die ich bin zu senden.

Answer 1

Sie müssen in Ihrem Vue-Code eine Funktion implementieren, die eine POST-Anfrage an Ihren Node-Server sendet. Es würde wie folgt aussehen:

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)); 
} 

Sie würden auch das Frontend ein wenig ändern müssen die @Klicken Handler

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