簡介

       經過前幾節,我們已經解決資料庫,模型,DTO,控制器和注入等問題.那麼再來看一下登入邏輯.這裡算是前面幾節的一個初次試水.

首先我們資料庫已經有的相應的資料.

新增Login方法     

  模型和DTO已經建好,所以我們直接在服務層新增Login方法就可以了.

注入IUserService介面

在展現層新增Account控制器,注入IUserService介面,呼叫Login方法.

新增檢視頁面.

  然後新增檢視頁面.

 效果

    執行一下,看一下結果.

   注意事項

除了頁面比較漂亮(哈哈),這些本來都沒有什麼好說的,直接上圖,

這裡值得注意的是,我們在建立下面的方法,在呼叫介面的的時候會報一個錯誤:web的App_Data/Logs/Logs.txt日誌檔案中檢視到列印到錯誤資訊。

     public async Task<ListResultDto<UserInfoDto>> GetUsers()
        {
            var users = await _userRepository.GetAllListAsync();

            return new ListResultDto<UserInfoDto>(
                users.MapTo
 
<List<UserInfoDto>>()
                );
        }

        錯誤提示: Mapper not initialized. Call Initialize with appropriate configuration. If you are trying to use mapper instances through a container or otherwise, make sure you do not have any calls to the static Mapper.Map methods, and if you're using ProjectTo or UseAsDataSource extension methods, make sure you pass in the appropriate IConfigurationProvider instance.

       意思是:對映器未初始化。 通過適當的配置呼叫初始化。 如果您嘗試通過容器或其他方式使用對映器例項，請確保您沒有任何呼叫靜態Mapper.Map方法，如果您使用ProjectTo或UseAsDataSource擴充套件方法，請確保您傳入相應的IConfigurationProvider例項。

原因:Mapper not initialized 對映未初始化

解決:在ApplicationModule類中增加依賴typeof(AbpAutoMapperModule)即可。

using System.Reflection;
using Abp.Modules;
using Abp.AutoMapper;

namespace JCmsErp
{
    [DependsOn(typeof(JCmsErpCoreModule), typeof(AbpAutoMapperModule))]
    public class JCmsErpApplicationModule : AbpModule
    {
        public override void Initialize()
        {
            IocManager.RegisterAssemblyByConvention(Assembly.GetExecutingAssembly());
        }
    }
}

    另外上面這個提示窗是不是很漂亮,登入頁面的設計樣式都是自己寫的,自己這個彈窗,只是abp自己封裝.我們來看一下具體的程式碼.

  abp.message.confirm(
                     '請輸入密碼.', //確認提示
                     '確定?',//確認提示（可選引數）
                     function (isConfirmed) {
                         if (isConfirmed) {
                             //...delete user 點選確認後執行
                         }
                     }
                 );

 其實abp封裝很多js函式庫,這讓我不得不感嘆土牛(土耳其牛人)真是牛啊!看下圖左邊部分js檔案

        包括像abp.jquery.js,ABP服務端支援標準的ajax的請求/輸出。建議大家使用abp.jquery.js中提供的ajax請求方法，這個方法基於jquery的ajax方法，可以自動處理服務端的異常資訊，當然，如果你對js很熟練的話，也可以根據自己的需要寫ajax。你也可以使用jquery的ajax方法呼叫，但是需要設定一下預設請求引數，dataType 設定為 'json', type 設定為 'POST' and contentType 設定為 'application/json，在傳送請求時需要將js物件轉換成json字串，和$.ajax一樣，你也可以傳遞引數覆蓋abp.ajax的預設引數abp.ajax返回一個promise型別.Login上標記了 HttpPost 特性 abp.ajax預設以 POST 方式請求. 返回值被簡化成了一個匿名物件。

  abp封裝的Javascript函式庫

訊息

用於向用戶顯示對話方塊，展示訊息或者得到使用者的確認,ABP預設採用的sweetalert庫實現的對話方塊資訊，使用時你需要引用sweetalert的樣式和js，在我的登入頁面裡面已經引用了,並且引用abp.sweet-alert.js就可以使用下列API了:

