获取地区天气

上网找了半天js获取天气的方法,试了好几个都不行,还是得用api才行
1.用的心知天气的api
很简单,注册就能用,调用api需要key,官方网站:https://gaofen.mlogcn.com/documentation/0/00

2.areacode
这个网页里面找 精确到县:https://blog.csdn.net/WXB_gege/article/details/106853189

备用:https://blog.csdn.net/Web_Notes/article/details/134581398?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22134581398%22%2C%22source%22%3A%22Web_Notes%22%7D
效果图:
在这里插入图片描述

完成代码:


<template>
  <div class="weather_font">
    <span>{{weather}}&nbsp;&nbsp;</span>
    <span>{{temp}}&nbsp;&nbsp;</span>
    <span>{{wind}}</span>
    </div>
</template>
<script>
//import axios from "axios";
export default {
  data() {
    return {
      weather: '',
      temp: '',
      wind: '',
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      let key = "xxxx";//心知天气key
      let code = "101271617";//l雷波
      let url = `https://gfapi.mlogcn.com/weather/v001/now?areacode=${code}&key=${key}`;

      fetch(url)
        .then((res) =>
          res.json().then((data) => {
            let nData=data.result.realtime
            this.weather=nData.text
            this.temp=nData.temp
            this.wind=nData.wind_dir+nData.wind_class
          })
        )
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style>
.weather_font {
font-size: 14px;
color: #32F0EE;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/182259.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Hibernate批量处理数据

概念&#xff1a; 批量处理数据是指在一个事务场景中处理大量数据。 在应用程序中难以避免进行批量操作&#xff0c;Hibernate提供了以下方式进行批量处理数据&#xff1a; (1)使用HQL进行批量操作 数据库层面 executeUpdate() (2)使用JDBC API进行批量操作 数据库层面 …

王道p149 9.设树B是一棵采用链式结构存储的二叉树,编写一个把树 B中所有结点的左、右子树进行交换的函数。(c语言代码实现)

本题代码如下 void swap(tree* t) {if (*t){treenode* temp (*t)->lchild;(*t)->lchild (*t)->rchild;(*t)->rchild temp;swap(&(*t)->lchild);swap(&(*t)->rchild);} } 完整测试代码 #include<stdio.h> #include<stdlib.h> typed…

python+requests+unittest执行自动化接口测试!

1、安装requests、xlrd、json、unittest库 <1>pip 命令安装&#xff1a; pip install requests pip install xlrd pip install json pip install unittest <2> pycharm里安装 2、利用Page Object Model 设计理念创建六类Python Package(也可根据项目要求具体实施…

基于SSM的校园奶茶点单管理系统

基于SSM的校园奶茶点单管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringMyBatisSpringMVC工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 奶茶列表 登录界面 管理员界面 用户界面 摘要 随着社会的发展和科技的进…

Python---把函数的返回值作为另外一个函数的参数

def test1():return 50def test2(num):print(num)# 1. 保存函数test1的返回值 result test1()# 2.将函数返回值所在变量作为参数传递到test2函数 test2(result) # 50

JavaScript框架 Angular、React、Vue.js 的全栈解决方案比较

在 Web 开发领域&#xff0c;JavaScript 提供大量技术栈可供选择。其中最典型的三套组合&#xff0c;分别是 MERN、MEAN 和 MEVN。前端框架&#xff08;React、Angular 和 Vue&#xff09;进行简化比较。 MERN 技术栈详解 MERN 技术栈包含四大具体组件&#xff1a; MongoDB&am…

读书笔记——《黑猩猩的政治》

前言 弗朗斯德瓦尔&#xff08;Frans de Waal)的代表作《黑猩猩政治》成书于1982年&#xff0c;是它的首部书籍作品&#xff0c;也是美国国会新任议员的被推荐读物。之前看的他另一部作品的《万智有灵》是2016年的作品&#xff0c;时间跨度居然这么大。《万智有灵》介绍了许多…

2023亚太杯数学建模竞赛C题详细代码解析建模

C题&#xff1a;The Development Trend of New Energy Electric Vehicles in China中国谈新能源电动汽车的发展趋势 第一问部分&#xff1a; import numpy as np import pandas as pd import matplotlib.pyplot as plt from sklearn.cluster import KMeans from sklearn.prep…

UML建模图文详解教程06——顺序图

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl本文参考资料&#xff1a;《UML面向对象分析、建模与设计&#xff08;第2版&#xff09;》吕云翔&#xff0c;赵天宇 著 顺序图概述 顺序图(sequence diagram&#xff0c;也…

C语言第二十五弹--打印菱形

C语言打印菱形 思路&#xff1a;想要打印一个菱形&#xff0c;可以分为上下两部分&#xff0c;通过观察可以发现上半部分星号的规律是 1 3 5 7故理解为 2对应行数 1 &#xff0c;空格是4 3 2 1故理解为 行数-对应行数-1。 上半部分代码如下 for (int i 0;i < line;i){//上…

普通话考试相关(一文读懂)

文章目录&#xff1a; 一&#xff1a;相关常识 1.考试报名时间 2.报名地方 费用 证件 3.考试流程 4.普通话等级说明 二&#xff1a;题型 三&#xff1a;技巧 1.前三题 2.命题说话 四&#xff1a;普通话考试题库 1.在线题库 2.下载题库 一&#xff1a;相关常识 …

qml ParticleSystem3D使用介绍

在 Qt Quick 3D 中,ParticleSystem3D 是用来创建和控制3D粒子系统的元素。粒子系统是图形编程中用于模拟液体、烟雾、火、星空等现象的技术,它通过生成大量小粒子来模拟这些效果。ParticleSystem3D 提供了一个框架,允许开发者定义粒子的各种属性,如生命周期、速度、颜色、大…

组合数学学习

指数生成函数可以与排列结合在一起&#xff0c;而幂级数和 组合结合在一起 如果要进行计算的值不是一个具体的值&#xff0c;那么就要考虑生成函数

Linux 用户必备的 8 大网站

目录 前言 1、ArchWiki 2、ExplainShell 3、Crontab.guru 4、DistroWatch 5、Phoronix 6、Ubuntu Blog 7、GamingOnLinux 8、Reddit 的 /r/Linux 子论坛 我收藏了什么&#xff1f; 前言 这里列举的是我个人最喜欢的 Linux 网站&#xff0c;希望你也能喜欢。 对 Linux …

OmniGraffle

安装 在mac上安装OmniGraffle&#xff0c;找一个正版或者啥的都行&#xff0c;安装好后&#xff0c;可以直接在网上找一个激活码&#xff0c;然后找到软件的许可证&#xff0c;进行添加即可。 使用 新建空白页 然后图形啥的看一眼工具栏就知道了&#xff0c;颜色形状还是挺…

专用设备上的SD卡插入电脑想读取数据,提示要格式化?

环境&#xff1a; Win10 专业版 车载感应数据专用SD卡 问题描述&#xff1a; 专用设备上的SD&#xff0c;现在把SD卡从设备取出&#xff0c;用读卡器插入电脑提示要格式化&#xff1f; 解决方案&#xff1a; 1.先进入PE查看SD分区情况&#xff0c;SD格式为ext4 查看文件…

延时任务定时发布,基于 Redis 与 DB 实现

目录 1、什么是延时任务&#xff0c;分别可以使用哪些技术实现&#xff1f; 1.2 使用 Redis 和 DB 相结合的思路图以及分析 2、实现添加任务、删除任务、拉取任务 3、实现未来数据的定时更新 4、将数据库中的任务数据&#xff0c;同步到 Redis 中 1、什么是延时任务&#xff…

单链表实现【队列】

目录 队列的概念及其结构 队列的实现 数组队列 链式队列 队列的常见接口的实现 主函数Test.c 头文件&函数声明Queue.h 头文件 函数声明 函数实现Queue.c 初始化QueueInit 创建节点Createnode 空间释放QueueDestroy 入队列QueuePush 出队列QueuePop 队头元…

Samsung下origen中uboot的配置与编译

uboot的特点&#xff1a; n代码结构清晰 n 支持丰富的处理器与开发板&#xff0c;易于移植 n 支持丰富的用户命令 n 支持丰富的网络协议 n 支持丰富的文件系统 n 支持丰富的设备驱动 n 更新活跃、用户较多、资料丰富 n 开放源代码 n 较高的稳定性 n 不具有通用性&#xff08;不…
最新文章