ABP module-zero +AdminLTE+Bootstrap Table+jQuery權限管理系統第十二節--小結,Bootstrap Table之角色管理以及module-zero角色管理

   

返回總目錄:ABP+AdminLTE+Bootstrap Table權限管理系統一期

寫在前面的話

          不少人說ABP不適合高併發大型,有必定的道理,可是我以爲仍是能夠的,就看架構師的能力了,我以前公司就是ABP絕對百萬數據級項目,是一個在線教育網站,涉及到平臺,學院,院系,班級,課程,學生等,一個平臺多少大學,一個大學多少院系,一個院系多少班級多少課程,其負責程度一點都不簡單,不說了,那是大神,比我在園子看到絕對大多數架構師都強悍.是我等仰望都對象.可是這不是停下腳步仰望的理由,只會是咱們追求更強的腳步.

          軟件開發中會有大量機械重複的工做，也有大量重複的代碼，用戶需求愈來愈高，咱們要作出的響應也愈來愈複雜，這就須要咱們去集成更多的東西來應付工做的須要。

         每當咱們要開發一個新的系統的時候，咱們要用到之前用到過的東西，好比mvc，ioc，日誌，數據庫的映射，日誌管理，消息隊列組件等等。咱們更但願把更多時間時間用來處理業務邏輯，而不是花在軟件結構，日誌，容錯等問題。

          不少大公司都有本身的基礎框架，本身公司封裝了不少東西，像咱們公司的日期組件，彈窗，表格樣式，分頁等等都是已經封裝好了的，再後期開發的時候咱們只須要去調用一下就能夠了，不須要每一個控件都本身再花時間和精力去封裝。

          這節我就來講一下在ABP module-zero基礎上作AdminLTE+Bootstrap Table的系統,算是前面十一節的總結和擴展.

          首先咱們依舊去官網根據abp模板建立解決方案.勾選上module-zero,而後建立數據庫鏈接,還原nuget包,而後update-database建立數據庫.

          接下來就是建立腳本更新數據庫了,以上這些都在前面的章節講到了,我就不作累述了,不明白可回去一下第一節.

 

          而後在home控制器下建ActionResult login,添加一個試圖頁面.加上本身的登錄頁面樣式js等,這裏咱們就不用mvc的形式再在去請求控制器 了,咱們直接請求webapi的登錄方法了.是的就是已經搭好了swagger的而後請求/swagger/ui/index的Account接口.如圖.

         

           

abp  javascript ajax的封裝及應用

 

 既然前面講到ABP 對javascript 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.ui.block($('#login'));
                var url = "/api/Account"; var login = function (para, ajaxtype,posturl) { return abp.ajax({ url: posturl, type: ajaxtype, async: false, data: JSON.stringify(para) }); }; var loginModel = { "tenancyName": "", "usernameOrEmailAddress": $("#userName").val(), "password": $("#password").val() }; abp.ui.setBusy( $('#login'), login(loginModel, "post", url).done(function (data) { abp.auth.setToken("Bearer " + data); window.location.href = "/admin/userinfo/index" }), );

 

abp.ui.block

   

          固然這是在ABP原來封裝的效果上加上的，細心的你已經發現這裏多了兩個東西，一個是abp.ui.block，另一個是abp.ui.setBusy，這實際上是一個阻止用戶重複提交，和正在提交繁忙狀態，

 其實就是一個遮罩層。

       

             這裏是ABP集成的jquery.blockUI.js插件，該API使用一個透明的塗層（transparent overlay）來阻塞整個頁面或者該頁面上的一個元素。這樣，用戶的點擊就無效了。當保存一個表單或者加載一個區域（一個div或者整個頁面）時這是頗有用的。好比

           另外abpjs中也對blockUI作了一些經常使用方法的封裝，設置阻塞abp.ui.block，取消阻塞abp.ui.unblock ，設置繁忙狀abp.ui.setBusy 和解除繁忙狀態abp.ui.clearBusy

    

 abp.ui.block = function (elm) {
        abp.log.warn('abp.ui.block is not implemented!'); }; abp.ui.unblock = function (elm) { abp.log.warn('abp.ui.unblock is not implemented!'); }; /* UI BUSY */ //Defines UI Busy API, not implements it  abp.ui.setBusy = function (elm, optionsOrPromise) { abp.log.warn('abp.ui.setBusy is not implemented!'); }; abp.ui.clearBusy = function (elm) { abp.log.warn('abp.ui.clearBusy is not implemented!'); };

