使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法
1、安裝axios
- 打開(kāi)cmd命令行工具
- cd到項(xiàng)目目錄
- 輸入以下命令
npm install axios
提示安裝完成以后，打開(kāi)main.js
輸入以下代碼:
import axios from 'axios'
接著在底下輸入:
Vue.prototype.$axios = axios
配置就完事了
2、axios的使用
this.$axios({
? ? ? ? method: 'post',//交互方式
? ? ? ? url: '/api/ImgHandle',//url地址
? ? ? ? data: {page: page}//需要交互的數(shù)據(jù)
? ? ? }).then((res) => {
? ? ? ? console.log(res)//成功 ? res為返回的結(jié)果
? ? ? }).catch((error) => {
? ? ? ? console.log(error)//失敗 ? 打印異常
? ? ? })3、講一下代理proxyTable的使用
一般在開(kāi)發(fā)時(shí)，地址都在本地，會(huì)出現(xiàn)跨域報(bào)錯(cuò)，報(bào)錯(cuò)示例如下:
Failed to load http://192.168.1.111:8888/console/good/front/classList:
Response to preflight request doesn’t pass access control
check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:8081’ is therefore not allowed access.
If an opaque response serves your needs,
set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
如果后端不修改，那就前端操作修改一下:
- 找到 config/index.js
- 找到 proxyTable進(jìn)行修改
?proxyTable: {
? ? ? '/api': { ?//使用"/api"來(lái)代替"http://www.xxx.com/"
? ? ? ? target: 'https://www.xxx.com/', //源地址
? ? ? ? changeOrigin: true, //改變?cè)?
? ? ? ? pathRewrite: {
? ? ? ? ? '^/api': 'https://www.xxx.com/' //路徑重寫
? ? ? ? }
? ? ? }
? ? },然后重新運(yùn)行一下，即可生效，操作失敗就再檢查一下代碼
到此這篇關(guān)于使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法的文章就介紹到這了,更多相關(guān)Vue-axios數(shù)據(jù)交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2 router 動(dòng)態(tài)傳參,多個(gè)參數(shù)的實(shí)例
下面小編就為大家?guī)?lái)一篇vue2 router 動(dòng)態(tài)傳參,多個(gè)參數(shù)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
在實(shí)際開(kāi)發(fā)中每個(gè)開(kāi)發(fā)者應(yīng)該都有經(jīng)歷過(guò)對(duì)組件進(jìn)行二次封裝,本文將從三個(gè)方面來(lái)基于 Element UI 的el-input組件簡(jiǎn)單實(shí)現(xiàn)一下組件的二次封裝,有需要的可以參考下2023-09-09
淺談VUE監(jiān)聽(tīng)窗口變化事件的問(wèn)題
下面小編就為大家分享一篇淺談VUE監(jiān)聽(tīng)窗口變化事件的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問(wèn)題
這篇文章主要介紹了vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑
本文主要介紹了解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue-router中query和params的區(qū)別解析
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用，這篇文章主要介紹了vue-router中query和params的區(qū)別 ,需要的朋友可以參考下2022-10-10
vue3+element-plus props中的變量使用 v-model 報(bào)錯(cuò)及解決方案
這篇文章主要介紹了vue3+element-plus props中的變量使用 v-model 報(bào)錯(cuò)及解決方案,prop 是單向數(shù)據(jù)流,這里只能用:model-value,不能用v-model,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
vue在自定義組件上使用v-model和.sync的方法實(shí)例
自定義組件的v-model和.sync修飾符其實(shí)本質(zhì)上都是vue的語(yǔ)法糖,用于實(shí)現(xiàn)父子組件的"數(shù)據(jù)"雙向綁定,下面這篇文章主要給大家介紹了關(guān)于vue在自定義組件上使用v-model和.sync的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue Mint UI mt-swipe的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP（vue+webpack+HBulider）
這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP（vue+webpack+HBulider），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02