package-lock.json

@@ -23,7 +23,7 @@
         "@capacitor/status-bar": "6.0.0",
         "@ionic/angular": "^8.0.0",
         "ionicons": "^7.0.0",
-        "parse": "^5.2.0",
+        "parse": "^5.3.0",
         "rxjs": "~7.8.0",
         "swiper": "^11.1.4",
         "tslib": "^2.3.0",
@@ -2526,9 +2526,9 @@
       }
     },
     "node_modules/@babel/runtime-corejs3": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.24.6.tgz",
-      "integrity": "sha512-tbC3o8uHK9xMgMsvUm9qGqxVpbv6yborMBLbDteHIc7JDNHsTV0vDMQ5j1O1NXvO+BDELtL9KgoWYaUVIVGt8w==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.24.7.tgz",
+      "integrity": "sha512-eytSX6JLBY6PVAeQa2bFlDx/7Mmln/gaEpsit5a3WEvjGfiIytEsgAwuIXCPM0xvw0v0cJn3ilq0/TvXrW0kgA==",
       "dependencies": {
         "core-js-pure": "^3.30.2",
         "regenerator-runtime": "^0.14.0"
@@ -13428,11 +13428,11 @@
       }
     },
     "node_modules/parse": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmmirror.com/parse/-/parse-5.2.0.tgz",
-      "integrity": "sha512-FoD3kcLAQCw/2J1984sl3GUBzbHE2tA9mUcyw/EBWZ46WVZTzV+kjnA5tttXyzN4uodt21wSluzjbGnyLqreKw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/parse/-/parse-5.3.0.tgz",
+      "integrity": "sha512-mWBnE6hHJhdvlx5KPQcYgCGRdgqKhPw+5fSC0j7vOfse3Lkh3xtDwOfmDpvv2LXZVBj72G/mgVKMRmbAICRzkQ==",
       "dependencies": {
-        "@babel/runtime-corejs3": "7.24.6",
+        "@babel/runtime-corejs3": "7.24.7",
         "idb-keyval": "6.2.1",
         "react-native-crypto-js": "1.0.0",
         "uuid": "10.0.0",
@@ -13440,7 +13440,7 @@
         "xmlhttprequest": "1.8.0"
       },
       "engines": {
-        "node": ">=18 <21"
+        "node": "18 || 19 || 20 || 22"
       },
       "optionalDependencies": {
         "crypto-js": "4.2.0"

package.json

@@ -28,7 +28,7 @@
     "@capacitor/status-bar": "6.0.0",
     "@ionic/angular": "^8.0.0",
     "ionicons": "^7.0.0",
-    "parse": "^5.2.0",
+    "parse": "^5.3.0",
     "rxjs": "~7.8.0",
     "swiper": "^11.1.4",
     "tslib": "^2.3.0",

src/app/app.module.ts

@@ -7,6 +7,8 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+import { ParseService } from 'src/app/services/parse.service';
+
 @NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

src/app/services/parse.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import Parse from 'parse';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ParseService {
+
+  constructor() {
+    this.initializeParse();
+  }
+
+  private initializeParse() {
+    Parse.initialize('dev');
+    Parse.serverURL = 'http://127.0.0.1:4040/apps/Web3De/browser/';
+  }
+
+  public async queryMovies(): Promise<any[]> {
+    const YJMovies = Parse.Object.extend('YJMovies');
+    const query = new Parse.Query(YJMovies);
+    return query.find();
+  }
+
+}

src/app/tab2/smovies/smovies.page.html

@@ -25,58 +25,78 @@
   <ion-card>
     <ion-card-content>
       <ion-row>
-        <ion-col size="3" (click)="filterByCategory($event)">全部</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">电影</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">电视</ion-col>
+        <ion-col size="3" (click)="fetchMovies()">全部</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '电影')">电影</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '电视')">电视</ion-col>
       </ion-row>
     </ion-card-content>
   </ion-card>
+
   <ion-card>
-     <ion-card-content>
+    <ion-card-content>
       <ion-row>
-        <ion-col size="3" (click)="filterByCategory($event)">全部</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">经典</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">新片</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '')">全部</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '经典')">经典</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '新片')">新片</ion-col>
       </ion-row>
     </ion-card-content>
   </ion-card>
+
   <ion-card>
-     <ion-card-content>
+    <ion-card-content>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event, '')">全部</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '中国')">中国</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '俄罗斯')">俄罗斯</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '美国')">美国</ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event, '巴西')">巴西</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '英国')">英国</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '法国')">法国</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '日本')">日本</ion-col>
+      </ion-row>
       <ion-row>
-        <ion-col size="3" (click)="filterByCategory($event)">全部</ion-col>
-        <ion-col size="3"  (click)="filterByCategory($event)">中国</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">俄罗斯</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">美国</ion-col>
-        <ion-col size="3"  (click)="filterByCategory($event)">巴西</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">英国</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">法国</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">日本</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">西班牙</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">韩国</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '西班牙')">西班牙</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '韩国')">韩国</ion-col>
       </ion-row>
     </ion-card-content>
   </ion-card>
