vue 天氣預報的使用

2021-10-23 13:56:05 字數 1173 閱讀 4182

第一步: 需要拿到實時天氣的api介面

免費天氣api介面

需要注意的是在註冊賬號後記得啟用

然後拿到我們的天氣介面

在頁面中呼叫引入

<

!-- 天氣展示 -->

"margin-right: 20px"

>

}: }

"weatherimg" v-bind:style=

"">

export default 

},}

methods: 

).catch(()=

>)},

}

值得注意的是 因為我是直接在專案中呼叫的,之前都是通過request.js呼叫介面; 所以這裡沒有全域性引入axios,而且跨域問題也沒有解決;

main.js檔案中全域性引入axios

import axios  from 'axios'

vue.prototype.$axios

= axios

vue.config.js 檔案中解決跨域問題(vue-cli3.0以上在vue.config.js檔案中配置;2.0在config.js中配置)

module.exports =

, '/weather':,

secure: false,

changeorigin: true,},}

},}

最終效果圖

後言: 一直有乙個想找乙個能寫自己工作中遇到問題以及解決方法的部落格**,感覺一直沒有隨自己心意的; 希望自己以後遇到啥問題學習解決後能記錄再此;之後開發專案再遇到能回來找到解決方法; 中間其實有很多問題解決沒有記錄,以後還是要加強記錄; 在解決問題,滿足需求中學習進步吧! 加油!

Flex 天氣預報

效果如下截圖 建立乙個flex專案weather 在weather.mxml中新增乙個httpwebservice如下 result onresult event resultformat e4x 定義乙個onresult函式如下 bindable private var xml xml new x...

python天氣預報

1.引入requests import requests def query now 查詢實時天氣 return none query city input 請輸入要查詢的城市名稱 2.準備url位址 url query city 3.發請求,接收資料 response requests.get u...

天氣預報小偷

首先,進行小偷程式的一些初始化設定,以上 的作用分別是忽略掉所有非致命性錯誤,把小偷程式的執行超時時間設定得很長 這樣不會出現執行超時的錯誤 轉換原來預設的utf 8編碼轉換成gb2312編碼,否則直接用xmlhttp元件呼叫有中文字元的網頁得到的將是亂碼。然後呼叫xmlhttp元件建立乙個物件並進...