基於AngularJs的單頁面程序


基於AngularJs的單頁面程序

在Abpzero的后台管理系統是一個AngularJs的單頁面程序。當你登陸后,系統會跳轉到“ApplicationController”,然后再返回到視圖的布局頁面(模板頁)。

注意: 多頁面版本是基於MVC和JQuery的我們后續會提到。

應用層的文件夾:

image

這里有三個主要的文件夾:

  • common : 包含了host和tenants 雙方用戶公用的資源。
  • host: host用戶也就是上帝視角的特定資源文件。
  • tenant: 包含了一些特定租戶的資源文件。

所以當我們的視圖、services、images、等文件是租戶和host共同使用的時候。建議將他們放到common文件夾中。

主菜單

主菜單可以在 AppNavigationProvider 中定義。他的位置自己從圖中找哈。如果想對菜單配置文件的有更加深入的了解呢,可以從ABP的文檔中"導航菜單"查找。

路由

app.js是SPA管理程序的入口。我們在這定義Angular的模塊和Angular的路由。路由是動態的基於當前用戶所擁有的權限,如果你有權限可以看到菜單反之則看不見,具體可以參考(授權部分)。
示例代碼:

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: 表示路由訪問時,如果有權限的話,會顯示到視圖上。

雖然.html文件也可以用來當做視圖,但是跟.cshtml相比。.cshtml文件可以使用更加強大的razor語法來渲染,這個是html所不具備的。

LAYOUT布局 模板文件

模板頁位置/common/views/layout 所有的js、樣式表的引用都在模板頁中,可以參見“AppBundleConfig ”類。
如果你有新的css或者是js文件都可以放到app中的指定的文件夾,這樣他們就可以自動引用到 layout視圖模板頁中。

image

后台管理的左側邊欄就是由上圖組成。

版本控制

如果你是單租戶模式可以選擇不用看它。

大多數的 Sass(多租戶) 程序中都有版本控制,它可以使得租戶們擁有各自的特點。

這樣的好處是:你可以提供不同的價格和功能讓租戶們選擇。

登錄host 版本,上帝視角 可以進行版本管理:

image

版本是通過分組的方式將特定的功能分配給租戶。
當我們點擊“actions”時,可以看到:

image

ABPZERO制作了3個簡單的示例版本。你可以通過刪除所有的版本,來創建一個屬於你自己的版本功能庫。

所有的功能可以在“AppFeatureProvider ”類中定義。

這里功能存儲在數據庫表“AbpFeatures ”中。

你可以參閱ABP文檔 “特征管理”“版本管理”文檔來了解深層次的信息

租戶管理

還是那句話,你如果不是開發多租戶系統,可以不用看它。

當你從上帝視角登錄后,Host模式。在你后台管理中找到以下功能:

image

租戶是由“Tenant”類來實現。在租戶類中可以給租戶添加新的拓展屬性。
目前由有一個默認租戶,租戶名稱:“Default”。 租戶名稱是唯一的不會重復。
租戶可以是“active”或者“passive”的狀態。如果是“passive”狀態租戶用戶就無法登陸到程序中。(親:你的程序需要付費了哦。不然封號了。)

創建一個新的租戶

點擊“Create new Tenant”按鈕
image

  • "Tenancy name" 必須是唯一的並且不能包含任何的空格和特殊字符。因為它可能作為子域名比如:tenancyname.mydomain.com 。
  • “ Name” 這里就開心就好,公司名稱,項目名稱都可以。
  • “Admin Email” 作為新租戶系統的管理員電子郵件。系統會自動給它創建一個管理員並且會發送一個帶了隨機密碼的賬號發送到該電子郵件中。當用戶首次登陸的時候,會要求他更改密碼。當然這個功能也是可選的

當我們創建一個的租戶系統的時候,我們可以選擇使用跟“Host”數據庫一起使用(單數據庫多租戶模式)。也可以單獨給租戶配置一個獨立數據庫。ABPZERO支持“hybrid”方法。這個意味着你可以將租戶和host分開,甚至你可以建立一個group組來區分租戶們。
是不是有一種雲主機的感覺啊。

所有的租戶功能都是由“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領域類中的方法來實現管理租客行動。

