transferred weather function to back-end

.env.example

@@ -10,4 +10,6 @@ ENC_PRIVATE_KEY=""
 ENC_KID=""
 SIGN_KID=""
 SERVER_URL=""
-TOKEN_EXPIRATION_TIME=""
+TOKEN_EXPIRATION_TIME=""
+WEATHER_API_KEY=""
+WEATHER_CITY_CODE=""

components/WeatherCard.vue

@@ -1,10 +1,12 @@
 <template>
-  <div style="justify-content:center;" class="grid">
-    <div style="align-items:center;width:150px;height:40px;" class="grid shadow rounded-xl border">
-      <p v-if="info.status" style="text-align:center;font:message-box;display:table-cell;">
+  <div class="justify-center grid">
+    <div class="items-center w-36 h-10 grid shadow rounded-xl border">
+      <p v-if="info !== undefined && info.status" class="text-center table-cell" style="font:message-box">
+        <!-- message-box 字体在 Tailwind 里找不到对应 -->
         {{ info.weather }} / {{ info.temperature }}°C / {{ info.humidity }}%
       </p>
-      <p v-if="!info.status" style="text-align:center;font:message-box;display:table-cell;color:red">
+      <p v-if="info === undefined || !info.status" class="text-center table-cell text-red-500" style="font:message-box">
+        <!-- html 的 color:red 是 0xFF0000, Tailwind 里最接近的是 text-red-500 (0xEF4444) -->
         网络错误
       </p>
     </div>
@@ -13,38 +15,21 @@
 
 <script setup lang="ts">
 import axios from 'axios';
+import { Loader2 } from 'lucide-vue-next';
 import { toast } from 'vue-sonner';
 
-const info = reactive({
-  status: -1,
-  weather: '未知',
-  temperature: 0,
-  humidity: 0, // 湿度
-  reporttime: '',
-});
+const { $api } = useNuxtApp();
+// const userStore = useUserStore();
+// const queryClient = useQueryClient();
 