abp.message.info('some info message', 'some optional title');
abp.message.success('some success message', 'some optional title');
abp.message.warn('some warning message', 'some optional title');
abp.message.error('some error message', 'some optional title');

abp.message.confirm(
    'User admin will be deleted.', //確認提示
    'Are you sure?',//確認提示（可選引數）
    function (isConfirmed) {
        if (isConfirmed) {
            //...delete user 點選確認後執行
        }
    }
);

使用者介面的繁忙提示

設定一個半透明層，阻止點選頁面元素，可以覆蓋區域性或者整個頁面，例子如下:

abp.ui.block(); //覆蓋整個頁面
abp.ui.block($('#MyDivElement')); //覆蓋指定元素，可以把jquery物件作為引數
abp.ui.block('#MyDivElement'); //或者直接使用選擇器引數
abp.ui.unblock(); //整個頁面解除覆蓋
abp.ui.unblock('#MyDivElement'); //指定元素解除覆蓋

UI Block API使用blockUI這個js庫來實現效果的，如果使用這個api需要在頁面引用blockUI的js庫和abp.blockUI.js檔案。

UI Busy API 指示頁面繁忙的API，如ajax請求中:

    abp.ui.block = function (elm) {
        if (!elm) {
            $.blockUI();
        } else {
            $(elm).block();
        }
    };

    abp.ui.unblock = function (elm) {
        if (!elm) {
            $.unblockUI();
        } else {
            $(elm).unblock();
        }
    };

abp.ui.setBusy('#MyLoginForm');
abp.ui.clearBusy('#MyLoginForm');

Js日誌介面

這個主要是對瀏覽器console.log('...') 進行的包裝，可以支援所有瀏覽器，你可以通過設定abp.log.level來控制日誌輸出，和服務端一樣，如設定了abp.log.levels為INFO時就不會輸出debug日誌了，你也可以根據你的需要定製重新這些API。

    abp.notify.success = function (message, title, options) {
        abp.log.warn('abp.notify.success is not implemented!');
    };

    abp.notify.info = function (message, title, options) {
        abp.log.warn('abp.notify.info is not implemented!');
    };

    abp.notify.warn = function (message, title, options) {
        abp.log.warn('abp.notify.warn is not implemented!');
    };

    abp.notify.error = function (message, title, options) {
        abp.log.warn('abp.notify.error is not implemented!');
    };

格式化字串(abp.utils.formatString)

    和C#的string.Format一樣的用法

    /* Formats a string just like string.format in C#.
    *  Example:
    *  abp.utils.formatString('Hello {0}','Tuana') = 'Hello Tuana'
    ************************************************************/
    abp.utils.formatString = function () {
        if (arguments.length < 1) {
            return null;
        }

        var str = arguments[0];

        for (var i = 1; i < arguments.length; i++) {
            var placeHolder = '{' + (i - 1) + '}';
            str = abp.utils.replaceAll(str, placeHolder, arguments[i]);
        }

        return str;
    };

  最後,當然我們登入頁面也可以改一下.這樣就更簡潔了.

       var url = "/Account/Login";
            //構建要傳輸的引數物件
            var newPerson = {
                userName:$("#userName").val(),
                password:$("#password").val() }
            };
            //呼叫abp的ajax方法
            abp.ajax({
                url:url,
                data: JSON.stringify(newPerson) //轉換成json字串
            }).done(function (data) {
                abp.message.warn('使用者名稱或密碼錯誤!', '登入失敗');
            });

至此,我們登入邏輯,和JavaScript封裝模組就全部完成了,其實abp提示窗還蠻好看的,大家也可以借鑑一下在自己的專案裡面.

AJAX操作問題

現代的應用經常會使用AJAX，尤其是單頁應用，幾乎是和伺服器通訊的唯一手段，執行AJAX通常會有以下步驟：

• 基本上：為了執行一個AJAX呼叫，首先你要在客戶端提供一個可供請求的URL，選取提交資料和一個方法（GET,POST,PUT,DELETE）。

