实现一个简易的天气查询应用：Vue3与API的完美结合

原创

日晚间粉 2024-08-18 17:15:33 ©著作权

©著作权归作者所有：来自51CTO博客作者日晚间粉的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现一个简易的天气查询应用：Vue3与API的完美结合

在现代前端开发中，Vue.js 作为一个流行的框架，因其简单易用和强大的功能而受到开发者的广泛欢迎。特别是 Vue 3，凭借其引入的 Composition API（组合式 API），让我们在组织和复用代码方面有了更大的灵活性。本文将带领大家通过一个简易的天气查询应用来探索 Vue 3 和 API 的完美结合。

项目概述

本项目将使用 Vue 3 和一个公共天气 API（例如 OpenWeatherMap）来构建一个简单的天气查询应用。用户可以在输入框中输入城市名，点击查询按钮后，应用将显示该城市的当前天气情况。

准备工作

在开始之前，确保你已经安装了 Node.js 和 Vue CLI。请在命令行中运行以下命令来创建一个新的 Vue 3 项目：

vue create weather-app

选择 Vue 3 配置，并进入项目目录：

cd weather-app

然后安装 axios，这是一个用于处理 HTTP 请求的库：

npm install axios

接下来，你需要从 OpenWeatherMap 注册一个账号并获取 API 密钥。

项目结构

接下来，我们将项目结构设置为以下样子：

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

创建 Weather 组件

让我们在 src/components 目录中创建一个名为 Weather.vue 的组件，负责处理天气查询的逻辑和渲染。

<template>
  <div class="weather-container">
    <h1>天气查询应用</h1>
    <input v-model="city" type="text" placeholder="请输入城市名" />
    <button @click="fetchWeather">查询天气</button>

    <div v-if="weatherData">
      <h2>{{ weatherData.name }} 的天气</h2>
      <p>温度: {{ Math.round(weatherData.main.temp - 273.15) }} °C</p>
      <p>天气: {{ weatherData.weather[0].description }}</p>
      <p>湿度: {{ weatherData.main.humidity }} %</p>
      <p>风速: {{ weatherData.wind.speed }} m/s</p>
    </div>

    <div v-if="error" class="error">{{ error }}</div>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  name: 'Weather',
  setup() {
    const city = ref('');
    const weatherData = ref(null);
    const error = ref(null);
    
    const apiKey = 'YOUR_API_KEY'; // 替换为你的 API 密钥

    const fetchWeather = async () => {
      if (!city.value) {
        error.value = '请输入城市名！';
        return;
      }

      error.value = null;
      
      try {
        const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city.value}&appid=${apiKey}`);
        weatherData.value = response.data;
      } catch (err) {
        error.value = '无法获取天气数据，请检查城市名称是否正确。';
        weatherData.value = null;
      }
    };

    return {
      city,
      fetchWeather,
      weatherData,
      error,
    };
  }
};
</script>

<style scoped>
.weather-container {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
  padding: 10px;
  width: 80%;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
}
.error {
  color: red;
  margin-top: 10px;
}
</style>

修改 App.vue

接下来，我们在 src/App.vue 中引入和使用 Weather 组件：

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

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

export default {
  name: 'App',
  components: {
    Weather
  }
};
</script>

<style>
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  background-color: #eaeaea;
}
</style>

运行应用

在命令行中输入以下命令以启动开发服务器：

npm run serve

打开浏览器，访问 http://localhost:8080，你会看到一个简洁的天气查询应用。输入城市名后，点击查询按钮，你将获得该城市的实时天气信息。

代码解释

组合式 API：在 Weather.vue 中，我们使用 ref 来创建响应式变量。city 用于存储用户输入的城市名，weatherData 存储从 API 获取的天气数据，error 用于处理错误信息。
fetchWeather：这个 async 函数负责发起请求并处理响应。在请求前，它会检查用户是否输入了城市名；如未输入，将提示用户进行输入。
API 请求：我们使用 Axios 的 get 方法通过天气 API 获取数据。在请求完成后，根据响应来更新 weatherData 或 error。
样式：通过 CSS 样式设置了应用的外观，使应用看起来更加友好和美观。