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

然后我在/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的{{1}}字段中传递to 预期：当用户在输入中输入＃时，如何动态调用/api/routes/sms.js到在输入组件中键入的数字？

如果有人看到这里发生了什么，请先感谢：）

编辑：我在api/sms/:sms文件中定义了中间件，如下所示：

nuxt.config

我的serverMiddleware: [ // API middleware '~/api/index.js' ]文件具有：

api/index.js

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与动态路由一起使用

1 个答案: