這邊來說一下當在開發現行網頁專案時，前端與後端分離，由不同人開發

前端想要在頁面上呈現資料，並且開始設計畫面流程，甚至是直接CRUD操作

如果不透過連專案上的後端API時，可以怎麼樣的來設定假資料

前端與後端工程師可以同時間進行開發，不會互相等來等去

1. Json Server

可以參考這篇Json Server簡介

https://oomusou.io/json-server/intro/

簡單來說安裝好Json Server

npm install -g json-server

接著設定
db.json=> API資料
routes.json=> API Route

最後啟動它的預設http://localhost:3000/就可以當作真的API操作囉

2.建一個.json資料

如果單純只想在前端看是否撈不撈的到資料，並且當資料在Table或Card時長什麼樣子

可以在assets裡面建一個.json檔案

fakeData.json

{
  "isSuccess": true,
  "data": [{
    "_id": "5be0f2921b4ebb0528045146",
    "date": "2018/11/11",
    "year": "2018",
    "month": "11",
    "day": "11",
    "place": "新北市",
    "name": "LAVA TRI 鐵人三項－新北福隆站",
    "event": [{
        "eventgroup": "51.1K",
        "eventname": "標鐵組",
        "startDate": "20181111",
        "startTime": "6:30 新北市福隆海水浴場",
        "cost": "3500元",
        "timelimit": "4小時10分"
      }
     // ......      "https://www.google.com.tw/maps/place/%E7%A6%8F%E9%9A%86%E6%B5%B7%E6%B0%B4%E6%B5%B4%E5%A0%B4",
    "applydate": "【報名日期】2018/08/10 12:00 ~ 2018/09/30 23:59",
    "onlineapplyurl": "http://bao-ming.com/eb/www/reg.php?activitysn=3182",
    "status": "已截止報名",
    "in_date": "2018/11/08",
    "up_date": "2018/11/09"
  }],
  "errorMessage": null
}

接著就直接可以在前端呼叫得到這筆資料

programs.service.ts

  public getFakeData(
  ): Observable<any> {
    const getURL = '../../assets/jsonData.json'; //相對路徑
    return this.http.get<any>(getURL);
  }

在local端這個呼叫都沒問題，但是部屬以後，這個相對路徑就要考量到是否呼叫的到

3.建一個class來放置資料

先在_model中建好預計後端API撈回來資料的型態

Event.ts

export class EVENT {
  eventgroup: string;
  name: string;
  startDate: string;
  startTime: string;
  //......
}

Triathlon.ts

import { EVENT } from './event';
export class Triathlon {
  _id: string;
  date: string;
  year: string;
  month: string;
  tri_event: Array<EVENT>;
  remark: string;
  organizer: string;
  //......
}

之後在專案中給定好這個物件的每個屬性的資料

fakedata.ts

import { Triathlon } from '../../_models/triathlon';
export const fakedata: Triathlon[] = [{
  _id: '5be0f2921b4ebb0528045146',
  date: '2018/11/11',
  place: '新北市',
  name: 'LAVA TRI 鐵人三項－新北福隆站',
  tri_event: [{
    eventgroup: '51.1K',
    name: '標鐵組',
    startDate: '20181111',
    startTime: '6:30 新北市福隆海水浴場',
    //......
  }
  //......
  ],
  remark: '福隆三鐵比一波',
  organizer: '台灣耐力運動協會',
  location: '福隆海水浴場',
  //......
}];

接著在程式中就可以直接宣告一個Triathlon型別的物件來接這包資料

 public tridata: Array<Triathlon>;
 ngOnInit() {
      this.tridata = fakedata;
  }

因為是直接給值，所以這個方法在local端或是部屬上站台都是沒問題的

以上方法最後就可以將這包資料撈到前端囉