如何在 nuxt 中使用带有动态路由的 twilio

Question

希望我能解释清楚，希望有人对我如何解决这个问题有一些见解。

我正在尝试输入内容，然后将短信发送到输入的号码。就这么简单。

在主页上，我有一个输入组件：

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

然后我在 pages/sms/_sms.vue 中有一个 /sms 页面，该页面在提交表单后登陆

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

如何在 /api/routes/sms.js 的 to 字段中传递 parameter.sms 预期：当用户在输入中输入 # 时，如何将 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
}

Answer 1

我猜这是一个 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))
})

如何在 nuxt 中使用带有动态路由的 twilio

How to use twilio with dynamic routes in nuxt

middleware

twilio

vue.js

twilio-api

nuxt.js