vue+node前后端分离接口调用(初学者)
一、node編寫接口
(設(shè)定你已使用Node+express搭建好了項(xiàng)目,可參照我的上一篇博客)
我們就在users.js下進(jìn)行接口編寫
因?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è)置
現(xiàn)在,我們就可以在全局進(jìn)行調(diào)用了
第二部:發(fā)送請(qǐng)求
我們?cè)?src 下創(chuàng)建 views 文件夾,在文件夾下新建 users文件夾 ,再在文件夾下創(chuàng)建user.vue文件,在文件下編寫以下代碼:
當(dāng)然這樣直接請(qǐng)求接口是不會(huì)成功的,這里涉及到跨域問題
所以我們需要解決跨域請(qǐng)求代理問題
首先,找到 config/index.js文件,找到里面的proxyTable:{}模塊,在里面加入下面代碼
這一步我們修改了配置文件,所以需要cnpm run dev重啟項(xiàng)目(若啟動(dòng)失敗,重新運(yùn)行cnpm install安裝依賴)
現(xiàn)在我們?cè)偃ser.js里發(fā)送請(qǐng)求的地方在加上apis即可
現(xiàn)在我們?cè)偃g覽器查看結(jié)果
完成
總結(jié)
以上是生活随笔為你收集整理的vue+node前后端分离接口调用(初学者)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 解决sonar scanner扫描报错P
- 下一篇: html、css、js、react、vu