久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

合理的分頁數(shù)據(jù)也夠幫助我們快速的發(fā)現(xiàn)在組件中發(fā)生的邏輯性錯誤，本節(jié)我展示如何在MockApi中返回一個合格的分頁數(shù)據(jù)。 ## 初始化 和后臺的提供的教師分頁接口相同，后臺還提供了一個班級分頁接口： ```bash GET /clazz/page ``` | **類型Type** | **名稱Name** | **描述Description** | 必填 | **類型Schema** | 默認值 | | :------------ | :----------- | :----------------------- | ---- | :--------------------------- | --------- | | Param請求參數(shù) | `page` | 第幾頁 | 否 | `number` | 0 | | Param請求參數(shù) | `size` | 每頁大小 | 否 | `number` | 20 | | Param請求參數(shù) | sort | 排序字段及方式(支持多個) | 否 | `string`例：`sort=name,desc` | `id,desc` | | Response響應 | | Status Code: 200 | | `Page<Clazz>` | | 據(jù)此建立相應在clazz對應的MockApi文件夾，我們新建如下模擬返回數(shù)據(jù)： ```typescript +++ b/first-app/src/app/mock-api/clazz.mock.api.ts @@ -1,4 +1,7 @@ import {ApiInjector, MockApiInterface, randomNumber, RequestOptions} from '@yunzhi/ng-mock-api'; +import {Clazz} from '../entity/clazz'; +import {Teacher} from '../entity/teacher'; +import {Page} from '../entity/page'; /** * 班級模擬API @@ -30,6 +33,30 @@ export class ClazzMockApi implements MockApiInterface { } }; } + }, + { + method: 'GET', + url: '/clazz/page', + result: () => { + const size = 20; + const clazzes = new Array<Clazz>(); + for (let i = 0; i < size; i++) { + clazzes.push(new Clazz({ + id: i, + name: '班級', + teacher: new Teacher({ + id: i, + name: '教師' + }) + })); + } + return new Page<Clazz>({ + content: clazzes, + number: 2, + size, + numberOfElements: 20 + }); + } } ]; } ``` 如上述代碼所示，模擬返回數(shù)據(jù)中的大多數(shù)代碼與我們在上節(jié)組件中寫的模擬代碼相同。 ## 測試 MockApi完后后，我們在動態(tài)測試模塊中加入相應的攔截器： ```typescript +++ b/first-app/src/app/clazz/clazz.component.spec.ts @@ -1,6 +1,9 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {ClazzComponent} from './clazz.component'; +import {MockApiTestingInterceptor} from '@yunzhi/ng-mock-api/testing'; +import {ClazzMockApi} from '../mock-api/clazz.mock.api'; +import {getTestScheduler} from 'jasmine-marbles'; describe('ClazzComponent', () => { let component: ClazzComponent; @@ -8,7 +11,10 @@ describe('ClazzComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ClazzComponent] + declarations: [ClazzComponent], + imports: [ + MockApiTestingInterceptor.forRoot([ClazzMockApi]) + ] }) .compileComponents(); }); ``` 然后手動控制數(shù)據(jù)返回，手動渲染組件： ```typescript fit('should create', () => { expect(component).toBeTruthy(); - fixture.autoDetectChanges(); + getTestScheduler().flush(); + fixture.detectChanges(); }); }); ``` 最后，刪除C層中生成模擬數(shù)據(jù)的方法，轉而調用`httpClient`從而完成班級分頁的請求： ```typescript +++ b/first-app/src/app/clazz/clazz.component.ts @@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core'; import {Page} from '../entity/page'; import {Clazz} from '../entity/clazz'; import {Teacher} from '../entity/teacher'; +import {HttpClient} from '@angular/common/http'; @Component({ selector: 'app-clazz', @@ -23,26 +24,11 @@ export class ClazzComponent implements OnInit { numberOfElements: 0 }); - constructor() { + constructor(private httpClient: HttpClient) { } ngOnInit(): void { - const clazzes = new Array<Clazz>(); - for (let i = 0; i < this.size; i++) { - clazzes.push(new Clazz({ - id: i, - name: '班級', - teacher: new Teacher({ - id: i, - name: '教師' - }) - })); - } - this.pageData = new Page<Clazz>({ - content: clazzes, - number: 2, - size: this.size, - numberOfElements: 20 - }); + this.httpClient.get<Page<Clazz>>('/clazz/page') ?? + .subscribe(pageData => this.pageData = pageData); } } ``` 在這里使用了泛型來先后指定了當前`get`的元素類型為`Page`以及當前`Page`中的元素類型為`Clazz`，還需要注意的一點是雖然我們可以使用`/clazz/page`、`clazz/page`兩種方式，但無論使用哪一種，都要保持組件中的調用與MockApi中的url相統(tǒng)一。 在組件的動態(tài)測試模塊中加入MockApi攔截器并進行測試如下： ```typescript +++ b/first-app/src/app/clazz/clazz.component.spec.ts imports: [ HttpClientModule ], providers: [ { provide: HTTP_INTERCEPTORS, multi: true, useClass: MockApiTestingInterceptor.forRoot([ClazzMockApi]) } ] @@ -27,6 +27,7 @@ describe('ClazzComponent', () => { fit('should create', () => { expect(component).toBeTruthy(); - fixture.autoDetectChanges(); + getTestScheduler().flush(); + fixture.detectChanges(); }); }); ``` 最終效果如下：  ## 完善API ### 隨機數(shù) 在返回的班級名稱、教師名稱上加入一些隨機數(shù)，會起到更好的模擬效果。同時這也有利于我們區(qū)分出不同的班級。 ```typescript +++ b/first-app/src/app/mock-api/clazz.mock.api.ts @@ -43,10 +43,10 @@ export class ClazzMockApi implements MockApiInterface { for (let i = 0; i < size; i++) { clazzes.push(new Clazz({ id: i, - name: '班級', + name: '班級' + Math.floor(Math.random() * 100).toString(10), teacher: new Teacher({ id: i, - name: '教師' + name: '教師' + Math.floor(Math.random() * 100).toString(10), }) })); } ``` `Math.random()`會生成一個0至1之間的隨機值，該值與100相乘，會得到一個0-100內的隨機值，`Math.floor()`方法去除其小數(shù)部分，最后得到一個0至100間的整數(shù)，在整數(shù)上調用`toString(10)`方法將其轉換為字符串，期中`toString(10)`中的參數(shù)`10`表示轉換為10進制。如此以來，MockApi便可以返回一些更容易區(qū)分的模擬數(shù)據(jù)了。  | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.3.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.3.3.zip) |