Tips：本篇已加入系列文章閱讀目錄，可點選檢視更多相關文章。
前言
上一篇介紹了ABP的啟動模板以及AbpHelper工具的基本使用，這一篇將進入專案實戰部分。因為目前ABP的官方模板只支援MVC和Angular，MVC的話我們.NET開發人員來寫還可以，專業前端估計很少會用這個。。。Angular我本人不熟，所以選擇vue來做UI。
開始
我使用vue-element-admin來作為模板，這個專案貌似很多人用，選擇他的i18n分支，因為我需要國際化功能。在開始編碼前，需要先分析幾個重要問題：
- 使用者登入/token
- 使用者許可權控制
- 應用程式本地化/語言切換
好在ABP模板提供了Angular版本，我們可以參考Angular版本來做。
登入
因為ABP的授權模組是使用IdentityServer4，所以IdentityServer4的一些預設端點在ABP裡也是同樣有效的，可以參考下IdentityServer4官網。執行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來實現，你也可以直接在前端部分來做國際化，如果你只有一個前端應用的話，但是在後端做複用性更好一些。
語言切換時只需要把對應的語言名稱放到HTTP Header的accept-language欄位就行。
建立專案
在開始編碼前，先建立好前後端的模板專案。
ABP
這裡直接用Abp CLI命令來建立解決方案吧：
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遷移系統建立和維護這個資料庫。新建一個專案：
步驟比較多，具體流程請參考官網：資料庫遷移，這裡就不重複介紹了，你也可以選擇不分庫。
完成以上步驟，最終會生成2個資料庫，並且包含了一些預設的種子資料。
然後驗證一下HttpApi.Host和IdentityServer專案是否可以正常執行，前提是你電腦需要有sqlserver，redis。
HttpApi.Host：
IdentityServer：
vue-element-admin
vue-element-admin的基本使用就不介紹了，相信很多人見過這個，不瞭解的可以自己去搜尋學習一下。
去GitHub下載i18n分支的程式碼，或者直接用git clone命令。
在專案根目錄下執行指令：
安裝依賴：npm install
啟動專案：npm run dev
啟動正常的話可以看到這個介面：
最後
本篇先做準備工作，下一篇將從登入功能開始編碼實現。。。程式碼已上傳至GitHub：https://github.com/xiajingren/HelloAbp，歡迎star。