在工程化項目里面,時常需要搭建本地服務,而對前端而言,簡單適用的小型服務可謂切中痛點;
下面展示一個angular demo 的目錄結構
1. 在生成的項目里面新建一個mockserver文件夾,並創建index.js
2. 在index.js 里面引入json-server,配置接口
3. 給項目環境local、dev、st、prod分別設置實際環境的地址
下面是本地的配置:
4. 在app下建立一個文件夾baseData,並新建文件apiUrl.ts用來管理項目的接口地址(具體根據自己所需來選擇創建位置)
這里在constant中已經配了一個userInfo的地址
5. 這樣就可以在使用接口的時候引用它了
6. 這個service里面定義了一個getData方法,在AppComponent里面使用
按鈕點擊執行call方法就可以調用此接口了;
同理,可以按照此方法不斷往index.js里面加入新接口;
這時又有需求,在開啟本地服務的時候開發,mockServer下的本地數據和index.js會經常改變,你總不會想每次手動重新編譯它吧
方法如下:引入nodemon
"nodemon --watch src/mockServer": 可以監控mockServer下的更改,在 npm run mock 啟動本地服務后,此文件下的修改會實時刷新到服務中;
然后npm start啟動項目,就可以為項目提供本地服務了。
注意:
在environment 下的local中變換你的地址可以達到切換環境的目的,在其他環境不好檢查的時候可以用來暫時替代.
項目資源地址:https://gitee.com/skylenDaDa/angular-demo2