碼上快樂

相關內容    簡體    繁體

ABP設置管理模塊: Abp.SettingUi

本文轉載自   查看原文   2021-02-08 13:53   607    C#/ 設置/ UI/ ASP.NET Core/ .net/ 模塊/ abp/ ABP/ .NET CORE

開源地址: https://github.com/EasyAbp/Abp.SettingUi

一直想宣傳一下SettingUi, 因為 懶 工作比較忙, 所以才拖到今天.

關於ABP就不需要我再多廢口舌了, 已經是一個非常出名的.NET Core的框架, 在國內也已經有很多企業在正式項目中廣泛使用了.

Abp.SettingUi是一個用來管理ABP中設置的模塊, 簡單來講它可以讓用戶通過UI來管理ABP中各個設置的值, 比如修改默認語言, 設置密碼復雜度等等, 可以說裝上這個模塊你就開啟了ABP的"隱藏功能".

應該說設置管理是一個很重要的功能, 但是ABP的社區版沒有內置, 只在ABP的商業版中才有設置的UI, 但仍需開發者通過代碼來為各個設置項進行適配才可以.

而SettingUi會自動掃描系統中所有的設置, 並在UI中顯示出來, 無需開發者過多干預, 開箱即用.

從發布至今, SettingUi在NUGET上已經有近7000次下載, 可以說是ABP中非常實用一個模塊, 甚至也有ABP商業版用戶來使用這個模塊, 可見SettingUi得到了很多ABP開發者的認可.

為了更好的讓國內開發者使用, SettingUi 1.3.0版增加了中文文檔, 該文檔是我花了很多心思寫的一個Step by Step的教程, 所以接下來就是該文檔復制過來, 希望能吸引更多的使用者:)

Abp.SettingUi

一個用來管理ABP設置的模塊

如果你在使用 ABP v2.1.1 之前的版本, 請查看Abp.SettingManagement.Mvc.UI

功能

  • 通過UI管理ABP設置的值
  • 支持本地化
  • 設置分組
  • 為不同設置顯示適當的控件
  • 可通過權限控制設置的顯示

在線演示

我們為這個模塊創建了一個在線演示: https://settingui.samples.easyabp.io

安裝

使用AbpHelper (推薦)

在你的ABP項目的根文件夾中運行以下命令:

abphelper module add EasyAbp.Abp.SettingUi -acshlw

手動安裝包

  1. 安裝以下 NuGet 包.

    • EasyAbp.Abp.SettingUi.Application
    • EasyAbp.Abp.SettingUi.Application.Contracts
    • EasyAbp.Abp.SettingUi.Domain.Shared
    • EasyAbp.Abp.SettingUi.HttpApi
    • EasyAbp.Abp.SettingUi.HttpApi.Client (只有 分層結構 才需要)
    • EasyAbp.Abp.SettingUi.Web

  2. 添加 DependsOn(typeof(AbpSettingUiXxxModule)) 屬性來配置模塊依賴. (幫助)

配置本地化資源

為了讓SettingUi模塊使用應用程序的本地化資源, 我們需要將它們添加進SettingUiResource:

  • MyAbpApp.Domain.Shared 項目 - MyAbpAppDomainSharedModule 類

    Configure<AbpLocalizationOptions>(options =>
{
    ...
    options.Resources
        .Get<SettingUiResource>()
        .AddVirtualJson("/Localization/MyAbpApp");
});

使用

  1. 授權 ("Setting UI" - "Show Setting Page")

  2. 刷新瀏覽器, 然后你就可以使用 "Administration" - "Settings" 菜單來看見所有ABP內置的設置了

管理自定義設置

除了ABP自定義設置以外, 你也可以使用這個模塊來管理你自己的設置.

  1. 定義一個設置

    • MyAbpApp.Domain 項目 - Settings/MyAbpAppSettingDefinitionProvider 類

      public class MyAbpAppSettingDefinitionProvider : SettingDefinitionProvider
{
    public override void Define(ISettingDefinitionContext context)
    {
        context.Add(
            new SettingDefinition(
                "Connection.Ip", // 設置的名稱
                "127.0.0.1", // 默認值
                L("DisplayName:Connection.Ip"), // 顯示名稱
                L("Description:Connection.Ip") // 描述
            ));
    }

