diff --git a/.env b/.env index 6a273c5..aa83f0e 100644 --- a/.env +++ b/.env @@ -15,4 +15,10 @@ VITE_INPUT_TIP = "想要搜点什么" # ICP 备案号 ## 若不需要,请设为空即可 -VITE_ICP = "豫ICP备2022018134号-1" \ No newline at end of file +VITE_ICP = "豫ICP备2022018134号-1" + +# 天气 Key +## 请前往 高德开放平台注册 Web服务 Key +## 请注意不是 Web端 (JS API),免费申请,每日上限 5000 次 +## 此处提供的服务可能会超量从而无法访问,请自行申请!请自行申请!请自行申请! +VITE_WEATHER_KEY = "6c13af6fc30868bee488faf2cc652ab4" \ No newline at end of file diff --git a/src/api/index.js b/src/api/index.js index 5f6d793..32f35e4 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -3,12 +3,23 @@ import fetchJsonp from "fetch-jsonp"; /** * 获取天气 - * https://api.oioweb.cn/doc/weather/GetWeather + * https://lbs.amap.com/api/webservice/guide/api/weatherinfo */ -export const getWeather = () => { +// 获取高德地理位置信息 +export const getAdcode = async (key) => { return axios({ method: "GET", - url: "https://api.oioweb.cn/api/weather/GetWeather", + url: "https://restapi.amap.com/v3/ip", + params: { key }, + }); +}; + +// 获取高德地理天气信息 +export const getWeather = async (key, city) => { + return axios({ + method: "GET", + url: "https://restapi.amap.com/v3/weather/weatherInfo", + params: { key, city, extensions: "base" }, }); }; diff --git a/src/components/WeatherTime.vue b/src/components/WeatherTime.vue index e2640d7..a506880 100644 --- a/src/components/WeatherTime.vue +++ b/src/components/WeatherTime.vue @@ -42,11 +42,11 @@ {{ timeData.day ?? "0" }} {{ timeData.weekday ?? "星期八" }} -
- {{ weatherData.condition ?? "N/A" }} - {{ weatherData.temp ?? "N/A" }} ℃ - {{ weatherData.windDir ?? "N/A" }} - {{ weatherData.windLevel }} 级 +
+ {{ weatherData?.condition ?? "N/A" }} + {{ weatherData?.temp ?? "N/A" }} ℃ + {{ weatherData?.windDir ?? "N/A" }} + {{ weatherData.windLevel }} 级
@@ -55,7 +55,7 @@ import { getCurrentTime } from "@/utils/timeTools"; import { ref, onMounted, onBeforeUnmount, watch } from "vue"; import { statusStore, setStore } from "@/stores"; -import { getWeather } from "@/api"; +import { getAdcode, getWeather } from "@/api"; const set = setStore(); const status = statusStore(); @@ -65,8 +65,8 @@ const timeData = ref({}); const timeInterval = ref(null); // 天气数据 -const weatherShow = ref(true); -const weatherData = ref({}); +const weatherData = ref(null); +const weatherKey = import.meta.env.VITE_WEATHER_KEY; // 更新时间 const updateTimeData = () => { @@ -74,7 +74,10 @@ const updateTimeData = () => { }; // 获取天气数据 -const getWeatherData = () => { +const getWeatherData = async () => { + if (!weatherKey) { + return $message.warning("请配置天气 Key"); + } // 当前时间戳 const currentTime = Date.now(); // 上次获取天气数据的数据 @@ -84,28 +87,29 @@ const getWeatherData = () => { }; // 上次获取天气数据的时间戳与当前时间的时间差(毫秒) const timeDifference = currentTime - lastWeatherData.lastFetchTime; - // 是否超出 2 分钟 - if (timeDifference >= 2 * 60 * 1000) { - getWeather() - .then((res) => { - console.log(res); - weatherData.value = res.result.condition; - lastWeatherData = { - data: res.result.condition, - lastFetchTime: currentTime, - }; - // 将新的天气数据和时间戳存储到 localStorage 中 - localStorage.setItem("lastWeatherData", JSON.stringify(lastWeatherData)); - }) - .catch((error) => { - console.error("天气获取失败:" + error); - $message.warning("天气获取失败", { - duration: 1500, - }); - weatherShow.value = false; - }); + // 是否超出 5 分钟 + if (timeDifference >= 5 * 60 * 1000) { + const adCodeResult = await getAdcode(weatherKey); + if (adCodeResult.infocode !== "10000") { + return $message.error("地区查询失败"); + } + // 获取天气数据 + const weatherResult = await getWeather(weatherKey, adCodeResult.adcode); + if (weatherResult.infocode !== "10000") { + return $message.error("地区查询失败"); + } + const data = weatherResult.lives[0]; + weatherData.value = { + condition: data.weather, + temp: data.temperature, + windDir: data.winddirection + "风", + windLevel: data.windpower, + }; + lastWeatherData = { data: weatherData.value, lastFetchTime: currentTime }; + // 储存新天气数据 + localStorage.setItem("lastWeatherData", JSON.stringify(lastWeatherData)); } else { - console.log("从缓存中读取天气数据"); + console.log("从缓存中读取天气数据:", lastWeatherData); weatherData.value = lastWeatherData.data; } }; diff --git a/src/utils/identifyInput.js b/src/utils/identifyInput.js index 17cb23e..3bd8826 100644 --- a/src/utils/identifyInput.js +++ b/src/utils/identifyInput.js @@ -10,7 +10,7 @@ const identifyInput = (input) => { * @type {RegExp} */ const urlRegex = - /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/; + /^(?:(?:(?:https?|ftp):)?\/\/)?(?:\d{1,3}(?:\.\d{1,3}){3}|[a-z0-9-]+\.[a-z]{2,})(?::\d+)?(?:\/[^?\s]*)?$/i; const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;