18.天气小案例

news2025/1/18 4:29:28

1►新增带Layout组件的页面

直接在views文件夹下面新增weather.vue。然后随便写一个123，现在先让我们页面能跳过去先。

让页面能跳过去，有好几种方法：

1、在菜单管理自己添加一个菜单，然后把菜单分配给某个角色，再把该角色分给某个人。【然而超级管理员什么时候都能看到此菜单，因为超级管理员能无视一切权限问题】

2、在路由文件（router/index.js直接写相关路由），然后可以手动切换浏览器网址进入该路由。

本次例子利用使用自己添加菜单的方法，这样比较简单。简单如下图：

组件地址：默认是views目录下面的文件

路由地址：点击这个功能访问的url

意思就是点击这个路由地址可以进入这个组件

组件路径一定要写对，写不对直接进不去相应的组件。路由地址可以乱写，但是起码也要有点“path”的样子吧？

先随便在weather.vue写一句话来测试一下：

 发现页面也出来了：

现在我们可以开始专注页面了。 

2►专注weather业务

首先.vue文件的代码如下：

<template>
  <div v-loading="loading">
    <el-row style="margin-top: 30px;" :gutter="20">
      <el-col :offset="10" :span="4">
        <el-button type="success" @click="handleWeather">当前城市天气</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="city.length>0">
      <el-col :offset="2" :span="20">
        <el-descriptions title="当前实时天气">
          <el-descriptions-item label="当前城市">{{ city }}</el-descriptions-item>
          <el-descriptions-item label="温度">{{ weather.realtime.temperature }}℃</el-descriptions-item>
          <el-descriptions-item label="风向">{{ weather.realtime.direct }}</el-descriptions-item>
          <el-descriptions-item label="风力">{{ weather.realtime.power }}</el-descriptions-item>
          <el-descriptions-item label="湿度">{{ weather.realtime.humidity }}%</el-descriptions-item>
          <el-descriptions-item label="天气状况">{{ weather.realtime.info }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-row v-for="item in weather.future" :key="item.date" style="margin-top: 30px;" :gutter="20">
      <el-col :offset="2" :span="20">
        <el-descriptions :title="item.date" :column="4">
          <el-descriptions-item label="风向">{{ item.direct }}</el-descriptions-item>
          <el-descriptions-item label="温度">{{ item.temperature }}</el-descriptions-item>
          <el-descriptions-item label="天气情况">{{ item.weather }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getWeather} from "@/api/gzh/weather";

export default {
  name: "weather",
  data() {
    return {
      loading:false,
      city: "",
      weather: {
        realtime: {},
        future: []
      }
    }
  },
  methods: {
    handleWeather() {
      this.loading=true;
      getWeather().then(res => {
        const weatherInfo = JSON.parse(res.msg);
        this.city = weatherInfo.result.city
        this.weather.realtime = weatherInfo.result.realtime
        this.weather.future = weatherInfo.result.future
        console.log(weatherInfo)
      this.loading=flase;
      }).catch(err => {
        console.error(err)
      })
    }
  }
}
</script>

<style scoped>

</style>

然后是前端api调用代码：

import request from "@/utils/request";
// 查询参数列表export function getWeather() {  return request({    url: '/getWeatherByLocalIP',    method: 'get',  })}

接下来是后端的工具类代码：


package com.ruoyi.web.controller.gzh;

import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.common.utils.http.HttpUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;

@RestController
public class WeatherController {

    @GetMapping("/getWeatherByLocalIP")
    public AjaxResult getWeather() throws UnsupportedEncodingException {
        AjaxResult result = AjaxResult.success();
        String localCityName = GetLocationAndIP.getLocalCityName();
        //调用天气API
        String encodeCity = URLEncoder.encode(localCityName, "UTF-8");
        System.out.println(encodeCity);
        String url = "http://apis.juhe.cn/simpleWeather/query?city=" + encodeCity + "&key=81fe33a6077267b2e4ae2967af47eeb7";
        String weatherInfo = HttpUtils.sendGet(url);
        result.put("msg", weatherInfo);
        return result;
    }

}

然后是后端接口的代码：


package com.ruoyi.web.controller.gzh;


import org.json.JSONException;
import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.nio.charset.StandardCharsets;
import java.util.HashMap;
import java.util.Map;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class GetLocationAndIP {


    private static String readAll(BufferedReader rd) throws IOException {
        StringBuilder sb = new StringBuilder();
        int cp;
        while ((cp = rd.read()) != -1) {
            sb.append((char) cp);
        }
        return sb.toString();
    }


    public static JSONObject readJsonFromUrl(String url) throws IOException, JSONException {
        try (InputStream is = new URL(url).openStream()) {
            BufferedReader rd = new BufferedReader(new InputStreamReader(is, StandardCharsets.UTF_8));
            String jsonText = readAll(rd);
            return new JSONObject(jsonText);
        }
    }

    public Map<String, Object> getAddress() {
        String ip = "";
        // 这个网址似乎不能了用了
        // String chinaz = "http://ip.chinaz.com";
        // 改用了太平洋的一个网址
        String chinaz = "http://whois.pconline.com.cn/";

        StringBuilder inputLine = new StringBuilder();
        String read = "";
        URL url = null;
        HttpURLConnection urlConnection = null;
        BufferedReader in = null;

        Map<String, Object> map = new HashMap<>();
        try {
            url = new URL(chinaz);
            urlConnection = (HttpURLConnection) url.openConnection();
            // 如有乱码的，请修改相应的编码集，这里是 gbk
            in = new BufferedReader(new InputStreamReader(urlConnection.getInputStream(), "gbk"));
            while ((read = in.readLine()) != null) {
                inputLine.append(read).append("\r\n");
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (in != null) {
                try {
                    in.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }

        // 这个是之前的正则表达式,
        // Pattern p = Pattern.compile("\\<dd class\\=\"fz24\">(.*?)\\<\\/dd>");
        // 通过正则表达式匹配我们想要的内容，根据拉取的网页内容不同，正则表达式作相应的改变
        Pattern p = Pattern.compile("显示IP地址为(.*?)的位置信息");
        Matcher m = p.matcher(inputLine.toString());
        if (m.find()) {
            String ipstr = m.group(0);
            // 这里根据具体情况，来截取想要的内容
            ip = ipstr.substring(ipstr.indexOf("为") + 2, ipstr.indexOf("的") - 1);
            map.put("ip", ip);
        }
        JSONObject json = null;
        try {
            // 这里调用百度的ip定位api服务 详见 http://api.map.baidu.com/lbsapi/cloud/ip-location-api.htm
            json = readJsonFromUrl("http://api.map.baidu.com/location/ip?ak=laOQElaF53xGGBjscGtrd10nN4j1zGki&ip=" + ip);
            //city = (((JSONObject) ((JSONObject) json.get("content")).get("address_detail")).get("city")).toString();
            map.put("city", ((JSONObject) ((JSONObject) json.get("content")).get("address_detail")).get("city").toString());
        } catch (Exception e) {
            e.printStackTrace();
        }
        return map;
    }

    public static String getLocalCityName() {
        GetLocationAndIP getLocationANDIp = new GetLocationAndIP();
        Map<String, Object> map = getLocationANDIp.getAddress();
        String city = map.get("city").toString();
        return city.substring(0, city.length() - 1);
    }

    public static void main(String[] args) {
        GetLocationAndIP getLocationANDIp = new GetLocationAndIP();
        Map<String, Object> map = getLocationANDIp.getAddress();
        String city = map.get("city").toString();
        String city_1 = city.substring(0, city.length() - 1);
        System.out.println(city_1);
    }
}

由此，天气小demo就跑起来了，效果图如下：

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Python进阶】近200页md文档14大体系第4篇：Python进程使用详解（图文演示）

【Python进阶】近200页md文档14大体系第4篇：Python进程使用详解（图文演示）

本文从14大模块展示了python高级用的应用。分别有Linux命令&#xff0c;多任务编程、网络编程、Http协议和静态Web编程、htmlcss、JavaScript、jQuery、MySql数据库的各种用法、python的闭包和装饰器、mini-web框架、正则表达式等相关文章的详细讲述。 Python全套笔记直接地址…
阅读更多...
【iOS】实现评论区展开效果

【iOS】实现评论区展开效果

文章目录 前言实现行高自适应实现评论展开效果解决cell中的buttom的复用问题 前言 在知乎日报的评论区中&#xff0c;用到了Masonry行高自适应来实现评论的展开&#xff0c;这里设计许多控件的约束问题&#xff0c;当时困扰了笔者许久&#xff0c;特此撰写博客记录 实现行高自…
阅读更多...
GB28181学习（十七）——基于jrtplib实现tcp被动和主动发流

GB28181学习（十七）——基于jrtplib实现tcp被动和主动发流

前言 GB/T28181-2022实时流的传输方式介绍&#xff1a;https://blog.csdn.net/www_dong/article/details/134255185 基于jrtplib实现tcp被动和主动收流介绍&#xff1a;https://blog.csdn.net/www_dong/article/details/134451387 本文主要介绍下级平台或设备发流功能&#…
阅读更多...
微信小游戏上线流程

微信小游戏上线流程

微信小游戏上线是一个需要经过一系列步骤的过程。以下是一个一般性的微信小游戏上线流程&#xff0c;请注意&#xff0c;上述步骤可能会有微信平台的政策和规定的变化&#xff0c;因此建议在开发过程中及时查阅微信小游戏的官方文档和最新政策。北京木奇移动技术有限公司&#…
阅读更多...
DB2—03（DB2中常见基础操作）

DB2—03（DB2中常见基础操作）

DB2—03&#xff08;DB2中常见基础操作&#xff09; 1. 前言1.1 oracle和mysql相关 2. db2中的"dual"2.1 SYSIBM.SYSDUMMY12.2 使用VALUES2.3 SYSIBM.SYSDUMMY1 "变" dual 3. db2中常用函数3.1 nvl()、value()、COALESCE()3.2 NULLIF() 函数3.3 LISTAGG() …
阅读更多...
含分布式电源的配电网可靠性评估matlab程序

含分布式电源的配电网可靠性评估matlab程序

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 参考文献&#xff1a; 基于仿射最小路法的含分布式电源配电网可靠性分析——熊小萍 主要内容&#xff1a; 通过概率模型和时序模型分别进行建模&#xff0c;实现基于概率模型最小路法的含分布式电源配电网…
阅读更多...
Python BDD之Behave测试报告

Python BDD之Behave测试报告

behave 本身的测试报告 behave 本身提供了四种报告格式&#xff1a; pretty&#xff1a;这是默认的报告格式&#xff0c;提供颜色化的文本输出&#xff0c;每个测试步骤的结果都会详细列出。plain&#xff1a;这也是一种文本格式的报告&#xff0c;但没有颜色&#xff0c;并且…
阅读更多...
【C++】泛型编程 ⑫ ( 类模板 static 关键字 | 类模板 static 静态成员 | 类模板使用流程 )

【C++】泛型编程 ⑫ ( 类模板 static 关键字 | 类模板 static 静态成员 | 类模板使用流程 )

文章目录 一、类模板使用流程1、类模板 定义流程2、类模板 使用3、类模板 函数 外部实现 二、类模板 static 关键字1、类模板 static 静态成员2、类模板 static 关键字 用法3、完整代码示例 将 类模板 函数声明 与 函数实现 分开进行编码 , 有 三种 方式 : 类模板 的 函数声明…
阅读更多...
超详细！新手必看！STM32-通用定时器简介与知识点概括

超详细！新手必看！STM32-通用定时器简介与知识点概括

一、通用定时器的功能 在基本定时器功能的基础上新增功能&#xff1a; 通用定时器有4个独立通道&#xff0c;且每个通道都可以用于下面功能。 &#xff08;1&#xff09;输入捕获&#xff1a;测量输入信号的周期和占空比等。 &#xff08;2&#xff09;输出比较&#xff1a;产…
阅读更多...
电大搜题——让学习变得轻松高效

电大搜题——让学习变得轻松高效

作为一名现代学者&#xff0c;您一定时刻关注着教育领域的进展和创新。今天&#xff0c;我将向大家介绍一个名为“电大搜题”的神奇工具&#xff0c;它将为您的学习之路带来一场完美的革命。 在快节奏的现代社会中&#xff0c;学习已经成为每个人追求成功的必经之路。然而&…
阅读更多...
Linux超简单部署个人博客

Linux超简单部署个人博客

1 安装halo 1.1 切换到超级用户 sudo -i 1.2 新建halo文件夹 mkdir ~/halo && cd ~/halo 1.3 编辑docker-compose.yml文件 vim ~/halo/docker-compose.yml 英文输入法下&#xff0c;按 i version: "3"services:halo:image: halohub/halo:2.10container_…
阅读更多...
2023年【起重机械指挥】考试题及起重机械指挥找解析

2023年【起重机械指挥】考试题及起重机械指挥找解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 起重机械指挥考试题考前必练&#xff01;安全生产模拟考试一点通每个月更新起重机械指挥找解析题目及答案&#xff01;多做几遍&#xff0c;其实通过起重机械指挥作业考试题库很简单。 1、【多选题】按照事故造成的人…
阅读更多...
新手必看!!附源码!!STM32通用定时器输出PWM

新手必看!!附源码!!STM32通用定时器输出PWM

一、什么是PWM? PWM&#xff08;脉冲宽度调制&#xff09;是一种用于控制电子设备的技术。它通过调整信号的脉冲宽度来控制电压的平均值。PWM常用于调节电机速度、控制LED亮度、产生模拟信号等应用。 二、PWM的原理 PWM的基本原理是通过以一定频率产生的脉冲信号&#xff0…
阅读更多...
Java 编码

Java 编码

编码: 加密: 通过加密算法和密钥进行 也可通过码表进行加密 对称加密: 缺点:可被截获 元数据---加密算法密钥密文 ----> 解密算法密钥元数据 算法:DES(短 56位),AES(长 128位)破解时间加长 非对称加密: 元数据-加密算法加密密钥 密文 --->加密算法解密密钥元数据 …
阅读更多...
亚马逊买家号用邮箱怎么注册

亚马逊买家号用邮箱怎么注册

想要用邮箱注册亚马逊买家号&#xff0c;那么准备好能接受验证码的邮箱后打开相应的亚马逊官网即可。打开官网后点击注册——输入昵称——输入邮箱——输入密码——接受邮箱验证码并输入&#xff0c;如果遇到需要手机号验证就输入手机号&#xff0c;如果不需要验证&#xff0c;…
阅读更多...
Mac M1 安装Docker打包arm64的python项目的镜像包

Mac M1 安装Docker打包arm64的python项目的镜像包

1、首先安装Docker&#xff0c;到官网下载&#xff0c;选择apple chip版 Docker中文网 官网 2、双击下载的dmg文件&#xff0c;在弹出框中之间拖拽到右边 3、打开docker&#xff0c;修改国内镜像源&#xff0c;位置在配置-DockerEngine "registry-mirrors": ["…
阅读更多...
2023年，人工智能在医疗行业领域的应用场景

2023年，人工智能在医疗行业领域的应用场景

本期行业洞察将带领大家了解人工智能在医疗行业领域的应用&#xff0c;主要了解在患者治疗和运营中的应用、人工智能作为预防工具以及大型医院目前如何使用人工智能。未来的智慧医疗时代已经悄然到来。 人工智能在患者治疗和机构运营中的应用 人工智能有望彻底改变医疗护理的…
阅读更多...
USB驱动开发基础

USB驱动开发基础

USB标准 USB1.0&#xff0c; 1996&#xff0c;低速1.5Mbps和高速12Mbps&#xff0c;USB1.1 iMac G3&#xff0c;Type A和Type B接口USB 2.0 2000&#xff0c; 480Mpbs&#xff0c;Type A/B/C接口、Micro A/BUSB 3.0 5Gbps, 随着USB 3.2命名规定&#xff0c;现在也叫USB 3.2 Ge…
阅读更多...
羊大师提示，羊奶都有哪些惊人功效？

羊大师提示，羊奶都有哪些惊人功效？

羊奶不仅是一种美味的健康饮品&#xff0c;在近年来备受瞩目的的健康圈子里&#xff0c;羊奶还被赋予了更多的功效&#xff0c;成为一种备受推崇的保健品。羊奶不但富含营养&#xff0c;而且还有着非常多的益处&#xff0c;它能够用来美容、保健&#xff0c;甚至还可以治疗某些…
阅读更多...
Epub书籍阅读工具

Epub书籍阅读工具

Epub书籍阅读工具 前言WIndows总结Neat ReaderAquile ReaderWPS Android总结Neat Reader掌阅 前言 Epub文件为电子书文件格式&#xff0c;此格式的电子书相比txt书籍&#xff0c;增加了目录跳转功能&#xff0c;并可以显示图片。本文介绍WIndows和Android端的epub书籍阅读工具…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023