    private static LocalizableString L(string name)
    {
        return LocalizableString.Create<MyAbpAppResource>(name);
    }
}
      • 設置的名稱為"Connection.Ip"
      • 提供了一個默認值: "127.0.0.1"
      • 使用幫助方法 L 為 顯示名稱 和 描述 賦予了可本地化的字符串. 格式 "DisplayName:{SettingName}" 是ABP推薦的形式.

      ABP的設置系統, 請參見 設置文檔

  2. 定義本地化資源, 出於演示目的, 我們定義了英語和簡體中文的本地化資源

    • MyAbpApp.Domain.Shared 項目

      • Localization/MyAbpApp/en.json

        {
    "culture": "en",
    "texts": {
        ...
        "DisplayName:Connection.Ip": "IP",
        "Description:Connection.Ip": "The IP address of the server."
    }
}

      • Localization/MyAbpApp/zh-Hans.json

        {
    "culture": "zh-Hans",
    "texts": {
        ...
        "DisplayName:Connection.Ip": "IP",
        "Description:Connection.Ip": "服務器的IP地址."
    }
}

  3. 重新啟動應用程序, 我們可以看到設置顯示了, 並且本地化也正常工作

分組

你可能注意到我們的自定義設置顯示在"其它"標簽, "其它"卡片中, 這些是默認的分組, 分別稱之為"Group1"和"Group2"

那么我們如何自定義這些設置的分組呢? 有兩種方式:

  1. 使用 WithProperty 方法

    WithProperty 方法是由ABPSettingDefinition類提供的一個方法, 我們可以直接在設置定義中使用它:

    • MyAbpApp.Domain 項目 - Settings/MyAbpAppSettingDefinitionProvider 類

      context.Add(
    new SettingDefinition(
            "Connection.Ip", // 設置名稱
            "127.0.0.1", // 默認值
            L("DisplayName:Connection.Ip"), // 顯示名稱
            L("Description:Connection.Ip") // 描述
        )
        .WithProperty(SettingUiConst.Group1, "Server")
        .WithProperty(SettingUiConst.Group2, "Connection")
);
      • 常量 Group1 和 Group2 定義在 SettingUiConst類中
      • 設置 "Group1" 為 "Server", "Group2" 為 "Connection"

    然后我們應該為這兩個分組名字提供本地化資源:

    • MyAbpApp.Domain.Shared 項目

      • Localization/MyAbpApp/en.json

        {
    "culture": "en",
    "texts": {
        ...
        "Server": "Server",
        "Connection": "Connection"
    }
}

      • Localization/MyAbpApp/zh-Hans.json

        {
    "culture": "zh-Hans",
    "texts": {
        ...
        "Server": "服務器",
        "Connection": "連接"
    }
}

    重新啟動應用程序查看分組名稱是否正確設置

  2. 使用設置屬性文件

    另一種分組方式是使用設置分組文件, 該方式由SettingUi模塊提供. 當你不太容易修改設置的定義, 或者你想將分組信息匯集在一個單獨的位置時, 這種方式很有用.

    為了演示這種方式, 讓我們定義一個新設置:

    • MyAbpApp.Domain 項目 - Settings/MyAbpAppSettingDefinitionProvider 類

      new SettingDefinition(
    "Connection.Port",
    8080.ToString(),
    L("DisplayName:Connection.Port"),
    L("Description:Connection.Port")
)

    為這個設置添加本地化的步驟省略了.

    然后我們需要創建一個新的任意名字的JSON文件, 但是路徑必須為"/SettingProperties", 這是因為SettingUi模塊將會從這個路徑下查找設置屬性文件.

    • MyAbpApp.Domain.Shared 項目 - /SettingProperties/MySettingProperties.json 文件

      {
    "Connection.Port": {
        "Group1": "Server",
        "Group2": "Connection"
    }
}
      • 設置名稱 Connection.Port 做為JSON對象的鍵
      • 使用 "Group1" 和 "Group2" 來設置分組名稱

    • 重新啟動應用程序來查看新分組的設置

設置類型

默認情況下, 一個設置的值是字符串類型, 將會在UI中渲染為一個文本輸入控件. 我們可以簡單地提供一個設置屬性"Type"來定制它:

  • MyAbpApp.Domain.Shared 項目 - /SettingProperties/MySettingProperties.json 文件

    {
    "Connection.Port": {
        "Group1": "Server",
        "Group2": "Connection",
        "Type": "number"
    }
}
    • "Connection.Port" 設置類型為 "number"