abp.ui.block(); //阻塞整個頁面
abp.ui.block($('#MyDivElement')); //可使用jQuery 選擇器..
abp.ui.block('#MyDivElement'); //..或者直接使用選擇器
abp.ui.unblock(); //解除阻塞整個頁面
abp.ui.unblock('#MyDivElement'); //解除阻塞特定的元素

 abp.blockUI

 

        UI Block API默認使用jQuery的blockUI插件實現的。要是它生效，你應該包含它的javascript文件，而後在頁面中包含abp.blockUI.js做爲適配器。

        另一個就是busy 該API用於使得某些頁面或者元素處於繁忙狀態。好比，你可能想阻塞一個表單，而後當提交表單至服務器時展現一個繁忙的指示器。例子：

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

       效果就是上面的繁忙效果。

       該參數應該是一個選擇器（如‘#MyLoginForm’）或者jQuery選擇器（如$('#MyLoginForm')）。要使得整個頁面處於繁忙狀態，你能夠傳入null（或者'body'）做爲選擇器。setBusy函數第二個參數接收一個promise（約定），當該約定完成時會自動清除繁忙的狀態。由於abp.ajax返回promise，咱們能夠直接將它做爲promise傳入。要學習慣於promise更多的東西，查看jQuery的Deferred。

      UI Busy API是使用spin.js實現的。要讓它生效，應該包含它的javascript文件，而後在頁面中包含abp.spin.js做爲適配器。

      通過上面的努力，咱們得登錄也已經作好了。登錄成功以後咱們要作事的事情就是一個保存token另一個就是路由的重定向了。

     Abp.AuthToken與cookie

 

 

      token在ABP中很重要，咱們在請求 /api/Account會反饋一個token，咱們在登錄的時候就把token存到cookie中，以方便後面的使用。如登錄中的 abp.auth.setToken("Bearer " + data); 那ABP是怎麼樣設置cookie的了，這裏也作了封裝。

     

 abp.auth.tokenCookieName = 'Abp.AuthToken';

    abp.auth.setToken = function (authToken, expireDate) { abp.utils.setCookieValue(abp.auth.tokenCookieName, authToken, expireDate, abp.appPath); }; abp.auth.getToken = function () { return abp.utils.getCookieValue(abp.auth.tokenCookieName); } abp.auth.clearToken = function () { abp.auth.setToken(); }

    這裏面就包含了token經常使用的存取和清除的方法。頁面上緩存的cookie名字就是Abp.AuthToken，獲取的時候能夠直接獲取。

 

 

 model和DTO

 

     咱們在已經添加了域，因此這裏登錄成功以後直接把url指向/admin/userinfo/index。固然在/Areas/Common/Views/Layout裏面咱們已經AdminLTE的佈局了，包括菜單已經加載出來了，其實如今服務層的時候漏了一些東西，咱們這裏補上，ABP既然是一個框架

那麼在建立Service的時候天然要包含基礎增刪查改的方法，那麼這時候IAsyncCrudAppService就派上用場了。這裏咱們以模板IModulesService講一下。首先咱們建立好model和DTO

using Abp.Domain.Entities;
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Text; using System.Threading.Tasks; namespace JCms.Meuns { public class Meun : Entity<int>, IMayHaveTenant { public int? ParentId { get; set; } [Required] [StringLength(20)] public string Name { get; set; } [Required] [StringLength(50)] public string LinkUrl { get; set; } [StringLength(100)] public string Description { get; set; } public bool IsMenu { get; set; } public int Code { get; set; } public bool Enabled { get; set; } public DateTime UpdateDate { get; set; } public int? TenantId { get; set; } } }

DTO:

