tab1更改后项目无法显示

src/app/app.component.ts

@@ -1,12 +1,16 @@
 import { Component } from '@angular/core';
 import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   standalone: true,
-  imports: [IonApp, IonRouterOutlet],
+  imports: [IonApp, IonRouterOutlet], // 不再导入 Tab1Page
 })
 export class AppComponent {
-  constructor() {}
-}
+  constructor(private router: Router) {
+    // 默认路由设置为任务组件
+    this.router.navigate(['/tasks']);
+  }
+}

src/app/app.routes.ts

@@ -1,4 +1,5 @@
 import { Routes } from '@angular/router';
+import { Tab1Page } from './tab1/tab1.page'; // 导入任务组件
 
 export const routes: Routes = [
   {
@@ -8,5 +9,11 @@ export const routes: Routes = [
   {
     path: 'countdown',
     loadComponent: () => import('./countdown/countdown.page').then(m => m.CountdownPage)
-  }
+  },
+  { 
+    path: 'tasks', component: Tab1Page 
+  }, // 将路径 `/tasks` 映射到 Tab1Page 组件
+  { 
+    path: '', redirectTo: '/tasks', pathMatch: 'full' 
+  } // 默认重定向到 `/tasks`
 ];

src/app/tab1/tab1.page.html

@@ -76,4 +76,4 @@
       </ion-button>
     </ion-content>
   </ng-template>
-</ion-modal>
+</ion-modal>

src/app/tab1/tab1.page.ts

@@ -2,14 +2,14 @@ import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { HttpClient } from '@angular/common/http'; // 导入 HttpClient
 
 interface Task {
-  id: number;
-  title: string;
-  completed: boolean;
-  startTime: string;
-  endTime: string;
+  id: number; // 任务ID
+  title: string; // 任务标题
+  completed: boolean; // 任务是否完成
+  startTime: string; // 任务开始时间
+  endTime: string; // 任务截止时间
 }
 
 @Component({
@@ -21,60 +21,76 @@ interface Task {
     IonicModule,
     CommonModule,
     FormsModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class Tab1Page implements OnInit {
-  tasks: Task[] = [];
-  isModalOpen = false;
+  tasks: Task[] = []; // 存储任务的数组
+  isModalOpen = false; // 控制模态框的打开状态
   newTask: Task = {
     id: 0,
     title: '',
     completed: false,
-    startTime: new Date().toISOString(),
-    endTime: new Date().toISOString(),
+    startTime: new Date().toISOString(), // 默认开始时间为当前时间
+    endTime: new Date().toISOString(), // 默认截止时间为当前时间
   };
 
-  constructor() {}
+  constructor(private http: HttpClient) {} // 注入 HttpClient
 
   ngOnInit() {
-    const savedTasks = localStorage.getItem('tasks');
-    if (savedTasks) {
-      this.tasks = JSON.parse(savedTasks);
-    }
+    this.loadTasks(); // 加载任务
+  }
+
+  loadTasks() {
+    // 从 PostgreSQL 数据库加载任务
+    this.http.get<Task[]>('http://127.0.0.1:4040/apps/DevServer/browser/task').subscribe(
+      (data) => {
+        this.tasks = data; // 将获取的任务数据赋值给 tasks
+      },
+      (error) => {
+        console.error('Error fetching tasks', error); // 打印错误信息
+      }
+    );
   }
 
   openAddTaskModal() {
-    this.isModalOpen = true;
+    this.isModalOpen = true; // 打开模态框
     this.newTask = {
-      id: Date.now(),
+      id: Date.now(), // 使用当前时间戳作为任务ID
       title: '',
       completed: false,
-      startTime: new Date().toISOString(),
-      endTime: new Date().toISOString(),
+      startTime: new Date().toISOString(), // 默认开始时间为当前时间
+      endTime: new Date().toISOString(), // 默认截止时间为当前时间
     };
   }
 
   cancelModal() {
-    this.isModalOpen = false;
+    this.isModalOpen = false; // 关闭模态框
   }
 
   addTask() {
     if (this.newTask.title.trim()) {
-      this.tasks.push({ ...this.newTask });
-      this.saveTasks();
-      this.isModalOpen = false;
+      // 发送 POST 请求将新任务添加到 PostgreSQL 数据库
+      this.http.post<Task>('http://127.0.0.1:4040/apps/DevServer/browser/task', this.newTask).subscribe(
+        (task) => {
+          this.tasks.push(task); // 将新任务添加到任务数组
+          this.isModalOpen = false; // 关闭模态框
+        },
+        (error) => {
+          console.error('Error adding task', error); // 打印错误信息
+        }
+      );
     }
   }
 
   deleteTask(taskId: number) {
+    // 从任务数组中移除指定ID的任务
     this.tasks = this.tasks.filter(task => task.id !== taskId);
-    this.saveTasks();
+    // 这里可以添加调用后端 API 删除任务的逻辑
   }
 
   toggleTaskCompletion(task: Task) {
-    task.completed = !task.completed;
-    this.saveTasks();
+    task.completed = !task.completed; // 切换任务完成状态
+    // 这里可以添加调用后端 API 更新任务的逻辑
   }
 
   getTaskStatus(task: Task): string {
@@ -83,13 +99,13 @@ export class Tab1Page implements OnInit {
     const endTime = new Date(task.endTime).getTime();
 
     if (task.completed) {
-      return 'success';
+      return 'success'; // 已完成
     } else if (now < startTime) {
-      return 'primary';
+      return 'primary'; // 未开始
     } else if (now >= startTime && now <= endTime) {
-      return 'warning';
+      return 'warning'; // 进行中
     } else {
-      return 'danger';
+      return 'danger'; // 已逾期
     }
   }
 
@@ -99,17 +115,13 @@ export class Tab1Page implements OnInit {
     const endTime = new Date(task.endTime).getTime();
 
     if (task.completed) {
-      return '已完成';
+      return '已完成'; // 已完成
     } else if (now < startTime) {
-      return '未开始';
+      return '未开始'; // 未开始
     } else if (now >= startTime && now <= endTime) {
-      return '进行中';
+      return '进行中'; // 进行中
     } else {
-      return '已逾期';
+      return '已逾期'; // 已逾期
     }
   }
-
-  private saveTasks() {
-    localStorage.setItem('tasks', JSON.stringify(this.tasks));
-  }
-}
+}

src/main.ts

@@ -1,6 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
 import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+import { HttpClientModule } from '@angular/common/http'; // 导入 HttpClientModule
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
@@ -10,5 +11,6 @@ bootstrapApplication(AppComponent, {
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
     provideRouter(routes, withPreloading(PreloadAllModules)),
+    HttpClientModule // 添加 HttpClientModule
   ],
-});
+});