ASP.NET ZERO 学习 —— (5) 开发手册之ANGULAR后台单页面应用

来源:互联网 发布:按键精灵读取数据库 编辑:程序博客网 时间:2024/05/19 11:48

Angular 单页面应用后端

在ASP.NET Zero的后端是一个单页面的AngularJs的应用。登录时,会被重定向至 ApplicationController。它会返回应用的布局视图。

注意:也有一个用ASP.NET MVC和JQuery构造的多页的版本的相同的应用程序

Application 文件夹

所有视图,脚本和样式文件都存放在App文件夹中

这里写图片描述

有三个主要文件夹:
- common: 存放租户和管理员的通用资源文件
- host: 存放管理员的资源文件
- tenant: 存放租户的资源文件

租户和管理员都需要用到的view, direcitve,service,image都放在common文件夹下面。管理员或租户各自的文件资源需放在各自对应的文件夹下。如果开发的是单租户应用,可以把文件都放在租户文件夹下。

主菜单

应用的主菜单在 AppNavigationProvider 类中定义。查看ABP的导航帮助文档可以让你更深入的理解怎样创建菜单。

路由

app.js是应用程序的入口。你可以在文件中定义app angular moduleangular routes。Angular ui-router 被用来路由,根据当前用户的权限,动态的定义路由。例如:

if (abp.auth.hasPermission('Pages.Administration.Tenant.Settings')) {    $stateProvider.state('tenant.settings', {        url: '/settings',        templateUrl: '~/App/tenant/views/settings/index.cshtml',        menu: 'Administration.Settings.Tenant'    });}

路由定义防止用户通过在浏览器地址栏中输入URL来访问未经授权的页面。menu 的设置让我们在激活该路由时让菜单进行高亮显示。

如你所见,.cshtml是视图文件。同时,.html文件也可以使用。.cshtml文件可以允许我们利用Razor来创建视图。

布局

应用布局文件放在common/views/layout文件夹下。在App文件夹下的所有的脚本和样式都进行了打包处理(参见 AppBundleConfig 类)。你放在该文件夹下的任何脚本和样式将自动被添加到Layout中。

这里写图片描述

如上图所示,布局包含几个部分。主菜单呈现在siderbar

版本管理

如果你不是开发的多租户应用,那么你可以跳过这部分。

大多数 SaaS(多租户)应用版本包含不同的功能集。那么我们怎么根据不同的价格向租户提供不同选择呢。Editions page (管理员登录可见)就是用来管理应用程序版本的。

这里写图片描述

版本用于组合不同的功能然后提供给租户。当点击操作/修改时,可以看到该版本的功能

这里写图片描述

当前项目仅包含Chat功能,他们可以针对版本/租户进行启用或禁用。所有的功能都在 AppFeatureProvider 类里面定义。功能的值被存放在 AbpFeatures 表里。功能不仅可以是布尔值(禁用/启用),它还包含了很多不同的类型,如下图:

这里写图片描述

查看功能管理和版本管理文档了解更多内容。

租户管理

如果你不是开发的多租户应用,那么你可以跳过这部分。

如果是多租户应用,管理员登录后可以看到租户管理页面:

这里写图片描述

租户由 Tenant 表示。租户类可以通过添加新的属性进行扩展。最初,只有一个 Default 的租户。每一个租户的租户编码是唯一的。租户可以是激活非激活的,如果没有激活,那么该租户的所有用户将不能登录该应用。

当点击添加租户按钮,将显示下面的弹出框:

这里写图片描述

租户名称必须是唯一的,且不能包含空格或其他特殊字符,因为它可能被使用为子域名称(如,tenancyname.mydomian.com)。名字可以是任意字符。管理员邮箱作为该租户管理员的邮箱地址。Admin用户将被自动的添加到新的租户下面。你可以为admin设置随机密码并发一封激活邮件。当admin用户第一次登录时,会修改密码。你也可以不选择使用随机密码,而指定一个密码。

当创建租户时,你需要选择或创建一个数据库来存放新租户的数据。你可以选择Use host database,将租户的数据库存放至host的数据库中(单数据库模式)或者为新租户指定一个连接字符串去创建/使用单独的数据库。ASP.NET Zero支持混合模式,意思是可以让一些租户使用host数据库,而让另一些租户使用单独的数据库。甚至可以在分离的数据库中组合一些租户。

所有租户的行为都是由 TenantAppService 类来处理。例如(删除租户):

[AbpAuthorize(AppPermissions.Pages_Tenants_Delete)]public async Task DeleteTenant(EntityRequestInput input){    var tenant = await TenantManager.GetByIdAsync(input.Id);    CheckErrors(await TenantManager.DeleteAsync(tenant));}

