Vue、Node 全栈，结合使用获取数据

Vue——前端框架，Node——JavaScript运行时环境，可以运行在服务器上，在小项目中node完全可以作为自己的服务器使用，目前学习node是为了完成毕业设计。

但是两者怎么联系在一起？因为两者本身存在跨域问题。以下简例解决问题。

首先先创建一个Vue项目Client，这里使用脚手架创建

主要代码如下

/**main.js*/
import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.prototype.$axios = axios;

axios.defaults.baseURL = '/api';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

/**App.vue*/
<template>
  <div>
    2222
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted(){
    this.$axios({
      method:'get',
      url:'/'
    }).then(res => {
      console.log( res )
    })
  },
  components: {
  }
}
</script>

<style>
</style>

接着创建一个服务器Server

/**app.js*/

const express = require('express');

const app = express();

app.get('/',function (req,res) {
    res.send('hello express vue')
});

app.listen(3000,function () {
    console.log('server is running')
});

解决跨域问题，在Vue项目中，找的项目文件夹config/index.js

在proxyTable: {}中插入如下代码：

  proxyTable: {
      '/api': { // 匹配所有以 '/api'开头的请求路径
        target: 'http://localhost:3000', // 代理目标的基础路径
        changeOrigin: true, // 支持跨域
        pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
          '^/api': ''
        }
      }
    }

此外，在main.js中，添加一行 代码axios.defaults.baseURL = '/api'; ；

启动服务器， node app.js 

启动前端项目， npm run dev 

此时数据已经打印在控制台中

注意这里面 /api是你自定义的，写成什么都可以。target 设置你调用的接口域名和端口号。这里理解成用‘^/api’代替target里面的地址，后面组件中我们调接口时直接用api代替 。比如我要调用’http://localhost:3000/url‘，直接写‘/api/url’即可。

在main.js 设置 Vue.prototype.$axios = axios; 将axios写入Vue原型中，在全局的组件中就可以使用this.$axios.xxx的形式调用。

在main.js设置一个基础路径，这样你调用接口的时候可以不写api,直接写接口名称即可。axios.defaults.baseURL=”/api”。

   配置完成，比如发送GET请求：this.$axios.get(‘/url’)，简洁明了。