Как использовать twilio с динамическими маршрутами в nuxt - PullRequest
0 голосов
/ 25 сентября 2018

Надеюсь, я могу объяснить это ясно, и у кого-то есть понимание того, как я могу решить это.

Я пытаюсь ввести ввод, затем получаю текстовое сообщение на номер, который был введен.Так просто.

На главной странице у меня есть компонент ввода с:

<template>
  <form class="right-card" @submit.prevent="submit">
    <input v-model="search" />
    <button class="clear" type="submit" v-on:click="submit"></button>
  </form>
</template>

С этой функцией, установленной как метод для передачи параметра

export default {
  data () {
    return {
      search: ''
    }
  },
  methods: {
     submit: function (event) {
        this.$router.push(`sms/${this.search}`)
       }
     }
  }

Тогда у меня есть/sms страница, расположенная в pages/sms/_sms.vue, которая появляется после отправки формы

<template>
  <div>
    <h1>Success Page {{phoneNumber}} {{$route.params}}</h1>
    <KeyboardCard/>
  </div>
</template>

<script>
import KeyboardCard from '~/components/KeyboardCard.vue'
import axios from '~/plugins/axios'

export default {
  asyncData ({ params, error }) {
    return axios.get('/api/sms/' + params.sms)
      .then((res) => {
        console.log(res)
        console.log(params)
        return { phoneNumber: res.data }
      })
      .catch((e) => {
        error({ statusCode: 404, message: 'Sms not found' })
      })
  },
  components: {
    KeyboardCard
  }
}
</script>

И, наконец, в api/sms/sms.js У меня есть это при экспресс-запуске.(обратите внимание, что мои ключи API заменены местозаполнителями)

router.get('/sms/:sms', (req, res, next) => {
  console.log('express reached')
  const accountSid = 'ACCOUNTSIDPLACEHOLDER'
  const authToken = 'AUTHTOKENPLACEHOLDER'

  const client = require('twilio')(accountSid, authToken)

  client.messages.create({
    to: '14169190118',
    from: '+16477993562',
    body: 'This is the ship that made the Kessel Run in 14 parsecs?!'
  })
    .then((message) => console.log(message.sid))
})

Как передать parameter.sms в поле to в моем /api/routes/sms.js Ожидается: когда пользователь вводит # в поле ввода, как можетapi/sms/:sms динамически вызываться по номеру, который был набран в компоненте ввода?

Заранее спасибо, если кто-нибудь увидит, что здесь происходит:)

Редактировать: мое промежуточное программное обеспечение определено вnuxt.config файл, например, так:

serverMiddleware: [
    // API middleware
    '~/api/index.js'
  ]

и мой api/index.js файл имеет:

const express = require('express')

// Create express instnace
const app = express()

// Require API route
const sms = require('./routes/sms')

// Import API Routes
app.use(sms)

// Export the server middleware
module.exports = {
  path: '/api',
  handler: app
}

1 Ответ

0 голосов
/ 27 сентября 2018

Я полагаю, что это скорее вопрос, связанный с Express.js , чем вопрос Vue.js.

Вы можете использовать переданный sms параметр из вашего запроса, например так:

router.get('/sms/:sms', (req, res, next) => {
  console.log('express reached')
  const accountSid = 'ACCOUNTSIDPLACEHOLDER'
  const authToken = 'AUTHTOKENPLACEHOLDER'

  const client = require('twilio')(accountSid, authToken)

  client.messages.create({
    to: req.params.sms,
    from: '+16477993562',
    body: 'This is the ship that made the Kessel Run in 14 parsecs?!'
  })
    .then((message) => console.log(message.sid))
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...