修复BUG

my-project-backend/src/main/java/com/example/service/impl/WeatherServiceImpl.java

@@ -36,7 +36,7 @@ public class WeatherServiceImpl implements WeatherService {
         JSONObject geo = this.decompressStingToJson(rest.getForObject(
                 "https://geoapi.qweather.com/v2/city/lookup?location="+longitude+","+latitude+"&key="+key, byte[].class));
         if(geo == null) return null;
-        JSONObject location = geo.getJSONObject("location");
+        JSONObject location = geo.getJSONArray("location").getJSONObject(0);
         int id = location.getInteger("id");
         String key = "weather:"+id;
         String cache = template.opsForValue().get(key);

my-project-frontend/index.html

@@ -10,6 +10,10 @@
     <style>
         body {
             margin: 0;
+            font-family: system-ui, -apple-system, "Segoe UI",
+            Roboto, "Helvetica Neue", Arial, "Noto Sans",
+            "Liberation Sans", sans-serif, "Apple Color Emoji",
+            "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
         }
     </style>
   </head>

my-project-frontend/src/components/Weather.vue

@@ -1,30 +1,34 @@
 <script setup>
-
+defineProps({
+    data: Object
+})
 </script>
 
 <template>
-    <div>
-        <div style="display: flex;justify-content: space-between;margin: 10px 20px">
+    <div style="height: 160px" v-loading="!data.success"
+         element-loading-text="正在加载天气信息...">
+        <div style="display: flex;justify-content: space-between;margin: 10px 20px"
+             v-if="data.success">
             <div style="font-size: 45px;color: grey">
-                <i class="qi-301-fill"></i>
+                <i :class="`qi-${data.now.icon}-fill`"></i>
             </div>
             <div style="font-weight: bold;text-align: center">
-                <div style="font-size: 25px">20℃</div>
-                <div style="font-size: 15px">多云</div>
+                <div style="font-size: 25px">{{data.now.temp}}℃</div>
+                <div style="font-size: 15px">{{data.now.text}}</div>
             </div>
             <div style="margin-top: 13px">
-                <div style="font-size: 15px">中国 四川省</div>
-                <div style="font-size: 14px;color: grey">成都市 成华区</div>
+                <div style="font-size: 15px">{{`${data.location.country} ${data.location.adm1}`}}</div>
+                <div style="font-size: 14px;color: grey">{{`${data.location.adm2} ${data.location.name}区`}}</div>
             </div>
         </div>
         <el-divider style="margin: 10px 0"/>
         <div style="display: grid;grid-template-columns: repeat(5, 1fr);text-align: center">
-            <div v-for="item in 5">
-                <div style="font-size: 13px">{{item}}时</div>
+            <div v-for="item in data.hourly">
+                <div style="font-size: 13px">{{new Date(item.fxTime).getHours()}} 时</div>
                 <div style="font-size: 23px">
-                    <i class="qi-301-fill"></i>
+                    <i :class="`qi-${item.icon}-fill`"></i>
                 </div>
-                <div style="font-size: 12px">20℃</div>
+                <div style="font-size: 12px">{{item.temp}}℃</div>
             </div>
         </div>
     </div>

my-project-frontend/src/views/forum/TopicList.vue

@@ -2,12 +2,40 @@
 import LightCard from "@/components/LightCard.vue";
 import {Calendar, CollectionTag, EditPen, Link} from "@element-plus/icons-vue";
 import Weather from "@/components/Weather.vue";
-import {computed} from "vue";
+import {computed, reactive} from "vue";
+import {get} from "@/net";
+import {ElMessage} from "element-plus";
+
+const weather = reactive({
+    location: {},
+    now: {},
+    hourly: [],
+    success: false
+})
 
 const today = computed(() => {
     const date = new Date()
     return `${date.getFullYear()} 年 ${date.getMonth()} 月 ${date.getDay()} 日`
 })
+
+navigator.geolocation.getCurrentPosition(position => {
+    const longitude = position.coords.longitude
+    const latitude = position.coords.latitude
+    get(`/api/forum/weather?longitude=${longitude}&latitude=${latitude}`, data => {
+        Object.assign(weather, data)
+        weather.success = true
+    })
+}, error => {
+    console.info(error)
+    ElMessage.warning('位置信息获取超时，请检测网络设置')
+    get(`/api/forum/weather?longitude=116.40529&latitude=39.90499`, data => {
+        Object.assign(weather, data)
+        weather.success = true
+    })
+}, {
+    timeout: 3000,
+    enableHighAccuracy: true
+})
 </script>
 
 <template>
@@ -45,7 +73,7 @@ const today = computed(() => {
                         天气信息
                     </div>
                     <el-divider style="margin: 10px 0"/>
-                    <weather/>
+                    <weather :data="weather"/>
                 </light-card>
                 <light-card style="margin-top: 10px">
                     <div class="info-text">