mirror of https://github.com/abpframework/abp.git
maliming
3 years ago
committed by
GitHub
GitHub
2 changed files with 395 additions and 2 deletions
@ -1 +1,130 @@ |
|||
TODO... |
|||
# 在 Angular UI 中的多租户支持 |
|||
|
|||
ABP Angular UI 支持多租户，以下是与多租户相关的一些特性： |
|||
|
|||
 |
|||
|
|||
<p style="font-size:small;text-align:center;">租户页面</p> |
|||
|
|||
在上面的页面中，您可以： |
|||
|
|||
- 查看所有租户。 |
|||
- 创建新的租户。 |
|||
- 编辑现有租户。 |
|||
- 删除租户。 |
|||
|
|||
 |
|||
|
|||
<p style="font-size:small;text-align:center;">租户切换组件</p> |
|||
|
|||
您可以在 MVC Account Public Module 的子页面（如登录页面）中使用租户切换框来在现有租户之间切换。Angular UI 从 `application-configuration` 响应中获取选定的租户，并在每个请求中将租户 ID 作为 `__tenant` header 发送到后端。 |
|||
|
|||
## 域名/子域名租户解析器 |
|||
|
|||
> **注意：** 如果要执行下面的步骤，您还应该实现后端的域名/子域名租户解析器功能。请参阅[多租户文档中的域名/子域名租户解析器](../../Multi-Tenancy#domain-subdomain-tenant-resolver)以了解后端实现。 |
|||
|
|||
Angular UI 可以从运行 URL 中获取租户名称。您可以通过子域名（如 mytenant1.mydomain.com）或整个域名（如 mytenant.com）来确定当前租户。要做到这一点，您需要在环境中设置 `application.baseUrl` 属性： |
|||
|
|||
子域名解析器： |
|||
|
|||
```js |
|||
// environment.prod.ts |
|||
|
|||
export const environment = { |
|||
//... |
|||
application: { |
|||
baseUrl: "https://{0}.mydomain.com/", |
|||
}, |
|||
//... |
|||
}; |
|||
``` |
|||
|
|||
**{0}** 是用于确定当前租户唯一名称的占位符。 |
|||
|
|||
在上述配置完成后，如果您的应用程序运行在 `mytenant1.mydomain.com` 上，应用程序将获取租户名称为 **mytenant1**。接下来，应用程序将调用 `/api/abp/multi-tenancy/tenants/by-name/mytenant1` 端点来检查租户是否存在。如果租户（mytenant1）存在，则应用程序将保留此租户数据，并在每个请求中将其 `id` 作为 `__tenant` header 发送到后端。如果租户不存在，则应用程序不会将 `__tenant` header 发送到后端。 |
|||
|
|||
> **重要提示：** 如果在 `baseUrl` 中使用了占位符（**{0}**），则子页面（如登录页面）中 `AccountLayoutComponent` 中的租户切换组件将被隐藏。 |
|||
|
|||
域名解析器: |
|||
|
|||
```js |
|||
// environment.prod.ts |
|||
|
|||
export const environment = { |
|||
//... |
|||
application: { |
|||
baseUrl: "https://{0}.com/", |
|||
}, |
|||
//... |
|||
}; |
|||
``` |
|||
|
|||
配置完成后，如果您的应用程序运行在 `mytenant.com` 上，应用程序将获取租户名称为 **mytenant**。 |
|||
|
|||
### 租户特定的入口 |
|||
|
|||
在环境中，可以将占位符 **{0}** 放入 API URL 中以确定租户特定的入口。 |
|||
|
|||
```js |
|||
// environment.prod.ts |
|||
|
|||
export const environment = { |
|||
//... |
|||
application: { |
|||
baseUrl: "https://{0}.mydomain.com/", |
|||
//... |
|||
}, |
|||
oAuthConfig: { |
|||
issuer: "https://{0}.ids.mydomain.com", |
|||
//... |
|||
}, |
|||
apis: { |
|||
default: { |
|||
url: "https://{0}.api.mydomain.com", |
|||
}, |
|||
AbpIdentity: { |
|||
url: "https://{0}.identity.mydomain.com", |
|||
}, |
|||
}, |
|||
}; |
|||
``` |
|||
|
|||
> **重要提示:** `application.baseUrl`和`baseUrl`属性中的 `{0}` 占位符是必需的，以便从运行 URL 中获取租户。API URL 中的其他占位符是可选的。 |
|||
|
|||
在上述配置完成后，如果您的应用程序运行在 `mytenant1.mydomain.com`上，应用程序将获取租户名称为 **mytenant1** ，并在应用程序初始化时将环境对象替换为 `EnvironmentService` 中的以下内容: |
|||
|
|||
```js |
|||
// environment object in EnvironmentService |
|||
|
|||
{ |
|||
//... |
|||
application: { |
|||
baseUrl: 'https://mytenant1.mydomain.com/', |
|||
//... |
|||
}, |
|||
oAuthConfig: { |
|||
issuer: 'https://mytenant1.ids.mydomain.com', |
|||
//... |
|||
}, |
|||
apis: { |
|||
default: { |
|||
url: 'https://mytenant1.api.mydomain.com', |
|||
}, |
|||
AbpIdentity: { |
|||
url: 'https://mytenant1.identity.mydomain.com', |
|||
}, |
|||
}, |
|||
} |
|||
``` |
|||
|
|||
替换后，应用程序将使用以下 URL: |
|||
|
|||
- `https://mytenant1.ids.mydomain.com` 作为 AuthServer URL。 |
|||
- `https://mytenant1.api.mydomain.com` 作为默认 URL。 |
|||
- `https://mytenant1.identity.mydomain.com` 作为 `AbpIdentity` 入点口 URL. |
|||
|
|||
应用程序在每个请求中发送包含当前租户 id 的 `__tenant` header. |
|||
|
|||
## 参见 |
|||
|
|||
- [ABP 中的多租户](../../Multi-Tenancy.md) |
|||
|
|||
@ -1 +1,265 @@ |
|||
TODO... |
|||
|
|||
# 表单元素 |
|||
|
|||
## 简介 |
|||
|
|||
Abp提供表单输入标签助手以便更轻松地构建表单。 |
|||
|
|||
## 演示 |
|||
|
|||
请查看[表单元素演示页面](https://bootstrap-taghelpers.abp.io/Components/FormElements)。 |
|||
|
|||
## abp-input |
|||
|
|||
`abp-input`标签为给定的C#属性创建一个Bootstrap表单输入。它在后台使用了[Asp.Net Core Input Tag Helper](https://docs.microsoft.com/tr-tr/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-input-tag-helper)，所以Asp.Net Core的每个input标签助手的数据注释属性对于`abp-input`也有效。 |
|||
|
|||
用法： |
|||
|
|||
````xml |
|||
<abp-input asp-for="@Model.MyModel.Name"/> |
|||
<abp-input asp-for="@Model.MyModel.Description"/> |
|||
<abp-input asp-for="@Model.MyModel.Password"/> |
|||
<abp-input asp-for="@Model.MyModel.IsActive"/> |
|||
```` |
|||
|
|||
Model: |
|||
|
|||
````csharp |
|||
public class FormElementsModel : PageModel |
|||
{ |
|||
public SampleModel MyModel { get; set; } |
|||
|
|||
public void OnGet() |
|||
{ |
|||
MyModel = new SampleModel(); |
|||
} |
|||
|
|||
public class SampleModel |
|||
{ |
|||
[Required] |
|||
[Placeholder("Enter your name...")] |
|||
[InputInfoText("What is your name?")] |
|||
public string Name { get; set; } |
|||
|
|||
[Required] |
|||
[FormControlSize(AbpFormControlSize.Large)] |
|||
public string SurName { get; set; } |
|||
|
|||
[TextArea(Rows = 4)] |
|||
public string Description { get; set; } |
|||
|
|||
[Required] |
|||
[DataType(DataType.Password)] |
|||
public string Password { get; set; } |
|||
|
|||
public bool IsActive { get; set; } |
|||
} |
|||
} |
|||
```` |
|||
|
|||
### 特性(Attributes) |
|||
|
|||
你可以在你的c#属性上设置一些特性，或者直接在html标签上设置。如果您要在[abp-dynamic-form](Dynamic-forms.md)中使用此属性，则只能通过属性特性设置这些属性。 |
|||
|
|||
|
|||
#### 属性特性(Property Attributes) |
|||
|
|||
- `[TextArea()]`: 将输入转换为文本区域。 |
|||
|
|||
* `[Placeholder()]`: 为输入设置占位符。您可以直接使用本地化键。 |
|||
* `[InputInfoText()]`: 为输入设置小型信息文本。您可以直接使用本地化键。 |
|||
* `[FormControlSize()]`: 设置表单控件包装器元素的大小。可用的值为 |
|||
- `AbpFormControlSize.Default` |
|||
- `AbpFormControlSize.Small` |
|||
- `AbpFormControlSize.Medium` |
|||
- `AbpFormControlSize.Large` |
|||
* `[DisabledInput]` : 输入被禁用。 |
|||
* `[ReadOnlyInput]`: 输入为只读。 |
|||
|
|||
#### 标签属性(Tag Attributes) |
|||
|
|||
* `info`: 为输入设置小型信息文本。您可以直接使用本地化键。 |
|||
* `auto-focus`: 如果为true，则浏览器会自动聚焦在该元素上。 |
|||
* `size`: 设置表单控件包装器元素的大小。可用的值为 |
|||
- `AbpFormControlSize.Default` |
|||
- `AbpFormControlSize.Small` |
|||
- `AbpFormControlSize.Medium` |
|||
- `AbpFormControlSize.Large` |
|||
* `disabled`: 输入被禁用。 |
|||
* `readonly`: 输入为只读。 |
|||
* `label`: 为输入设置标签。 |
|||
* `display-required-symbol`: 如果输入为必填项，则向标签添加必需符号（*）。默认为`True`。 |
|||
|
|||
[Asp.Net Core Input Tag Helper](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-input-tag-helper)的`asp-format`、`name`和`value`属性也对`abp-input`标签助手有效。 |
|||
|
|||
### 标签和本地化 |
|||
|
|||
您可以通过不同的方式设置输入的标签： |
|||
|
|||
- 您可以使用`Label`属性直接设置标签。 但是，它不会自动本地化您的本地化键。 因此，请使用`label = "@L [“ {LocalizationKey}”] .Value"`。 |
|||
- 您可以使用Asp.Net Core的`[Display(name = "{LocalizationKey}")]`属性设置标签。 |
|||
- 您可以让 **abp** 查找属性的本地化键。 如果未设置`label`或`[DisplayName]`属性，则会尝试查找“DisplayName：{PropertyName}”或“{PropertyName}”本地化键。 |
|||
|
|||
## abp-select |
|||
|
|||
`abp-select` 标签为给定的 C# 属性创建了一个 Bootstrap 表单选择器。它在后台使用 [Asp.Net Core 选择标签助手](https://docs.microsoft.com/tr-tr/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-select-tag-helper)，因此 `Asp.Net Core` 的 `select` 标签助手的每个数据注释属性也适用于 `abp-select`。 |
|||
|
|||
`abp-select` 标签需要一个 `Microsoft.AspNetCore.Mvc.Rendering.SelectListItem` 的列表来工作。它可以通过标签上的 `asp-items` 属性或 C# 属性上的 `[SelectItems()]` 属性来提供（如果您使用的是 [abp-dynamic-form](Dynamic-forms.md)，则只能使用 C# 属性的方式。） |
|||
|
|||
`abp-select` 支持多重选择。 |
|||
|
|||
`abp-select` 自动为 **枚举（Enum）** 属性创建选择列表。不需要额外的数据。如果属性是可空的，则会在自动生成的列表顶部添加一个空键和值。 |
|||
|
|||
使用： |
|||
|
|||
````xml |
|||
<abp-select asp-for="@Model.MyModel.City" asp-items="@Model.CityList"/> |
|||
|
|||
<abp-select asp-for="@Model.MyModel.AnotherCity"/> |
|||
|
|||
<abp-select asp-for="@Model.MyModel.MultipleCities" asp-items="@Model.CityList"/> |
|||
|
|||
<abp-select asp-for="@Model.MyModel.MyCarType"/> |
|||
|
|||
<abp-select asp-for="@Model.MyModel.MyNullableCarType"/> |
|||
```` |
|||
|
|||
Model: |
|||
|
|||
````csharp |
|||
public class FormElementsModel : PageModel |
|||
{ |
|||
public SampleModel MyModel { get; set; } |
|||
|
|||
public List<SelectListItem> CityList { get; set; } |
|||
|
|||
public void OnGet() |
|||
{ |
|||
MyModel = new SampleModel(); |
|||
|
|||
CityList = new List<SelectListItem> |
|||
{ |
|||
new SelectListItem { Value = "NY", Text = "New York"}, |
|||
new SelectListItem { Value = "LDN", Text = "London"}, |
|||
new SelectListItem { Value = "IST", Text = "Istanbul"}, |
|||
new SelectListItem { Value = "MOS", Text = "Moscow"} |
|||
}; |
|||
} |
|||
|
|||
public class SampleModel |
|||
{ |
|||
public string City { get; set; } |
|||
|
|||
[SelectItems(nameof(CityList))] |
|||
public string AnotherCity { get; set; } |
|||
|
|||
public List<string> MultipleCities { get; set; } |
|||
|
|||
public CarType MyCarType { get; set; } |
|||
|
|||
public CarType? MyNullableCarType { get; set; } |
|||
} |
|||
|
|||
public enum CarType |
|||
{ |
|||
Sedan, |
|||
Hatchback, |
|||
StationWagon, |
|||
Coupe |
|||
} |
|||
} |
|||
```` |
|||
|
|||
### 属性 |
|||
|
|||
您可以在 C# 属性上或直接在 HTML 标签上设置一些属性。如果您将在 [abp-dynamic-form](Dynamic-forms.md) 中使用此属性，则只能通过属性属性设置这些属性。 |
|||
|
|||
#### 属性特性(Property Attributes) |
|||
|
|||
* `[SelectItems()]`: 设置选择数据。参数应为数据列表的名称。（见上面的示例） |
|||
|
|||
- `[InputInfoText()]`：设置输入的小信息文本。您可以直接使用本地化键。 |
|||
- `[FormControlSize()]`：设置表单控件包装元素的大小。可用值为 |
|||
- `AbpFormControlSize.Default` |
|||
- `AbpFormControlSize.Small` |
|||
- `AbpFormControlSize.Medium` |
|||
- `AbpFormControlSize.Large` |
|||
|
|||
#### 标签属性(Tag Attributes) |
|||
|
|||
- `asp-items`: 设置选择数据。这应该是一个 `SelectListItem` 列表。 |
|||
- `info`: 为输入设置一个小的信息文本。您可以直接使用本地化键。 |
|||
- `size`: 设置表单控件包装元素的大小。可用值为 |
|||
- `AbpFormControlSize.Default` |
|||
- `AbpFormControlSize.Small` |
|||
- `AbpFormControlSize.Medium` |
|||
- `AbpFormControlSize.Large` |
|||
- `label`: 为输入设置标签。 |
|||
- `display-required-symbol`: 如果输入是必需的，则向标签添加必需符号 (*)。默认为 `True`。 |
|||
|
|||
### 标签和本地化 |
|||
|
|||
您可以以不同的方式设置输入的标签： |
|||
|
|||
- 您可以使用 `Label` 属性并直接设置标签。但是它不会自动本地化您的本地化键。因此，请将其用作 `label="@L["{LocalizationKey}"].Value"`。 |
|||
- 您可以使用 Asp.Net Core 的 `[Display(name="{LocalizationKey}")]` 属性进行设置。 |
|||
- 您可以让 **abp** 查找属性的本地化键。它将尝试查找“DisplayName:{PropertyName}”或“{PropertyName}”本地化键。 |
|||
|
|||
对于**枚举**属性，`abp-select`会设置下拉框的本地化值。它会查找"{EnumTypeName}.{EnumPropertyName}"或"{EnumPropertyName}"的本地化键。例如，在上面的示例中，当它本地化下拉框的值时，它将使用"CarType.StationWagon"或"StationWagon"键。 |
|||
|
|||
## abp-radio |
|||
|
|||
`abp-radio`标签为给定的C#属性创建一个Bootstrap表单单选框组。使用方式与`abp-select`标签非常相似。 |
|||
|
|||
Usage: |
|||
|
|||
````xml |
|||
<abp-radio asp-for="@Model.MyModel.CityRadio" asp-items="@Model.CityList" inline="true"/> |
|||
|
|||
<abp-radio asp-for="@Model.MyModel.CityRadio2"/> |
|||
```` |
|||
|
|||
Model: |
|||
|
|||
````csharp |
|||
public class FormElementsModel : PageModel |
|||
{ |
|||
public SampleModel MyModel { get; set; } |
|||
|
|||
public List<SelectListItem> CityList { get; set; } = new List<SelectListItem> |
|||
{ |
|||
new SelectListItem { Value = "NY", Text = "New York"}, |
|||
new SelectListItem { Value = "LDN", Text = "London"}, |
|||
new SelectListItem { Value = "IST", Text = "Istanbul"}, |
|||
new SelectListItem { Value = "MOS", Text = "Moscow"} |
|||
}; |
|||
|
|||
public void OnGet() |
|||
{ |
|||
MyModel = new SampleModel(); |
|||
MyModel.CityRadio = "IST"; |
|||
MyModel.CityRadio2 = "MOS"; |
|||
} |
|||
|
|||
public class SampleModel |
|||
{ |
|||
public string CityRadio { get; set; } |
|||
|
|||
[SelectItems(nameof(CityList))] |
|||
public string CityRadio2 { get; set; } |
|||
} |
|||
} |
|||
```` |
|||
|
|||
### 特性(attributes) |
|||
|
|||
您可以在C#属性或直接在HTML标签上设置一些属性。如果您将在[abp-dynamic-form](Dynamic-forms.md)中使用此属性，则只能通过属性属性设置这些属性。 |
|||
|
|||
#### 属性特性(Property Attributes) |
|||
|
|||
- `[SelectItems()]`:设置选择数据。参数应为数据列表的名称。 （见上面的示例） |
|||
|
|||
#### 标签特性(Tag Attributes) |
|||
|
|||
- `asp-items`: 设置选择数据。这应该是一个SelectListItem列表。 |
|||
- `Inline`: 如果为true，则单选按钮将在单行中，相互紧挨着。如果为false，则它们将在彼此下面。 |
|||
|
|||
Loading…
Reference in new issue