租客版本控制和功能管理

當編輯或者新建一個租戶的時候,可以分配一個版本給它。租戶將繼承分配版本的所有功能。當然我們也可以重寫分配給租戶的功能。

下圖就是重新給一個租戶分配一個個性化的功能。

image

模擬租戶登錄

作為Host的用戶,我們可以測試下租戶的功能。在這種事情,可以點擊“actions” 按鈕,選擇“login as this tenant” 選項
作為選擇的租戶登錄。

image

點擊后,我們就是該租戶系統的用戶了。我們可以選擇任何該用戶權限內的可以做的任何事情。詳情可以參考“用戶模擬”章節

將租戶名稱用做子域名

激動不。
多租戶系統,通常使用子域名來標識當前的房客。如:tenant1.yoyocms.com、tenant2.yoyocms.com 等等。 ABPZERO 只需要你在 “host settings section” 中配置下,就可以自動實現。

組織單位

組織單位(OU) 用於區分不同的分組不同的用戶,然后得到他們分組目錄下的用戶信息。當我們點擊進入時:

image

在這里我們可以(創建、編輯、移動、刪除)組織單元以及對成員的(添加、刪除)

OrganizationUnitManager 用於管理組織單位

UserManager 可以對處於OU中的用戶進行管理

OrganizationUnitAppService 執行具體的業務邏輯

PS:這里大家要明白ABP框架中service和manager的區別。不然你會吃虧的(譯者)

在左邊的 OU 樹中,我們可以操作菜單欄。如果要添加某一個用戶,選中它就可以了。

image

這里的搜索框實際上是個通用搜索模式。你可以用來選擇任何類型的實體
見(App/common/views/common/lookup.js 和對應的視圖文件)。

我們在CommonLookupAppService類中創建一個FindUsers方法,然后通過實現該方法來選中你需要的用戶信息。見( organizationUnits/index.js 文件 中對lookupModal.open的用法)

更加詳細的資料可以參考 “ organization unit management document ”文檔。

角色管理

當我們點擊 角色管理 時,進入角色管理頁面:
image

角色會用到 **group **權限。當一個用戶擁有某一個角色時,該用戶可以使用該角色下的所有權限。

角色是通過 Role類來實現的。你可以對ROle類添加新的拓展方法。

RoleManger 處理領域層的邏輯。

RoleAppService 執行業務層的邏輯。

角色可以是動態或靜態:
  • 靜態角色:一個靜態角色有一個默認名字(如:“admin”),這個名字不可以更改。(我們可以更改顯示的昵稱)。它是默認在系統啟動時就存在了的,並且無法被刪除。因此我們可以在靜態角色名稱上寫代碼。
  • 動態角色:我們在程序部署后創建一個動態角色。然后我們可以授予該角色權限,我們可以將這個角色分配給某些用戶,我們可以將該角色刪除。
默認角色:

我們可以將一個或者多個角色設置為默認角色。默認角色可以分配給新添加/注冊用戶的默認值。該功能推薦在部署項目后設置。

在啟動項目中,我們的Host(上帝模式)有一個靜態角色“Admin”(國內感覺叫系統角色聽起來更加的順耳)。同時我們也給租戶們分配了兩個靜態角色分別為:”admin“和”user“。”admin“顧名思義,可以管理所有租戶系統的功能。”user“角色是為默認角色沒有權限,每一個新建的用戶都會繼承”user“角色。
當然我們可以從“StaticRoleName”類中查看所有的靜態角色,AppRoleConfig對靜態角色進行修改。

角色權限

因為角色使用了組權限,我們可以通過創建、編輯權限來控制角色見下圖(該處未顯示所有權限):

image

每一個租戶都有他自己的角色,角色發生變化的時候,不會影響到其他租戶。
PS:Host的角色也是獨立的,不會產生沖突。

用戶管理

我們點擊“用戶管理” ,看到如下界面:
image

用戶可以登錄到后台執行某些操作,這個和你分配給他的權限有關。

user通過User類實現。你可以對User類添加新的拓展方法。

UserManger 處理領域層的邏輯

UserAppService 用於處理業務中的邏輯

