update

app-angular/src/app/app.component.scss

@@ -1,33 +1,44 @@
 
 .bottom-navigation {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px;
-    background-color: #f5f5f5;
-  
-    .tab-button {
-      button {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        color: #888;
-  
-        img {
-          width: 24px;
-          height: 24px;
-          margin-bottom: 5px;
-        }
-  
-        span {
-          font-size: 12px;
-        }
+  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;
       }
-  
-      .active {
-        color: #000;
-        font-weight: bold;
+
+      span {
+        font-size: 12px;
       }
     }
+
+    .active {
+      color: #000;
+      font-weight: bold;
+    }
   }
-  
+}

app-angular/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -6,5 +7,18 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'app-angular';
+  title = '第一个项目app-angular';
+  onClick(){
+    alert("我被点击了")
+  }
+  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/comp-lesson-card/comp-lesson-card.component.html

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

app-angular/src/modules/lesson/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/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/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/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/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/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/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/detail/detail.component.html

@@ -1 +1,5 @@
-<p>detail works!</p>
+<h1>{{lesson.name}}</h1>
+<h2>作者：{{lesson.author}}</h2>
+<p>
+    描述：{{lesson.desc}}
+</p>

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-detail',
@@ -7,4 +8,12 @@ import { Component } from '@angular/core';
 })
 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/home/home.component.html

@@ -1,41 +1,50 @@
 <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 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="quick-links">
-      <div class="row">
-        <div class="col">
-          <div class="quick-link-item">
-            <img src="icon1.png" alt="Icon 1">
-            <span>链接1</span>
-          </div>
-        </div>
-        <div class="col">
-          <div class="quick-link-item">
-            <img src="icon2.png" alt="Icon 2">
-            <span>链接2</span>
-          </div>
-        </div>
-        <!-- 添加更多的列 -->
-      </div>
-      <!-- 添加更多的行 -->
+    <div class="right-component">
+      <input type="text" placeholder="搜索课程/技术">
     </div>
-    <div class="course-area">
-      <div class="filter-tags">
-        <!-- 添加筛选标签 -->
-      </div>
-      <div class="course-list">
-        <!-- 添加课程列表 -->
-      </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}}
+        </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>

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

@@ -1,72 +1,74 @@
 .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;
-      }
+  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;
-      }
+  }
+
+  .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;
-          }
+}
+
+.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-area {
+  .filter-tags {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+
+    // 添加筛选标签的样式
+  }
+
+  .course-list {
+    // 添加课程列表的样式
+  }
+}

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-home',
@@ -7,6 +8,23 @@ import { Component } from '@angular/core';
 })
 export class HomeComponent {
   selectedOption: string = 'frontend';
-
+  title = "临时tittle"
+  constructor(private router:Router){}
   // 添加其他需要的逻辑和属性
+  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},
+  ]
+
+  // 路由传参：通过Router服务，携带查询参数，跳转至课程详情页
+  goDetail(lesson:any){
+    this.router.navigate(["/lesson/detail"],{
+      queryParams:lesson
+    })
+  }
 }

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

@@ -2,6 +2,9 @@ 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';
 
 const routes: Routes = [
   {
@@ -10,6 +13,15 @@ const routes: Routes = [
   {
     path:"detail",component:DetailComponent
   },
+  {
+    path:"mine",component:PageMineComponent
+  },
+  {
+    path:"student",component:PageStudentComponent
+  },
+  {
+    path:"student/detail",component:PageStudentDetailComponent
+  }
 ];
 
 @NgModule({

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

@@ -5,12 +5,22 @@ 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';
 
 
 @NgModule({
   declarations: [
     HomeComponent,
-    DetailComponent
+    DetailComponent,
+    CompLessonCardComponent,
+    PageMineComponent,
+    CompNavButtonComponent,
+    PageStudentComponent,
+    PageStudentDetailComponent
   ],
   imports: [
     CommonModule,

app-angular/src/modules/lesson/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.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.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-student-detail/page-student-detail.component.html

@@ -0,0 +1,6 @@
+<h1>学生姓名：{{student?.name}}</h1>
+<h2>{{student?.stuno}}/{{student.gender}}/{{student.age}}</h2>
+<h2>{{student?.signDate}}</h2>
+<ul *ngIf="student?.skills?.length">
+    <li *ngFor="let skill of student.skills">{{skill}}</li>
+</ul>

app-angular/src/modules/lesson/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-student-detail/page-student-detail.component.ts

@@ -0,0 +1,17 @@
+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
+      console.log(this.student)
+    })
+  }
+}

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

@@ -0,0 +1,10 @@
+
+<h1>学员</h1>
+
+<ul>
+    <ng-container *ngFor="let student of studentList">
+        <li (click)="goStudentDetail(student)">
+            {{student.name}} / {{student.stuno}}
+        </li>
+    </ng-container>
+</ul>

app-angular/src/modules/lesson/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-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"
+      ]
+    },
+  ]
+}