每次我点击注册按钮,我得到这个错误:Vue.js - 未捕获的(以诺)类型错误:__WEBPACK_IMPORTED_MODULE_0__services_Api__.a.post不是一个函数
未捕获的(以诺)类型错误:__WEBPACK_IMPORTED_MODULE_0__services_Api __一个。帖子是不是一个函数
的AuthenticationService.js具有下面的代码:
import Api from '@/services/Api'
export default {
register (credentials) {
return Api.post('register', credentials)
}
}
Api.js具有下面的代码:
import axios from 'axios'
export default() => {
return axios.create({
baseURL: `http://localhost:8081/`
})
}
这是app.js的代码:
console.log('Sup?')
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
const app = express()
app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(cors())
app.post('/register', (req, res) => {
res.send({
message: `${req.body.email} Registered!`
})
})
app.listen(process.env.PORT || 8081)
Register.vue具有此代码:
<template>
<div>
<h1>Register</h1>
<input
type="email"
name="email"
v-model="email"
placeholder="email"/>
<br>
<input
type="password"
name="password"
v-model="password"
placeholder="password"/>
<br>
<button @click="register">
Register
</button>
</div>
</template>
<script>
import AuthenticationService from '@/services/AuthenticationService'
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
async register() {
await AuthenticationService.register({
email: this.email,
password: this.password
})
console.log('done!')
}
}
// watch: {
// email (value) {
// console.log('email changed: ', value)
// }
// }
}
</script>
Index.js具有这样的:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Register from '@/components/Register'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: HelloWorld
},
{
path: '/register',
name: 'register',
component: Register
}
]
})
层次结构是如下:Project Hierarchy
,您可以在此链接获得这个项目: VueDev
您的API导出一个函数,该函数在调用时返回一个实例,但是您尝试访问实例方法而不创建实例方法。 – Nit
我正在尝试使用Vue.js学习Web开发。这对我来说真是新鲜事,我在努力。你能解释我能在这里解决吗? –