用戶可以擁有0個或者多個角色,沒有強制要求。如果他有多個權限將擁有這些角色所有的權限。我們可以給用戶單獨分配特定的 權限。分配了特定權限的用戶會覆蓋掉已經擁有角色設置。見下圖:

image

編輯用戶對話框:

image

我們可以修改用戶的密碼,設置他的 角色為動態或者是靜態的等等。用戶有一個頭像。
用戶可以自己修改(見:用戶菜單部分)。無法刪除admin用戶。如果你不想使用該管理員,你可以禁用掉它。

用戶模擬

作為管理員(或者擁有權限的用戶),我們可能需要某一個用戶身份進行登錄,而沒有他的密碼。那么你可以從下圖中點擊“作為該用戶”登錄:

image

當我們點擊它時,我們會自動重定向,並且以該身份登錄。
這被稱為“用戶模擬”。當我們模擬用戶,需要回到管理員身份的時候點擊“返回我的賬戶”選項,見下圖:
image

當我們模擬該用戶的時候,只能執行該用戶擁有的權限。這意味着你可以把自己當做該用戶操作。唯一的區別就是:審查日志會記錄下這個是別人操作的。

注意:返回我的賬戶時候,這里的圖片為紅色,提示你在模擬別人的賬戶。

模擬是在AccountController的web項目中完成的。

語言管理

語言管理頁面是用來管理(創建、編輯、刪除)語言和修改本地化的文本:

image
我們可以創建一種新的語言、編輯或刪除現有的語言和設置默認語言。當我們點擊“更改文本”的時候,我們會跳轉到新頁面,編輯語言文本。

image

我們可以選擇任何一種語言作為一個基類(base value)並且更改目標(target value)語言文本。你也可以參考本地化文檔,來選擇需要翻譯的源文件。

當我們點擊編輯圖標的時候,我們可以看到所選的文本編輯模式:

image

如果有權限的話,Host用戶是可以編輯語言和本地化的文本的。這些語言將做為默認語言配置給所有的租戶。
租戶繼承語言和本地化的文本可以重寫屬於自己的本地化文本,也可以添加新的語言。

這兩個網頁都使用了 LanguageAppService類作為服務程序。他具有管理語言和本地化的文本方法。

IApplicationLanguageManager 和 IApplicationLanguageTextManager 兩個接口用於領域層的業務邏輯。(如使用 LanguageAppService)。

請參閱語言管理文檔的詳細文檔。

審核日志

在審計日志頁面中,我們可以看到所有用戶的在該系統中的操作。

image

所有的應用層的服務方法和MVC控制器的操作都將自動記錄,可以此處查看。
請參閱 審核日志文件以了解如何配置使用它。

image

審核日志服務通過 AuditLogService類來實現。

HOST設置

HostSetting 頁面用來配置一些系統設置:

image
Web 站點的根地址是很重要的。尤其是在生產環境中。 {TENANCY_NAME}作為一個占位符。他是可選功能(單租戶和多租戶都適用)。
如果開啟該功能的話,目前租客名稱是自動檢測的。

為了讓子域正常的工作,我們需要在服務層中做以下兩點配置:

  1. 我們應配置DNS並且所有的子域重定向到一個靜態ip地址。
  2. 我們在配置IIS的時候,將這種靜態ip綁定到我們的項目中。

當然也可能有其他的做法,可以自行搜索,但目前這個是最簡單的做法。

該頁面另外一個重要的功能時區,ABPZERO是一個可以工作在多個時區內的程序。所有的 DateTimes 存儲都是以“UTC” 時區為默認值,每個用戶可以看到當前的時間和自己所在的時區。
當然你也可以在這個頁面默認給所有租戶以及用戶設置默認的時區。
租戶和用戶可以更改屬於自己的時區。

在主機設置中,也有其他的設置功能。點擊“全部保存”按鈕時,會保存所有的設置信息。

HostSettingAppService 是用於搜索和保存你的設置(具體可以參考 “setting provider” 中的詳細內容)。

租戶設置

在多租戶應用中,顯示的租戶設置如下圖所示:

image

如果我們禁用掉多租戶功能,某些主機設置會顯示在此頁面中(圖為沒有主機設置的頁面)

