使用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)文章
vue-cli3 設(shè)置端口號(hào)(81)無(wú)效的解決
這篇文章主要介紹了vue-cli3 設(shè)置端口號(hào)(81)無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02
vue3+ts中ref與reactive指定類型實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3+ts中ref及reactive如何指定類型的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程詳解
本文分步驟給大家介紹了基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2018-01-01
vue3成功創(chuàng)建項(xiàng)目后?run?serve啟動(dòng)項(xiàng)目報(bào)錯(cuò)的解決
這篇文章主要介紹了vue3成功創(chuàng)建項(xiàng)目后?run?serve啟動(dòng)項(xiàng)目報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue實(shí)現(xiàn)剪切板圖片壓縮功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue使用exif獲取圖片經(jīng)緯度的示例代碼，幫助大家更好的利用vue獲取圖片信息，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了 vue中v-for 循環(huán)對(duì)象中的屬性，文章圍繞v-for 循環(huán)對(duì)象的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)大家有所幫助2021-11-11
基于Vue實(shí)現(xiàn)后臺(tái)系統(tǒng)權(quán)限控制的示例代碼
本篇文章主要介紹了基于Vue實(shí)現(xiàn)后臺(tái)系統(tǒng)權(quán)限控制的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
element表單使用校驗(yàn)之校驗(yàn)失效問(wèn)題詳解
最近工作中遇到了element表單校驗(yàn)失敗的情況,通過(guò)查找相關(guān)資料終于解決了,所以下面這篇文章主要給大家介紹了關(guān)于element表單使用校驗(yàn)之校驗(yàn)失效問(wèn)題的相關(guān)資料,需要的朋友可以參考下2022-10-10
將vue+nodejs項(xiàng)目部署到服務(wù)器上的實(shí)現(xiàn)
本文主要介紹了將vue+nodejs項(xiàng)目部署到服務(wù)器上的實(shí)現(xiàn),使用Express生成器部署和前端Vue項(xiàng)目部署,具有一定的參考價(jià)值,感興趣的可以了解一下2025-03-03