using Abp.Application.Services.Dto;
using Abp.AutoMapper; using Abp.Domain.Entities; using System; using System.Collections.Generic; using System.ComponentModel; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Text; using System.Threading.Tasks; namespace JCms.Meuns { /// <summary> /// 菜單 /// </summary>  [Serializable] [AutoMapFrom(typeof(Meun))] public class MeunDto : EntityDto<int> { /// <summary> /// id /// </summary> public int Id { get; set; } /// <summary> /// 父模塊Id /// </summary> public int? ParentId { get; set; } /// <summary> /// 名稱 /// </summary>  [Required] [StringLength(20)] public string Name { get; set; } /// <summary> /// 連接地址 /// </summary>  [Required] [StringLength(50)] public string LinkUrl { get; set; } /// <summary> /// 是不是菜單 /// </summary> public bool IsMenu { get; set; } /// <summary> /// 模塊編號 /// </summary> public int Code { get; set; } /// <summary> /// 描述 /// </summary> [StringLength(100)] public string Description { get; set; } /// <summary> /// 是否激活 /// </summary> public bool Enabled { get; set; } public DateTime UpdateDate { get; set; } //public virtual MeunDto ParentModule { get; set; } //public List<MeunDto> ChildModules { get; private set; } public List<MeunDto> children { get; set; } } }

 

       這裏要注意的若是model集成了某個接口，那麼DTO也要繼承這個接口的DTO，否則再繼承IAsyncCrudAppService就會報錯。

       好比面的model繼承Entity<int> 那麼DTO也要繼承EntityDto<int>.

IAsyncCrudAppService

 

        而後咱們看一下IAsyncCrudAppService須要哪麼參數。

     這裏均可以看得很清楚了，包括增刪查改的DTO這裏我比較懶，都用了一個。

 

接口：

 public interface IModulesService : IAsyncCrudAppService<MeunDto, int, PagedResultRequestDto, MeunDto, MeunDto> // IApplicationService
    {

    }

實現

    public class ModulesService : AsyncCrudAppService<Meun, MeunDto, int, PagedResultRequestDto, MeunDto, MeunDto>, IModulesService
    {
        public ModulesService(IRepository<Meun, int> repository) : base(repository) { } }

apiJCMSWebApiModule

   

    而後，咱們在apiJCMSWebApiModule方法下加上.WithConventionalVerbs() 這樣咱們就能夠看到特定的HTTP前綴，否則全是post，HTTP動詞是經過方法名的前綴決定的：

• Get：方法名以Get開頭。
• Put：方法名以Put或Update開頭。
• Delete：方法名以Delete或Remove開頭。
• Post：方法名以Post或Create開頭。
• 不然，Post是HTTP動詞的默認值。

       咱們能夠經過對特定的方法使用WithVerb方法或者HTTP特性來覆蓋上述慣例。

         就這樣，咱們在業務層中經常使用的增刪改查的方法就誕生了。

 

           驗證一下，傳入參數，結果沒毛病，可用。固然這裏根據本身的須要能夠重寫這些方法的。頁面和前面的頁面差很少，沒啥講的，這裏頁面增刪改查都已經實現。

           首先咱們看一下userinfo 頁面，這裏咱們也根據abp  ajax的封裝和 swagger的應用作了一些改變，首先看頁面，咱們不經過控制器去獲取建立和修改刪除的方法了。控制器只有一個帶分頁的獲取的方法 這是由於Bootstrap table必需要以這樣的json結構返回

控制器方法

using Abp.Application.Services.Dto;
using Abp.Web.Models;
using Abp.Web.Security.AntiForgery;
using JCMS.Authorization.Users;
using JCMS.Sessions.Dto;
using JCMS.Users;
using JCMS.Users.Dto;
using JCMS.Web.Controllers;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace JCMS.Web.Areas.Admin.Controllers
{
    public class UserInfoController : JCMSControllerBase
    {

        private readonly IUserAppService _UserAppService;

        public UserInfoController(

           IUserAppService UserAppService)
        {
            _UserAppService = UserAppService;
        }
        public ActionResult Index()
        {
            return View();
        }

        [DisableAbpAntiForgeryTokenValidation]
        [HttpGet]
        [DontWrapResult] 
        public JsonResult GetUsersList()
        {
            string pageNumber = string.IsNullOrWhiteSpace(Request["pageNumber"]) ? "0" : Request["pageNumber"];
            string pageSize = string.IsNullOrWhiteSpace(Request["pageSize"]) ? "20" : Request["pageSize"];
            List<UserDto> Userlist = new List<UserDto>();
            Userlist = _UserAppService.GetAllList();
            int totaldata = Userlist.Count();
            Userlist = Userlist.Skip(int.Parse(pageNumber) * int.Parse(pageSize)).Take(int.Parse(pageSize)).ToList();
            var result = new { total = totaldata, rows = Userlist };
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }
}

 

               DontWrapResult標籤打上的，不須要abp作的特殊封裝。js頁面的一些方法。

  

<script type="text/javascript">

    $(function () {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的點擊事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    });
   var Url = "@Url.Action("GetUsersList")";
   // var Url = "/api/services/app/user/GetAll()";
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
               // url: '../User/GetUsersList',
                url: Url,         //請求後臺的URL（*）
                method: 'get',                      //請求方式（*）
                toolbar: '#toolbar',                //工具按鈕用哪一個容器
                striped: true,                      //是否顯示行間隔色
                cache: false,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
                pagination: true,                   //是否顯示分頁（*）
                sortable: false,                     //是否啓用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//傳遞參數（*）
                sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
                pageNumber: 1,                       //初始化加載第一頁，默認第一頁
                pageSize: 2,                       //每頁的記錄行數（*）
                pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
                search: true,                       //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大
                strictSearch: true,
                showColumns: true,                  //是否顯示全部的列
                showRefresh: true,                  //是否顯示刷新按鈕
                minimumCountColumns: 2,             //最少容許的列數
                clickToSelect: true,                //是否啓用點擊選中行
                height: 500,                        //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度
                uniqueId: "ID",                     //每一行的惟一標識，通常爲主鍵列
                showToggle: true,                    //是否顯示詳細視圖和列表視圖的切換按鈕
                cardView: false,                    //是否顯示詳細視圖
                detailView: false,                   //是否顯示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'UserName',
                    title: '姓名'
                }, {
                    field: 'EmailAddress',
                    title: '郵箱'
                }, {
                    field: 'Surname',
                    title: '真是姓名'
                }, {
                     field: 'Name',
                    title: '角色'
                }, ]
            });
        };

        //獲得查詢的參數
        oTableInit.queryParams = function (params) {
            var temp = {   //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
                limit: params.limit,   //頁面大小
                offset: params.offset,  //頁碼
                departmentname: $("#txt_search_departmentname").val(),
                statu: $("#txt_search_statu").val()
            };
            return temp;
        };
        return oTableInit;
    };


    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化頁面上面的按鈕事件
            //查詢角色
            $("#btn_query").click(function () {
                var actionUrl = "@Url.Action("GetUsersList")";
                m_pagerow = 0;
                $("#tb_departments").bootstrapTable('refresh', { url: actionUrl });

            });
            //新增角色
            $("#btn_add").click(function () {
                $("#id").val("");
                $("#txt_Surname").val("");
                $("#txt_Name").val("");
                $("#txt_UserName").val("");
                $("#txt_isDeleted").val("");
                $("#myModalLabel").text("新增");
                $('#myModal').modal();
            });
            //新增角色
            $("#btn_submit").click(function () {

                var Id = $("#id").val() == "" ? 0 : $("#id").val();
                var Url = "/api/services/app/user/Update";
                var ajaxtype = "put";
                if ($("#id").val() == "") {
                    Url = "/api/services/app/user/Create";
                    ajaxtype = "post";
                }
                var careteorUpdatePerson = function (person, ajaxtype) {
                    return abp.ajax({
                        url: Url,
                        type: ajaxtype,
                        async: false,
                        data: JSON.stringify(person)
                    });
                };

                var newPerson = {
                     "id": $("#id").val(),
                     "UserName": $("#txt_Surname").val(),
                     "EmailAddress" : $("#txt_Name").val(),
                     "Name": $("#txt_UserName").val(),
                     "Surname": "test",
                     "Password": "123456"
                };

                careteorUpdatePerson(newPerson, ajaxtype).done(function (data) {
                        toastr.warning('操做成功!');
                        var actionUrl = "@Url.Action("GetUsersList")";
                        $("#tb_departments").bootstrapTable('refresh', { url: actionUrl });
                });
            });

            //編輯角色
            $("#btn_edit").click(function () {
                var arrselections = $("#tb_departments").bootstrapTable('getSelections');
                if (arrselections.length > 1) {
                    toastr.warning('只能選擇一行進行編輯');
                    return;
                }
                if (arrselections.length <= 0) {
                    toastr.warning('請選擇有效數據');
                    return;
                }
                $("#id").val(arrselections[0].id);
                $("#txt_Surname").val(arrselections[0].UserName);
                $("#txt_Name").val(arrselections[0].EmailAddress);
                $("#txt_UserName").val(arrselections[0].Name);
                $("#txt_isDeleted").val(arrselections[0].Id);

                $("#myModalLabel").text("修改");
                $('#myModal').modal();       
            });


            //一般咱們使用ajax會按照以下寫法，作一個簡單的封裝來重用ajax，此處框架能夠幫你生成簡單的調用方法
            var deletePerson = function (person) {
                return abp.ajax({
                  //  url: abp.appPath + '/api/services/app/user/Delete',
                    url:'/api/services/app/user/Delete',
                    type: 'delete',
                    async: false,
                    data: JSON.stringify(person)
                });
            };
            //刪除角色
            $("#btn_delete").click(function () {
                var arrselections = $("#tb_departments").bootstrapTable('getSelections');
                if (arrselections.length > 1) {
                    toastr.warning('只能選擇一行進行編輯');
                    return;
                }
                if (arrselections.length <= 0) {
                    toastr.warning('請選擇有效數據');
                    return;
                }
                var Id = arrselections[0].id;
                var newPerson = {
                    "id": Id
                };
              //直接調用方法，如何生成上面的調用方法能夠參考源碼中的Abp.Web.Api項目中/ WebApi/ Controllers/ Scripting/ jQuery下的實現
                deletePerson(newPerson).done(function (data) {
                        toastr.warning('操做成功!');
                        var actionUrl = "@Url.Action("GetUsersList")";
                        $("#tb_departments").bootstrapTable('refresh', { url: actionUrl });
                });

            });


            //權限受權
            $("#btn_authorize").click(function () {
                var arrselections = $("#tb_departments").bootstrapTable('getSelections');
                if (arrselections.length > 1) {
                    toastr.warning('只能選擇一個角色進行受權');
                    return;
                }
                if (arrselections.length <= 0) {
                    toastr.warning('請選擇有效數據');
                    return;
                }
                var actionUrl = "@Url.Action("AuthorizePermission")";
                var param = { id: arrselections[0].Id };
                ShowModal_Authorize(actionUrl, param, "權限受權");
            });
            //模態框中「權限受權」保存
            var $modal = $("#authorizeModal");
            $("#btnSave", $modal).click(function () {
                var actionUrl = "@Url.Action("AuthorizePermission")";
                SaveModal_Authorize(actionUrl);
            });
            //模態框中「新增編輯角色」保存
            var $formmodal = $("#modal-form");
            $("#btnSave", $formmodal).click(function () {
                var $tb = $("#tb_departments");
                SaveModal($tb);
            });

            /*******彈出表單*********/
            function ShowModal(actionUrl, param, title) {
                debugger;
                var $modal = $("#modal-form");
                //表單初始化
                $(".modal-title", $modal).html(title);
                $("#modal-content", $modal).attr("action", actionUrl);

                $.ajax({
                    type: "GET",
                    url: actionUrl,
                    data: param,
                    beforeSend: function () {
                    },
                    success: function (result) {
                        debugger;
                        $("#modal-content").html(result);
                        $('#modal-form').modal('show');
                    },
                    error: function () {

                    },
                    complete: function () {

                    }
                });
            }


        };

        return oInit;
    };



