前端有時候多個頁面需要相同的數據,如果在ts文件裏面寫大量假數據,很長也容易混亂,用mock就會方便很多,
1、首先安裝mock
yarn add @delon/mock -D
2、在app.module.ts文件的 imports:[ ] 中添加(第一步完成以後,系統會自動生成一個文件夾environment ):
import { DelonMockModule } from '@delon/mock';
import * as MOCKDATA from '../../_mock';
import { environment } from '../environments/environment';
const MOCKMODULE = !environment.production ? [ DelonMockModule.forRoot({ data: MOCKDATA }) ] : [];
@NgModule({
imports: [
...MOCKMODULE
]
})
3、在assets文件夾下面建一個json文件
(例如:我json文件的位置爲 assets/mock/people.json)
[
{
"Sno": "S2435238532",
"name": "張三",
"age": "20",
"birthday": "2019-08-29",
}
]
4、在需要使用假數據的ts文件裏面:
get() {
this.http.get('./assets/mock/people.json').subscribe((res: any) => {
console.log('假數據', res);
this.datas = res;
})
}