點擊上方藍字"小黑在哪里"關注我吧

• 登錄

• 權限

• 本地化

• 創建項目

• • ABP

  • vue-element-admin

前言

上一篇介紹了ABP的啟動模板以及AbpHelper工具的基本使用，這一篇將進入項目實戰部分。因為目前ABP的官方模板只支持MVC和Angular，MVC的話咱.NET開發人員來寫還可以，專業前端估計很少會用這個。。。Angular我本人不熟，所以選擇vue來做UI。

開始

我使用vue-element-admin^[1]來作為模板，這個項目貌似很多人用，選擇他的i18n^[2]分支，因為我需要國際化功能。在開始編碼前，需要先分析幾個重要問題：

• 用戶登錄/token

• 用戶權限控制

• 應用程序本地化/語言切換

好在ABP模板提供了Angular版本，我們可以參考Angular版本來做。

登錄

因為ABP的授權模塊是使用IdentityServer4，所以IdentityServer4的一些默認端點在ABP里也是同樣有效的，可以參考下IdentityServer4官網^[3]。運行ABP模板項目，看一下IdentityServer4發現文檔，uri是：/.well-known/openid-configuration

可以看到token端點是/connect/token，這是IdentityServer4默認的，通過這個端點就可以登錄用戶獲取token。后面請求接口時，把token放到HTTP Header的authorization字段即可。

權限

進入ABP的/swagger界面：

ABP內置了一個/api/abp/application-configuration接口，它用于返回本地化文本，權限和一些系統設置信息?？匆幌聰祿袷?#xff1a;

在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^[4]來實現，你也可以直接在前端部分來做國際化，如果你只有一個前端應用的話，但是在后端做復用性更好一些。

語言切換時只需要把對應的語言名稱放到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遷移系統創建和維護這個數據庫。新建一個項目：

步驟比較多，具體流程請參考官網：數據庫遷移^[5]，這里就不重復介紹了，你也可以選擇不分庫。

完成以上步驟，最終會生成2個數據庫，并且包含了一些默認的種子數據。

然后驗證一下HttpApi.Host和IdentityServer項目是否可以正常運行，前提是你電腦需要有sqlserver，redis。

HttpApi.Host：

IdentityServer：

vue-element-admin

vue-element-admin的基本使用就不介紹了，相信很多人見過這個，不了解的可以自己去搜索學習一下。

去GitHub下載i18n^[6]分支的代碼，或者直接用git clone命令。

在項目根目錄下執行指令：

安裝依賴：npm install

啟動項目：npm run dev

啟動正常的話可以看到這個界面：

最后

本篇先做準備工作，下一篇將從登錄功能開始編碼實現。。。代碼已上傳至GitHub：https://github.com/xiajingren/HelloAbp，歡迎star。

參考資料

[1]

vue-element-admin: https://github.com/PanJiaChen/vue-element-admin

[2]

i18n: https://github.com/PanJiaChen/vue-element-admin/tree/i18n

[3]

IdentityServer4官網: https://identityserver4.readthedocs.io/

[4]

vue-i18n: https://github.com/kazupon/vue-i18n

[5]

數據庫遷移: https://docs.abp.io/zh-Hans/abp/latest/Entity-Framework-Core-Migrations#使用多個數據庫

[6]

i18n: https://github.com/PanJiaChen/vue-element-admin/tree/i18n

如果本文對您有用，

不妨點個“在看”或者轉發朋友圈支持一下

總結

以上是生活随笔為你收集整理的初识ABP vNext（3）：vue对接ABP基本思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。