</script>

View Code

 api，services應用

 

     以careteorUpdatePerson方法爲例，我都是封裝好的。 調用的時候直接請求  "/api/services/app/user/Create"地址就能夠了，其實這些代碼都是能夠複用的，咱們也能夠封裝到一個共同的js頁面。我這裏就沒有作這麼詳細。

   var careteorUpdatePerson = function (person, ajaxtype) {
                    return abp.ajax({
                        url: Url,
                        type: ajaxtype,
                        async: false,
                        data: JSON.stringify(person)
                    });
                };

                var newPerson = {
                     "id": $("#id").val(),
                     "UserName": $("#txt_Surname").val(),
                     "EmailAddress" : $("#txt_Name").val(),
                     "Name": $("#txt_UserName").val(),
                     "Surname": "test",
                     "Password": "123456"
                };

                careteorUpdatePerson(newPerson, ajaxtype).done(function (data) {
                        toastr.warning('操做成功!');
                        var actionUrl = "@Url.Action("GetUsersList")";
                        $("#tb_departments").bootstrapTable('refresh', { url: actionUrl });
                });
            });

首先咱們傳入的參數newPerson 必須與接口裏面的須要的參數一致。並且接口裏面自帶驗證。數據格式也必須一致。

 界面及展現

好比這裏郵箱地址咱們隨便傳一個參數進去，他就會報錯。頁面上也是這樣的。

  固然這裏的提示咱們是能夠修改的。角色管理頁面的代碼也是同樣的。

