基於angular7的多頁面後臺管理系統

1、簡介

項目介紹

• 基於 angularV7.2.0，ng.ant.design V7.2.0開發的後臺管理系統
• 【在線預覽】
• 【源碼地址】

  

目錄結構

├── README.md                             # 介紹文檔
├── _mock                                 # 測試數據
├── angular.json                          # 工做區中全部項目的默認 CLI 配置，包括 CLI 使用的構建選項、運行選項、測試工具選項（好比 TSLint、Karma、Protractor）等
├── node_modules                          # 提供給整個工做區的 npm 包
├── package-lock.json                     # 鎖定安裝時的包的版本號，而且須要上傳到git，以保證其餘人在npm install時你們的依賴能保證一致。
├── package.json                          # 配置用於工做區中全部項目的包依賴項
├── proxy.config.json                     # 代理
├── src
│   ├── app
│   │   ├── app.README.md                 # 介紹文檔
│   │   ├── app.component.ts              
│   │   ├── app.module.ts                 
│   │   ├── app.route.ts                  # 根路由
│   │   ├── components                    # 組件
│   │   ├── service                       # 服務
│   │   └── share.service.ts              # 單例服務
│   ├── assets                            # 靜態資源文件
│   │   ├── browser                       # 瀏覽器
│   │   ├── doc                           # 文檔
│   │   ├── fonts                         # 字體圖標
│   │   │   ├── ali_iconfont              # 阿里圖標庫
│   │   │   └── antdesign                 # antdesign本地圖標
│   │   ├── image                         # 圖片資源
│   │   ├── plugin                        # 第三方插件
│   │   │   └── spread
│   │   ├── styles                        # 樣式文件
│   ├── environments                      # 環境配置
│   │   ├── environment.51.ts             # 其它環境配置
│   │   ├── environment.dev.ts            # 開發環境配置
│   │   └── environment.prod.ts           # 上線環境配置
│   ├── favicon.ico                       # 一個用在書籤欄上的應用圖標
│   ├── fccomponents                      # 平臺組件
│   ├── fccore                            # 核心模塊
│   │   ├── business  
│   │   ├── directive                     # 指令
│   │   ├── fccore.module.ts              # 核心模塊
│   │   ├── pipe                          # 管道
│   │   └── service                       # 服務
│   │       ├── cache.service.ts          # 緩存服務
│   │       ├── common.service.ts         # 公共方法
│   │       ├── dao.service.ts            # httpClient 先後端通訊
│   │       ├── log.service.ts            # 打印服務
│   │       ├── message.service.ts        # 消息服務
│   │       └── user.service.ts           # 用戶服務
│   ├── feature                           # 業務代碼
│   ├── index.html                        # 主HTML文件
│   ├── karma.conf.js
│   ├── main.ts                           # 應用的主入口點,引導應用的根模塊 AppModule 來運行在瀏覽器中
│   ├── polyfills.ts                      # 爲瀏覽器支持提供膩子腳本
│   ├── shared                            # 共享模塊
│   ├── styles.less                       # 項目的樣式文件
│   ├── test.ts
│   ├── tsconfig.app.json                 # 繼承自工做區級的 tsconfig.json 文件
│   ├── tsconfig.spec.json
│   └── tslint.json                       # 繼承自工做區級的 tsconfig.json 文件
├── tsconfig.json                         # 工做區中全部應用的默認 TypeScript 配置。包括 TypeScript 選項和 Angular 模板編譯器選項。
├── tslint.json                           # 工做區中全部應用的默認 TSLint 配置。
├── .gitignore                            # 指定 Git 要忽略的非跟蹤的文件。
├── .editorconfig                         # 代碼編輯器配置
└── tslint代碼檢查.READE.md                 # 介紹文檔
複製代碼

package.json介紹

{
  "name": "fc-angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json --host=0.0.0.0 --open --port=4200",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "aot": "ng build --aot"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@antv/g2": "^3.5.3",
    "@grapecity/spread-excelio": "^12.0.10",
    "@grapecity/spread-sheets": "^12.0.10",
    "@grapecity/spread-sheets-charts": "^12.0.10",
    "@grapecity/spread-sheets-pdf": "^12.0.10",
    "@grapecity/spread-sheets-print": "^12.0.10",
    "@grapecity/spread-sheets-resources-zh": "^12.0.10",
    "ag-grid-community": "^20.2.0",
    "ag-grid-enterprise": "^20.2.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "mockjs": "^1.0.1-beta3",
    "ng-zorro-antd": "^7.2.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.1",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.9.5",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "less": "^2.7.3",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}
複製代碼

2、安裝項目

• 在 git node npm vscode 配置好多前提下，克隆代碼，命令以下：

git clone https://github.com/luohong123/fc-angular.git
npm install
npm start
複製代碼

• 在瀏覽器中輸入 http://localhost:4200

3、開發代碼

1. 代碼規範

• 請按照angular官網提出的 風格指南 開發代碼

【風格指南】angular.cn/guide/style…

2. 先後端通訊

• 【 使用httpclient】angular.cn/guide/http

3. 接口測試

• 推薦使用postman工具

4. 路由複用策略代碼預覽

5. 懶加載路由

4、代碼質量檢查

【代碼規範】

1. 每個文件，如html、css、ts的header都要有做者的名字、描述、做者郵箱、時間、修改時間、修改者等。
2. 文件命名規範
3. ts中一個變量一行註釋，每個方法都要有註釋
4. 按照angular官網提供的【風格指南】連接 寫代碼

【tslint代碼檢查】

【vscode安裝插件】

• 在vscode中安裝tslint,自動檢查代碼是否規範,如圖：

  

• 在vscode中安裝koroFileHeader，如圖：

  

• 在vscode中安裝代碼自動美化工具，如圖：

  

• angular版本的antDesign代碼自動提示工具

  

• 在vscode中安裝Open-In-Browser

• 在vscode中安裝 CSS Peek

• 在vscode中安裝 Color Info

• 在vscode中安裝快捷鍵插件 IntelliJ IDEA Keybindings

【經過aot打包檢查代碼是否規範】

ng build --aot
複製代碼

5、aot打包部署

• 經過 ng build --aot 命令生成dist 文件

6、學習幫助

• 【angular官網】angular.cn/docs

• 【typescript官網】www.typescriptlang.org/index.html

• 【ng.ant.design官網】ng.ant.design/docs/introd…

7、謝謝你們

感謝你們抽時間閱讀個人文章，歡迎指出不對的地方，謝謝！