update

app-angular/src/app/app.module.ts

@@ -6,7 +6,7 @@ import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,

app-angular/src/modules/lesson/comp-lesson-card/comp-lesson-card.component.html

@@ -3,4 +3,5 @@
     <h2>{{author}}</h2>
     <h1>{{lesson?.name}}</h1>
     <h2>{{lesson?.author}}</h2>
+    <h2>{{lesson?.like | tok}}</h2>
 </div>

app-angular/src/modules/lesson/detail/detail.component.html

@@ -1,5 +1,6 @@
 <h1>{{lesson.name}}</h1>
 <h2>作者：{{lesson.author}}</h2>
+<h2>点赞：{{lesson.like | tok}}</h2>
 <p>
     描述：{{lesson.desc}}
 </p>

app-angular/src/modules/lesson/home/home.component.html

@@ -19,6 +19,8 @@
       <ng-container *ngFor="let lesson of lessonList;let i = index">
         <li *ngIf="lesson.isEnabled" (click)="goDetail(lesson)">
             课程{{i+1}}：{{lesson.name}}
+            点赞：{{toK(lesson.like)}}
+            点赞：{{lesson.like | tok}}
         </li>
       </ng-container>
     </ul>

app-angular/src/modules/lesson/home/home.component.ts

@@ -13,12 +13,12 @@ export class HomeComponent {
   // 添加其他需要的逻辑和属性
   lessonName = "Web3.0未来全栈工程师"
   lessonList = [
-    {name:"大前端",author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
-    {name:"微服务",author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
-    {name:"数据库",author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
-    {name:"人工智能",author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
-    {name:"区块链",author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
-    {name:"DevOps",author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
+    {name:"大前端",like:12366,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {name:"微服务",like:25665,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {name:"数据库",like:25665,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
+    {name:"人工智能",like:1356999,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {name:"区块链",like:1356999,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
+    {name:"DevOps",like:3944999,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
   ]
 
   // 路由传参：通过Router服务，携带查询参数，跳转至课程详情页
@@ -27,4 +27,14 @@ export class HomeComponent {
       queryParams:lesson
     })
   }
+  toK(value:string|number){
+    value = Number(value)
+    if(value>1000*1000){
+      return (value / 1000 / 1000).toFixed(2) + "m"
+    }
+    if(value>1000){
+      return (value / 1000).toFixed(2) + "k"
+    }
+    return value
+  }
 }

app-angular/src/modules/lesson/lesson.module.ts

@@ -10,6 +10,7 @@ import { PageMineComponent } from './page-mine/page-mine.component';
 import { CompNavButtonComponent } from './comp-nav-button/comp-nav-button.component';
 import { PageStudentComponent } from './page-student/page-student.component';
 import { PageStudentDetailComponent } from './page-student-detail/page-student-detail.component';
+import { TokPipe } from './tok.pipe';
 
 
 @NgModule({
@@ -20,7 +21,8 @@ import { PageStudentDetailComponent } from './page-student-detail/page-student-d
     PageMineComponent,
     CompNavButtonComponent,
     PageStudentComponent,
-    PageStudentDetailComponent
+    PageStudentDetailComponent,
+    TokPipe
   ],
   imports: [
     CommonModule,

app-angular/src/modules/lesson/page-mine/comp-lesson-card/comp-lesson-card.component.html

@@ -0,0 +1,7 @@
+<div class="lesson-card">
+    <h1>{{name}}</h1>
+    <h2>{{author}}</h2>
+    <h1>{{lesson?.name}}</h1>
+    <h2>{{lesson?.author}}</h2>
+    <h2>{{lesson?.like | tok}}</h2>
+</div>

app-angular/src/modules/lesson/page-mine/comp-lesson-card/comp-lesson-card.component.scss

@@ -0,0 +1,9 @@
+.lesson-card{
+    min-height: 80px;
+    width: 80%;
+    border: solid 1px;
+    border-color: black;
+    margin-bottom: 10px;
+    padding: 15px;
+    text-align: center;
+}

app-angular/src/modules/lesson/page-mine/comp-lesson-card/comp-lesson-card.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompLessonCardComponent } from './comp-lesson-card.component';
+
+describe('CompLessonCardComponent', () => {
+  let component: CompLessonCardComponent;
+  let fixture: ComponentFixture<CompLessonCardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CompLessonCardComponent]
+    });
+    fixture = TestBed.createComponent(CompLessonCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/page-mine/comp-lesson-card/comp-lesson-card.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-comp-lesson-card',
+  templateUrl: './comp-lesson-card.component.html',
+  styleUrls: ['./comp-lesson-card.component.scss']
+})
+export class CompLessonCardComponent {
+  @Input() name:string = "未命名"
+  @Input() author:string = "未命名"
+  @Input() lesson:any = {}
+}

app-angular/src/modules/lesson/page-mine/comp-nav-button/comp-nav-button.component.html

@@ -0,0 +1,4 @@
+<div class="line-button" (click)="showName()"> 
+    {{btName}}
+    <span>></span>
+</div>

app-angular/src/modules/lesson/page-mine/comp-nav-button/comp-nav-button.component.scss

@@ -0,0 +1,10 @@
+.line-button{
+    width: 90%;
+    margin-bottom: 5px;
+    border: solid 0.5px;
+    padding:5px;
+    span{
+        float: right;
+        right: 5px;
+    }
+}

app-angular/src/modules/lesson/page-mine/comp-nav-button/comp-nav-button.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompNavButtonComponent } from './comp-nav-button.component';
+
+describe('CompNavButtonComponent', () => {
+  let component: CompNavButtonComponent;
+  let fixture: ComponentFixture<CompNavButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CompNavButtonComponent]
+    });
+    fixture = TestBed.createComponent(CompNavButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/page-mine/comp-nav-button/comp-nav-button.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-comp-nav-button',
+  templateUrl: './comp-nav-button.component.html',
+  styleUrls: ['./comp-nav-button.component.scss']
+})
+export class CompNavButtonComponent {
+  @Input("name") btName:string = ""
+  showName(){
+    alert(this.btName);
+  }
+}

app-angular/src/modules/lesson/page-mine/detail/detail.component.html

@@ -0,0 +1,6 @@
+<h1>{{lesson.name}}</h1>
+<h2>作者：{{lesson.author}}</h2>
+<h2>点赞：{{lesson.like | tok}}</h2>
+<p>
+    描述：{{lesson.desc}}
+</p>

app-angular/src/modules/lesson/page-mine/detail/detail.component.spec.ts

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

app-angular/src/modules/lesson/page-mine/detail/detail.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-detail',
+  templateUrl: './detail.component.html',
+  styleUrls: ['./detail.component.scss']
+})
+export class DetailComponent {
+
+  lesson:any = {}
+  constructor(private route:ActivatedRoute){
+    // 参数接收：通过ActivatedRoute服务，实现查询参数的接收
+    this.route.queryParams.subscribe(params=>{
+      console.log(params)
+      this.lesson = params
+    })
+  }
+}

app-angular/src/modules/lesson/page-mine/home/home.component.html

@@ -0,0 +1,78 @@
+<ion-content>
+  <ion-searchbar show-clear-button="focus" placeholder="搜索课程/技术"></ion-searchbar>
+
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>WEB3.0未来全栈工程师</ion-card-title>
+      <ion-card-subtitle>行业创新班-财大-23第一学期</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ng-container *ngFor="let lesson of lessonList;let i = index">
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <img alt="Silhouette of mountains" [src]="lesson?.logo || 'https://ionicframework.com/docs/img/demos/thumbnail.svg'" />
+            </ion-thumbnail>
+            <ion-label>{{lesson.name}}</ion-label>
+          </ion-item>
+        </ng-container>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+
+<div class="page-content">
+
+    <div class="search-area">
+      <div class="left-component">
+        <select [(ngModel)]="selectedOption">
+          <option value="frontend">大前端</option>
+          <option value="backend">后端开发</option>
+          <option value="mobile">移动开发</option>
+        </select>
+      </div>
+      <div class="right-component">
+        <input type="text" placeholder="搜索课程/技术">
+      </div>
+    </div>
+    <div class="quick-links">
+      <h1>{{lessonName}}</h1>
+
+      <!-- 指令：*ngFor循环指令 *ngIf条件指令 ng-container虚拟DOM容器 -->
+      <ul style="font-size: 36px;">
+        <ng-container *ngFor="let lesson of lessonList;let i = index">
+          <li *ngIf="lesson.isEnabled" (click)="goDetail(lesson)">
+              课程{{i+1}}：{{lesson.name}}
+              点赞：{{toK(lesson.like)}}
+              点赞：{{lesson.like | tok}}
+          </li>
+        </ng-container>
+      </ul>
+
+      <!-- 组件：通过selector标签引用组件，并通过@Input传参，用[]传递变量 -->
+      <ng-container *ngFor="let lesson of lessonList;let i = index">
+        <app-comp-lesson-card [name]="lesson.name" [author]="lesson.author" [lesson]="lesson"
+        *ngIf="lesson.isEnabled" (click)="goDetail(lesson)"></app-comp-lesson-card>
+      </ng-container>
+
+      <!-- 组件：通过selector标签引用组件，并通过@Input传参 -->
+      <app-comp-lesson-card [name]="title"></app-comp-lesson-card>
+      <app-comp-lesson-card [name]="'title123'"></app-comp-lesson-card>
+      <app-comp-lesson-card name="666"></app-comp-lesson-card>
+      <app-comp-lesson-card name="{{title}}"></app-comp-lesson-card>
+      <app-comp-lesson-card></app-comp-lesson-card>
+      <app-comp-lesson-card></app-comp-lesson-card>
+      <app-comp-lesson-card></app-comp-lesson-card>
+      <!-- 添加更多的行 -->
+    </div>
+    <div class="course-area">
+      <div class="filter-tags">
+        <!-- 添加筛选标签 -->
+      </div>
+      <div class="course-list">
+        <!-- 添加课程列表 -->
+      </div>
+    </div>
+  </div>
+  
+</ion-content>

app-angular/src/modules/lesson/page-mine/home/home.component.scss

@@ -0,0 +1,75 @@
+.page-content {
+    padding: 20px;
+  }
+  
+  .search-area {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+  
+    .left-component {
+      select {
+        width: 150px;
+        height: 30px;
+        padding: 5px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+    }
+  
+    .right-component {
+      input[type="text"] {
+        width: 200px;
+        height: 30px;
+        padding: 5px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+    }
+  }
+  
+  .quick-links {
+    .row {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 20px;
+  
+      .col {
+        flex: 1 0 20%;
+        max-width: 20%;
+  
+        .quick-link-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          margin-bottom: 10px;
+  
+          img {
+            width: 50px;
+            height: 50px;
+          }
+  
+          span {
+            margin-top: 5px;
+          }
+        }
+      }
+    }
+  }
+  
+  .course-area {
+    .filter-tags {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+  
+      // 添加筛选标签的样式
+    }
+  
+    .course-list {
+      // 添加课程列表的样式
+    }
+  }
+  

app-angular/src/modules/lesson/page-mine/home/home.component.spec.ts

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

app-angular/src/modules/lesson/page-mine/home/home.component.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent {
+  selectedOption: string = 'frontend';
+  title = "临时tittle"
+  constructor(private router:Router){}
+  // 添加其他需要的逻辑和属性
+  lessonName = "Web3.0未来全栈工程师"
+  lessonList = [
+    {name:"大前端",logo:"https://angular.cn/assets/images/logos/angular/angular.svg",like:12366,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {name:"微服务",like:25665,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {name:"数据库",like:25665,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
+    {name:"人工智能",like:1356999,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {name:"区块链",like:1356999,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
+    {name:"DevOps",like:3944999,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
+  ]
+
+  // 路由传参：通过Router服务，携带查询参数，跳转至课程详情页
+  goDetail(lesson:any){
+    this.router.navigate(["/lesson/detail"],{
+      queryParams:lesson
+    })
+  }
+  toK(value:string|number){
+    value = Number(value)
+    if(value>1000*1000){
+      return (value / 1000 / 1000).toFixed(2) + "m"
+    }
+    if(value>1000){
+      return (value / 1000).toFixed(2) + "k"
+    }
+    return value
+  }
+}

app-angular/src/modules/lesson/page-mine/lesson-routing.module.ts

@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DetailComponent } from './detail/detail.component';
+import { HomeComponent } from './home/home.component';
+import { PageMineComponent } from './page-mine/page-mine.component';
+import { PageStudentComponent } from './page-student/page-student.component';
+import { PageStudentDetailComponent } from './page-student-detail/page-student-detail.component';
+import { NavTabsComponent } from './nav-tabs/nav-tabs.component';
+
+const routes: Routes = [
+  {
+    path:"",
+    component:NavTabsComponent,
+    children:[
+      {
+        path:"",redirectTo:"home",pathMatch:"full"
+      },
+      {
+        path:"home",component:HomeComponent
+      },
+      {
+        path:"detail",component:DetailComponent
+      },
+      {
+        path:"mine",component:PageMineComponent
+      },
+      {
+        path:"student",component:PageStudentComponent
+      },
+      {
+        path:"student/detail",component:PageStudentDetailComponent
+      }
+    ]
+ },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LessonRoutingModule { }

app-angular/src/modules/lesson/page-mine/lesson.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LessonRoutingModule } from './lesson-routing.module';
+import { HomeComponent } from './home/home.component';
+import { DetailComponent } from './detail/detail.component';
+import { FormsModule } from '@angular/forms';
+import { CompLessonCardComponent } from './comp-lesson-card/comp-lesson-card.component';
+import { PageMineComponent } from './page-mine/page-mine.component';
+import { CompNavButtonComponent } from './comp-nav-button/comp-nav-button.component';
+import { PageStudentComponent } from './page-student/page-student.component';
+import { PageStudentDetailComponent } from './page-student-detail/page-student-detail.component';
+import { TokPipe } from './pipe-tok/tok.pipe';
+import { IonicModule } from '@ionic/angular';
+import { NavTabsComponent } from './nav-tabs/nav-tabs.component';
+
+@NgModule({
+  declarations: [
+    HomeComponent,
+    DetailComponent,
+    CompLessonCardComponent,
+    PageMineComponent,
+    CompNavButtonComponent,
+    PageStudentComponent,
+    PageStudentDetailComponent,
+    TokPipe,
+    NavTabsComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    LessonRoutingModule,
+    // Ionic库
+    IonicModule,
+  ]
+})
+export class LessonModule { }

app-angular/src/modules/lesson/page-mine/nav-tabs/nav-tabs.component.scss

@@ -0,0 +1,45 @@
+
+  .bottom-navigation {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 10px;
+    background-color: #f5f5f5;
+    position: fixed;
+    bottom: 0px;
+    left:0px;
+    width: 100vw;
+
+    .tab-button {
+      button {
+        border:none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        color: #888;
+  
+        svg {
+          width: 2em;height: 2em;
+          // width: 24px;
+          // height: 24px;
+          margin-bottom: 5px;
+        }
+        img {
+          width: 24px;
+          height: 24px;
+          margin-bottom: 5px;
+        }
+  
+        span {
+          font-size: 12px;
+        }
+      }
+  
+      .active {
+        color: #000;
+        font-weight: bold;
+      }
+    }
+  }
+  

app-angular/src/modules/lesson/page-mine/nav-tabs/nav-tabs.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavTabsComponent } from './nav-tabs.component';
+
+describe('NavTabsComponent', () => {
+  let component: NavTabsComponent;
+  let fixture: ComponentFixture<NavTabsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NavTabsComponent]
+    });
+    fixture = TestBed.createComponent(NavTabsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/page-mine/nav-tabs/nav-tabs.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-nav-tabs',
+  templateUrl: './nav-tabs.component.html',
+  styleUrls: ['./nav-tabs.component.scss']
+})
+export class NavTabsComponent {
+  path = ""
+  constructor(private route:ActivatedRoute,private router:Router){
+    this.route.queryParams.subscribe(params=>{
+      this.path = location.pathname;
+    })
+  }
+  goTab(path:string){
+    this.path = path;
+    this.router.navigate([path])
+  }
+}

app-angular/src/modules/lesson/page-mine/page-mine/page-mine.component.html

@@ -0,0 +1,6 @@
+
+<h1>我的页面</h1>
+
+<app-comp-nav-button name="我的课堂"></app-comp-nav-button>
+<app-comp-nav-button name="我的收藏"></app-comp-nav-button>
+<app-comp-nav-button name="我的浏览"></app-comp-nav-button>

app-angular/src/modules/lesson/page-mine/page-mine/page-mine.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageMineComponent } from './page-mine.component';
+
+describe('PageMineComponent', () => {
+  let component: PageMineComponent;
+  let fixture: ComponentFixture<PageMineComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageMineComponent]
+    });
+    fixture = TestBed.createComponent(PageMineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/page-mine/page-mine/page-mine.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-mine',
+  templateUrl: './page-mine.component.html',
+  styleUrls: ['./page-mine.component.scss']
+})
+export class PageMineComponent {
+
+}

app-angular/src/modules/lesson/page-mine/page-student-detail/page-student-detail.component.html

@@ -0,0 +1,9 @@
+<h1>学生姓名：{{student?.name}}</h1>
+<h2>{{student?.stuno}}/{{student.gender}}/{{student.age}}</h2>
+<h2>{{student?.signDate | date:"yyyy年MM月dd日"}}</h2>
+<!-- `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日` -->
+<h2>{{getDateString(student?.signDate)}}</h2>
+
+<ul *ngIf="student?.skills?.length">
+    <li *ngFor="let skill of student.skills">{{skill}}</li>
+</ul>

app-angular/src/modules/lesson/page-mine/page-student-detail/page-student-detail.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageStudentDetailComponent } from './page-student-detail.component';
+
+describe('PageStudentDetailComponent', () => {
+  let component: PageStudentDetailComponent;
+  let fixture: ComponentFixture<PageStudentDetailComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageStudentDetailComponent]
+    });
+    fixture = TestBed.createComponent(PageStudentDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/page-mine/page-student-detail/page-student-detail.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-page-student-detail',
+  templateUrl: './page-student-detail.component.html',
+  styleUrls: ['./page-student-detail.component.scss']
+})
+export class PageStudentDetailComponent {
+  student:any = {}
+  constructor(private route:ActivatedRoute){
+    this.route.queryParams.subscribe(params=>{
+      this.student = params
+      this.student.signDate = new Date(this.student?.signDate)
+      console.log(this.student)
+    })
+  }
+  getDateString(datestr:string){
+    if(datestr){
+      let now = new Date(datestr)
+      return `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日`
+    }
+    return ""
+  }
+}

app-angular/src/modules/lesson/page-mine/page-student/page-student.component.html

@@ -0,0 +1,24 @@
+
+<h1>学员</h1>
+
+<ul>
+    <ng-container *ngFor="let student of studentList">
+        <li (click)="goStudentDetail(student)">
+            {{student.name}} / {{student.stuno}}
+        </li>
+    </ng-container>
+</ul>
+
+<ion-content>
+    <ion-list>
+      <ion-item *ngFor="let student of studentList; let index" (click)="goStudentDetail(student)">
+        <ion-avatar slot="start">
+          <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
+        </ion-avatar>
+        <ion-label>{{student.name}} / {{student.stuno}}</ion-label>
+      </ion-item>
+    </ion-list>
+    <ion-infinite-scroll>
+      <ion-infinite-scroll-content loadingText="Please wait..." loadingSpinner="bubbles"></ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+  </ion-content>

app-angular/src/modules/lesson/page-mine/page-student/page-student.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageStudentComponent } from './page-student.component';
+
+describe('PageStudentComponent', () => {
+  let component: PageStudentComponent;
+  let fixture: ComponentFixture<PageStudentComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageStudentComponent]
+    });
+    fixture = TestBed.createComponent(PageStudentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/page-mine/page-student/page-student.component.ts

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+interface Student{
+  name:string // 名称
+  stuno:string // 学号
+  gender?:string // 性别
+  age?:number // 年龄
+  signDate?:Date, // 注册时间
+  skills?:Array<string> // 擅长技术
+}
+
+@Component({
+  selector: 'app-page-student',
+  templateUrl: './page-student.component.html',
+  styleUrls: ['./page-student.component.scss']
+})
+export class PageStudentComponent {
+
+  constructor(private router:Router){}
+  goStudentDetail(student:Student){
+    this.router.navigate(["/lesson/student/detail"],{
+      queryParams:student
+    })
+  }
+  studentList:Array<Student> = [
+    {
+      name:"刘聪明", 
+      stuno:"021666001", 
+      gender:"男",
+      age:18,
+      signDate:new Date(), 
+      skills:[
+        "HTML","JS"
+      ]
+    },
+    {
+      name:"王智慧", 
+      stuno:"021666002", 
+      gender:"男",
+      age:19,
+      signDate:new Date(), 
+      skills:[
+        "HTML","JS"
+      ]
+    },
+    {
+      name:"李漂亮", 
+      stuno:"021666003", 
+      gender:"女",
+      age:18,
+      signDate:new Date(), 
+      skills:[
+        "CSS"
+      ]
+    },
+    {
+      name:"钱多多", 
+      stuno:"021666004", 
+      gender:"男",
+      age:21,
+      signDate:new Date(), 
+      skills:[
+        "AIGC"
+      ]
+    },
+  ]
+}

app-angular/src/modules/lesson/tok.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { TokPipe } from './tok.pipe';
+
+describe('TokPipe', () => {
+  it('create an instance', () => {
+    const pipe = new TokPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/tok.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'tok'
+})
+export class TokPipe implements PipeTransform {
+
+  transform(value: string|number, ...args: unknown[]): unknown {
+    value = Number(value)
+    if(value>1000*1000){
+      return (value / 1000 / 1000).toFixed(2) + "m"
+    }
+    if(value>1000){
+      return (value / 1000).toFixed(2) + "k"
+    }
+    return value
+  }
+
+}
+