TenantAppService 大多使用 TenantManager 领域服务来提供租户的操作。

租户版本和功能

当租户被创建或被编辑时可以指定一个版本给该租户,租户将继承指定版本的所有功能。你可以为租户重设一些属性和值。点击操作/修改参数列表来为租户自定义功能。

这里写图片描述

租户模拟

作为管理员,你可能想代表某个租户进行一些操作。在这种情况下,你可以点击一个租户的操作按钮并选择“Login as this tenant”选项

这里写图片描述

当你点击后,会弹出一个选择用户的弹出框。你可以选择任何用于并执行该用于所允许的操作。在本章中查看用户模拟了解更多。

这里写图片描述

使用租户名字作为子域名

多租户应用通常用子域名来确定当前租户,tenant1.mydomain.com, tenant2.mydomain.com 等。ASP.NET Zero自动识别并从子域名中得当租户的名字。

组织单位

组织单位(Organization units, OU)用于分组用户和实体。然后你可以根据OUs找到用户或实体。当点击管理/Organization units将会跳转到下面的页面

这里写图片描述

在这里,你可以管理你的OUs(创建,编辑,删除,移动)和成员(添加,删除)

在代码里 OrganizationUnitManager 用于管理OUs,UserManager 用来管理OU的成员。OrganizationUnitAppService 执行应用的逻辑。

在左边的OU树里,可以右键点击一个OU(或者左键点击右侧的箭头)打开OU操作的上下文菜单。当你尝试添加一个成员,会出现一个弹出框让你选择用户。

这里写图片描述

这其实是一个通用的查询模块用来查询任何类型的实体(见 App/common/views/common/lookup.js 和 corresponding view)。为了选择用户,你在CommonLookupAppService 里创建了一个 FindUser的方法,然后配置模态窗口和该方法一起工作(见 organizationUnits/index.js 文件里使用lookupModal.open)

查看组织单元管理文档了解更多内容。

角色管理

当点击管理/角色菜单时,将会跳转到角色管理页面:

这里写图片描述

角色用于组权限。当用户拥有一个角色,他/她将拥有该角色的所有权限。

角色由Role类来表示,角色类可以通过添加新的属性来进行扩展。

RoleManager 执行领域层逻辑;RoleAppService 执行角色的应用层逻辑。

角色可以是动态的或静态的:
- 静态角色:静态角色有一个明确的名称(如 Admin)并且你不能修改(可以修改显示名字)。它在系统启动时就被创建且不能被删除,从而使我们能在代码里依赖不变的静态角色名。
- 动态角色:当应用程序部署后你可以创建动态角色。然后,你可以授权该角色的权限,将该角色分配给用户,并且可以删除它。显然,在开发的时候不能依赖动态角色的名称。

一个或多个角色可以被设置为默认。默认角色将被默认的赋予新添加或注册的用户。这不是开发阶段需要设计的,可以在部署后进行设置或修改。

在启动项目中,管理员用户有一个静态的 Admin 角色(多租户应用)。此外,每个租户也有一个静态admin 和 user 角色。Admin 角色默认拥有所有的权限。User 角色默认没有任何权限,且会被赋予每一个新用户。这些都很容易就行修改,所有静态角色查看 StaticRoleNames 类,改变静态角色查看AppRoleConfig

角色权限

由于角色用于分组权限,您可以在创建或编辑时设置角色的权限,如下所示:

这里写图片描述
(上图并没有完全展示所有权限)

每一个租户拥有其自己的权限,并且改变后不会影响其他的租户。当然,管理员也拥有独立的权限。

用户管理

当点击管理/用户菜单时,将会跳转到用户管理页面:

这里写图片描述

用户可以登录到应用程序,并根据其权限进行一些操作。

用户由 User 类进行表示,用户类可以通过添加新的属性来进行扩展。

UserManager 执行领域层逻辑; UserAppService 执行用户的应用层逻辑。

一个用户可以拥有0个或多个角色。如果一个用户拥有一个以上角色,他/她继承所分配角色的所有权限。此外,你也可以为用户设置特定的权限。特定的用户权限将覆盖此角色的权限设置。用户权限对话框的截图(没显示完)

这里写图片描述

创建或编辑用户的对话框:

这里写图片描述

你可以修改用户的密码,让用户激活或非激活等等。用户自己可以上传个人的头像。Admin 用户不能被删除。如果你不想使用Admin用户,你可以让其非激活。

用户模拟

作为管理员(或其他允许的用户),在不知道对方密码的情况下,你可能想代表某个用户登录并进行一些操作。你可以点击一个用户的操作按钮并选择“Login as this user”选项

