一、node編寫接口

（設(shè)定你已使用Node+express搭建好了項(xiàng)目，可參照我的上一篇博客）
我們就在users.js下進(jìn)行接口編寫

router.get('/getUserInfo',function(req,res,next){var user = new User();//解析路由參數(shù)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)) })

因?yàn)樵赼pp.js里我們已經(jīng)創(chuàng)建了一級(jí)路由 /users ,

所以我們?cè)趗ser.js里寫的接口已經(jīng)屬于二級(jí)路由，我們只需在瀏覽器輸入地址 http://127.0.0.1:3000/users/getUserInfo?id=1（node默認(rèn)端口為3000） 就可獲得返回的數(shù)據(jù)

到這后端接口就準(zhǔn)備好了。

二、vue編寫前端請(qǐng)求

（假定你也使用webpack創(chuàng)建好了vue項(xiàng)目）
第一步：安裝axios插件
使用命令 cnpm install axios --save-dev命令進(jìn)行安裝

安裝完成后對(duì)axios進(jìn)行全局配置，將他掛在在原型上，以便全局調(diào)用
我們?cè)趍ain.js里進(jìn)行設(shè)置

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

現(xiàn)在，我們就可以在全局進(jìn)行調(diào)用了

第二部：發(fā)送請(qǐng)求
我們?cè)?src 下創(chuàng)建 views 文件夾，在文件夾下新建 users文件夾 ，再在文件夾下創(chuàng)建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>

當(dāng)然這樣直接請(qǐng)求接口是不會(huì)成功的，這里涉及到跨域問題

所以我們需要解決跨域請(qǐng)求代理問題
首先，找到 config/index.js文件，找到里面的proxyTable:{}模塊，在里面加入下面代碼

proxyTable: {'/apis': {// 測(cè)試環(huán)境target: 'http://127.0.0.1:3000', // 接口域名changeOrigin: true, //是否跨域pathRewrite: {'^/apis': '' //需要rewrite重寫的,} }},

這一步我們修改了配置文件，所以需要cnpm run dev重啟項(xiàng)目（若啟動(dòng)失敗，重新運(yùn)行cnpm install安裝依賴）
現(xiàn)在我們?cè)偃ser.js里發(fā)送請(qǐng)求的地方在加上apis即可

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

現(xiàn)在我們?cè)偃g覽器查看結(jié)果

完成

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。