PS: 主機設置 就是HOST,也就是上文戲謔過上帝視角

下圖為EMAIL 配置信息:

image

TenantSettingAppService 是用於 查詢和設置租客的服務層

啟用 (活動目錄) LDAP 身份驗證

原標題 ENABLING LDAP (ACTIVE DIRECTORY) AUTHENTICATION 還沒有想到具體應該怎么翻譯。

默認情況下,LDAP(Active Directory)身份驗證是被禁用掉的。如果要啟動它,如果要啟用它,那么應該禁用多租戶系統。因為在通常情況下LDAP不適用於多租戶中的身份驗證。如果要啟用它。

在CoreModule類中。位於"Core"類庫中,啟用代碼:

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

然后我們就可以看到LDAP設置在頁面中的節點:

image

我們可以驗證“Enable LDAP Authentication” 啟用LDAP授權來啟動它。如果項目在生產環境中,一般是不需要設置域名、用戶名和密碼的。如果不能啟用的話,那么就需要你進行設置這些信息了。

維護

維護功能,只提供給了Host,下圖所示:

image

在“Caches”緩存選項卡中,我們可以清除一些或者所有的緩存。如果你有手動更改數據庫,或者想要手動刷項目中的緩存,就需要清除緩存。

CacheingAppService 可以用來清除緩存的服務層。

網站日志 選項卡可用來查看和下載日志:
image

WebLogAppService 服務層可以獲取日志記錄

租戶工作台(儀表盤)

ABPZERO 啟動項目中包含了示例儀表盤,它僅用來演示而已,當然你可以用來作為你真實項目的起點。
image

此頁面中,只有“Member Activity” 數據是從服務器查詢出來的(從 TenantDashboardAppService)。你可以單擊刷新按鈕以生成隨機頭像。

通知

通知圖標位於語言選擇按鈕旁邊。紅色圓圈中的數據顯示未讀的通知計數。

image

用戶可以通過點擊此圖標查看最近的3條通知。

image

用戶可以標記所有通知為已讀通過點擊“set all as read”(標記為全部已讀),或者通過點擊每個通知旁邊的“已讀”鏈接來標記單個通知。

通知設置

“設置”鏈接打開通知設置對話框。

image

在此對話框中還有對用戶設置“啟用/禁用”接收通知的全局設置。
如果啟用了此設置,用戶可以對每個通知進行“啟用/禁用”。

AppNotificationProvider 類中進行自定義通知。
新用戶的注冊通知也是在AppNotificationProvider類中定義,如下圖所示:

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

具體可以參考文檔“通知定義”的詳細文檔。

AppNotifier類用來發布通知。
NotificationAppService用來管理通知的應用層邏輯。

具體可以看“通告文檔”

通知列表

在此頁面中列出了用戶的所有通知。

image

用戶菜單

image

關聯賬戶

關聯賬戶是將多個賬戶關聯在一起。

以這種方式,用戶可以通過“關聯賬戶”功能來瀏覽他/她的帳戶。

當用戶要鏈接新的帳戶時,或通過單擊“管理賬戶”鏈接來刪除已關聯的帳戶。
image

當要關聯一個新的賬戶時,用戶必須輸入相關賬戶的登錄憑據。

image

UserLinkAppService類是用於管理服務層中邏輯的,

UserLinkManager類是用於管理領域層中的邏輯。

個人設置

image

此處除開“admin”用戶名,因為他是數據庫中的默認值。其他的用戶可以自行修改用戶名。
username此項已經做了正則判斷,不能輸入特殊字符。

控制該功能的類為:ProfileAppService

登錄信息

當我們登錄成功的時候,就可以本次登錄成功的信息,以及上次登錄失敗的信息。

以上信息均從 UserLoginAppService 獲取
image

圖片更改

用戶可以更改自己的頭像。
ProfileController 控制器有上傳和獲取用戶頭像。Angular file upload模塊可以選擇上傳圖片到服務端。目前該功能只支持jpg/jpeg兩種格式,你可以對它進行拓展。

更改密碼

ProfileAppService 用戶更改密碼

注銷

AccountController 注銷用戶和重定向到登錄頁。


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM