基於 Angular7,ng-zorro7.x 的中後臺實踐案例

在一個項目維護的過程當中，需求老是累加的，一開始老是很簡單，以後需求愈來愈多，維護會愈來愈頭疼，因此一個好的項目結構能夠幫助節省不少的維護成本。
不少開發者以組件樹的形式去開發 Angular，其實以模塊樹的形式去開發是更好的選擇。 在開始前但願你已經閱讀過如下文章

• Angular 風格指南
• Angular 最佳實現
• ng-alain 模塊註冊指導原則

目錄結構

這是一個標準的 Angular CLI 構建的項目，並參考了ng-alain 的目錄結構。

├── src
│   ├── app
│   │   ├── core                                # 核心模塊
│   │   │   ├── net
│   │   │   │   └── default.interceptor.ts      # 默認HTTP攔截器
│   │   │   ├── services
│   │   │   │   └── startup.service.ts          # 初始化項目配置
│   │   │   └── core.module.ts                  # 核心模塊文件
│   │   ├── layout                              # 通用佈局
│   │   ├── modules
│   │   │   ├── home
│   │   │   │   ├── pages
│   │   │   │   │   ├── **                      # 業務目錄
│   │   │   │   ├── home.module.ts              # 業務路由模塊
│   │   │   │   └── home-routing.module.ts      # 業務路由註冊口
│   │   ├── shared                              # 共享模塊
│   │   │   └── shared.module.ts                # 共享模塊文件
│   │   ├── app.component.ts                    # 根組件
│   │   └── app.module.ts                       # 根模塊
│   ├── assets                                  # 本地靜態資源
│   ├── environments                            # 環境變量配置
│   ├── styles                                  # 樣式目錄
└── └── style.less                              # 樣式引導入口
複製代碼

開始

# 安裝依賴
npm i

# 啓動
ng s
複製代碼

問題總結

Angular 已是很是成熟的一個框架，能夠經過找到各類各樣的問題解決方案，如下是一些國內比較常見可是不多有回答的一些問題。

Angular 的 HttpClient 須要二次封裝嗎？

答：這個看場景，在咱們以前的項目中是使用本身二次封裝過的 HttpClient，如今已經放棄（由於發現封裝後沒啥意義），以後在羣裏請教雪狼汪志成,他們也沒有進行二次封裝。
舉個多接口前綴的例子（國內有不少這樣的場景，以前咱們進行二次封裝也是作這個工做，經過 headers 指定頭傳值，在攔截器中獲取到後移除 domain,具體請參考本項目登錄模塊代碼，

// src/environment/environment.ts 環境變量
export const environment = {
  BASE_URL: `https://test.BASE_URL.com/admin/`,
  LOGIN_URL: `https://test.LOGIN_URL.com/login/`,
  production: false
};
// src/app/coer/net/default.interceptor.service.ts 攔截器
if (req.headers.get("domain")) {
  url = environment[req.headers.get("domain")] + url;
} else {
  url = environment.BASE_URL + url;
}
// src/app/login/pages/user-login.component.ts 使用
this.httpClient
  .get("admin/login", {
    headers: { domain: "LOGIN_URL" }
  })
  .subscribe();
複製代碼

如何使用 RSA 加密？

答：RSA 加密是使用jsencrypt，具體在 Angular 中使用請參考登錄模塊，有完整使用案例。

未完待續。。
項目源碼:github.com/faner11/ang…