很早之前就想用nodejs寫後臺介面了，不想每次寫vue的時候，都是用假資料或者是mock來寫，最近正好在學習nodejs,看了下express框架，這次的資料我是在express裡面造的假資料，主要想看下vue怎麼和express相互連線起來使用的，後期我會加入mongdb，希望自己能堅持下去。。。。。

看下面的內容之前，請確保自己已經安裝了vue-cli的前端專案和express-generator搭建的node後端專案

前端

1.在config裡面的index.js裡面設定前端跨域，我後臺預設的埠號是3000，所以此時我們target就是http://localhost:3000，我自己理解是他會將我後臺的請求從3000對映到我8081上面去，我啟動前端服務，才會請求到資料。

proxyTable: {
            '/api': {
                target: 'http://localhost:3000', // 請求遠端伺服器
                //target: 'http://10.9.35.238:8067', // 請求遠端伺服器
                //target: 'http://10.10.133.52:8080', // 請求遠端伺服器
                changeOrigin: true,
                secure: false,
                pathRewrite: { "^/api": "" }
            }
        },
 

2.在前端專案的src下新建api資料夾,裡面分別新建index.js和public.js，public.js裡面主要是對axios對get,post,delete請求的封裝

import axios from 'axios'
import Qs from 'Qs'
import { Loading } from 'element-ui';

axios.defaults.headers = {
  'Accept':'application/json'
  //'Accept': 'text/plain, */*'
  //'Accept': 'text/json'
  //'X-Requested-With':'XMLHttpRequest'
};
//axios.defaults.baseURL="http://10.9.35.238"
axios.defaults.baseURL="http://localhost:8081"
//axios.defaults.baseURL="http://localhost:9090"
axios.defaults.timeout = 10000
axios.defaults.withCredentials=true
//let loadingInstance

/*axios.interceptors.request.use(function (config) {
　　// 在傳送請求之前做些什麼
  loadingInstance = Loading.service({ fullscreen: true,background:'rgba(0,0,0,0.6)' });
  return config
}, function (error) {
　　// 對請求錯誤做些什麼
  return Promise.reject(error)
});*/

axios.interceptors.response.use(function (response) {
  // 對響應資料做點什麼
  var msg=response.data.message
  if(msg && msg.indexOf("oauth2/authorize")!=-1){
    window.location.href = msg
  }else{
    return response
  }
}, function (error) {
　　// 對響應錯誤做點什麼
　return Promise.reject(error)
});
export default {
  fetchGet (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url,  Qs.stringify(params)).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchQuickSearch (url) {
    return new Promise((resolve, reject) => {
      axios.get(url).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchPost (url, params = {},config) {
    return new Promise((resolve, reject) => {
      axios.post(url, Qs.stringify(params),config).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchDelete (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.delete(url, Qs.stringify(params)).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}
 

3.index.js裡面是我們請求的介面，假如我們請求的地址是localhost:8081，那麼介面就是localhost:8081/api/leftMenu

import http from './public'
//獲取左側選單
export const leftMenu = (params) =>{
    return http.fetchGet('/api/leftMenu',params)
}

4.前端啟動服務，npm run dev,在瀏覽器裡面輸入http://localhost:8081/#/，成功訪問頁面，此時介面還沒好，請看下面

後臺

1.在後端專案的根目錄下，新建api資料夾，裡面存放的是我前端要請求的json資料

2. app.js裡面路由配置

var indexRouter = require('./routes/index');
app.use('/', indexRouter);

3.在routes下面的index.js下面引入我的json資料，require裡面是json的路徑,res.json()傳送一個json的響應

//獲取左側選單
router.get('/leftMenu', function(req, res, next) {
  var leftMenu = require("../api/testApi/leftMenu.json")
  res.json(leftMenu);
});

4.後臺設定允許跨域

//跨域訪問
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
})

5.啟動後臺服務npm start，重新重新整理頁面，我們可以看到介面已經請求過來了。

中間我一直將犯了一個錯，將api的index.js中介面的寫成return http.fetchGet('http://localhost:3000/api/leftMenu',params)，前端一直報跨域，但是自己命名已經解決跨域的問題，後來改成return http.fetchGet('/api/leftMenu',params)就好了，其實這邊的地址不是後臺的地址，前端跨域已經對映到前端服務上了。