vue+node前后端分离接口调用（初学者）

一、node编写接口

（设定你已使用Node+express搭建好了项目，可参照我的上一篇博客）
我们就在users.js下进行接口编写

router.get('/getUserInfo',function(req,res,next){
  var user = new User();
  //解析路由参数
  var params = URL.parse(req.url, true).query;
  if(params.id=='1'){
    user.name='张三';
    user.age=20;
    user.sex='man';
  }else if(params.id=='2'){
    user.name="李四";
    user.age=30;
    user.sex='woman';
  }

  var response = {status:1,data:user}
  res.send(JSON.stringify(response))
})

因为在app.js里我们已经创建了一级路由 /users ,

所以我们在user.js里写的接口已经属于二级路由，我们只需在浏览器输入地址 http://127.0.0.1:3000/users/getUserInfo?id=1（node默认端口为3000） 就可获得返回的数据

到这后端接口就准备好了。

二、vue编写前端请求

（假定你也使用webpack创建好了vue项目）
第一步：安装axios插件
使用命令 cnpm install axios --save-dev命令进行安装

安装完成后对axios进行全局配置，将他挂在在原型上，以便全局调用
我们在main.js里进行设置

import axios from 'axios'
Vue.prototype.$axios=axios //注意：挂载上去的名字不能等同于axios，使用$axio即可

现在，我们就可以在全局进行调用了

第二部：发送请求
我们在 src 下创建 views 文件夹，在文件夹下新建 users文件夹 ，再在文件夹下创建user.vue文件，在文件下编写以下代码：

<template>
  <div>哈哈哈</div>
</template>

<script>
export default {
  created(){
    this.$axios.ge/users/getUserInfo?id=1').then(res=>{
      console.log(res)
    })
  }
}
</script>

<style lang="less" scoped>

</style>

当然这样直接请求接口是不会成功的，这里涉及到跨域问题

所以我们需要解决跨域请求代理问题
首先，找到 config/index.js文件，找到里面的proxyTable:{}模块，在里面加入下面代码

proxyTable: {
      '/apis': {
        // 测试环境
        target: 'http://127.0.0.1:3000',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/apis': ''   //需要rewrite重写的,
        }    
      }
    },

这一步我们修改了配置文件，所以需要cnpm run dev重启项目（若启动失败，重新运行cnpm install安装依赖）
现在我们再去user.js里发送请求的地方在加上apis即可

this.$axios.get('/apis/users/getUserInfo?id=1').then(res=>{
      console.log(res)
    })

现在我们再去浏览器查看结果

完成