用vue-resousce发送数据到后台时报错404

Question

用vue+node写了一个简单的登录注册，实现注册时把数据发送到后台结果chrome控制台下看到报错404，如图：

注册界面组件的相关js代码如下：

<script>
export default {
  data () {
    return {
      user: {
        username: null,
        password: null,
        tel: null
      }
    }
  },
  methods: {
    submit: function () {
      console.log('username=' + this.user.username + 'password=' + this.user.password + ',tel=' + this.user.tel)
      // 提交数据
      this.$http.post('/api/user/addUser', {
        username: this.user.username,
        password: this.user.password,
        tel: this.user.tel
      }, {}).then((response) => {
        console.log(response)
      })
    }
  }
}
</script>

数据是拿到了而且也输出了就是传不过去，我觉得是post这里路径的问题，只是我不知道怎么写这个路径。。。目录与相关node的代码如下：

userApi.js的代码

var models = require('../db')
var express = require('express')
var router = express.Router()
var mysql = require('mysql')
var $sql = require('../sqlMap')

// 连接数据库
var conn = mysql.createConnection(models.mysql)
conn.connect()

router.post('/addUser', (req, res) => {
  var sql = $sql.user.add
  var params = req.body
  console.log(params)
  conn.query(sql, [params.username.params.password, params.tel], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      console.log(result)
    }
  })
})

module.exports = router

index.js的代码如下：

const userApi = require('./api/userApi')
const bodyParser = require('body-parser')
const express = require('express')
const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))

// 后端路由
// 将请求都转发至userApi.js中处理
app.use('/api/user', userApi)

app.listen(8080)
console.log('success to listen the port 8080.......') // 已经成功监听8080端口

其他部分代码不重要就没列出来了

Answer 1

1. 你的路由里只有post, 没有post之后会怎么样，比如重定向到哪里之类的。我猜你的代码是表单提交之后浏览器转圈。超过vue-resource默认的超时时间显示一个404吧。
2. 建议使用axios替换vue-resource

Answer 2

在main.js中引入：
import VueResource from 'vue-resource'
Vue.use(VueResource);
同时index.js中module没有导出,加上：module.exports = app;