feat: list with search

src/app/app-routing.module.ts

@@ -37,12 +37,18 @@ const routes: Routes = [
         path: 'parse',
         loadChildren: () => import('../modules/study/case-js-module/case-parse/case-parse.module').then( m => m.CaseParsePageModule)
       },
+      {
+        path: 'case-petmarket',
+        loadChildren: () => import('../modules/study/case-js-module/case-parse-petmarket/case-parse-petmarket.module').then( m => m.CaseParsePetmarketPageModule)
+      },
     ]
   },
   {
     path: 'aigc',
     loadChildren: () => import('../modules/aigc/aigc.module').then(m => m.AigcModule)
   },
+ 
+
   
 
  

src/app/tab1/tab1.page.html

@@ -46,7 +46,8 @@
   <ion-card>
     <ion-card-title>微服务案例</ion-card-title>
     <ion-card-content>
-      <ion-button expand="block" routerLink="/study/parse">展示：Pasre微服务</ion-button>
+      <ion-button expand="block" routerLink="/study/parse">展示：Pasre微服务-极简列表</ion-button>
+      <ion-button expand="block" routerLink="/study/case-petmarket">展示：Pasre微服务-复杂列表</ion-button>
       <ion-button expand="block" routerLink="/tabs/tab2">示例：通讯录列表</ion-button>
       <ion-button expand="block" routerLink="/aigc/chat">示例：AI对话示例</ion-button>
     </ion-card-content>

src/modules/study/case-js-module/case-parse-petmarket/README.md

@@ -0,0 +1,163 @@
+
+# 示例：AI编写列表页
+> 我在编写一个宠物市场的页面，前端框架使用ionic7的angular版本，数据请求使用Parse JS SDK。
+> 其中宠物的Schema名称为Pet，字段name:String名称、type:String类型，price:Number价格。
+> 请帮我实现该页面，通过卡片列表展示宠物，需要支持搜索条、宠物类型（Pet的type字段）标签切换、价格（Pet的price字段）点击排序等功能。
+
+好的，我可以帮你实现这个宠物市场页面。我们将使用Ionic 7和Angular来构建前端，并通过Parse JS SDK来处理数据请求。以下是实现这个页面的详细步骤：
+
+1. **初始化项目**
+   首先，确保你已经安装了Ionic CLI。如果没有，使用以下命令安装：
+   ```bash
+   npm install -g @ionic/cli
+   ```
+
+   然后，创建一个新的Ionic Angular项目：
+   ```bash
+   ionic start pet-market blank --type=angular
+   cd pet-market
+   ```
+
+2. **安装Parse JS SDK**
+   在项目目录下安装Parse JS SDK：
+   ```bash
+   npm install parse
+   ```
+
+3. **配置Parse**
+   在`src/environments/environment.ts`中添加Parse配置：
+   ```typescript
+   export const environment = {
+     production: false,
+     parseAppId: 'YOUR_PARSE_APP_ID',
+     parseServerUrl: 'YOUR_PARSE_SERVER_URL'
+   };
+   ```
+
+   在`src/main.ts`中初始化Parse：
+   ```typescript
+   import { environment } from './environments/environment';
+   import { Parse } from 'parse';
+
+   Parse.initialize(environment.parseAppId);
+   Parse.serverURL = environment.parseServerUrl;
+   ```
+
+4. **创建服务来处理Parse请求**
+   创建一个新的服务来处理与Parse的交互。在`src/app`目录下创建一个`services`文件夹，并在其中创建`pet.service.ts`：
+   ```typescript
+   import { Injectable } from '@angular/core';
+   import { Parse } from 'parse';
+
+   @Injectable({
+     providedIn: 'root'
+   })
+   export class PetService {
+     private Pet = Parse.Object.extend('Pet');
+
+     constructor() {}
+
+     async getPets(queryParams: any): Promise<Parse.Object[]> {
+       const query = new Parse.Query(this.Pet);
+       if (queryParams.name) {
+         query.contains('name', queryParams.name);
+       }
+       if (queryParams.type) {
+         query.equalTo('type', queryParams.type);
+       }
+       if (queryParams.sortByPrice) {
+         query.ascending('price');
+       } else {
+         query.descending('price');
+       }
+       return await query.find();
+     }
+   }
+   ```
+
+5. **创建页面组件**
+   生成页面组件：
+   ```bash
+   ionic generate page PetMarket
+   ```
+
+6. **实现页面布局和逻辑**
+   在`pet-market.page.html`中，创建搜索条、类型标签和卡片列表：
+   ```html
+   <ion-header>
+     <ion-toolbar>
+       <ion-title>Pet Market</ion-title>
+     </ion-toolbar>
+   </ion-header>
+
+   <ion-content>
+     <ion-searchbar [(ngModel)]="searchQuery" (ionInput)="fetchPets()"></ion-searchbar>
+     <ion-segment [(ngModel)]="selectedType" (ionChange)="fetchPets()">
+       <ion-segment-button *ngFor="let type of petTypes" [value]="type">
+         {{ type }}
+       </ion-segment-button>
+     </ion-segment>
+     <ion-button (click)="toggleSort()">Sort by Price</ion-button>
+     <ion-list>
+       <ion-card *ngFor="let pet of pets">
+         <ion-card-header>
+           <ion-card-title>{{ pet.get('name') }}</ion-card-title>
+         </ion-card-header>
+         <ion-card-content>
+           Type: {{ pet.get('type') }}<br>
+           Price: {{ pet.get('price') | currency }}
+         </ion-card-content>
+       </ion-card>
+     </ion-list>
+   </ion-content>
+   ```
+
+   在`pet-market.page.ts`中，添加逻辑来处理数据请求和状态管理：
+   ```typescript
+   import { Component, OnInit } from '@angular/core';
+   import { PetService } from '../services/pet.service';
+
+   @Component({
+     selector: 'app-pet-market',
+     templateUrl: './pet-market.page.html',
+     styleUrls: ['./pet-market.page.scss'],
+   })
+   export class PetMarketPage implements OnInit {
+     pets: any[] = [];
+     searchQuery: string = '';
+     selectedType: string = '';
+     petTypes: string[] = ['Dog', 'Cat', 'Bird', 'Other'];
+     sortByPrice: boolean = false;
+
+     constructor(private petService: PetService) {}
+
+     ngOnInit() {
+       this.fetchPets();
+     }
+
+     async fetchPets() {
+       const queryParams = {
+         name: this.searchQuery,
+         type: this.selectedType,
+         sortByPrice: this.sortByPrice
+       };
+       this.pets = await this.petService.getPets(queryParams);
+     }
+
+     toggleSort() {
+       this.sortByPrice = !this.sortByPrice;
+       this.fetchPets();
+     }
+   }
+   ```
+
+7. **添加样式**
+   根据需要添加样式以美化页面。在`pet-market.page.scss`中编写CSS样式。
+
+8. **运行项目**
+   最后，运行项目并查看效果：
+   ```bash
+   ionic serve
+   ```
+
+这样，你就可以在Ionic Angular项目中创建一个宠物市场页面，并通过Parse JS SDK来获取和展示宠物数据。页面支持搜索、类型标签切换和价格排序功能。

