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

現在我們再去瀏覽器查看結果

完成

總結

以上是生活随笔為你收集整理的vue+node前后端分离接口调用（初学者）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。