Vue3 (五)集成HTTP庫axios詳情
一、安裝 axios
npm install axios@0.21.0 --save
二、axios的使用
1、在主頁中引用 axios
在Vue3
新增了setup
初始化方法,所以我們在這里開始使用并測試,示例代碼如下:
<template> <a-layout> <a-layout-sider width="200" style="background: #fff"> <a-menu mode="inline" v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" :style="{ height: '100%', borderRight: 0 }" > <a-sub-menu key="sub1"> <template #title> <span> <user-outlined /> subnav 1 </span> </template> <a-menu-item key="1">option1</a-menu-item> <a-menu-item key="2">option2</a-menu-item> <a-menu-item key="3">option3</a-menu-item> <a-menu-item key="4">option4</a-menu-item> </a-sub-menu> <a-sub-menu key="sub2"> <template #title> <span> <laptop-outlined /> subnav 2 </span> </template> <a-menu-item key="5">option5</a-menu-item> <a-menu-item key="6">option6</a-menu-item> <a-menu-item key="7">option7</a-menu-item> <a-menu-item key="8">option8</a-menu-item> </a-sub-menu> <a-sub-menu key="sub3"> <template #title> <span> <notification-outlined /> subnav 3 </span> </template> <a-menu-item key="9">option9</a-menu-item> <a-menu-item key="10">option10</a-menu-item> <a-menu-item key="11">option11</a-menu-item> <a-menu-item key="12">option12</a-menu-item> </a-sub-menu> </a-menu> </a-layout-sider> <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }" > Content </a-layout-content> </a-layout> </template> <script lang="ts"> import { defineComponent } from 'vue'; import axios from 'axios'; export default defineComponent({ name: 'Home', setup(){ console.log('set up'); axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{ console.log(response); }) } }); </script>
2、重新啟動服務(wù)
啟動服務(wù)后,打開主頁,并沒有任何異常,如下圖:
but
,事情并沒有我我們想象的那么好,你敢打開 F12 看下控制臺嗎?
有啥不敢的,那我就打開,如下圖:
忽略警告部分,紅圈部分就是報錯了。
報錯不要慌,這不是很正常個事嗎,有問題解決就好了,很明顯就是個跨越問題,簡單來說就是,雖然是同一個 IP ,但是端口不同,導(dǎo)致沒法訪問。
3、何為跨域?
可以這樣理解,來自一個IP端口的頁面( vue
項目),要訪問另一個IP端口的資源( springboot
請求接口),會產(chǎn)生跨域訪問。
4、解決跨域問題
增加 CorsConfig
配置類,解決跨域問題,示例代碼如下:
import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") .allowedHeaders(CorsConfiguration.ALL) .allowedMethods(CorsConfiguration.ALL) .allowCredentials(true) .maxAge(3600); // 1小時內(nèi)不需要再預(yù)檢(發(fā)OPTIONS請求) } }
5、重新啟動后端服務(wù),再次訪問
下面就是見證奇跡的時候了, F12
看到真相,忽略警告,可以看到,打印出的 response
內(nèi)容,如下圖所示:
三、結(jié)論
這塊其實我們也可以使用 jQuery
來做,都是一樣的,具體喜歡哪個,還需要看自己習(xí)慣了,到此,集成 HTTP
庫 axios
介紹完,感興趣的同學(xué)請自行嘗試。
到此這篇關(guān)于Vue3
集成HTTP
庫axios
詳情的文章就介紹到這了,更多相關(guān)Vue3 集成HTTP庫axios內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化
這篇文章主要為大家介紹了Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09使用Vue3+PDF.js實現(xiàn)PDF預(yù)覽功能
項目中有一個需要預(yù)覽下載pdf的需求,網(wǎng)上找了很久,決定使用 pdf.js 完成,下面這篇文章主要給大家介紹了關(guān)于使用Vue3+PDF.js實現(xiàn)PDF預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2022-12-12