当前位置：首页 > VUE

vue实现天气查询

2026-01-15 05:48:16VUE

Vue实现天气查询功能

准备工作 确保已安装Vue CLI或通过CDN引入Vue.js。需要注册天气API服务（如和风天气、OpenWeatherMap等）获取API密钥。

项目结构

src/
├── components/
│   └── Weather.vue
├── App.vue
└── main.js

实现步骤

安装axios 通过npm或yarn安装axios用于API请求：

npm install axios

创建天气组件 在Weather.vue中编写核心逻辑：

<template>
  <div class="weather-container">
    <input v-model="city" placeholder="输入城市名称" />
    <button @click="getWeather">查询</button>
    <div v-if="weatherData">
      <h3>{{ weatherData.city }}</h3>
      <p>温度: {{ weatherData.temp }}°C</p>
      <p>天气: {{ weatherData.condition }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      city: '',
      weatherData: null,
      apiKey: 'YOUR_API_KEY', // 替换为实际API密钥
      apiUrl: 'https://api.openweathermap.org/data/2.5/weather'
    };
  },
  methods: {
    async getWeather() {
      try {
        const response = await axios.get(`${this.apiUrl}?q=${this.city}&appid=${this.apiKey}&units=metric`);
        this.weatherData = {
          city: response.data.name,
          temp: Math.round(response.data.main.temp),
          condition: response.data.weather[0].main
        };
      } catch (error) {
        console.error('获取天气失败:', error);
        alert('城市不存在或查询失败');
      }
    }
  }
};
</script>

API参数说明

units=metric 表示使用摄氏温度
OpenWeatherMap的免费版API每分钟限制60次请求
需要将YOUR_API_KEY替换为实际获得的密钥

样式优化 添加基础样式增强用户体验：

.weather-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

input, button {
  padding: 8px;
  margin-right: 10px;
}

button {
  background: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}

错误处理增强 可扩展的错误处理方案：

methods: {
  async getWeather() {
    if (!this.city.trim()) {
      alert('请输入城市名称');
      return;
    }

    try {
      // ...原有请求代码
    } catch (error) {
      if (error.response) {
        switch (error.response.status) {
          case 404:
            alert('城市不存在');
            break;
          case 401:
            alert('API密钥无效');
            break;
          default:
            alert('服务暂时不可用');
        }
      }
    }
  }
}

国内API替代方案 如需使用国内天气服务（如和风天气），需修改API地址和参数：

apiUrl: 'https://devapi.qweather.com/v7/weather/now',
params: {
  key: this.apiKey,
  location: this.city,
  lang: 'zh'
}

组件注册 在App.vue中引入并使用组件：

<template>
  <div id="app">
    <Weather />
  </div>
</template>

<script>
import Weather from './components/Weather.vue'

export default {
  components: { Weather }
}
</script>

注意事项