@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Common/Views/Layout/_Layout.cshtml";
}

<meta name="viewport" content="width=device-width" />
<script type="text/javascript">

    $(function () {



        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的點擊事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    });
   var Url = "@Url.Action("GetUsersList")";
   // var Url = "/api/services/app/user/GetAll()";
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
               // url: '../User/GetUsersList',
                url: Url,         //請求後臺的URL（*）
                method: 'get',                      //請求方式（*）
                toolbar: '#toolbar',                //工具按鈕用哪一個容器
                striped: true,                      //是否顯示行間隔色
                cache: false,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
                pagination: true,                   //是否顯示分頁（*）
                sortable: false,                     //是否啓用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//傳遞參數（*）
                sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
                pageNumber: 1,                       //初始化加載第一頁，默認第一頁
                pageSize: 2,                       //每頁的記錄行數（*）
                pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
                search: true,                       //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大
                strictSearch: true,
                showColumns: true,                  //是否顯示全部的列
                showRefresh: true,                  //是否顯示刷新按鈕
                minimumCountColumns: 2,             //最少容許的列數
                clickToSelect: true,                //是否啓用點擊選中行
                height: 500,                        //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度
                uniqueId: "ID",                     //每一行的惟一標識，通常爲主鍵列
                showToggle: true,                    //是否顯示詳細視圖和列表視圖的切換按鈕
                cardView: false,                    //是否顯示詳細視圖
                detailView: false,                   //是否顯示父子表
                columns: [{
                    checkbox: true
                }, {
                     field: 'Name',
                    title: '角色名稱'
                }, {
                    field: 'DisplayName',
                    title: '描述'
                }, {
                     field: 'CreationTime',
                    title: '建立時間'
                }, {
                     field: 'IsStatic',
                    title: '是否啓用'
                }, ]
            });
        };

        //獲得查詢的參數
        oTableInit.queryParams = function (params) {
            var temp = {   //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
                limit: params.limit,   //頁面大小
                offset: params.offset,  //頁碼
                departmentname: $("#txt_search_departmentname").val(),
                statu: $("#txt_search_statu").val()
            };
            return temp;
        };
        return oTableInit;
    };


    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化頁面上面的按鈕事件
            //查詢角色
            $("#btn_query").click(function () {
                var actionUrl = "@Url.Action("GetUsersList")";
                m_pagerow = 0;
                $("#tb_departments").bootstrapTable('refresh', { url: actionUrl });

            });
            //新增角色
            $("#btn_add").click(function () {
                $("#id").val("");
                $("#txt_Name").val("");
                $("#txt_DisplayName").val("");
                $("#myModalLabel").text("新增");
                $('#myModal').modal();
            });
            //新增角色
            $("#btn_submit").click(function () {

                var Id = $("#id").val() == "" ? 0 : $("#id").val();
                var Url = "/api/services/app/role/Update";
                var ajaxtype = "put";
                if ($("#id").val() == "") {
                    Url = "/api/services/app/role/Create";
                    ajaxtype = "post";
                }
                debugger;
                var careteorUpdatePerson = function (person, ajaxtype) {
                    return abp.ajax({
                        url: Url,
                        type: ajaxtype,
                        async: false,
                        data: JSON.stringify(person)
                    });
                };

                var newPerson = {
                     "id": $("#id").val(),
                     "Name": $("#txt_Name").val(),
                     "DisplayName": $("#txt_DisplayName").val(),
                     "IsStatic": $("input[type='chekIsStatic']").is(':checked') ? true : false
                };

                careteorUpdatePerson(newPerson, ajaxtype).done(function (data) {
                        toastr.warning('操做成功!');
                        var actionUrl = "@Url.Action("GetUsersList")";
                        $("#tb_departments").bootstrapTable('refresh', { url: actionUrl });
                });
            });

            //編輯角色
            $("#btn_edit").click(function () {
                var arrselections = $("#tb_departments").bootstrapTable('getSelections');
                if (arrselections.length > 1) {
                    toastr.warning('只能選擇一行進行編輯');
                    return;
                }
                if (arrselections.length <= 0) {
                    toastr.warning('請選擇有效數據');
                    return;
                }
                debugger;
                $("#id").val(arrselections[0].id);
                $("#txt_Name").val(arrselections[0].Name);
                $("#txt_DisplayName").val(arrselections[0].DisplayName);
                if (!arrselections[0].IsStatic) {
                    $("#chekIsStatic").attr("checked", false);
                }
                $("#myModalLabel").text("修改");
                $('#myModal').modal();
            });

            var deletePerson = function (person) {
                return abp.ajax({
                    url:'/api/services/app/role/Delete',
                    type: 'delete',
                    async: false,
                    data: JSON.stringify(person)
                });
            };
            //刪除角色
            $("#btn_delete").click(function () {
                var arrselections = $("#tb_departments").bootstrapTable('getSelections');
                if (arrselections.length > 1) {
                    toastr.warning('只能選擇一行進行編輯');
                    return;
                }
                if (arrselections.length <= 0) {
                    toastr.warning('請選擇有效數據');
                    return;
                }
                var Id = arrselections[0].id;
                var newPerson = {
                    "id": Id
                };
                deletePerson(newPerson).done(function (data) {
                        toastr.warning('操做成功!');
                        var actionUrl = "@Url.Action("GetUsersList")";
                        $("#tb_departments").bootstrapTable('refresh', { url: actionUrl });
                });

            });


            //權限受權
            $("#btn_authorize").click(function () {
                var arrselections = $("#tb_departments").bootstrapTable('getSelections');
                if (arrselections.length > 1) {
                    toastr.warning('只能選擇一個角色進行受權');
                    return;
                }
                if (arrselections.length <= 0) {
                    toastr.warning('請選擇有效數據');
                    return;
                }
                var actionUrl = "@Url.Action("AuthorizePermission")";
                var param = { id: arrselections[0].Id };
                ShowModal_Authorize(actionUrl, param, "權限受權");
            });
            //模態框中「權限受權」保存
            var $modal = $("#authorizeModal");
            $("#btnSave", $modal).click(function () {
                var actionUrl = "@Url.Action("AuthorizePermission")";
                SaveModal_Authorize(actionUrl);
            });
            //模態框中「新增編輯角色」保存
            var $formmodal = $("#modal-form");
            $("#btnSave", $formmodal).click(function () {
                var $tb = $("#tb_departments");
                SaveModal($tb);
            });

            /*******彈出表單*********/
            function ShowModal(actionUrl, param, title) {
                debugger;
                var $modal = $("#modal-form");
                //表單初始化
                $(".modal-title", $modal).html(title);
                $("#modal-content", $modal).attr("action", actionUrl);

                $.ajax({
                    type: "GET",
                    url: actionUrl,
                    data: param,
                    beforeSend: function () {
                    },
                    success: function (result) {
                        debugger;
                        $("#modal-content").html(result);
                        $('#modal-form').modal('show');
                    },
                    error: function () {

                    },
                    complete: function () {

                    }
                });
            }


        };

        return oInit;
    };