+
   <ion-card>
     <ion-card-content>
       <ion-row>
-        <ion-col size="3" (click)="filterByCategory($event)">全部</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">爱情</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">喜剧</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">科幻</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">动作</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">悬疑</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">犯罪</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">青春</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">惊悚</ion-col>
-        <ion-col size="3" (click)="filterByCategory($event)">文艺</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '')">全部</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '爱情')">爱情</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '喜剧')">喜剧</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '科幻')">科幻</ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event, '动作')">动作</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '悬疑')">悬疑</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '犯罪')">犯罪</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '青春')">青春</ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event, '惊悚')">惊悚</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '文艺')">文艺</ion-col>
       </ion-row>
     </ion-card-content>
   </ion-card>
 
-  <!-- <ion-card *ngFor="let movie of movies" routerLink="/movie-details/{{movie.id}}">
+
+  <!-- 电影列表展示部分 -->
+  <ion-card *ngFor="let movie of filteredMovies">
+    <ion-card-header>
+      <ion-card-title>{{ movie.get('name') }}</ion-card-title>
+    </ion-card-header>
     <ion-card-content>
-      <ion-card-title>{{ movie.title }}</ion-card-title>
-      <ion-card-subtitle>{{ movie.genre }}</ion-card-subtitle>
+      <p>{{ movie.get('type') }}</p>
+      <p>{{ movie.get('releaseDate') | date }}</p>
+      <p>{{ movie.get('duration') }}</p>
+      <p>{{ movie.get('language') }}</p>
+      <p>{{ movie.get('introduction') }}</p>
+      <p>{{ movie.get('rating') }}</p>
     </ion-card-content>
-  </ion-card> -->
+  </ion-card>
 </ion-content>

src/app/tab2/smovies/smovies.page.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { NavController } from '@ionic/angular';
 // import Swiper from 'swiper';
 import { Router } from '@angular/router';
+import Parse from 'parse';
+import { ParseService } from 'src/app/services/parse.service';
 
 @Component({
   selector: 'app-smovies',
@@ -10,7 +12,13 @@ import { Router } from '@angular/router';
 })
 export class SMoviesPage implements OnInit {
 
-  constructor(private navCtrl: NavController,private router: Router) {}
+  ngOnInit(): void {
+    
+  }
+
+  constructor(private navCtrl: NavController,private router: Router,private parseService: ParseService) {
+    this.fetchMovies();
+  }
 
   search() {
     this.router.navigate(['/search']); // 替换成你的 setting 页面路由路径
@@ -23,7 +31,8 @@ export class SMoviesPage implements OnInit {
 
   firstCol: HTMLElement |null = null;
 
-  filterByCategory(event: any) {
+  //点击变蓝
+  filterByCategory(event: any,category: string) {
     const selectedCol = event.target;
     const allCols = document.querySelectorAll('ion-col');
     
@@ -39,10 +48,37 @@ export class SMoviesPage implements OnInit {
     allCols.forEach(col => col.classList.remove('blue'));
     selectedCol.classList.add('blue');
     this.firstCol = selectedCol;
-  }
 
+    // 
+    // 
+
+    if (category === '') {
+      this.filteredMovies = this.allMovies;
+    } else {
+      this.filteredMovies = this.allMovies.filter(movie => movie.get('type') === category);
+    }
+
+
+  }
   
+  filteredMovies: any[] = [];
+  allMovies: any[] = [];
 
 
-  ngOnInit() {}
+  async fetchMovies() {
+    const YJMovies = Parse.Object.extend('YJMovies');
+    const query = new Parse.Query(YJMovies);
+    this.allMovies = await query.find();
+    this.filteredMovies = this.allMovies;
+    this.filteredMovies = await this.parseService.queryMovies();
+  }
+
+  // filterByCategory(event: any, category: string) {
+  //   if (category === '') {
+  //     this.filteredMovies = this.allMovies;
+  //   } else {
+  //     this.filteredMovies = this.allMovies.filter(movie => movie.get('type') === category);
+  //   }
+  // }
+  
 }

src/environments/environment.ts

@@ -2,9 +2,15 @@
 // `ng build` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
+// export const environment = {
+//   production: false
+// };
+
 export const environment = {
-  production: false
-};
+  production: false,
+  parseAppId: 'dev',
+  parseServerUrl: 'http://127.0.0.1:4040/apps/Web3De/browser/YJMovies'
+ };
 
 /*
  * For easier debugging in development mode, you can import the following file

src/main.ts

@@ -2,5 +2,13 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 
+import { environment } from './environments/environment';
+import  Parse  from 'parse';
+
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.log(err));
+
+
+
+  Parse.initialize(environment.parseAppId);
+  Parse.serverURL = environment.parseServerUrl;