初识ABP vNext(5):ABP扩展实体

初识ABP vNext(5):ABP扩展实体

Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章。

前言

上一篇实现了前端vue部分的用户登录和菜单权限控制,但是有一些问题需要解决,比如用户头像、用户介绍字段目前还没有,下面就来完善一下。

开始

因为用户实体是ABP模板自动生成的,其中的属性都预先定义好了,但是ABP是允许我们扩展模块实体的,我们可以通过扩展用户实体来增加用户头像和用户介绍字段。

扩展实体

ABP支持多种扩展实体的方式:

  1. 将所有扩展属性以json格式存储在同一个数据库字段中
  2. 将每个扩展属性存储在独立的数据库字段中
  3. 创建一个新的实体类映射到原有实体的同一个数据库表中
  4. 创建一个新的实体类映射到独立的数据库表中

这里选择第2种方式就好,它们的具体区别请见官网:扩展实体

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项目来更新

<span>初识ABP vNext(5):ABP扩展实体</span>

查看数据库,AppUsers表已经生成这2个字段了:

<span>初识ABP vNext(5):ABP扩展实体</span>

目前还没做设置界面,我先手动给2个初始值:

<span>初识ABP vNext(5):ABP扩展实体</span>

再次请求/api/identity/my-profile接口,已经返回了这2个扩展字段:

<span>初识ABP vNext(5):ABP扩展实体</span>

修改一下前端部分:

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);
      });
  });
},

刷新界面,右上角的用户头像就回来了:

<span>初识ABP vNext(5):ABP扩展实体</span>

路由整理

删除掉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;

运行效果:

<span>初识ABP vNext(5):ABP扩展实体</span>

对应ABP模板界面:

<span>初识ABP vNext(5):ABP扩展实体</span>

最后

本篇介绍了ABP扩展实体的基本使用,并且整理了前端部分的系统菜单,但是菜单的文字显示不对。下一篇将介绍ABP本地化,让系统文字支持多国语言。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/2642.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Android 开发环境详细概述

    Android 开发环境详细概述理解AndroidApp开发环境搭建的部分以及他们之间如何联系,协调工作(会和理解为什么要去做,知其然知其所以然)掌握环境搭建的步骤掌握配置环境项的用途,以方便我们的开发操作Android开发组成Java+AndroidSDK+开发工具(IDE)Android的开发语言是Java,只有安装JDK才能让Java运行起来Android的SDK提供了运行和硬件开发环境Eclipse开发工具可以提高编…

  • X3D 概念

    X3D 概念Extensible3D(X3D)Part1:Architectureandbasecomponents4Concepts概念4.1一般4.1.1主题此条款描述了X3D的核心概念,包括:如何创建和回放X3D场景,X3D场景的运行时语法,组件和概貌构成的模块化结构,通过层概念保证顺应性,数据编码语法,程序存取,网络化因素。表

  • PHP是单线程还是多线程?

    PHP是单线程还是多线程?

  • Elasticsearch(es) 查询语句语法详解

    Elasticsearch(es) 查询语句语法详解Elasticsearch(es)查询语句语法详解

  • 中兴F450光猫设置桥接_电信光猫改桥接后上不了网络

    中兴F450光猫设置桥接_电信光猫改桥接后上不了网络前几天突然想搞外网访问,但是电信这款光猫DMZ不能用让我很愁,后来经过一番了解可以让光猫只负责光数转换,剩下的事情交给路由,但是要把光猫设置成桥接模式这个光猫比较特殊不需要进入超级管理员只需要下面这个链接:http://192.168.1.1:8080/bridge_route.gch会出现这个页面,点击桥接复原就行,我是已经点过了,所以置灰了。…

  • 按钮-Button

    按钮-Button

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号