Vue3學習(五)之整合HTTP庫axios
阿新 • • 發佈:2021-10-18
一、安裝axios
npm install [email protected] --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、重新啟動服務
啟動服務後,開啟主頁,並沒有任何異常,如下圖:
but
,事情並沒有我我們想象的那麼好,你敢開啟F12
看下控制檯嗎?
有啥不敢的,那我就開啟,如下圖:
忽略警告部分,紅圈部分就是報錯了。
報錯不要慌,這不是很正常個事嗎,有問題解決就好了,很明顯就是個跨越問題,簡單來說就是,雖然是同一個IP
,但是埠不同,導致沒法訪問。
3、何為跨域?
可以這樣理解,來自一個IP埠的頁面(vue
專案),要訪問另一個IP埠的資源(springboot
請求介面),會產生跨域訪問。
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小時內不需要再預檢(發OPTIONS請求) } }
5、重新啟動後端服務,再次訪問
下面就是見證奇蹟的時候了,F12
看到真相,忽略警告,可以看到,打印出的response
內容,如下圖所示:
三、最後
這塊其實我們也可以使用jQuery
來做,都是一樣的,具體喜歡哪個,還需要看自己習慣了,到此,整合HTTP
庫axios
介紹完,感興趣的同學請自行嘗試。
優秀不夠,你是否無可替代
軟體測試交流QQ群:721256703,期待你的加入!!
歡迎關注我的微信公眾號:軟體測試君