• 等待呼叫完成後，處理返回結果。當執行AJAX呼叫伺服器端的時候，可能會有錯誤(一般是網路錯誤)。當然也有可能是伺服器端產生了一些錯誤，對於這些錯誤會，伺服器會返回一個失敗的響應並且附上錯誤訊息給客戶端。

• 客戶端程式碼應該處理這些錯誤，並且可以選擇通知使用者(可以顯示一個錯誤對話方塊)。如果沒有錯誤且伺服器端返回了資料，客戶端必須處理它。還有你應該限制頁面的某個區域(或者整個頁面)，並顯示一個忙碌的指示直到AJAX操作完成。

• 伺服器端在得到請求後執行伺服器端程式碼，捕獲異常並返回一個有效的響應給客戶端。在錯誤情況下，可以選擇傳送錯誤訊息給客戶端。如果是驗證錯誤，伺服器端可以新增驗證錯誤的驗證資訊。在成功情況下，可以傳送返回值給客戶端。

ABP的方式

由於使用 abp.ajax 函式對AJAX呼叫進行了封裝， 所以ABP能自動化這些步驟。下面是一個AJAX呼叫示例：

var newPerson = {
    name: 'Dougles Adams',
    age: 42
};

abp.ajax({
    url: '/People/SavePerson',
    data: JSON.stringify(newPerson)
}).done(function(data) {
    abp.notify.success('created new person with id = ' + data.personId);
});

abp.ajax得到 options 作為物件。你可以傳遞任何有效的jQuery的 $.ajax 函式中的引數。有一些預設引數：dataType 是 json，type是 POST，還有 contentType是 application/json(在傳送資料到伺服器端之前，我們需要呼叫 JSON.stringify 將指令碼物件轉換為JSON字串)。通過對apb.ajax傳遞options可以覆蓋預設值。

abp.ajax返回promise。因此，你可以寫這些處理函式：done，fail，then等等。在這個例子中，我們對 PeopleController's SavePerson action 傳送了一個簡單的AJAX請求。在 done 處理函式中，我們對新建立的person取得了它的主鍵id並且顯示了建立成功的通知。讓我們看看 MVC Controller：

public class PeopleController : AbpController
{
    [HttpPost]
    public JsonResult SavePerson(SavePersonModel person)
    {
        //TODO: 儲存新建立的person到資料庫並且返回person的id
        return Json(new {PersonId = 42});
    }
}

正如你猜測的 SavePersonModel 包含了Name和Age屬性。SavePerson 被標記為 HttpPost 特性，因為abp.ajax預設方法是POST。通過返回了匿名物件簡化了方法實現。

這個看上去很簡單直白，但是ABP在背後做了很多重要的處理。讓我們深入瞭解一下：

AJAX 返回訊息

即使我們直接的返回了一個帶有PersonId = 2 的物件，ABP也會使用 MvcAjaxResponse 物件來包裝它。事實上AJAX響應返回的內容應該像下面一樣：

{
  "success": true,
  "result": {
    "personId": 42
  },
  "error": null,
  "targetUrl": null,
  "unAuthorizedRequest": false,
  "__abp": true
}

在這裡所有的屬性都是駝峰命名的(因為這在JavaScript中是慣例)，即使在服務端程式碼中是PascalCased的。下面解釋一下所有的欄位：

• success：boolean型別的值(true或者false)，用來表示操作的成功狀態。如果是ture，abp.ajax會解析該promise並且呼叫 done 函式。如果是false(在方法被呼叫的時候，如果有個異常被丟擲)，它會呼叫 fail 函式並且使用 abp.message.error 函式顯示 error 訊息。

• result：控制器的action的實際返回值。如果success是ture並且伺服器傳送了返回值那麼它才是有效的。

• error：如果success是false，這個欄位是一個包含 message和details 欄位的物件。

• targetUrl：如果需要的話，這提供了一種可能性：伺服器端傳送一個URL到客戶端，使客戶端可以重定向到其它的URL。

