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

Question

刚学完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)

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

Answer 1

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,
            
        }

Answer 2

你先服务端渲染的话 去看看vue-ssr