前端有 3 個版本：
- 瀏覽器環境
- 移動端環境
- Electron 環境
服務端有 2 個版本：
- SpringBoot 版本（已實現基于 Apache Shiro 的 RBAC 權限控制）
- SpringCloud 版本
1.主要依賴
| 名稱 | 版本 | 描述 |
|---|---|---|
| Angular | 16.2.0 | Angular 核心庫。 |
| PrimeNG | 16.2.0 | 開源組件庫。 |
| Bootstrap | 5.2.3 | 響應式布局。 |
| ngx-bootstrap | 11.0.2 | 基于 Bootstrap 的開源組件庫。 |
| echarts | 5.4.2 | 來自百度的圖形庫。 |
| ngx-echarts | 15.0.3 | 基于 echarts 封裝的 Angular 組件庫。 |
| ckeditor5-angular | 5.2.0 | 富文本編輯器。 |
| font-awesome | 4.7.0 | 開源圖標庫。 |
注意：為了防止出現 NodeJS 模塊兼容性問題，本項目在 package.json 中鎖定了所有 Node 模塊版本。如有需要，您可以自己測試兼容版本號（不建議這樣做，因為會消耗掉大量的時間）。
2.啟動項目
打開終端，依次執行以下命令：
git clone https://gitee.com/mumu-osc/NiceFish.git
cd NiceFish
npm i -g @angular/cli
npm i
ng serve
打開瀏覽器，訪問?http://localhost:4200/
🚀🚀🚀 中文開發者：網絡原因，推薦安裝 nrm 來管理 npm 的 registry。
npm i -g nrm
nrm use taobao
這時候用 npm 安裝 node 模塊就會使用 taobao 提供的 registry 了。
3.在 Mock 版本和帶服務端版本之間切換
為了方便前后端分離開發，本項目提供 2 種啟動模式：
- 帶 mock 數據的啟動模式：ng serve --configuration development-mock （或者直接 ng serve 啟動，默認是 mock 模式），所有 mock 數據都在 src/mock-data 目錄中，json 格式，與服務端接口返回的數據格式保持一致。
- 訪問真實的服務端接口的啟動模式： ng serve --configuration development-backend （使用此模式啟動需要有真實的服務端，把 proxy.config.json 中的服務端地址改成你自己的接口地址，NiceFish 提供了一個基于 SpringBoot 的服務端接口實現版本，
與啟動環境有關的配置項在 environment.* 和 angular.json 中。
4.單元測試
執行以下命令進行單元測試：
ng test
默認使用 ChromeHeadless 執行單元測試，按照 CPU 核心數量并發執行測試用例，karmar.conf.js 配置方式參考了 VWware 的 Clarity 項目，
代碼覆蓋率報告：
關于單元測試的詳細使用方法，以及 Jasmine 的語法
5.集成測試
Angular 從 v12 開始，官方廢棄了原來的集成測試工具 Protractor （量角器），本項目已經切換到官方推薦的 Cypress 集成測試工具，執行以下命令啟動集成測試：
ng e2e
?
6.構建
與開發狀態對應，構建模式有 2 種：
- 構建開發環境（帶 mock 數據，不訪問服務端）：ng build --configuration development-mock
- 構建帶有服務端接口的開發環境（訪問真實的服務端接口）：ng build --configuration development-backend
如果需要在構建產物的 index.html 中出現 <base href="/NiceFish/"/>，請在以上命令后面加上參數： --base-href /NiceFish/
注意，這里的 NiceFish 是項目名，如果你把項目名改成了其它的，請把 NiceFish 改成你自己的項目名。
7.直接部署到 nginx
- 根據上一步的描述構建出最終產物。
- 安裝好 nginx，把 dist/browser 目錄下的所有內容拷貝到 nginx 的 html 目錄下。
- 參考本項目根目錄下的 nginx.conf 配置文件，修改配置（此項目中的默認配置用于 Docker 環境，在 Windows 平臺下無法使用）。
- 重啟 nginx。
8.部署到 Docker 環境
請依次執行以下命令（請不要使用我的 ID ，改成你自己的 Docker 平臺 ID ）：
- 構建鏡像：sudo docker build -t damoqiongqiu/nice-fish .
- 查看鏡像列表：sudo docker images
- 啟動容器：sudo docker run -d -it -p 8080:80/tcp --name nice-fish damoqiongqiu/nice-fish:latest
- 查看運行中的容器：sudo docker ps -a
- 查看容器日志：docker logs --details CONTAINER_ID
- 進入容器：sudo docker exec -it CONTAINER_ID sh
9.打包分析
以下是用 webpack-bundle-analyzer 分析打包之后的模塊構成：
看起來 CKEditor 和 ECharts 占了很大的體積，需要做一下異步加載。
webpack-bundle-analyzer 使用方法，請依次執行以下操作：
- npm i webpack-bundle-analyzer --save-dev
- package.json 的 scripts 配置里面加一行 "bundle-report": "webpack-bundle-analyzer dist/browser/stats.json"
- ng build --stats-json 編譯（--stats-json 選項會生成一份 stats.json 配置文件）
- 執行 npm run bundle-report 查看打包過程
10.系列項目
NiceFish 的客戶端項目：
NiceFish 的服務端項目：
11.關于 NodeJS 環境的常見坑點
- 中文開發者：如果你使用 cnpm 來安裝依賴，可能會導致某些包不一致，導致應用起不來，目前原因不明，需要 cnpm 官方來解決。（cnpm 不是單純的加速節點，它做了很多自己的處理，包括對一些 C++ 編寫的 Node 模塊做了預編譯緩存，因此用它安裝的包可能和官方源不一致。這不是 Angular 框架的問題，所有前端框架都存在這個問題。）
- 如果之前裝過@angular/cli 需要先卸載：npm uninstall -g @angular/cli
- 如果之前裝過老版本的 angular-cli 需要先卸載：npm uninstall -g angular-cli
- 如果你之前已經嘗試用 npm install 安裝過 node 模塊，請手動把 NiceFish 根目錄下的 node_moduels 目錄刪掉重新 npm install
- 命令行刪除 node_modules 速度更快，Windows 平臺使用： rmdir /s/q node_modules ，*nix 平臺使用：sudo rm -rf node_modules
- 如果你遇到其它任何看起來比較玄幻的問題，請手動刪掉 node_modules 目錄，然后切換到 npm 官方源，重新安裝所有 node 模塊
- 如果你需要把項目發布到其它類型的 Server 上，例如 Tomcat，需要對 Server 進行一些簡單的配置才能支持 HTML5 下的 PushState 路由模式，在 How to: Configure your server to work with html5Mode 這個小節里面把常見的 WEB 容器的配置方式都列舉出來了，包括：IIS、Apache、nginx、NodeJS、Tomcat 全部都有。（請注意，這個配置不是 Angular 所特有的，當前主流的 SPA 型前端框架都需要做這個配置。）
12.界面截圖
?
?
?
?
?
?
)
 狀態)
