鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 關(guān)于vuecli與express構(gòu)建的項(xiàng)目中的數(shù)據(jù)交互問題

關(guān)于vuecli與express構(gòu)建的項(xiàng)目中的數(shù)據(jù)交互問題

剛學(xué)完express和vue，想寫個(gè)vue+express的項(xiàng)目，但是有些地方想不太通，想請(qǐng)問一下：
vue如何將數(shù)據(jù)傳輸給express并且不跳轉(zhuǎn)頁(yè)面得到返回?cái)?shù)據(jù)？網(wǎng)上查到別人的項(xiàng)目是：

  • 先用axios來get/post：
axios.post('/api/nameCheck', {
            name: this.name
          })
          .then(...)
  • 再在vue中設(shè)置代理：
proxyTable: {
        '/api': {
            target: 'http://localhost:3000/',
            changeOrigin: true,
            
        }
    },
  • 然后在server文件夾下的app.js中：
var router1=require('./api/user');
...
app.use('/api', router1);
  • 最后在api/user.js中處理并返回?cái)?shù)據(jù)
const express = require('express')
const router = express.Router()

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

請(qǐng)問vue和express是這樣傳遞數(shù)據(jù)的嗎？可是我這樣傳遞數(shù)據(jù)端口號(hào)并沒有變：

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

請(qǐng)問是哪里出了問題呢？該怎么改？謝謝。

回答
編輯回答
瘋浪

你先服務(wù)端渲染的話 去看看vue-ssr

2017年8月16日 06:58
編輯回答
離魂曲
router.get('/users', (req, res, next) => {
  ...
    res.send(users)
})

你的后端api的url錯(cuò)了，譬如你的實(shí)際地址為：

localhost:3000/nameCheck

那么代理到的ttp://localhost:8089/api/nameCheck，怎么可能拿到數(shù)據(jù)呢？因?yàn)槟愫笈_(tái)并沒這個(gè)地址
解決辦法
1.

proxyTable: {
        '/': {
            target: 'http://localhost:3000/',
            changeOrigin: true,
            
        }
    },

2.修改服務(wù)端路由

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

并修改代理

 '/api': {
            target: 'http://localhost:3000/api',
            changeOrigin: true,
            
        }
2017年2月19日 22:35