实现一个最简单最基本的指定城市查询天气功能

走不了

已于 2024-07-14 13:05:10 修改

阅读量407

点赞数 5

文章标签：前端 vue.js typescript vscode

于 2024-07-13 10:55:30 首次发布

本文链接：https://blog.csdn.net/weixin_71398262/article/details/140395110

版权

1.首先，你需要注册一个OpenWeatherMap账号，获取一个API密钥

安装axios来处理HTTP请求。
```
npm install axios
pnpm install axios
yarn axios
```
2.在Vue组件中使用axios发送请求并获取天气数据

<div>
            <p v-if="weatherData">
              <strong>城市:</strong> {{ weatherData.name }}, {{ weatherData.sys.country }}<br>
              <strong>温度:</strong> {{ Math.round(weatherData.main.temp) }}°C<br>
              <strong>气压:</strong> {{ weatherData.main.pressure }} hPa<br>
              <strong>湿度:</strong> {{ weatherData.main.humidity }} %<br>
              <strong>天气:</strong> {{ weatherData.weather[0].description }}
            </p>
            <p v-else>
              加载中...
            </p>
          </div>

ts代码

import { onMounted, ref } from 'vue'
import axios from 'axios'

const weatherData = ref(null)
onMounted(async () => {
  try {
    const apiKey = 'APIKEY' // 替换为你的API密钥
    const url = `http://api.openweathermap.org/data/2.5/weather?q=安康&appid=${apiKey}&units=metric`
    const response = await axios.get(url)
    weatherData.value = response.data
  }
  catch (error) {
    console.error('Error fetching weather:', error)
  }
})