• unAuthorizedRequest：這提供了一種可能性：伺服器端傳送通知給客戶端該操作未被授權，或者是未認證使用者。如果該值是true，那麼abp.ajax會 reloads 當前的頁面。

• __abp：通過ABP包裝響應返回的特殊簽名。你自己不需要用到它，但是abp.ajax會處理它。

這種格式的物件會被 abp.ajax 函式識別且處理。abp.ajax會得到控制器的實際返回值(一個帶有personid屬性的物件)，如果沒有錯誤的話，那麼你會在done函式中處理返回值。

處理錯誤

正如上面所述，ABP在伺服器端處理異常，並且返回一個帶有錯誤訊息的物件。如下所示：

{
  "targetUrl": null,
  "result": null,
  "success": false,
  "error": {
    "message": "An internal error occured during your request!",
    "details": "..."
  },
  "unAuthorizedRequest": false,
  "__abp": true
}

正如你看到的，success是false 並且 result是null。abp.ajax處理這個物件，並且使用abp.message.error函式來顯示錯誤訊息給使用者。如果你的伺服器端程式碼丟擲了 UserFriendlyException 型別的異常。它會直接的顯示異常資訊給使用者。否則，它會隱藏實際的錯誤(將錯誤寫入日誌)，並且顯示一個標準的“伺服器內部錯誤...”資訊給使用者。所有的這些都是ABP自動處理的。

你可能想為某個特別的AJAX呼叫禁止顯示訊息，那麼新增 ** abpHandleError: false** 到 abp.ajax的options。

HTTP狀態碼

在異常發生的時候，ABP會返回給定的HTTP狀態碼：

• 401：未經身份驗證的請求(沒有登入，但是伺服器端需要身份驗證)；

• 403：未授權的請求；

• 500：所有其它型別的異常。

 WrapResult和DontWrapResult特性

使用 WrapResult和DontWrapResult 特性，可以對控制器的某個action或者所有的action來控制包裝。

ASP.NET MVC 控制器

如果返回的型別是 JsonResult(或者Task<JsonResult>)，那麼ABP會預設包裝ASP.NET MVC action的返回結果。你可以使用 WrapResult 特性來改變它。如下所示：

public class PeopleController : AbpController
{
    [HttpPost]
    [WrapResult(WrapOnSuccess = false, WrapOnError = false)]
    public JsonResult SavePerson(SavePersonModel person)
    {
        //TODO: 儲存新建立的person到資料庫並且返回person的id
        return Json(new {PersonId = 42});
    }
}

作為一個快速開發方式，我們只能使用 [DontWrapResult] 特性在這個相同的示例上。

你可以在啟動配置裡面改變這個預設的行為(使用 Configuration.Modules.AbpMvc()...)。

ASP.NET Web API 控制器

如果action被成功執行，ABP 不會預設包裝 Web API Action的返回結果。如果需要的話，你可以新增WrapResult特性到action或者控制器上。但是它會 包裝異常。

你可以在啟動配置裡面改變這個預設的行為(使用 Configuration.Modules.AbpWebApi()...)。

動態Web API層

預設 ABP會 包裝 動態Web API層的所有方法。你可以在你應用服務的介面上使用 WrapResult和DontWrapResult 特性來改變這個行為。

你可以在啟動配置裡面改變這個預設的行為(使用 Configuration.Modules.AbpWebApi()...)。

ASP.NET Core 控制器

ABP會自動包裝JsonResult，ObjectRes以及那些沒有實現IActionResult物件。詳情請查閱ASP.NET Core文件。

你可以在啟動配置裡面改變這個預設的行為(使用 using Configuration.Modules.AbpAspNetCore()...)。

動態Web API層

雖然ABP提供了一種呼叫Ajax的簡單機制，但是在真實世界的應用中，為每個Ajax呼叫編寫javascript函式是很經典的。例如：

//建立一個抽象了Ajax呼叫的function
var savePerson = function(person) {
    return abp.ajax({
        url: '/People/SavePerson',
        data: JSON.stringify(person)
    });
};

