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

• 擴展實體

• 路由整理

前言

上一篇實現了前端vue部分的用戶登錄和菜單權限控制，但是有一些問題需要解決，比如用戶頭像、用戶介紹字段目前還沒有，下面就來完善一下。

開始

因為用戶實體是ABP模板自動生成的，其中的屬性都預先定義好了，但是ABP是允許我們擴展模塊實體的，我們可以通過擴展用戶實體來增加用戶頭像和用戶介紹字段。

擴展實體

ABP支持多種擴展實體的方式：

將所有擴展屬性以json格式存儲在同一個數據庫字段中

將每個擴展屬性存儲在獨立的數據庫字段中

創建一個新的實體類映射到原有實體的同一個數據庫表中

創建一個新的實體類映射到獨立的數據庫表中

這里選擇第2種方式就好，它們的具體區別請見官網：擴展實體^[1]

src\Xhznl.HelloAbp.Domain\Users\AppUser.cs：

///?<summary> ///?頭像 ///?</summary> public?string?Avatar?{?get;?set;?}///?<summary> ///?個人介紹 ///?</summary> public?string?Introduction?{?get;?set;?}

src\Xhznl.HelloAbp.EntityFrameworkCore\EntityFrameworkCore\HelloAbpDbContext.cs：

builder.Entity<AppUser>(b?=> {。。。。。。b.Property(x?=>?x.Avatar).IsRequired(false).HasMaxLength(AppUserConsts.MaxAvatarLength).HasColumnName(nameof(AppUser.Avatar));b.Property(x?=>?x.Introduction).IsRequired(false).HasMaxLength(AppUserConsts.MaxIntroductionLength).HasColumnName(nameof(AppUser.Introduction)); });

src\Xhznl.HelloAbp.EntityFrameworkCore\EntityFrameworkCore\HelloAbpEfCoreEntityExtensionMappings.cs：

OneTimeRunner.Run(()?=> {ObjectExtensionManager.Instance.MapEfCoreProperty<IdentityUser,?string>(nameof(AppUser.Avatar),b?=>?{?b.HasMaxLength(AppUserConsts.MaxAvatarLength);?}).MapEfCoreProperty<IdentityUser,?string>(nameof(AppUser.Introduction),b?=>?{?b.HasMaxLength(AppUserConsts.MaxIntroductionLength);?}); });

src\Xhznl.HelloAbp.Application.Contracts\HelloAbpDtoExtensions.cs：

OneTimeRunner.Run(()?=> {ObjectExtensionManager.Instance.AddOrUpdateProperty<string>(new[]{typeof(IdentityUserDto),typeof(IdentityUserCreateDto),typeof(IdentityUserUpdateDto),typeof(ProfileDto),typeof(UpdateProfileDto)},"Avatar").AddOrUpdateProperty<string>(new[]{typeof(IdentityUserDto),typeof(IdentityUserCreateDto),typeof(IdentityUserUpdateDto),typeof(ProfileDto),typeof(UpdateProfileDto)},"Introduction"); });

注意最后一步，Dto也需要添加擴展屬性，不然就算你實體中已經有了新字段，但接口依然獲取不到。

然后就是添加遷移更新數據庫了：

Add-Migration Added_AppUser_Properties

Update-Database ?也可以不用update，運行DbMigrator項目來更新

查看數據庫，AppUsers表已經生成這2個字段了：

目前還沒做設置界面，我先手動給2個初始值：

再次請求/api/identity/my-profile接口，已經返回了這2個擴展字段：

修改一下前端部分：

src\store\modules\user.js：

//?get?user?info getInfo({?commit?})?{return?new?Promise((resolve,?reject)?=>?{getInfo().then(response?=>?{const?data?=?response;if?(!data)?{reject("Verification?failed,?please?Login?again.");}const?{?name,?extraProperties?}?=?data;commit("SET_NAME",?name);commit("SET_AVATAR",?extraProperties.Avatar);commit("SET_INTRODUCTION",?extraProperties.Introduction);resolve(data);}).catch(error?=>?{reject(error);});}); },

刷新界面，右上角的用戶頭像就回來了：

路由整理

刪除掉vue-element-admin多余的路由，并添加ABP模板自帶的身份認證管理和租戶管理。

src\router\index.js：

/*?Router?Modules?*/ import?identityRouter?from?"./modules/identity"; import?tenantRouter?from?"./modules/tenant";export?const?asyncRoutes?=?[/**?when?your?routing?map?is?too?long,?you?can?split?it?into?small?modules?**/identityRouter,tenantRouter,//?404?page?must?be?placed?at?the?end?!!!{?path:?"*",?redirect:?"/404",?hidden:?true?} ];

src\router\modules\identity.js：

/**?When?your?routing?table?is?too?long,?you?can?split?it?into?small?modules?**/import?Layout?from?"@/layout";const?identityRouter?=?{path:?"/identity",component:?Layout,redirect:?"noRedirect",name:?"Identity",meta:?{title:?"identity",icon:?"user"},children:?[{path:?"roles",component:?()?=>?import("@/views/identity/roles"),name:?"Roles",meta:?{?title:?"roles",?policy:?"AbpIdentity.Roles"?}},{path:?"users",component:?()?=>?import("@/views/identity/users"),name:?"Users",meta:?{?title:?"users",?policy:?"AbpIdentity.Users"?}}] }; export?default?identityRouter;

src\router\modules\tenant.js：

/**?When?your?routing?table?is?too?long,?you?can?split?it?into?small?modules?**/import?Layout?from?"@/layout";const?tenantRouter?=?{path:?"/tenant",component:?Layout,redirect:?"/tenant/tenants",alwaysShow:?true,name:?"Tenant",meta:?{title:?"tenant",icon:?"tree"},children:?[{path:?"tenants",component:?()?=>?import("@/views/tenant/tenants"),name:?"Tenants",meta:?{?title:?"tenants",?policy:?"AbpTenantManagement.Tenants"?}}] }; export?default?tenantRouter;

運行效果：

對應ABP模板界面：

最后

本篇介紹了ABP擴展實體的基本使用，并且整理了前端部分的系統菜單，但是菜單的文字顯示不對。下一篇將介紹ABP本地化，讓系統文字支持多國語言。

參考資料

[1]

擴展實體: https://docs.abp.io/zh-Hans/abp/latest/Customizing-Application-Modules-Extending-Entities

如果本文對您有用，

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

總結

以上是生活随笔為你收集整理的初识ABP vNext（5）：ABP扩展实体的全部內容，希望文章能夠幫你解決所遇到的問題。

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