这里写图片描述

当你点击后,你将自动重定向并作为此用户登录,这就叫“用户模拟”。当你模拟一个用户时,“Back to my account”将被添加到用户配置菜单里。

这里写图片描述

当你模拟一个账号时,你只能执行该账号所允许的操作。这意味着,如果你就和本人登录完全一样。唯一不同的是,审计日志将表明操作由其他人执行。注意,有一个红色的返回按钮表示你正模拟另一个用户。

模拟是在 AccountController 中完成的。

语言管理

语言管理页面用于管理(添加/编辑/删除)应用程序的多语言和修改本地化文本。

这里写图片描述

你可以创建新的语言,编辑/删除已经存在的语言并且设置默认语言。当你点击“改变文本信息”时,你会跳转到新的视图去编辑你的本地化文本:

这里写图片描述

你可以选择任何语言作为基准(参考),并改变目标语言的文本。因为可能有不同的本地化来源,你选择源来进行翻译。当点击修改图标时,将会弹出以下模式框:

这里写图片描述

管理员可以编辑语言和本地化文本,并在多租户应用中默认将这些这些语言提供给所有租户使用。租户继承语言和本地化文本,并可以覆盖本地化文本或者添加新的语言。

两个页面都用 LanguageAppService 类作为应用层服务。它提供了方法来管理语言和本地化文本。IApplicationLanguageManagerIApplicationLanguageTextManager 接口用来实现领域层逻辑。

查看语言管理文档了解跟多信息

审计日志

审计日志页面显示所有用户的操作。

这里写图片描述

所有的应用服务方法和MVC 控制器的操作自动被记录,并且可以在这里进行查看。查看审计日志文档了解如何配置。当你点击放大镜图标,你可以查看每条日志的消息信息。

这里写图片描述

审计日志报告由 AuditLogAppService 类提供。

管理员设置

管理员设置页面用来配置一些系统设置:

这里写图片描述

Timezone 在这个页面里是一个重要设置。ASP.NET Zero 可以在多个时区运行。修改很简单,默认启动的解决方案没有启用UTC时区。查看时区文档了解如何修改。

当你切换至UTC日期时间,所有日期时间将默认按照UTC来存储,但每个用户可以在自己的时区里查看日期和时间。在这个页面里时区设置允许你的应用程序,包括所有的租户和用户设置默认时区。租户和用户可以在自己的设置里面修改时区。

在管理员设置页面里,也包含其他的设置项。点击保存全部按钮来保存所有更改。HostSettingAppService 用来检索和保存设置。

Security 标签页包含密码复杂度的设置。在这个标签页里管理员可以定义系统范围内密码的复杂度。每个租户可以在租户设置里更改该设置。PasswordComplexityChecker 类负责检查密码是否满足密码复杂度的设置。

这里写图片描述

租户设置

在多租户应用里,租户设置如下图所示:

这里写图片描述

如果禁用多租户,一些管理员设置也会显示到该页面上(由于没有管理员设置页面)。租户也可以为他的用户定义密码复杂度或者直接使用管理员所定义的密码复杂度。

TenantSettingAppService 用于获取/设置 租户的设置。

启用LDAP(活动目录,AD)认证

LDAP(活动目录,AD)认证默认被禁用。为了使它工作,需要禁用多租户模式,因为AD认证不能在多租户模式下正常使用。在.Core项目下的CoreModule类里面,你可以通过下面的代码启用它 。

Configuration.Modules.ZeroLdap().Enable(typeof(AppLdapAuthenticationSource));

然后你可以在该页面中看到LDAP设置

这里写图片描述

你可以点击“Enable LDAP Authentication”启用它。如果服务器在域模式下,而应用程序使用域用户或本地系统运行,则通常不需要设置域名,用户名及密码。你可以注销,然后登录你的用户名和密码。如果没有,你可以设置此信息。

维护

维护页面只对管理员可用:

这里写图片描述

Cache 标签页里,你可以清空一些或所有缓存。如果手动更改数据库并希望刷新应用程序缓存,则可能需要清除缓存。在服务端CachingAppService 用来清除缓存。

Website Log 标签页用来查看或下载日志:

这里写图片描述

WebLogAppService 用来从服务端获取日志。

租户仪表板

ASP.NET Zero 启动项目中包含了一个仪表板的示例。它只是用于演示,你可以以它作为其他实现你的仪表板:

这里写图片描述

这里,MEMBER ACTIVITY 的数据是从服务器上获取的(通过 TenantDashboardAppService),你可以点击REFRESH按钮重新生成随机图表。

通知

通知图标位于语言选择按钮旁边。在红色的圈数显示未读通知数。

