关于vuecli与express构建的项目中的数据交互问题

0 0 nodejs-express vue.js vue-cli node.js
cookeyang.
cookeyang.

声望值:101 0人

2019-01-25 17:09:02 提问

关注 0关注

收藏 0收藏, 124浏览

刚学完express和vue,想写个vue+express的项目,但是有些地方想不太通,想请问一下:
vue如何将数据传输给express并且不跳转页面得到返回数据?网上查到别人的项目是:

  • 先用axios来get/post:
axios.post('/api/nameCheck', {
            name: this.name
          })
          .then(...)
  • 再在vue中设置代理:
proxyTable: {
        '/api': {
            target: 'http://localhost:3000/',
            changeOrigin: true,
            
        }
    },
  • 然后在server文件夹下的app.js中:
var router1=require('./api/user');
...
app.use('/api', router1);
  • 最后在api/user.js中处理并返回数据
const express = require('express')
const router = express.Router()

router.get('/users', (req, res, next) => {
  ...
    res.send(users)
})

请问vue和express是这样传递数据的吗?可是我这样传递数据端口号并没有变:

POST http://localhost:8089/api/nameCheck 404 (Not Found)

请问是哪里出了问题呢?该怎么改?谢谢。

请先 登录 后评论

2个回答

  • 飞翔的熊bla45声望 2018-09-25 09:28

    你先服务端渲染的话 去看看vue-ssr
    请先 登录 后评论
  • 代码宇宙150声望 2018-09-25 09:28

    router.get('/users', (req, res, next) => { ... res.send(users) }) 你的后端api的url错了,譬如你的实际地址为: localhost:3000/nameCheck 那么代理到的ttp://localhost:8089/api/nameCheck,怎么可能拿到数据呢?因为你后台并没这个地址解决办法1. proxyTable: { '/': { target: 'http://localhost:3000/', changeOrigin: true, } }, 2.修改服务端路由 router.get('/api/users', (req, res, next) => { ... res.send(users) }) 并修改代理 '/api': { target: 'http://localhost:3000/api', changeOrigin: true, }
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问