feat:将login连接到数据库

travel-app/src/app/login/login.component.html

@@ -7,31 +7,31 @@
   <!-- 用户登录状态 -->
   <ion-card>
     <!-- 未登录 -->
-    @if(!currentUser?.id){
+    @if(!travelUser?.id){
     <ion-card-header>
       <ion-card-title>请登录</ion-card-title>
       <ion-card-subtitle>暂无信息</ion-card-subtitle>
     </ion-card-header>
     }
     <!-- 未登录 -->
-    @if(currentUser?.id){
+    @if(travelUser?.id){
     <ion-card-header>
       <ion-card-title
-        >{{ currentUser?.get("username") }}
-        {{ currentUser?.get("realname") }}</ion-card-title
+        >{{ travelUser?.get("username") }}
+        {{ travelUser?.get("realname") }}</ion-card-title
       >
       <ion-card-subtitle
-        >性别:{{ currentUser?.get("gender") || "-" }} 年龄:{{
-          currentUser?.get("age") || "-"
+        >性别:{{ travelUser?.get("gender") || "-" }} 年龄:{{
+          travelUser?.get("age") || "-"
         }}</ion-card-subtitle
       >
     </ion-card-header>
     }
     <ion-card-content>
-      @if(!currentUser?.id){
+      @if(!travelUser?.id){
       <ion-button expand="block" (click)="signup()">注册</ion-button>
       <ion-button expand="block" (click)="login()">登录</ion-button>
-      } @if(currentUser?.id){
+      } @if(travelUser?.id){
       <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
       <ion-button expand="block" (click)="logout()" color="light"
         >登出</ion-button

travel-app/src/app/login/login.component.ts

@@ -17,8 +17,6 @@ import {
   IonInput,
   IonCardSubtitle,
 } from '@ionic/angular/standalone';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { IonicModule } from '@ionic/angular';
 import { CommonModule } from '@angular/common';
 import { CloudUser } from 'src/lib/ncloud';
 @Component({
@@ -48,21 +46,56 @@ import { CloudUser } from 'src/lib/ncloud';
   ],
 })
 export class LoginComponent implements OnInit {
-  currentUser: CloudUser | undefined;
+  
+  travelUser: CloudUser | undefined;
+  //定义字段
+  username: string = '';
+  password: string = '';
+  email: string = '';
+  phone: string = '';
+  realName: string = '';
+  age: number = 0; // 使用 number 类型来表示年龄
+  gender: '男' | '女' | '其他' = '其他'; // 限制性别字段的值为“男”、“女”或“其他”
+
+
   constructor() {
-    this.currentUser = new CloudUser();
+    this.travelUser = new CloudUser();
   }
   async login() {
     let user: any = new CloudUser();
-    user = await user.login('test', 'test');
+    user = await user.login(this.username, this.password);
     if (user?.id) {
-      this.currentUser = user;
+      this.travelUser = user;
+    }else{
+      console.error('登陆失败')
     }
   }
+
+
   logout() {
-    this.currentUser?.logout();
+    this.travelUser?.logout();
+  }
+  async signup() {
+    let user: any = new CloudUser();
+  // 假设 CloudUser 类的 signUp 方法接受用户名、密码和其他数据作为参数
+  user = await user.signUp({
+    username:this.username, 
+    password:this.password, 
+    email: this.email,
+    phone: this.phone,
+    realName: this.realName,
+    age: this.age,
+    gender: this.gender
+  });
+
+  if (user?.id) {
+    // 注册成功，可以在这里处理，例如跳转到用户主页或显示成功消息
+    this.travelUser = user;
+  } else {
+    // 注册失败，可以在这里处理错误，例如显示错误消息
+    console.error('注册失败');
+  }
   }
-  signup() {}
   editUser() {}
   ngOnInit() {}
 }

travel-app/src/app/test/test.component.html

@@ -0,0 +1,35 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Inline Modal</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open</ion-button>
+  <p>{{ message }}</p>
+  <ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button (click)="cancel()">Cancel</ion-button>
+          </ion-buttons>
+          <ion-title>Welcome</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-item>
+          <ion-input
+            label="Enter your name"
+            labelPlacement="stacked"
+            type="text"
+            placeholder="Your name"
+            [(ngModel)]="name"
+          ></ion-input>
+        </ion-item>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>

travel-app/src/app/test/test.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { TestComponent } from './test.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

travel-app/src/app/test/test.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './test.component.html',
+  styleUrls: ['./test.component.scss'],
+  standalone: true,
+})
+export class TestComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}