返回总目录: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的封装
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原来封装的效果上加上的，细心的你已经发现这里多了两个东西，一个是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‘); //解除阻塞特定的元素
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另外一个就是路由的重定向了。
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常用的存取和清除的方法。
我们在已经添加了域，所以这里登陆成功之后直接把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需要哪么参数。
这里都可以看得很清楚了，包括增删查改的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方法下加上.WithConventionalVerbs() 这样我们就可以看到特定的HTTP前缀，不然全是post，HTTP动词是通过方法名的前缀决定的：
- Get：方法名以Get开头。
- Put：方法名以Put或Update开头。
- Delete：方法名以Delete或Remove开头。
- Post：方法名以Post或Create开头。
- 否则，Post是HTTP动词的默认值。
我们可以通过对特定的方法使用WithVerb方法或者HTTP特性来覆盖上述惯例。
就这样，我们在业务层中常用的增删改查的方法就诞生了。
验证一下，传入参数，结果没毛病，可用。当然这里根据自己的需要可以重写这些方法的。页面和前面的页面差不多，没啥讲的，这里页面增删改查都已经实现。
现在用户管理和角色管理功能已经实现，后面我会再做菜单管理，授权管理，做完基本上就完了，当然后面的也是重点。共同努力！
github 地址：https://github.com/Jimmey-Jiang/JCMS