//建立一個新的 person
var newPerson = {
    name: 'Dougles Adams',
    age: 42
};

//儲存該person
savePerson(newPerson).done(function(data) {
    abp.notify.success('created new person with id = ' + data.personId);
})

;

這是一個最佳實踐，但是對每個AJAX呼叫函式都這樣做，那是耗時且乏味的。對於應用服務和控制器，ABP能夠自動的生成這些函式。

Javascript Notification API

當一些事情發生的時候，我們喜歡顯示一些別緻的能夠自動消失的通知，例如，當某個記錄被儲存或者某個問題發生的時候。ABP定義了標準的API實現了該功能。

abp.notify.success('a message text', 'optional title');
abp.notify.info('a message text', 'optional title');
abp.notify.warn('a message text', 'optional title');
abp.notify.error('a message text', 'optional title');

作為通知庫的 自定義選項，它也能夠取得第3個引數(物件)。

通知API預設是使用toastr庫實現的。要使toastr生效，你應該引用toastr的css和javascript檔案，然後再在頁面中包含abp.toastr.js作為介面卡。一個toastr成功通知如下所示：

你也可以用你最喜歡的通知庫實現通知。只需要在自定義javascript檔案中重寫所有的函式，然後把它新增到頁面中而不是abp.toastr.js中(你可以檢查該檔案看它是否實現，這個相當簡單)。

abp.message簡介

訊息API被用來向用戶顯示一個訊息或者從使用者那裡得到一個確認。

訊息API預設實現方式是使用了sweetalert庫。使用時你需要引用sweetalert的樣式和js，然後把 abp.sweet-alert.js 作為介面卡包含到你的頁面中。

顯示訊息

如下所示：

abp.message.info('some info message', 'some optional title');
abp.message.success('some success message', 'some optional title');
abp.message.warn('some warning message', 'some optional title');
abp.message.error('some error message', 'some optional title');

成功的訊息框顯示如下:

Confirmation對話方塊

如下所示：

abp.message.confirm(
    'User admin will be deleted.', //確認提示
    'Are you sure?',//確認提示（可選引數）
    function (isConfirmed) {
        if (isConfirmed) {
            //...delete user 點選確認後執行
        }
    }
);

第二個引數(標題)是可選的(所以，回撥函式可以作為第二個引數)。

確認訊息框顯示如下：

ABP在內部使用了訊息API，例如：如果某個AJAX呼叫失敗，那麼它會呼叫abp.message.error。

Javascript UI Block & Busy API

ABP提供了有用的API，使整個頁面或者頁面的某個部分被遮罩層覆蓋實現阻塞或者繁忙指示(使用載入圖標表示繁忙)。

UI Block API

這個API使用一個透明的遮罩層(透明度可調節)來遮住整個頁面或者該頁面的某個元素。因此使用者不能夠點選。當你儲存表單或者載入某個區域時(某個層或者整個頁面)，這是相當有用的。

如下所示：

abp.ui.block(); //遮住整個頁面
abp.ui.block($('#MyDivElement')); //遮罩某個元素，在這裡可以使用jQuery選擇器選擇元素..
abp.ui.block('#MyDivElement'); //..或者直接指定元素
abp.ui.unblock(); //解除遮罩
abp.ui.unblock('#MyDivElement'); //對指定元素解除遮罩

UI Block API 預設是使用jQuery外掛block UI來實現的。為了能正常執行，你需要引用指令碼檔案，然後包含 abp.blockUI.js 檔案作為介面卡到你的頁面中。

UI Busy API

該API被用來指示某些頁面或者元素正在忙碌(載入)。例如：當你提交表單資料到伺服器的時候，你可能想要遮罩這個表單並顯示一個忙碌的指示器。

如下所示：

abp.ui.setBusy('#MyLoginForm');
abp.ui.clearBusy('#MyLoginForm');

