Quellcode durchsuchen

update tab3 user-login

15179588180 vor 7 Monaten
Ursprung
Commit
a3d97f4c6c

+ 63 - 50
smarteat-app/src/app/tab3/tab3.page.html

@@ -13,67 +13,80 @@
     </ion-avatar>
     <ion-label>
       <h2>{{ userData?.name}}</h2>
-      <p [hidden]="userData?.name">您没有访问权限,请登录。</p>
+      <p>您没有访问权限,请登录。</p>
     </ion-label>
-    
-    <!-- 登录和注册按钮 -->
+    <!-- 登录、注册、编辑和退出登录按钮 -->
     <div class="user-actions" slot="end">
-      <ion-button [hidden]="userData?.name" (click)="signup()" fill="outline" color="primary">
-        注册
-      </ion-button>
-      <ion-button [hidden]="userData?.name" (click)="login()" fill="outline" color="primary">
-        登录
-      </ion-button>
-      <ion-button [hidden]="!userData?.name" (click)="goToEdit()" fill="clear" color="primary">
-        编辑
-      </ion-button>
+      @if(!currentUser?.id){
+        <ion-button (click)="signup()" fill="outline" color="primary">
+          注册
+        </ion-button>
+        <ion-button (click)="login()" fill="outline" color="primary">
+          登录
+        </ion-button>
+      }
+      @if(currentUser?.id){
+        <ion-button (click)="goToEdit()" fill="clear" color="primary">
+          编辑
+        </ion-button>
+        <ion-button (click)="logout()" fill="clear" color="danger">
+          退出登录
+        </ion-button>
+      }
     </div>
   </ion-item>
 
   <!-- 我的饮食计划 -->
-  <ion-card [hidden]="!userData?.name">
-    <ion-card-header>
-      <ion-card-title>我的饮食计划</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-item>
-        <ion-label>今天的计划</ion-label>
-        <ion-button expand="block" color="secondary">
-          查看详情
-        </ion-button>
-      </ion-item>
-    </ion-card-content>
-  </ion-card>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>我的饮食计划</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-item>
+          <ion-label>今天的计划</ion-label>
+          <ion-button expand="block" color="secondary">
+            查看详情
+          </ion-button>
+        </ion-item>
+      </ion-card-content>
+    </ion-card>
+
 
   <!-- 我的历史记录 -->
-  <ion-card [hidden]="!userData?.name">
-    <ion-card-header>
-      <ion-card-title>历史记录</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-item>
-        <ion-label>最近三天记录</ion-label>
-        <ion-button expand="block" color="tertiary">
-          查看详情
-        </ion-button>
-      </ion-item>
-    </ion-card-content>
-  </ion-card>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>历史记录</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-item>
+          <ion-label>最近三天记录</ion-label>
+          <ion-button expand="block" color="tertiary">
+            查看详情
+          </ion-button>
+        </ion-item>
+      </ion-card-content>
+    </ion-card>
+  
 
-  <ion-item button [hidden]="!userData?.name" (click)="goToFavorites()">
-    <ion-icon slot="start" name="heart-outline"></ion-icon>
-    <ion-label>收藏</ion-label>
-  </ion-item>
+ 
+    <ion-item button (click)="goToFavorites()">
+      <ion-icon slot="start" name="heart-outline"></ion-icon>
+      <ion-label>收藏</ion-label>
+    </ion-item>
+  
 
   <!-- 帮助与反馈按钮 -->
-  <ion-item button [hidden]="!userData?.name" (click)="goToHelp()">
-    <ion-icon slot="start" name="help-circle-outline"></ion-icon>
-    <ion-label>帮助与反馈</ion-label>
-  </ion-item>
+
+    <ion-item button (click)="goToHelp()">
+      <ion-icon slot="start" name="help-circle-outline"></ion-icon>
+      <ion-label>帮助与反馈</ion-label>
+    </ion-item>
 
   <!-- 设置按钮 -->
-  <ion-item button [hidden]="!userData?.name" (click)="goToSettings()">
-    <ion-icon slot="start" name="settings-outline"></ion-icon>
-    <ion-label>设置</ion-label>
-  </ion-item>
+
+    <ion-item button (click)="goToSettings()">
+      <ion-icon slot="start" name="settings-outline"></ion-icon>
+      <ion-label>设置</ion-label>
+    </ion-item>
+
 </ion-content>

+ 24 - 10
smarteat-app/src/app/tab3/tab3.page.ts

