tab4

src/app/app-routing.module.ts

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+// 引用路由守卫
+import { authGuard } from 'src/modules/user/auth.guard';
 
 const routes: Routes = [
   {
@@ -18,12 +20,15 @@ const routes: Routes = [
     path: 'settings',
     loadChildren: () => import('./settings/settings.module').then( m => m.SettingsPageModule)
   },
-  {
-    path: 'login',
-    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
-  }
-
-
+  // {
+  //   path: 'login',
+  //   loadChildren: () => import('../modules/user/login/login.module').then( m => m.LoginPageModule)
+  // },
+    // 添加：
+    {
+      path: 'user',
+      loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
+    }
 ];
 @NgModule({
   imports: [

src/app/app.component.ts

@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+// 引用Parse JS SDK
+import Parse from "parse";
+Parse.initialize("dev"); // 设置applicationId
+Parse.serverURL = "http://web2023.fmode.cn:9999/parse"; // 设置serverURL
 
 @Component({
   selector: 'app-root',

src/app/tab4/tab4.page.html

@@ -15,6 +15,19 @@
   </ion-toolbar>
 </ion-header>
 
+<!-- <ion-card>
+  <img alt="" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+  <ion-card-header>
+    <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
+    <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>
+    <ion-card-subtitle *ngIf="user?.id">{{user?.get("name")}}-{{user?.get("gender")}}</ion-card-subtitle>
+  </ion-card-header> -->
+
+  <!-- 新增：根据用户状态，显示登录/登出按钮，执行跳转或登出函数 -->
+  <!-- <ion-button *ngIf="!user?.id" fill="clear" routerLink="../../modules/user/login">登录</ion-button>
+  <ion-button *ngIf="user?.id" fill="clear" routerLink="../../modules/user/edit/info">编辑资料</ion-button>
+  <ion-button *ngIf="user?.id" fill="clear" (click)="logout()">登出</ion-button>
+</ion-card> -->
 
 <ion-content>
     <ion-card-content>
@@ -27,12 +40,24 @@
     </ion-card-content>
 
   <ion-card>
+    <ion-grid>
+  <ion-row>
+    <ion-col size="4">
+      <p class="count">{{user.following}}</p>
+      <p class="label">关注</p>
+    </ion-col>
+    <ion-col size="4">
+      <p class="count">{{user.followers}}</p>
+      <p class="label">粉丝</p>
+    </ion-col>
+    <ion-col size="4">
+      <p class="count">{{user.likes}}</p>
+      <p class="label">获赞</p>
+    </ion-col>
+  </ion-row>
+</ion-grid>
     <ion-card-content>
     <ion-segment scrollable>
-    <ion-segment-button value="followings">
-      <ion-icon name="people-outline"></ion-icon>
-      关注的人
-    </ion-segment-button>
     <ion-segment-button value="creators">
       <ion-icon name="brush-outline"></ion-icon>
       创作者中心
@@ -49,10 +74,6 @@
       <ion-icon name="chatbubbles-outline"></ion-icon>
       我的圈子
     </ion-segment-button>
-    <ion-segment-button value="my-followings">
-      <ion-icon name="heart-outline"></ion-icon>
-      我的关注
-    </ion-segment-button>
     <ion-segment-button value="my-orders">
       <ion-icon name="receipt-outline"></ion-icon>
       我的订单

src/app/tab4/tab4.page.scss

@@ -42,4 +42,20 @@ p {
 }
 p.selected {
     color: blue; /* 设置选中文本颜色为蓝色 */
-}
+}
+.custom-card {
+  // 自定义样式
+  margin-left: 20px;
+  
+}
+ion-col {
+  text-align: center;
+  .count {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .label {
+    font-size: 14px;
+    color: #999;
+  }
+}

src/app/tab4/tab4.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { NavController } from '@ionic/angular';
 import { Router } from '@angular/router';
 
+
 @Component({
   selector: 'app-tab4',
   templateUrl: './tab4.page.html',
@@ -72,7 +73,26 @@ export class Tab4Page implements OnInit {
   }
 
   openLoginPage() {
-    this.navCtrl.navigateForward('/login');
+    this.navCtrl.navigateForward('../../modules/user/login/login.module');
+  }
+
+  // 由于Parse.User.current()是随着localStorage变化的属性
+  // 为了避免首次复制后用户状态变化，页面不同步，通过get方法实现实时获取
+  // user:Parse.User|undefined
+  // async ngOnInit() {
+  //     this.user = await Parse.User.current()
+  //     setInterval(async ()=>{
+  //     this.user = await Parse.User.current()
+  //   },1000)
+  // }
+  // logout(){
+  //   Parse.User.logOut();
+  // }
+
+  user={
+    followers: 1000,
+    following: 500,
+    likes: 2000
   }
 
   ngOnInit() {

src/modules/user/user-routing.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
-    {path: 'login', loadChildren: () => import('../../app/login/login.module').then(mod => mod.LoginPageModule)},
+    {path: 'login', loadChildren: () => import('./login/login.module').then(mod => mod.LoginPageModule)},
     {path: 'mine', loadChildren: () => import('./mine/mine.module').then(mod => mod.MinePageModule)},
     {path: 'edit/info', loadChildren: () => import('./edit-info/edit-info.module').then(mod => mod.EditInfoPageModule)},
 ];

tsconfig.json

@@ -2,6 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,