不用重新啟動應用程序, 只需要按下F5來刷新瀏覽器, 你可以立即看到效果:

現在輸入的類型變更為了"數字", 並且前端的驗證也生效了.

設置類型也可以通過 WithProperty 方法來配置, 如 WithProperty("Type", "number")

目前SettingUi支持以下幾種設置類型:

  • text (默認)
  • number
  • checkbox
  • select

    • 需要一個額外屬性 "Options" 來提供選項, 是一個使用豎線(|)分隔的字符串

      "Connection.Protocol": {
    "Group1": "Server",
    "Group2": "Connection",
    "Type": "select",
    "Options": "|HTTP|TCP|RDP|FTP|SFTP"
}

      渲染結果:

到這里教程就結束了. 通過本教程, 你應該可以輕松地使用SettingUi來管理你的設置了. 教程的源碼可以在sample文件夾中找到.

本地化

SettingUi模塊使用ABP的本地化系統來顯示設置的本地化信息. 現在支持的語言有:

  • 英語
  • 簡體中文
  • 土耳其語

本地化資源存放在EasyAbp.Abp.SettingUi.Domain.Shared項目的/Localization/SettingUi中.

你可以添加更多的資源文件來讓這個模塊支持更多語言. 歡迎PR 😊 .

ABP的本地化系統, 請查看文檔

權限

SettingUi通過檢查SettingUi.ShowSettingPage權限,來控制是否顯示SettingUi的頁面.

只要賦予了該權限, 那么系統中所有的設置都可以通過SettingUi來修改.

但有些時候, 我們不想讓用戶在SettingUi中看到某些設置, 這可以通過定義特定的權限來實現這個目的.

比如我們需要對用戶隱藏"系統"分組, 那么需要在SettingUi.ShowSettingPage下添加一個子權限, 權限的名字為SettingUi.System. 代碼如下:

public override void Define(IPermissionDefinitionContext context)
{
    var settingUiPage = context.GetPermissionOrNull(SettingUiPermissions.ShowSettingPage);  // 取得ShowSettingPage權限
    var systemGroup = settingUiPage.AddChild("SettingUi.System", L("Permission:SettingUi.System")); // 添加控制 Group1: System 的權限
}

這樣當SettingUi遍歷設置時, 如果發現有SettingUi.Group1形式的權限, 則只有顯式的賦予該權限后, 分組Group1才會顯示.

我們可以繼續添加對Group2控制的權限, 如"系統" -> "密碼"分組, 需要繼續添加后綴為Group2的權限, 代碼如下:

public override void Define(IPermissionDefinitionContext context)
{
    ...
    var passwordGroup = systemGroup.AddChild("SettingUi.System.Password", L("Permission:SettingUi.System.Password"));   // 添加控制 Group2: Password 的權限
}

這樣當SettingUi遍歷設置時, 如果發現有SettingUi.Group1.Group2形式的權限, 則只有顯示的賦予該權限后, 分組Group1中的Group2才會顯示.

當然, 我們也可繼續添加精確控制某一設置的權限, 如"系統" -> "密碼" -> "要求長度", 需要繼續添加后綴為設置名稱的權限, 代碼如下:

public override void Define(IPermissionDefinitionContext context)
{
    ...
    var requiredLength = passwordGroup.AddChild("SettingUi.System.Password.Abp.Identity.Password.RequiredLength", L("Permission:SettingUi.System.Password.RequiredLength"));    // 添加控制設置Abp.Identity.Password.RequiredLength的權限
}

這樣當SettingUi遍歷設置時, 如果發現有SettingUi.Group1.Group2.SettingName形式的權限, 則只有顯示的賦予該權限后, 分組Group1中的Group2中的SettingName才會顯示.

通過以上3級的權限定義方式, 我們就可以在SettingUi中任意控制設置的顯示了.

下圖是Setting Ui權限的截圖, 和顯示的結果:

關於ABP中權限系統, 請查看該文檔


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 初識ABP vNext（10）：ABP設置管理 ABP之模塊 ABP理論學習之設置管理 ABP ABP模塊系統 ABP之模塊分析 吐槽一下Abp的用戶和租戶管理模塊 初識ABP vNext（9）：ABP模塊化開發-文件管理 精簡ABP的模塊依賴 ABP-Zero模塊
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM