电影筛选（失败）

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;