</script>



<section class="content-header">
    <h1>
        用戶明細
        <small>advanced cxdmles</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主頁</a></li>
        <li><a href="#">用戶管理</a></li>
        <li class="active">用戶列表</li>
    </ol>

</section>
<section class="content">
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查詢條件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">姓名</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_departmentname">
                        </div>
                        <label class="control-label col-sm-1" for="txt_search_statu">暱稱</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_statu">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查詢</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-warning">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
            </button>
            <button id="btn_authorize" type="button" class="btn btn-info ">
                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>受權
            </button>

        </div>
        <table id="tb_departments"></table>
    </div>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="txt_departmentname">角色名稱</label>
                        <input type="text" name="id" class="form-control" id="id" placeholder="id" style="display:none">
                        <input type="text" name="txt_departmentname" class="form-control" id="txt_Name" placeholder="角色名稱">
                    </div>
                    <div class="form-group">
                        <label for="txt_parentdepartment">角色描述</label>
                        <input type="text" name="txt_parentdepartment" class="form-control" id="txt_DisplayName" placeholder="角色描述">
                    </div>
                    @*<div class="form-group">
                        <label for="txt_departmentlevel">建立時間</label>
                        <input type="text" name="txt_departmentlevel" class="form-control" id="txt_CreationTime" placeholder="建立時間">
                    </div>*@
                    <div class="form-group">
                        <label for="txt_departmentlevel">是否啓用</label>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="chekIsStatic" checked="checked">
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>關閉</button>
                    <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                </div>
            </div>
        </div>
    </div>