引數應該是一個jQuery選擇器(如：#MyLoginForm)或者jQuery物件(如：$('#MyLoginForm'))。為了使整個頁面都是在繁忙狀態，你應該傳遞null或者body作為選擇器。

setBusy函式能夠傳入一個promise(作為第二個引數)並且自動的清除busy，當該promise完成的時候。如下所示：

abp.ui.setBusy(
    $('#MyLoginForm'), 
    abp.ajax({ ... })   
);

由於abp.ajax返回的是promise，所以我們能直接使用它作為引數。如果你想了解更多關於promise的資料，請查閱jQuery的Deferred。setBusy對Q提供支援(以及angulars的$http服務)。

UI Busy API 使用spin.js實現的。為使其正常執行，你應該引用該指令碼檔案，然後在你的頁面中包含 abp.spin.js 作為介面卡。

ABP表現層 - 事件匯流排EventBUS

簡介

Pub/Sub 事件模型被廣泛的應用在客戶端。ABP包含了一個 簡單的全域性事件匯流排 用來註冊事件並且觸發事件。

註冊事件

你可以使用 abp.event.on 來 註冊 一個 全域性事件 。示例如下：

abp.event.on('itemAddedToBasket', function (item) {
    console.log(item.name + ' is added to basket!');
});

第一個引數是 該事件的唯一名稱。另一個引數是 回撥函式，當指定的事件被觸發後將呼叫該引數。

你可以使用 abp.event.off 方法來 解除安裝 已註冊的事件。
注意：為了能夠解除安裝指定的事件，應該提供相同的事件函式。
正如上面的示例所展示的，你應該將回調函式設定為一個變數，然後在 on和off 中使用它。

觸發事件

abp.event.trigger 被用來觸發全域性事件。觸發一個已註冊的事件的程式碼如下：

abp.event.trigger('itemAddedToBasket', {
    id: 42,
    name: 'Acme Light MousePad'
});

第一個引數是 該事件的唯一名稱。第二個是(可選的)事件引數。你可以新增任何數量的引數，並且在回撥方法中獲得它們。

ABP表現層 - Javascript 日誌 API

簡介

當你想要在客戶端寫一些簡單的日誌的時候，你可以使用 console.log('...') API。但是，它不是所有的瀏覽器都支援該API，並且該函式也可能破壞你的指令碼。所以，在使用的時候你首先應該檢查console是否有效。還有，你可能想在其它地方寫日誌。甚至你可能對寫日誌的等級也有要求。ABP定義了安全的日誌函式：

abp.log.debug('...');
abp.log.info('...');
abp.log.warn('...');
abp.log.error('...');
abp.log.fatal('...');

你可以通過設定 abp.log.level 對 abp.log.levels 中的某個日誌等級進行更改(例如：abp.log.levels.INFO 不會記錄除錯日誌)。這些函式預設將日誌記錄到了瀏覽器的控制檯裡了。但如果你需要的話，你也可以重寫或者擴充套件這個行為。

ABP表現層 - 其他工具函式OtherUtilities

ABP提供了一些通用的工具函式。

abp.utils.createNamespace

用於建立更深的名稱空間。假設我們有一個基名稱空間 abp，然後想要建立或者獲得 abp.utils.strings.formatting 名稱空間。不需要像下面這樣寫：

//建立或獲得namespace
abp.utils = abp.utils || {};
abp.utils.strings = abp.utils.strings || {};
abp.utils.strings.formatting = abp.utils.strings.formatting || {};

//給該namespace新增一個function
abp.utils.strings.formatting.format = function() { ... };

我們可以這樣寫：

var formatting = abp.utils.createNamespace(abp, 'utils.strings.formatting');

//給該namespace新增一個function
formatting.format = function() { ... };

這樣即安全又簡單的建立了更深層次的名稱空間。注意，第一個引數是必須存在的根名稱空間。

abp.utils.formatString

近似於C#中的string.Format()方法。示例如下：

var str = abp.utils.formatString('Hello {0}!', 'World'); //str = 'Hello World!'
var str = abp.utils.formatString('{0} number is {1}.', 'Secret', 42); //str = 'Secret number is 42'