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

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

完成