-function getWeather() {
-  axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=28589df0732b94de2d2d9f10c29ec146&city=440300&extensions=base&output=JSON').then((response) => {
-    const data = response.data;
-    info.status = data.status;
-    info.weather = data.lives[0].weather;
-    info.temperature = data.lives[0].temperature;
-    info.humidity = data.lives[0].humidity;
-    info.reporttime = data.lives[0].reporttime;
-    if (info.status)
-      toast.success(`successfully updated weather at ${info.reporttime}`);
-  }).catch((error) => {
-    toast.error('probably network error', error);
-    info.status = 0;
-  });
-}
-onMounted(() => {
-  getWeather();
-  setInterval(getWeather, 600000);
+const { data: info, suspense } = useQuery({
+  queryKey: ['weather', 'info'],
+  queryFn: () => $api.weather.info.query(),
+  refetchInterval: 600000,
 });
+await suspense();
 
-// 用的是高德地图的 api，自己手机号申请的。apikey:28589df0732b94de2d2d9f10c29ec146
-// 深圳 adcode:440300 或者 罗湖 adcode:440303 (这里用的是深圳，可能会有误差)
+// 用的是高德地图的 api
 /*
   高德地图返回值的格式：
   {
@@ -62,7 +47,5 @@ onMounted(() => {
     ]
   }
   他们的官方文档在 https://lbs.amap.com/api/webservice/guide/api/weatherinfo/
-  访问 https://restapi.amap.com/v3/weather/weatherInfo?key=28589df0732b94de2d2d9f10c29ec146&city=440300&extensions=base&output=JSON 可直接获取 JSON 结果
 */
-// 原版
 </script>

server/env.ts

@@ -21,6 +21,8 @@ const envSchema = z.object({
   S3_ACCESS_KEY_ID: z.string(),
   S3_SECRET_ACCESS_KEY: z.string(),
   BUCKET_NAME: z.string(),
+  WEATHER_API_KEY: z.string(),
+  WEATHER_CITY_CODE: z.string(),
 });
 
 const envParse = envSchema.safeParse(process.env);

server/trpc/context.ts

@@ -9,6 +9,7 @@ import { PoolController } from './controllers/pool';
 import { ProgramController } from './controllers/program';
 import { S3Controller } from './controllers/s3';
 import { UserController } from './controllers/user';
+import { WeatherController } from './controllers/weather';
 
 const newGlobal = globalThis as unknown as {
   userController: UserController | undefined;
@@ -17,6 +18,7 @@ const newGlobal = globalThis as unknown as {
   contentController: ContentController | undefined;
   poolController: PoolController | undefined;
   s3Controller: S3Controller | undefined;
+  weatherController: WeatherController | undefined;
 };
 
 const userController = newGlobal.userController ?? new UserController();
@@ -25,6 +27,7 @@ const programController = newGlobal.programController ?? new ProgramController()
 const contentController = newGlobal.contentController ?? new ContentController();
 const poolController = newGlobal.poolController ?? new PoolController();
 const s3Controller = newGlobal.s3Controller ?? new S3Controller();
+const weatherController = newGlobal.weatherController ?? new WeatherController();
 
 if (process.env.NODE_ENV !== 'production') {
   newGlobal.userController = userController;
@@ -33,6 +36,7 @@ if (process.env.NODE_ENV !== 'production') {
   newGlobal.contentController = contentController;
   newGlobal.poolController = poolController;
   newGlobal.s3Controller = s3Controller;
+  newGlobal.weatherController = weatherController;
 }
 
 interface CreateContextOptions {
@@ -54,6 +58,7 @@ export function createInnerContext(opts: CreateContextOptions) {
     contentController,
     poolController,
     s3Controller,
+    weatherController,
   };
 }
 
@@ -64,6 +69,7 @@ export const ctl = {
   cc: contentController,
   oc: poolController,
   s3c: s3Controller,
+  wc: weatherController,
 };
 
 /**

server/trpc/controllers/weather.ts

@@ -0,0 +1,30 @@
+import axios from 'axios';
+import { env } from '~/server/env';
+
+const weatherapi = env.WEATHER_API_KEY;
+const citycode = env.WEATHER_CITY_CODE;
+
+export class WeatherController {
+  async getInfo() {
+    const info = {
+      status: -1,
+      weather: '未知',
+      temperature: 0,
+      humidity: 0, // 湿度
+      reporttime: '',
+    };
+    await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${weatherapi}&city=${citycode}&extensions=base&output=JSON`).then((response) => {
+      const data = response.data;
+      info.status = data.status;
+      info.weather = data.lives[0].weather;
+      info.temperature = data.lives[0].temperature;
+      info.humidity = data.lives[0].humidity;
+      info.reporttime = data.lives[0].reporttime;
+      // if (info.status){...}
+    }).catch(() => {
+      info.status = 0;
+      // console.log('probably network error', error);
+    });
+    return info;
+  }
+}

server/trpc/routers/index.ts

@@ -5,6 +5,7 @@ import { poolRouter } from './pool';
 import { programRouter } from './program';
 import { s3Router } from './s3';
 import { userRouter } from './user';
+import { weatherRouter } from './weather';
 
 export const appRouter = router({
   user: userRouter,
@@ -13,6 +14,7 @@ export const appRouter = router({
   content: contentRouter,
   pool: poolRouter,
   s3: s3Router,
+  weather: weatherRouter,
 });
 
 export type AppRouter = typeof appRouter;

server/trpc/routers/weather.ts

@@ -0,0 +1,8 @@
+import { publicProcedure, router } from '../trpc';
+
+export const weatherRouter = router({
+  info: publicProcedure
+    .query(async ({ ctx }) => {
+      return await ctx.weatherController.getInfo();
+    }),
+});