src/modules/study/case-js-module/case-parse-petmarket/case-parse-petmarket-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CaseParsePetmarketPage } from './case-parse-petmarket.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CaseParsePetmarketPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CaseParsePetmarketPageRoutingModule {}

src/modules/study/case-js-module/case-parse-petmarket/case-parse-petmarket.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CaseParsePetmarketPageRoutingModule } from './case-parse-petmarket-routing.module';
+
+import { CaseParsePetmarketPage } from './case-parse-petmarket.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CaseParsePetmarketPageRoutingModule
+  ],
+  declarations: [CaseParsePetmarketPage]
+})
+export class CaseParsePetmarketPageModule {}

src/modules/study/case-js-module/case-parse-petmarket/case-parse-petmarket.page.html

@@ -0,0 +1,26 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Pet Market</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-searchbar [(ngModel)]="searchQuery" (ionInput)="fetchPets()"></ion-searchbar>
+  <ion-segment [(ngModel)]="selectedType" (ionChange)="fetchPets()">
+    <ion-segment-button *ngFor="let type of petTypes" [value]="type">
+      {{ type }}
+    </ion-segment-button>
+  </ion-segment>
+  <ion-button (click)="toggleSort()">Sort by Price</ion-button>
+  <ion-list>
+    <ion-card *ngFor="let pet of pets">
+      <ion-card-header>
+        <ion-card-title>{{ pet.get('name') }}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        Type: {{ pet.get('type') }}<br>
+        Price: {{ pet.get('price') | currency }}
+      </ion-card-content>
+    </ion-card>
+  </ion-list>
+</ion-content>

src/modules/study/case-js-module/case-parse-petmarket/case-parse-petmarket.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CaseParsePetmarketPage } from './case-parse-petmarket.page';
+
+describe('CaseParsePetmarketPage', () => {
+  let component: CaseParsePetmarketPage;
+  let fixture: ComponentFixture<CaseParsePetmarketPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaseParsePetmarketPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/modules/study/case-js-module/case-parse-petmarket/case-parse-petmarket.page.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { PetService } from './pet.service';
+
+@Component({
+  selector: 'app-case-parse-petmarket',
+  templateUrl: './case-parse-petmarket.page.html',
+  styleUrls: ['./case-parse-petmarket.page.scss'],
+})
+export class CaseParsePetmarketPage implements OnInit {
+  pets: any[] = [];
+  searchQuery: string = '';
+  selectedType: string = '';
+  petTypes: string[] = ['狗', '猫', '蟑螂', '羊驼'];
+  sortByPrice: boolean = false;
+
+  constructor(private petService: PetService) {}
+
+  ngOnInit() {
+    this.fetchPets();
+  }
+
+  async fetchPets() {
+    const queryParams = {
+      name: this.searchQuery,
+      type: this.selectedType,
+      sortByPrice: this.sortByPrice
+    };
+    this.pets = await this.petService.getPets(queryParams);
+  }
+
+  toggleSort() {
+    this.sortByPrice = !this.sortByPrice;
+    this.fetchPets();
+  }
+}

src/modules/study/case-js-module/case-parse-petmarket/pet.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import Parse from 'parse';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PetService {
+  private Pet = Parse.Object.extend('Pet');
+
+  constructor() {}
+
+  async getPets(queryParams: any): Promise<Parse.Object[]> {
+    const query = new Parse.Query(this.Pet);
+    if (queryParams.name) {
+      query.contains('name', queryParams.name);
+    }
+    if (queryParams.type) {
+      query.equalTo('type', queryParams.type);
+    }
+    if (queryParams.sortByPrice) {
+      query.ascending('price');
+    } else {
+      query.descending('price');
+    }
+    return await query.find();
+  }
+}

src/modules/study/case-js-module/case-parse/README.md

@@ -46,4 +46,4 @@ ngOnInit() {
     let list = await query.find();
     this.petList = list
   }
-```
+```

src/modules/study/case-js-module/case-parse/case-parse.page.html

@@ -1,13 +1,13 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>case-parse</ion-title>
+    <ion-title>Parse JS SDK功能演示</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">case-parse</ion-title>
+      <ion-title size="large">Parse JS SDK功能演示</ion-title>
     </ion-toolbar>
   </ion-header>