</section>

View Code

 

  這裏有共同的js咱們已經放到 佈局頁面。

 

 

 

 

 

 

 

   如今用戶管理和角色管理功能已經實現，後面我會再作菜單管理，受權管理，作完基本上就完了，固然後面的也是重點。共同努力！

   github 地址：https://github.com/Jimmey-Jiang/JCMS

 

 

module-zero角色管理

 說說module-zero角色管理

角色實體

角色實體表明應用程序的角色。它應該從AbpRole類派生， 以下所示：

public class Role : AbpRole<Tenant, User>
{
    //add your own role properties here
}

這個類是在安裝模塊零時建立的。角色存儲在數據庫的AbpRoles表中。您能夠將您的自定義屬性添加到角色類（併爲更改建立數據庫遷移）。

AbpRole定義了一些屬性。最重要的是：

• 名稱：租戶中角色的惟一名稱。
• DisplayName：顯示角色的名稱。
• IsDefault：這個角色默認分配給新用戶嗎？
• IsStatic：這個角色是靜態的（預生成，不能被刪除）。

角色用於對權限進行分組。當用戶有一個角色，那麼他/她將擁有該角色的全部權限。用戶能夠有 多個角色。此用戶的權限將合併全部已分配角色的全部權限。

動態與靜態角色

