vue获取当前城市和天气

### 如何在 Vue2 中通过 API 获取天气数据 要在 Vue 2 项目中实现获取天气的功能，可以通过使用 Axios 库发送 HTTP 请求到第三方天气 API（如 OpenWeatherMap）。以下是详细的说明以及示例代码。 #### 安装依赖库 为了简化 HTTP 请求操作，推荐安装 `axios` 库。运行以下命令将其添加到项目中： ```bash npm install axios ``` #### 创建 Vue 组件 创建一个新的 Vue 组件用于处理用户输入的城市名称，并显示对应的天气信息。 ```html <template> <div class="weather-app"> <h1>天气预报</h1> <input v-model="cityName" placeholder="请输入城市名称" /> <button @click="fetchWeather">查询天气</button> <div v-if="weatherData"> <p><strong>当前温度：</strong>{{ weatherData.main.temp }}°C</p> <p><strong>天气状况：</strong>{{ weatherData.weather[0].description }}</p> <p><strong>湿度：</strong>{{ weatherData.main.humidity }}%</p> </div> <div v-if="errorMessage">{{ errorMessage }}</div> </div> </template> <script> import axios from 'axios'; export default { data() { return { cityName: '', weatherData: null, errorMessage: '' }; }, methods: { async fetchWeather() { try { const apiKey = 'YOUR_API_KEY'; // 替换为您的 OpenWeatherMap API 密钥[^2] const response = await axios.get( `https://api.openweathermap.org/data/2.5/weather?q=${this.cityName}&units=metric&appid=${apiKey}` ); this.weatherData = response.data; this.errorMessage = ''; } catch (error) { console.error(error); this.weatherData = null; this.errorMessage = '无法获取天气数据，请检查城市名称或网络连接'; } } } }; </script> <style scoped> .weather-app { text-align: center; } input { padding: 8px; margin-right: 10px; } button { padding: 8px 16px; } </style> ``` 上述代码展示了如何构建一个简单的天气应用程序，在其中用户可以输入城市名称并点击按钮以触发请求。如果成功接收到响应，则会解析 JSON 数据并将结果显示给用户；如果有错误发生，则会在页面上提示消息。 #### 配置 API 密钥 请确保替换模板中的占位符 `'YOUR_API_KEY'` 为您实际申请得到的 OpenWeatherMap API Key。如果没有注册过该服务，请访问其官网完成账户创建流程后再继续开发工作。 #### 扩展功能建议 除了基础版本外还可以考虑增加更多实用特性，比如支持多日预测、地理定位自动检测当前位置附近的气象条件等高级选项[^3]。 ---

### Vue3 天气预报 API 调用示例 以下是基于 Vue3 的组合式 API 实现天气预报功能的一个完整示例。此示例通过高德地图的天气接口获取实时天气数据，并将其展示到页面上。 #### 安装依赖 为了简化 HTTP 请求的操作，可以安装 Axios 库来发送网络请求。 ```bash npm install axios ``` #### 示例代码 以下是一个完整的组件实现： ```vue <template> <div v-if="weatherData"> <h1>当前天气</h1> <p>城市: {{ weatherData.city }}</p> <p>温度: {{ weatherData.temperature }}°C</p> <p>湿度: {{ weatherData.humidity }}%</p> <p>风向: {{ weatherData.winddirection }}</p> <p>风力等级: {{ weatherData.windpower }}</p> </div> <div v-else> <p>加载中...</p> </div> </template> <script setup> import { ref, onMounted } from 'vue'; import axios from 'axios'; const weatherData = ref(null); onMounted(async () => { await fetchWeatherData(); }); async function fetchWeatherData() { try { const url = `https://restapi.amap.com/v3/weather/weatherInfo?city=上海&key=d77b4c08b2718e4e06def82570d3e834&extensions=base`; const response = await axios.get(url); if (response.data && response.data.lives && response.data.lives.length > 0) { weatherData.value = response.data.lives[0]; } } catch (error) { console.error('获取天气失败', error); } } </script> <style scoped> h1 { color: #333; } p { margin: 5px 0; font-size: 16px; } </style> ``` --- #### 关键点解析 1. **`ref` 响应式变量** - 使用 `ref` 创建了一个响应式的 `weatherData` 变量用于存储从 API 获取的数据[^3]。 2. **生命周期钩子 `onMounted`** - 在组件挂载完成后自动调用 `fetchWeatherData()` 方法发起 API 请求[^3]。 3. **Axios 发起 GET 请求** - 利用 Axios 向高德地图提供的天气接口发出请求，并将返回的结果赋值给 `weatherData`[^1]。 4. **错误处理** - 如果请求过程中发生异常，则会在控制台打印错误日志以便调试[^2]。 5. **模板绑定** - 将 `weatherData` 中的各项属性动态渲染到页面上的对应位置。 --- #### 注意事项 - 替换 URL 参数中的 `city` 字段为你想要查询的城市名称。 - 确保已申请有效的高德地图开发者密钥（即 `key`），并将该密钥替换为实际使用的值。 ---