likes
comments
collection
share

Vue进阶（二）：简单的天气小demo

作者站长头像
站长
· 阅读数 4

各位小伙伴大家好，今天哈士奇要为大家分享的是一个简单的天气小demo，在这段时间的学习中我们逐渐学习到了Vue Router的使用，所以接下来哈士奇希望通过这个项目帮助大家进行复习，并且实际上手完成一个简单的实战项目。

项目要求

今天我们的项目的要求是一个简单的展示界面，达到以下要求： 1.使用vite创建Vue项目 2.实时更新时间 3.实时更新天气信息

实际效果如图展示：

Vue进阶（二）：简单的天气小demo

不知道大家是否已经有了想法了？？来和哈士奇一起看看这个代码吧！！！

前期准备

1.使用Vite创建Vue项目

npm create vite@latest weather -- --template vue

首先我们在终端中创建名字为weather的Vue项目

代码结构

Vue进阶（二）：简单的天气小demo

在这里我们需要创建一个Router文件夹用于存放Router文件，创建一个Home视图，其他的不变，只需要和自动创建的差不多。

2.注册高德地图API

Vue进阶（二）：简单的天气小demo 我们需要在控制台中申请创建一个自己的API

Vue进阶（二）：简单的天气小demo

进入我的应用，点击创建新应用

Vue进阶（二）：简单的天气小demo

新建应用以后，在新建的应用里面添加key

Vue进阶（二）：简单的天气小demo

点击web端

Vue进阶（二）：简单的天气小demo

最后确认以后就创建好了我们的代码

代码实现

1.index.js

import { createRouter, createWebHistory } from 'vue-router'


const routes = [
    {
        path: '/home',
        name:'home',
        component:()=>import('../views/Home.vue')
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes,
    })

export default router

这段代码是使用 Vue Router 4 的方式来创建一个简单的路由器。

  1. import { createRouter, createWebHistory } from 'vue-router'：这里使用了 ES6 的模块导入语法，从 vue-router 中导入了 createRouter 和 createWebHistory。

  2. const routes = [...]：这里定义了一个路由配置数组，数组中的每个对象表示一个路由配置。在这个示例中，只有一个路由配置对象，它定义了一个路径为 /home 的路由，名称为 'home'，并指定了组件为 '../views/Home.vue'。这意味着当用户访问 /home 路径时，将加载 Home.vue 组件。

  3. const router = createRouter({ ... })：这里使用 createRouter 函数创建了一个路由器实例。函数接受一个配置对象作为参数，其中包括路由的 history、routes 和其他选项。

  4. history: createWebHistory()：createWebHistory() 创建了一个基于 HTML5 History API 的路由历史模式。这意味着路由将不再使用哈希模式（/#/），而是使用类似于传统 URL 的路径。

  5. routes：这里传入了之前定义的路由配置数组。

  6. export default router：最后，使用 export default 将路由器实例导出，以便在应用程序中使用。

综上所述，这段代码的作用是创建一个基本的 Vue Router 实例，配置了一个简单的路由规则，使得当用户访问 /home 路径时，会加载 Home.vue 组件。

2.Home.vue