在模塊零中，角色能夠是動態的或靜態的：

• 靜態角色：一個靜態角色有一個已知的名字 （如'admin'），不能改變這個名字（咱們能夠改變 顯示名稱）。它在系統啓動時存在，不能被刪除。所以，咱們能夠編寫基於靜態角色名稱的代碼。
• 動態（非靜態）角色：咱們能夠在部署後建立動態角色。而後咱們能夠爲該角色授予權限，咱們能夠將該角色分配給一些用戶，咱們能夠將其刪除。咱們不能在開發時間知道動態角色的名字。

使用IsStatic屬性爲其設置角色。另外，咱們應該 在模塊的 PreInitialize上註冊靜態角色。假設咱們對租戶有一個「Admin」靜態角色：

Configuration.Modules.Zero（）。RoleManagement.StaticRoles.Add（new StaticRoleDefinition（「Admin」，MultiTenancySides.Tenant））;

所以，模塊零將意識到靜態角色。

默認角色

一個或多個角色能夠設置爲默認值。默認角色分配給新增/註冊用戶。這不是開發時間屬性，能夠在部署後進行設置或更改。使用IsDefault 屬性來設置它。

角色管理器

RoleManager是 爲角色執行域邏輯的服務：

public class RoleManager : AbpRoleManager<Tenant, Role, User>
{
    //...
}

 

您能夠注入並使用RoleManager來建立，刪除，更新角色，爲角色授予權限等等。你能夠在這裏添加你本身的方法。此外，您能夠 根據本身的須要重寫AbpRoleManager基類的任何方法。

像UserManager同樣，RoleManager的某些方法也會返回IdentityResult，而不是在某些狀況下拋出異常。查看 用戶管理文檔以獲取更多信息。

 

 

>[ABP+AdminLTE+Bootstrap Table權限管理系統一期](http://www.cnblogs.com/anyushengcms/p/7325126.html)
[Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate-Project-CMS](https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate-Project-CMS)
**返回總目錄:[ABP+AdminLTE+Bootstrap Table權限管理系統一期](http://www.cnblogs.com/anyushengcms/p/7325126.html)**

返回總目錄:ABP+AdminLTE+Bootstrap Table權限管理系統一期