这里写图片描述

点击这个图标用户可以看到三个最近的通知。

这里写图片描述

用户可以通过点击“设置为所有读”来标记所有的通知,或者通过单击每个通知旁边的“设置为已读”来标记一个通知。

通知设置

点击设置将打开以下对话框

这里写图片描述

在这个对话框中有一个全局设置,用户启用/禁用接收通知。如果启用此设置,则用户可以单独启用/禁用每个通知。

你也可以在 AppNotificationProvider 类里面自定义通知。例如,新用户注册通知

context.Manager.Add(     new NotificationDefinition(        AppNotificationNames.NewUserRegistered,        displayName: L("NewUserRegisteredNotificationDefinition"),        permissionDependency: new SimplePermissionDependency(AppPermissions.Pages_Administration_Users)    ));

参见通知定义了解更多。

通知列表

所有用户消息都在下面的列表中

这里写图片描述

对话

聊天图标位于页面右上角的用户头像的旁边。在红色的圈数显示未读消息总计数。

这里写图片描述

当用户单击此图标时,页面右侧会出现一个聊天面板。此面板包含用户的朋友列表和阻止用户的列表。

这里写图片描述

用户可以通过在好友列表上方输入用户名来添加新的好友。如果“Chat with other tenant”功能为启用了,通过输入[租户名\用户名](如:Default\admin),那么租户之间的用户也可以互相添加成为好友。如果“Chat with host user” 功能启用了,通过输入.\用户名,管理员也可以被添加成为好友。

在线的好友/用户在他们的头像左下角有一个绿色的圆圈;离线的则是灰色的圆圈。

用户通过点击聊天面板上右上角的大头针图标,进行固定或解除固定聊天。应用程序将记住聊天面板的最后状态,并在用户登录到应用程序时还原它。

当好友/用户被选中时,对话框将会被打开。

这里写图片描述

用户可以在这里阻止或解除阻止好友或其他用户。在选定的用户名右侧有一个扳手图标。点击这个图标打开一个菜单,根据目标用户的是否被阻止情况会显示“阻止用户”或“解除阻止用户”的选项。

聊天消息通过 使用了ChatMessageManager 领域类的ChatHub SignalR hub 类进行分发。

ChatUserStateWatcher 类负责监听聊天用户的在线/离线状态变化。当用户从在线变为离线,或相反。这个类就会通知这个用户的好友。

FriendshipAppServiceFriendshipManager 类负责管理加好友的请求。如果聊天信息来自于被阻止的用户,那么该消息不会被传递给目标用户。

因为聊天是一种实时操作,应用将为每个用户缓存在线好友和未读信息的数量。UserFriendsCache 类用来管理这些缓存操作。

UserFriendCacheSyncronizer 类负责保持到目前为止的好友缓存。为了做到这一点,它将监听 FriendShip 和 ChatMessage 实体的一些事件。

聊天功能

这里写图片描述

在这个系统里有三个聊天功能。”Chat”,”Chat with host”,”Chat with other tenants”。这些功能可以为每个版本或租户,启用或禁用。通过使用这些功能,管理员可以启用或禁用跟其他租户的用户或管理用户聊天。

用户菜单

用户可以通过点击右上角的头像打开用户菜单。

这里写图片描述

关联账号

关联账号用于关联彼此的多个账号。用户可以通过使用此功能轻松的浏览他/她的账号。

用户可以点击 Manage accounts 来添加新的账号或删除账号。

这里写图片描述

为了添加一个新的账号,用户必须输入相关帐户的登录凭据。

这里写图片描述

UserLinkAppService 类用来管理用户关联的应用层逻辑。UserLinkManager 类用来管理用户关联的领域层逻辑。

用户设置

我的设置用来修改用户自己的基本信息设置。

这里写图片描述

如图所示,admin用户的名字是不能被修改的。它被认为是一个特殊的用户名,因为它被适用于数据库迁移的种子。其他用户可以修改他们的用户名。ProfileAppService 用来获取/更改 设置

登录尝试

所有登录尝试(成功或失败)都记录到应用程序中。用户可以看到他/她的帐户最后的登录尝试的记录。UserLoginAppService 用来获取服务端的登录尝试记录。

这里写图片描述

修改头像

用户可以修改自己的头像。ProfileController 用于上传或获取他们的头像。Angular file upload 模块用于选择和上传头像至服务器。目前,支持JPG,JPEG,GIF和PNG文件,也可以扩展允许上传的文件扩展名。

更改密码

ProfileAppService 用于更改密码。

注销

AccountController 用于提供用户注销操作并跳转至登录页。

1 0
原创粉丝点击