廊坊学校网站建设,移动网站建设推荐,shopee怎么注册开店,html编辑器dw一、node编写接口 #xff08;设定你已使用Nodeexpress搭建好了项目#xff0c;可参照我的上一篇博客#xff09; 我们就在users.js下进行接口编写
router.get(/getUserInfo,function(req,res,next){var user new User();//解析路由参数var params URL.parse(req.url, tr…一、node编写接口 设定你已使用Nodeexpress搭建好了项目可参照我的上一篇博客 我们就在users.js下进行接口编写
router.get(/getUserInfo,function(req,res,next){var user new User();//解析路由参数var params URL.parse(req.url, true).query;if(params.id1){user.name张三;user.age20;user.sexman;}else if(params.id2){user.name李四;user.age30;user.sexwoman;}var response {status:1,data:user}res.send(JSON.stringify(response))
})因为在app.js里我们已经创建了一级路由 /users , 所以我们在user.js里写的接口已经属于二级路由我们只需在浏览器输入地址 http://127.0.0.1:3000/users/getUserInfo?id1node默认端口为3000 就可获得返回的数据 到这后端接口就准备好了。
二、vue编写前端请求
假定你也使用webpack创建好了vue项目 第一步安装axios插件 使用命令 cnpm install axios --save-dev命令进行安装 安装完成后对axios进行全局配置将他挂在在原型上以便全局调用 我们在main.js里进行设置
import axios from axios
Vue.prototype.$axiosaxios //注意挂载上去的名字不能等同于axios使用$axio即可现在我们就可以在全局进行调用了
第二部发送请求 我们在 src 下创建 views 文件夹在文件夹下新建 users文件夹 再在文件夹下创建user.vue文件在文件下编写以下代码
templatediv哈哈哈/div
/templatescript
export default {created(){this.$axios.ge/users/getUserInfo?id1).then(res{console.log(res)})}
}
/scriptstyle langless 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?id1).then(res{console.log(res)})现在我们再去浏览器查看结果
完成