<template>
    <div class="container">
        <div class="nav">
            <div class="time">{{ localtime }}</div>
            <div class="city">切换城市</div>
        </div>
        <div class="city-info">
            <div class="city-name">{{ weatherData.city }}</div>
            <div class="wether">{{weatherData.weather}}</div>
            <h2 class="temp">
                <em>{{ weatherData.temperature }}</em>℃
            </h2>
            <div class="detail">
                <span>风力：{{weatherData.windPower}}级</span> |
                <span>风向：{{ weatherData.windDirection }}风</span> |
                <span>空气湿度：{{weatherData.humidity}}%</span>
            </div>
        </div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    data() {
        return {
            localtime: '00:00',
            weatherData:{}
        }
    },
    created() {//钩子函数 生命周期
        setInterval(() => {
            this.localtime = new Date().toLocaleTimeString();
        }, 1000);
        this.initAMap();
    },
    methods: {
        initAMap() {
            let that = this;
            AMapLoader.load({
                key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.CitySearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
                .then((AMap) => {
                    //加载天气查询插件
                    AMap.plugin('AMap.CitySearch', function () {
                        var citySearch = new AMap.CitySearch()
                        citySearch.getLocalCity(function (status, result) {
                            if (status === 'complete' && result.info === 'OK') {
                                // 查询成功，result即为当前所在城市信息
                                console.log(result);
                                //加载天气查询插件
                                AMap.plugin("AMap.Weather", function () {
                                    //创建天气查询实例
                                    var weather = new AMap.Weather();
                                    //执行实时天气信息查询
                                    weather.getLive(result.city, function (err, data) {
                                        console.log(err, data);
                                        that.weatherData = data;//this指向丢失的时候通过指定其他变量改变回来
                                        //err 正确时返回 null
                                        //data 返回实时天气数据，返回数据见下表
                                    });
                                });
                            }
                        });
                    });


                })
        }
    }
}
</script>

<style lang="css" scoped>
.container {
    min-height: 100vh;
    background-color: #000;
    opacity: 0.6;
    color: #fff;

}

.nav {
    overflow: auto;
    padding: 10px;
}

.time {
    float: left;
}

.city {
    float: right;
}

.city-info {
    text-align: center;
    padding: 20px;
}

.temp {
    font-size: 26px;

    /* margin: 20px 0; */
}

.temp em {
    font-style: normal;
    font-size: 34px;
}
</style>

这段代码是一个基于 Vue.js 的天气查询应用，通过高德地图的 API 查询用户所在城市的实时天气信息，并实时更新页面上显示的时间和天气信息。

  1. 模板部分（Template）：

    • 使用了 Vue.js 的模板语法，包含了页面的结构和数据绑定。
    • localtime：用于显示当前时间，通过 setInterval 每秒更新一次。
    • weatherData：用于存储获取的天气信息，包括城市名、天气、温度、风力、风向和空气湿度。

  2. 脚本部分（Script）：

    • 导入了 AMapLoader 模块，该模块用于加载高德地图的 JavaScript API。
    • 在 created 钩子函数中初始化了地图，并通过高德地图的 CitySearch 插件获取用户所在城市信息，并根据城市信息使用 Weather 插件获取实时天气数据，并将数据保存在 weatherData 中。

  3. 样式部分（Style）：

    • 使用了一些简单的 CSS 样式来美化页面，包括设置背景颜色、文字颜色等。

总体来说，这段代码实现了一个简单的天气查询应用，展示了 Vue.js 的数据绑定、生命周期钩子函数的使用，以及如何使用第三方库来实现一些功能。

3.App.vue

<template>

  <div>
    <!-- 所有配了路由的.vue文件都展示这里 -->
    <router-view></router-view>

  </div>

</template>

<script>
export default {
  name: 'App',
  data(){
    return {}
  }
}
</script>

scoped样式私有化  如果存在的话只会影响所在vue文件
<style lang="css">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

这段代码是一个简单的 Vue 组件，包含了一个 <template>、一个 <script> 和一个 <style> 部分。

  1. <template>：这里定义了组件的模板部分，包含一个 <div> 元素和一个 <router-view> 组件。<router-view> 是 Vue Router 提供的组件，用于显示当前路由对应的组件内容。因此，当你在应用中切换路由时，对应路由的组件内容会显示在这里。

  2. <script>：这里是组件的 JavaScript 部分，使用了 ES6 的导出语法 export default 导出一个对象。这个对象包含了组件的配置选项，其中 name 属性指定了组件的名称为 'App'，data 方法返回一个空对象，表示组件没有任何数据。

  3. <style>：这里是组件的样式部分，使用了 <style> 标签并指定了 lang="css" 表示使用 CSS 语言编写样式。scoped 属性表示这个样式只会影响当前组件的元素，不会影响到其他组件的样式。在样式中，使用了通配符 * 来设置所有元素的外边距、内边距和框模型，使得它们都是统一的。

总的来说，这段代码定义了一个简单的 Vue 组件，作为应用的根组件，负责展示当前路由对应的内容，并且包含了一些全局样式设置。

4.main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

这里主要是挂载了所需的Vue文件并且把相应的所需的router导入到项目

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "你的安全密匙",
      };
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

由于我们需要调用高德地图的api所以需要在相关的html和我们的文件里面导入api，千万不能忘记，否则可能会导致不显示数据。

总结

今天哈士奇为大家介绍了一个天气小demo的写法，大家可以从中加深对于Vue Router的认识，并且有助于大家做出更多模块去为自己的项目增加亮点。