Надеюсь, я могу объяснить это ясно, и у кого-то есть понимание того, как я могу решить это.
Я пытаюсь ввести ввод, затем получаю текстовое сообщение на номер, который был введен.Так просто.
На главной странице у меня есть компонент ввода с:
<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
}