@@ -1,8 +1,10 @@
 
 import { Component, OnInit } from '@angular/core';
 import { IonicModule, NavController } from '@ionic/angular';
-import { ModalController } from '@ionic/angular';
 import { PageEditComponent } from '../page-edit/page-edit.component';
+import { CloudUser } from 'src/lib/ncloud';
+import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
+import { ModalController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-tab3',
@@ -13,29 +15,41 @@ import { PageEditComponent } from '../page-edit/page-edit.component';
 })
 export class Tab3Page implements OnInit {
 
+  currentUser:CloudUser|undefined
   // 用户信息数据
   userData = {
     name: '',  // 默认值,可以为空测试默认显示“游客”
     avatar: 'assets/img/user-avatar.jpg'  // 默认头像路径
   };
 
-  constructor(private navCtrl: NavController, private modalCtrl: ModalController) {}
-
+  constructor(private navCtrl: NavController, private modalCtrl: ModalController) {
+    this.currentUser = new CloudUser();
+  }
+  
   ngOnInit() {
     // 在这里可以加载用户信息(如果从API或服务中获取)
   }
 
-  signup() {
-    // 注册逻辑
-    console.log('注册按钮被点击');
+  async login(){
+    // 弹出登录窗口
+    let user = await openUserLoginModal(this.modalCtrl);
+    if(user?.id){
+      this.currentUser = user
+    }
   }
 
-  login() {
-    // 登录逻辑
-    console.log('登录按钮被点击');
-   
+  async signup(){
+    // 弹出注册窗口
+    let user = await openUserLoginModal(this.modalCtrl,"signup");
+    if(user?.id){
+      this.currentUser = user
+    }
   }
 
+  logout(){
+    this.currentUser?.logout();
+  }
+  
   async goToEdit() {
     // 打开编辑模态框
     const modal = await this.modalCtrl.create({

+ 320 - 0
smarteat-app/src/lib/ncloud.ts

@@ -0,0 +1,320 @@
+// CloudObject.ts
+export class CloudObject {
+    className: string;
+    id: string | null = null;
+    createdAt:any;
+    updatedAt:any;
+    data: Record<string, any> = {};
+
+    constructor(className: string) {
+        this.className = className;
+    }
+
+    toPointer() {
+        return { "__type": "Pointer", "className": this.className, "objectId": this.id };
+    }
+
+    set(json: Record<string, any>) {
+        Object.keys(json).forEach(key => {
+            if (["objectId", "id", "createdAt", "updatedAt", "ACL"].indexOf(key) > -1) {
+                return;
+            }
+            this.data[key] = json[key];
+        });
+    }
+
+    get(key: string) {
+        return this.data[key] || null;
+    }
+
+    async save() {
+        let method = "POST";
+        let url = `http://dev.fmode.cn:1337/parse/classes/${this.className}`;
+
+        // 更新
+        if (this.id) {
+            url += `/${this.id}`;
+            method = "PUT";
+        }
+
+        const body = JSON.stringify(this.data);
+        const response = await fetch(url, {
+            headers: {
+                "content-type": "application/json;charset=UTF-8",
+                "x-parse-application-id": "dev"
+            },
+            body: body,
+            method: method,
+            mode: "cors",
+            credentials: "omit"
+        });
+
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+        }
+        if (result?.objectId) {
+            this.id = result?.objectId;
+        }
+        return this;
+    }
+
+    async destroy() {
+        if (!this.id) return;
+        const response = await fetch(`http://dev.fmode.cn:1337/parse/classes/${this.className}/${this.id}`, {
+            headers: {
+                "x-parse-application-id": "dev"
+            },
+            body: null,
+            method: "DELETE",
+            mode: "cors",
+            credentials: "omit"
+        });
+
+        const result = await response?.json();
+        if (result) {
+            this.id = null;
+        }
+        return true;
+    }
+}
+
+// CloudQuery.ts
+export class CloudQuery {
+    className: string;
+    whereOptions: Record<string, any> = {};
+
+    constructor(className: string) {
+        this.className = className;
+    }
+
+    greaterThan(key: string, value: any) {
+        if (!this.whereOptions[key]) this.whereOptions[key] = {};
+        this.whereOptions[key]["$gt"] = value;
+    }
+
+    greaterThanAndEqualTo(key: string, value: any) {
+        if (!this.whereOptions[key]) this.whereOptions[key] = {};
+        this.whereOptions[key]["$gte"] = value;
+    }
+
+    lessThan(key: string, value: any) {
+        if (!this.whereOptions[key]) this.whereOptions[key] = {};
+        this.whereOptions[key]["$lt"] = value;
+    }
+
+    lessThanAndEqualTo(key: string, value: any) {
+        if (!this.whereOptions[key]) this.whereOptions[key] = {};
+        this.whereOptions[key]["$lte"] = value;
+    }
+
+    equalTo(key: string, value: any) {
+        this.whereOptions[key] = value;
+    }
+
+    async get(id: string) {
+        const url = `http://dev.fmode.cn:1337/parse/classes/${this.className}/${id}?`;
+
+        const response = await fetch(url, {
+            headers: {
+                "if-none-match": "W/\"1f0-ghxH2EwTk6Blz0g89ivf2adBDKY\"",
+                "x-parse-application-id": "dev"
+            },
+            body: null,
+            method: "GET",
+            mode: "cors",
+            credentials: "omit"
+        });
+
+        const json = await response?.json();
+        return json || {};
+    }
+
+    async find() {
+        let url = `http://dev.fmode.cn:1337/parse/classes/${this.className}?`;
+
+        if (Object.keys(this.whereOptions).length) {
+            const whereStr = JSON.stringify(this.whereOptions);
+            url += `where=${whereStr}`;
+        }
+
+        const response = await fetch(url, {
+            headers: {
+                "if-none-match": "W/\"1f0-ghxH2EwTk6Blz0g89ivf2adBDKY\"",
+                "x-parse-application-id": "dev"
+            },
+            body: null,
+            method: "GET",
+            mode: "cors",
+            credentials: "omit"
+        });
+
+        const json = await response?.json();
+        let list = json?.results || []
+        let objList = list.map((item:any)=>this.dataToObj(item))
+        return objList || [];
+    }
+
+    async first() {
+        let url = `http://dev.fmode.cn:1337/parse/classes/${this.className}?`;
+
+        if (Object.keys(this.whereOptions).length) {
+            const whereStr = JSON.stringify(this.whereOptions);
+            url += `where=${whereStr}`;
+        }
+
+        const response = await fetch(url, {
+            headers: {
+                "if-none-match": "W/\"1f0-ghxH2EwTk6Blz0g89ivf2adBDKY\"",
+                "x-parse-application-id": "dev"
+            },
+            body: null,
+            method: "GET",
+            mode: "cors",
+            credentials: "omit"
+        });
+
+        const json = await response?.json();
+        const exists = json?.results?.[0] || null;
+        if (exists) {
+            let existsObject = this.dataToObj(exists)
+            return existsObject;
+        }
+        return null
+    }
+
+    dataToObj(exists:any):CloudObject{
+        let existsObject = new CloudObject(this.className);
+        existsObject.set(exists);
+        existsObject.id = exists.objectId;
+        existsObject.createdAt = exists.createdAt;
+        existsObject.updatedAt = exists.updatedAt;
+        return existsObject;
+    }
+}
+
+// CloudUser.ts
+export class CloudUser extends CloudObject {
+    constructor() {
+        super("_User"); // 假设用户类在Parse中是"_User"
+        // 读取用户缓存信息
+        let userCacheStr = localStorage.getItem("NCloud/dev/User")
+        if(userCacheStr){
+            let userData = JSON.parse(userCacheStr)
+            // 设置用户信息
+            this.id = userData?.objectId;
+            this.sessionToken = userData?.sessionToken;
+            this.data = userData; // 保存用户数据
+        }
+    }
+
+    sessionToken:string|null = ""
+    /** 获取当前用户信息 */
+    async current() {
+        if (!this.sessionToken) {
+            console.error("用户未登录");
+            return null;
+        }
+        
+        const response = await fetch(`http://dev.fmode.cn:1337/parse/users/me`, {
+            headers: {
+                "x-parse-application-id": "dev",
+                "x-parse-session-token": this.sessionToken // 使用sessionToken进行身份验证
+            },
+            method: "GET"
+        });
+
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+            return null;
+        }
+        return result;
+    }
+
+    /** 登录 */
+    async login(username: string, password: string):Promise<CloudUser|null> {
+        const response = await fetch(`http://dev.fmode.cn:1337/parse/login`, {
+            headers: {
+                "x-parse-application-id": "dev",
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ username, password }),
+            method: "POST"
+        });
+
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+            return null;
+        }
+        
+        // 设置用户信息
+        this.id = result?.objectId;
+        this.sessionToken = result?.sessionToken;
+        this.data = result; // 保存用户数据
+        // 缓存用户信息
+        console.log(result)
+        localStorage.setItem("NCloud/dev/User",JSON.stringify(result))
+        return this;
+    }
+
+    /** 登出 */
+    async logout() {
+        if (!this.sessionToken) {
+            console.error("用户未登录");
+            return;
+        }
+
+        const response = await fetch(`http://dev.fmode.cn:1337/parse/logout`, {
+            headers: {
+                "x-parse-application-id": "dev",
+                "x-parse-session-token": this.sessionToken
+            },
+            method: "POST"
+        });
+
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+            return false;
+        }
+
+        // 清除用户信息
+        localStorage.removeItem("NCloud/dev/User")
+        this.id = null;
+        this.sessionToken = null;
+        this.data = {};
+        return true;
+    }
+
+    /** 注册 */
+    async signUp(username: string, password: string, additionalData: Record<string, any> = {}) {
+        const userData = {
+            username,
+            password,
+            ...additionalData // 合并额外的用户数据
+        };
+
+        const response = await fetch(`http://dev.fmode.cn:1337/parse/users`, {
+            headers: {
+                "x-parse-application-id": "dev",
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(userData),
+            method: "POST"
+        });
+
+        const result = await response?.json();
+        if (result?.error) {
+            console.error(result?.error);
+            return null;
+        }
+
+        // 设置用户信息
+        this.id = result?.objectId;
+        this.sessionToken = result?.sessionToken;
+        this.data = result; // 保存用户数据
+        return this;
+    }
+}

+ 38 - 0
smarteat-app/src/lib/user/modal-user-login/modal-user-login.component.html

@@ -0,0 +1,38 @@
+<!-- 用户登录状态 -->
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>
+     <ion-segment [value]="type" (ionChange)="typeChange($event)">
+       <ion-segment-button value="login">
+         <ion-label>登录</ion-label>
+       </ion-segment-button>
+       <ion-segment-button value="signup">
+         <ion-label>注册</ion-label>
+       </ion-segment-button>
+     </ion-segment>
+    </ion-card-title>
+    <ion-card-subtitle>请输入账号密码</ion-card-subtitle>
+   </ion-card-header>
+ <ion-card-content>
+
+   <ion-item>
+     <ion-input [value]="username" (ionChange)="usernameChange($event)" label="账号" placeholder="请您输入账号/手机号"></ion-input>
+   </ion-item>
+   <ion-item>
+     <ion-input [value]="password" (ionChange)="passwordChange($event)" label="密码" type="password" value="password"></ion-input>
+   </ion-item>
+   @if(type=="signup"){
+     <ion-item>
+       <ion-input [value]="password2" (ionChange)="password2Change($event)" label="密码二次" type="password" value="password"></ion-input>
+     </ion-item>
+   }
+ 
+   @if(type=="login"){
+     <ion-button expand="block" (click)="login()">登录</ion-button>
+   }
+   @if(type=="signup"){
+     <ion-button expand="block" (click)="signup()">注册</ion-button>
+   }
+
+</ion-card-content>
+</ion-card>

+ 0 - 0
smarteat-app/src/lib/user/modal-user-login/modal-user-login.component.scss


+ 22 - 0
smarteat-app/src/lib/user/modal-user-login/modal-user-login.component.spec.ts

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

+ 90 - 0
smarteat-app/src/lib/user/modal-user-login/modal-user-login.component.ts

@@ -0,0 +1,90 @@
+import { Input, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { ModalController } from '@ionic/angular/standalone';
+import { CloudUser } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-modal-user-login',
+  templateUrl: './modal-user-login.component.html',
+  styleUrls: ['./modal-user-login.component.scss'],
+  standalone: true,
+  imports: [IonicModule
+  ],
+})
+export class ModalUserLoginComponent  implements OnInit {
+  @Input()
+  type:"login"|"signup" = "login"
+  typeChange(ev:any){
+    this.type = ev?.detail?.value || ev?.value || 'login'
+  }
+  username:string = ""
+  usernameChange(ev:any){
+    console.log(ev)
+    this.username = ev?.detail?.value
+  }
+  password:string = ""
+  passwordChange(ev:any){
+    this.password = ev?.detail?.value
+  }
+  password2:string = ""
+  password2Change(ev:any){
+    this.password2 = ev?.detail?.value
+  }
+  constructor(private modalCtrl:ModalController) { }
+
+  ngOnInit() {}
+
+  async login(){
+    if(!this.username || !this.password){
+      console.log("请输入完整")
+      return
+    }
+    let user:any = new CloudUser();
+    user = await user.login(this.username,this.password);
+    if(user?.id){
+       this.modalCtrl.dismiss(user,"confirm")
+    }else{
+      console.log("登录失败")
+    }
+  }
+
+  async signup(){
+    if(!this.username || !this.password || !this.password2){
+      console.log("请输入完整")
+      return
+    }
+    if(this.password!=this.password2){
+      console.log("两次密码不符,请修改")
+      return
+    }
+
+    let user:any = new CloudUser();
+    user = await user.signUp(this.username,this.password);
+    if(user){
+      this.type = "login"
+      console.log("注册成功请登录")
+    }
+  }
+
+}
+
+
+export async function openUserLoginModal(modalCtrl:ModalController,type:"login"|"signup"="login"):Promise<CloudUser|null>{
+  const modal = await modalCtrl.create({
+    component: ModalUserLoginComponent,
+    componentProps:{
+      type:type
+    },
+    breakpoints:[0.5,0.7],
+    initialBreakpoint:0.5
+  });
+  modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+
+  if (role === 'confirm') {
+    return data;
+  }
+  return null
+}

+ 0 - 103
smarteat-server/lib/ncloud.js

@@ -1,103 +0,0 @@
-class CloudObject{//创建
-    id
-    className
-    data
-    constructor(className){
-        this.className=className
-        this.data={}
-    }
-    set(json){
-        object.keys(json).forEach(key=>{
-            if(["objectId","id","createAt","updatedAt","ACL"].indexOf(key)>-1){
-                return
-            }
-            this.data[key]=json[key]
-        })
-    }
-    get(key){
-        return this.data[key] || null
-    }
-    async save(){
-        let method = this.id ? "PUT" : "POST";  // 如果有id则为PUT,否则为POST
-        let url="http://dev.fmode.cn:1337/parse/classes/"+this.className
-        if(this.id){
-            url=url+"/"+this.id
-        }
-        let body = JSON.stringify(this.data);
-        let response = await fetch(url, {
-        "headers": {
-          "content-type": "application/json;charset=UTF-8",
-          "x-parse-application-id": "dev"
-        },
-        "body": body,
-        "method": "POST",
-        "mode": "cors",
-        "credentials": "omit"
-      });
-      let result = await response?.json();
-      if(result?.objectId){
-        this.id=result?.objectId
-      }
-      return this
-    }
-    async destory(){
-        let url = "http://dev.fmode.cn:1337/parse/classes/" + this.className + "/";
-        if(!this.id) return
-        let response = await fetch(url+this.id, {
-            "headers": {
-              "x-parse-application-id": "dev"
-            },
-            "body": null,
-            "method": "DELETE",
-            "mode": "cors",
-            "credentials": "omit"
-          });
-          let result=response?.json();
-          if(result){
-            this.id=null
-          }
-          return true
-    }
-}
-
-
-class CloudQuery{//查询
-    className
-    constructor(className){
-        this.className=className
-    }
-    
-    async get(id){
-
-        let response = await fetch("http://dev.fmode.cn:1337/parse/classes/"+this.className+"/"+id+"?", {
-            "headers": {
-            "if-none-match": "W/\"1f0-ghxH2EwTk6Blz0g89ivf2adBDKY\"",
-            "x-parse-application-id": "dev"
-            },
-            "body": null,
-            "method": "GET",
-            "mode": "cors",
-            "credentials": "omit"
-        });
-        let json = await response?.json();
-        return json || {}
-    }
-    async find(){
-        let response = await fetch("http://dev.fmode.cn:1337/parse/classes/"+this.className+"?", {
-            "headers": {
-            "if-none-match": "W/\"1f0-ghxH2EwTk6Blz0g89ivf2adBDKY\"",
-            "x-parse-application-id": "dev"
-            },
-            "body": null,
-            "method": "GET",
-            "mode": "cors",
-            "credentials": "omit"
-        });
-        let json = await response?.json();
-        return json?.results || []
-    }
-    async first(){
-        let results = await this.find();
-        return results.length > 0 ? results[0] : null;
-    }
-}