Tips：本篇已加入系列文章閱讀目錄，可點選檢視更多相關文章。 [TOC] # 前言 上一篇介紹了ABP的啟動模板以及AbpHelper工具的基本使用，這一篇將進入專案實戰部分。因為目前ABP的官方模板只支援MVC和Angular，MVC的話咱.NET開發人員來寫還可以，專業前端估計很少會用這個。。。Angular我本人不熟，所以選擇vue來做UI。 # 開始 我使用[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)來作為模板，這個專案貌似很多人用，選擇他的[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支，因為我需要國際化功能。在開始編碼前，需要先分析幾個重要問題： - 使用者登入/token - 使用者許可權控制 - 應用程式本地化/語言切換 好在ABP模板提供了Angular版本，我們可以參考Angular版本來做。 ## 登入 因為ABP的授權模組是使用IdentityServer4，所以IdentityServer4的一些預設端點在ABP裡也是同樣有效的，可以參考下[IdentityServer4官網](https://identityserver4.readthedocs.io/)。執行ABP模板專案，看一下IdentityServer4發現文件，uri是：`/.well-known/openid-configuration`  可以看到token端點是`/connect/token`，這是IdentityServer4預設的，通過這個端點就可以登入使用者獲取token。後面請求介面時，把token放到HTTP Header的authorization欄位即可。 ## 許可權 進入ABP的`/swagger`介面：  ABP內建了一個`/api/abp/application-configuration`介面，它用於返回本地化文字，許可權和一些系統設定資訊。看一下資料格式：  在**auth.policies**欄位中包含了系統的所有許可權，**auth.grantedPolicies**欄位則包含了當前使用者所擁有的許可權，因為我現在沒登入所以是空的。通過這兩個欄位就可以和vue-element-admin的選單許可權對應起來，實現許可權控制。  **currentUser**欄位表示當前使用者資訊，沒登入時就是空的，**isAuthenticated**為false，這個欄位也可以作為使用者是否登入（token是否有效）的判斷依據。 ## 本地化 本地化對於大部分的小型系統可能都用不上，不過ABP作為一個優秀且全面的框架，必然會支援本地化功能。同樣的，本地化資訊也可以通過`/api/abp/application-configuration`介面來獲取：  **localization.languages**欄位表示系統所支援的語言型別，前端的語言切換選項就可以使用這個欄位。  **localization.values**欄位就是本地化的文字資訊了，你在後端配置的本地化文字都可以從這裡獲取到，通過這個欄位結合vue-element-admin的國際化功能，就可以讓你的系統支援多語言。vue-element-admin的國際化方案是通過 [vue-i18n](https://github.com/kazupon/vue-i18n)來實現，你也可以直接在前端部分來做國際化，如果你只有一個前端應用的話，但是在後端做複用性更好一些。 語言切換時只需要把對應的語言名稱放到HTTP Header的accept-language欄位就行。 ## 建立專案 在開始編碼前，先建立好前後端的模板專案。 ### ABP 這裡直接用Abp CLI命令來建立解決方案吧： ```powershell abp new "Xhznl.HelloAbp" -t app -u none --separate-identity-server -m none -d ef -cs "Server=localhost;User Id=sa;Password=Password@2020;Database=HelloAbp;MultipleActiveResultSets=true" ``` 建立一個名為"Xhznl.HelloAbp"的解決方案，使用app作為模板，不需要UI，並且將Identity Server應用程式與API host應用程式分開，使用Entity Framework Core作為資料庫提供程式，並指定連線字串。建立完成後會得到一個aspnet-core資料夾。  專案結構如下，因為指定了`--separate-identity-server`引數，所以多了個IdentityServer專案，如果不指定的話它是整合在HttpApi.Host中的。  通常小型系統沒必要把Identity Server應用程式與API host應用程式分開，會增加運維成本，這裡只是為了演示分散式部署的情況，為後面的微服務做準備。 ABP還支援為每個模組單獨配置資料庫（如果你不需要分庫，可以忽略以下內容），修改DbMigrator、IdentityServer專案的appsettings.json配置檔案：  在ConnectionStrings中新增AbpIdentityServer配置，為Identity Server配置獨立的資料庫連線字串，不配置的話預設使用Default配置。AbpIdentityServer這個key是來自ABP的IdentityServer模組中的一個常量，具體請參考原始碼。 在開發環境光定義連線字串還不夠，因為HelloAbpIdsDB資料庫還不存在，需要使用EF Core Code Frist遷移系統建立和維護這個資料庫。新建一個專案：  步驟比較多，具體流程請參考官網：[資料庫遷移](https://docs.abp.io/zh-Hans/abp/latest/Entity-Framework-Core-Migrations#使用多個數據庫)，這裡就不重複介紹了，你也可以選擇不分庫。 完成以上步驟，最終會生成2個數據庫，並且包含了一些預設的種子資料。  然後驗證一下HttpApi.Host和IdentityServer專案是否可以正常執行，前提是你電腦需要有sqlserver，redis。 HttpApi.Host：  IdentityServer：  ### vue-element-admin vue-element-admin的基本使用就不介紹了，相信很多人見過這個，不瞭解的可以自己去搜索學習一下。 去GitHub下載[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支的程式碼，或者直接用git clone命令。 在專案根目錄下執行指令： 安裝依賴：`npm install` 啟動專案：`npm run dev` 啟動正常的話可以看到這個介面：  # 最後 本篇先做準備工作，下一篇將從登入功能開始編碼實現。。。程式碼已上傳至GitHub：https://github.com/xiajingren/HelloAbp，歡迎star。