热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使用AngularJs打造权限管理系统【简易型】_AngularJS

这篇文章主要介绍了使用AngularJs打造权限管理系统【简易型】的相关资料,需要的朋友可以参考下
一、引言

  本文将介绍如何把AngularJs应用到实际项目中。本篇文章将使用AngularJS来打造一个简易的权限管理系统。下面不多说,直接进入主题。

二、整体架构设计介绍

  首先看下整个项目的架构设计图:

  从上图可以看出整个项目的一个整体结构,接下来,我来详细介绍了项目的整体架构:

  采用Asp.net Web API来实现REST 服务。这样的实现方式,已达到后端服务的公用、分别部署和更好地扩展。Web层依赖应用服务接口,并且使用Castle Windsor实现依赖注入。

显示层(用户UI)

  显示层采用了AngularJS来实现的SPA页面。所有的页面数据都是异步加载和局部刷新,这样的实现将会有更好的用户体验。

应用层(Application Service)

  AngularJS通过Http服务去请求Web API来获得数据,而Web API的实现则是调用应用层来请求数据。

基础架构层

  基础架构层包括仓储的实现和一些公用方法的实现。

  仓储层的实现采用EF Code First的方式来实现的,并使用EF Migration的方式来创建数据库和更新数据库。

  LH.Common层实现了一些公用的方法,如日志帮助类、表达式树扩展等类的实现。

领域层

  领域层主要实现了该项目的所有领域模型,其中包括领域模型的实现和仓储接口的定义。

  介绍完整体结构外,接下来将分别介绍该项目的后端服务实现和Web前端的实现。

三、后端服务实现

  后端服务主要采用Asp.net Web API来实现后端服务,并且采用Castle Windsor来完成依赖注入。

  这里拿权限管理中的用户管理来介绍Rest Web API服务的实现。

提供用户数据的REST服务的实现:

public class UserController : ApiController
 {
  private readonly IUserService _userService;
  public UserController(IUserService userService)
  {
   _userService = userService;
  }
  [HttpGet]
  [Route("api/user/GetUsers")]
  public OutputBase GetUsers([FromUri]PageInput input)
  {
   return _userService.GetUsers(input);
  }
  [HttpGet]
  [Route("api/user/UserInfo")]
  public OutputBase GetUserInfo(int id)
  {
   return _userService.GetUser(id);
  }
  [HttpPost]
  [Route("api/user/AddUser")]
  public OutputBase CreateUser([FromBody] UserDto userDto)
  {
   return _userService.AddUser(userDto);
  }
  [HttpPost]
  [Route("api/user/UpdateUser")]
  public OutputBase UpdateUser([FromBody] UserDto userDto)
  {
   return _userService.UpdateUser(userDto);
  }
  [HttpPost]
  [Route("api/user/UpdateRoles")]
  public OutputBase UpdateRoles([FromBody] UserDto userDto)
  {
   return _userService.UpdateRoles(userDto);
  }
  [HttpPost]
  [Route("api/user/DeleteUser/{id}")]
  public OutputBase DeleteUser(int id)
  {
   return _userService.DeleteUser(id);
  }
  [HttpPost]
  [Route("api/user/DeleteRole/{id}/{roleId}")]
  public OutputBase DeleteRole(int id, int roleId)
  {
   return _userService.DeleteRole(id, roleId);
  }
 }

  从上面代码实现可以看出,User REST 服务依赖与IUserService接口,并且也没有像传统的方式将所有的业务逻辑放在Web API实现中,而是将具体的一些业务实现封装到对应的应用层中,Rest API只负责调用对应的应用层中的服务。这样设计好处有:

REST 服务部依赖与应用层接口,使得职责分离,将应用层服务的实例化交给单独的依赖注入容器去完成,而REST服务只负责调用对应应用服务的方法来获取数据。采用依赖接口而不依赖与具体类的实现,使得类与类之间低耦合。REST服务内不包括具体的业务逻辑实现。这样的设计可以使得服务更好地分离,如果你后期想用WCF来实现REST服务的,这样就不需要重复在WCF的REST服务类中重复写一篇Web API中的逻辑了,这时候完全可以调用应用服务的接口方法来实现WCF REST服务。所以将业务逻辑实现抽到应用服务层去实现,这样的设计将使得REST 服务职责更加单一,REST服务实现更容易扩展。

  用户应用服务的实现:

public class UserService : BaseService, IUserService
 {
  private readonly IUserRepository _userRepository;
  private readonly IUserRoleRepository _userRoleRepository;
  public UserService(IUserRepository userRepository, IUserRoleRepository userRoleRepository)
  {
   _userRepository = userRepository;
   _userRoleRepository = userRoleRepository;
  }
  public GetResults GetUsers(PageInput input)
  {
   var result = GetDefault>();
   var filterExp = BuildExpression(input);
   var query = _userRepository.Find(filterExp, user => user.Id, SortOrder.Descending, input.Current, input.Size);
   result.Total = _userRepository.Find(filterExp).Count();
   result.Data = query.Select(user => new UserDto()
   {
    Id = user.Id,
    CreateTime = user.CreationTime,
    Email = user.Email,
    State = user.State,
    Name = user.Name,
    RealName = user.RealName,
    Password = "*******",
    Roles = user.UserRoles.Take(4).Select(z => new BaseEntityDto()
    {
     Id = z.Role.Id,
     Name = z.Role.RoleName
    }).ToList(),
    TotalRole = user.UserRoles.Count()
   }).ToList();
   return result;
  }
  public UpdateResult UpdateUser(UserDto user)
  {
   var result = GetDefault();
   var existUser = _userRepository.FindSingle(u => u.Id == user.Id);
   if (existUser == null)
   {
    result.Message = "USER_NOT_EXIST";
    result.StateCode = 0x00303;
    return result;
   }
   if (IsHasSameName(existUser.Name, existUser.Id))
   {
    result.Message = "USER_NAME_HAS_EXIST";
    result.StateCode = 0x00302;
    return result;
   }
   existUser.RealName = user.RealName;
   existUser.Name = user.Name;
   existUser.State = user.State;
   existUser.Email = user.Email;
   _userRepository.Update(existUser);
   _userRepository.Commit();
   result.IsSaved = true;
   return result;
  }
  public CreateResult AddUser(UserDto userDto)
  {
   var result = GetDefault>();
   if (IsHasSameName(userDto.Name, userDto.Id))
   {
    result.Message = "USER_NAME_HAS_EXIST";
    result.StateCode = 0x00302;
    return result;
   }
   var user = new User()
   {
    CreatiOnTime= DateTime.Now,
    Password = "",
    Email = userDto.Email,
    State = userDto.State,
    RealName = userDto.RealName,
    Name = userDto.Name
   };
   _userRepository.Add(user);
   _userRepository.Commit();
   result.Id = user.Id;
   result.IsCreated = true;
   return result;
  }
  public DeleteResult DeleteUser(int userId)
  {
   var result = GetDefault();
   var user = _userRepository.FindSingle(x => x.Id == userId);
   if (user != null)
   {
    _userRepository.Delete(user);
    _userRepository.Commit();
   }
   result.IsDeleted = true;
   return result;
  }
  public UpdateResult UpdatePwd(UserDto user)
  {
   var result = GetDefault();
   var userEntity =_userRepository.FindSingle(x => x.Id == user.Id);
   if (userEntity == null)
   {
    result.Message = string.Format("当前编辑的用户“{0}”已经不存在", user.Name);
    return result;
   }
   userEntity.Password = user.Password;
   _userRepository.Commit();
   result.IsSaved = true;
   return result;
  }
  public GetResult GetUser(int userId)
  {
   var result = GetDefault>();
   var model = _userRepository.FindSingle(x => x.Id == userId);
   if (model == null)
   {
    result.Message = "USE_NOT_EXIST";
    result.StateCode = 0x00402;
    return result;
   }
   result.Data = new UserDto()
   {
    CreateTime = model.CreationTime,
    Email = model.Email,
    Id = model.Id,
    RealName = model.RealName,
    State = model.State,
    Name = model.Name,
    Password = "*******"
   };
   return result;
  }
  public UpdateResult UpdateRoles(UserDto user)
  {
   var result = GetDefault();
   var model = _userRepository.FindSingle(x => x.Id == user.Id);
   if (model == null)
   {
    result.Message = "USE_NOT_EXIST";
    result.StateCode = 0x00402;
    return result;
   }
   var list = model.UserRoles.ToList();
   if (user.Roles != null)
   {
    foreach (var item in user.Roles)
    {
     if (!list.Exists(x => x.Role.Id == item.Id))
     {
      _userRoleRepository.Add(new UserRole { RoleId = item.Id, UserId = model.Id });
     }
    }
    foreach (var item in list)
    {
     if (!user.Roles.Exists(x => x.Id == item.Id))
     {
      _userRoleRepository.Delete(item);
     }
    }
    _userRoleRepository.Commit();
    _userRepository.Commit();
   }
   result.IsSaved = true;
   return result;
  }
  public DeleteResult DeleteRole(int userId, int roleId)
  {
   var result = GetDefault();
   var model = _userRoleRepository.FindSingle(x => x.UserId == userId && x.RoleId == roleId);
   if (model != null)
   {
    _userRoleRepository.Delete(model);
    _userRoleRepository.Commit();
   }
   result.IsDeleted = true;
   return result;
  }
  public bool Exist(string username, string password)
  {
   return _userRepository.FindSingle(u => u.Name == username && u.Password == password) != null;
  }
  private bool IsHasSameName(string name, int userId)
  {
   return !string.IsNullOrWhiteSpace(name) && _userRepository.Find(u=>u.Name ==name && u.Id != userId).Any();
  }
  private Expression> BuildExpression(PageInput pageInput)
  {
   Expression> filterExp = user => true;
   if (string.IsNullOrWhiteSpace(pageInput.Name))
    return filterExp;
   switch (pageInput.Type)
   {
    case 0:
     filterExp = user => user.Name.Contains(pageInput.Name) || user.Email.Contains(pageInput.Name);
     break;
    case 1:
     filterExp = user => user.Name.Contains(pageInput.Name);
     break;
    case 2:
     filterExp = user => user.Email.Contains(pageInput.Name);
     break;
   }
   return filterExp;
  }
 }

  这里应用服务层其实还可以进一步的优化,实现代码层级的读写分离,定义IReadOnlyService接口和IWriteServie接口,并且把写操作可以采用泛型方法的方式抽象到BaseService中去实现。这样一些增删改操作实现公用,之所以可以将这里操作实现公用,是因为这些操作都是非常类似的,无非是操作的实体不一样罢了。其实这样的实现在我另一个开源项目中已经用到:OnlineStore.大家可以参考这个自行去实现。

  仓储层的实现:

  用户应用服务也没有直接依赖与具体的仓储类,同样也是依赖其接口。对应的用户仓储类的实现如下:

public class BaseRepository : IRepository
  where TEntity :class , IEntity
 {
  private readonly ThreadLocal _localCtx = new ThreadLocal(() => new UserManagerDBContext());
  public UserManagerDBContext DbContext { get { return _localCtx.Value; } }
  public TEntity FindSingle(Expression> exp = null)
  {
   return DbContext.Set().AsNoTracking().FirstOrDefault(exp);
  }
  public IQueryable Find(Expression> exp = null)
  {
   return Filter(exp);
  }
  public IQueryable Find(Expression> expression, Expression> sortPredicate, SortOrder sortOrder, int pageNumber, int pageSize)
  {
   if (pageNumber <= 0)
    throw new ArgumentOutOfRangeException("pageNumber", pageNumber, "pageNumber must great than or equal to 1.");
   if (pageSize <= 0)
    throw new ArgumentOutOfRangeException("pageSize", pageSize, "pageSize must great than or equal to 1.");
   var query = DbContext.Set().Where(expression);
   var skip = (pageNumber - 1) * pageSize;
   var take = pageSize;
   if (sortPredicate == null)
    throw new InvalidOperationException("Based on the paging query must specify sorting fields and sort order.");
   switch (sortOrder)
   {
    case SortOrder.Ascending:
     var pagedAscending = query.SortBy(sortPredicate).Skip(skip).Take(take);
     return pagedAscending;
    case SortOrder.Descending:
     var pagedDescending = query.SortByDescending(sortPredicate).Skip(skip).Take(take);
     return pagedDescending;
   }
   throw new InvalidOperationException("Based on the paging query must specify sorting fields and sort order.");
  }
  public int GetCount(Expression> exp = null)
  {
   return Filter(exp).Count();
  }
  public void Add(TEntity entity)
  {
   DbContext.Set().Add(entity);
  }
  public void Update(TEntity entity)
  {
   DbContext.Entry(entity).State = EntityState.Modified;
  }
  public void Delete(TEntity entity)
  {
   DbContext.Entry(entity).State = EntityState.Deleted;
   DbContext.Set().Remove(entity);
  }
  public void Delete(ICollection entityCollection)
  {
   if(entityCollection.Count ==0)
    return;
   DbContext.Set().Attach(entityCollection.First());
   DbContext.Set().RemoveRange(entityCollection);
  }
  private IQueryable Filter(Expression> exp)
  {
   var dbSet = DbContext.Set().AsQueryable();
   if (exp != null)
    dbSet = dbSet.Where(exp);
   return dbSet;
  }
  public void Commit()
  {
   DbContext.SaveChanges();
  }
 }
public class UserRepository :BaseRepository, IUserRepository
 {
 }

四、AngularJS前端实现

  Web前端的实现就是采用AngularJS来实现,并且采用模块化开发模式。具体Web前端的代码结构如下图所示:

App/images // 存放Web前端使用的图片资源
App/Styles // 存放样式文件
App/scripts // 整个Web前端用到的脚本文件
    / Controllers // angularJS控制器模块存放目录
    / directives // angularJs指令模块存放目录
    / filters // 过滤器模块存放目录
    / services // 服务模块存放目录
   / app.js // Web前端程序配置模块(路由配置)
App/Modules // 项目依赖库,angular、Bootstrap、Jquery库
App/Views // AngularJs视图模板存放目录

  使用AngularJS开发的Web应用程序的代码之间的调用层次和后端基本一致,也是视图页面——》控制器模块——》服务模块——》Web API服务。

  并且Web前端CSS和JS资源的加载采用了Bundle的方式来减少请求资源的次数,从而加快页面加载时间。具体Bundle类的配置:

public class BundleConfig
 {
  // For more information on bundling, visit http://go.microsoft.com/fwlink/&#63;LinkId=301862
  public static void RegisterBundles(BundleCollection bundles)
  {
   //类库依赖文件
   bundles.Add(new ScriptBundle("~/js/base/lib").Include(
     "~/app/modules/jquery-1.11.2.min.js?1.1.9",
     "~/app/modules/angular/angular.min.js?1.1.9",
     "~/app/modules/angular/angular-route.min.js?1.1.9",
     "~/app/modules/bootstrap/js/ui-bootstrap-tpls-0.13.0.min.js?1.1.9",
     "~/app/modules/bootstrap-notify/bootstrap-notify.min.js?1.1.9"
     ));
   //angularjs 项目文件
   bundles.Add(new ScriptBundle("~/js/angularjs/app").Include(
     "~/app/scripts/services/*.js?1.1.9",
     "~/app/scripts/controllers/*.js?1.1.9",
     "~/app/scripts/directives/*.js?1.1.9",
     "~/app/scripts/filters/*.js?1.1.9",
     "~/app/scripts/app.js?1.1.9"));
   //样式
   bundles.Add(new StyleBundle("~/js/base/style").Include(
     "~/app/modules/bootstrap/css/bootstrap.min.css?1.1.9",
     "~/app/styles/dashboard.css?1.1.9",
     "~/app/styles/console.css?1.1.9"
     ));
  }
 }

  首页 Index.cshtml




 
 
 @Styles.Render("~/js/base/style")
 @Scripts.Render("~/js/base/lib")


 
 

@Scripts.Render("~/js/angularjs/app")

五、运行效果

  介绍完前后端的实现之后,接下来让我们看下整个项目的运行效果:

六、总结

  到此,本文的所有内容都介绍完了,尽管本文的AngularJS的应用项目还有很多完善的地方,例如没有缓冲的支持、没有实现读写分离,没有对一些API进行压力测试等。但AngularJS在实际项目中的应用基本是这样的,大家如果在项目中有需要用到AngularJS,正好你们公司的后台又是.NET的话,相信本文的分享可以是一个很好的参考。另外,关于架构的设计也可以参考我的另一个开源项目:OnlineStore和FastWorks。

以上所述是小编给大家介绍的使用AngularJs打造权限管理系统的方法,希望对大家有所帮助!

推荐阅读
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 延迟注入工具(python)的SQL脚本
    本文介绍了一个延迟注入工具(python)的SQL脚本,包括使用urllib2、time、socket、threading、requests等模块实现延迟注入的方法。该工具可以通过构造特定的URL来进行注入测试,并通过延迟时间来判断注入是否成功。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Linux环境变量$PATH的作用及使用方法
    本文介绍了Linux环境变量$PATH的作用及使用方法。$PATH是一个由多个目录组成的变量,用冒号分隔。当执行一个指令时,系统会按照$PATH定义的目录顺序搜索同名的可执行文件,如果有多个同名指令,则先找到的会被执行。通过设置$PATH变量,可以在任何地方执行指令,无需输入绝对路径。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • angular.element使用方法及总结
    2019独角兽企业重金招聘Python工程师标准在线查询:http:each.sinaapp.comangularapielement.html使用方法 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • C#设计模式之八装饰模式(Decorator Pattern)【结构型】
    一、引言今天我们要讲【结构型】设计模式的第三个模式,该模式是【装饰模式】,英文名称:DecoratorPattern。我第一次看到这个名称想到的是另外一个词语“装修”,我就说说我对“装修”的理 ... [详细]
author-avatar
woaimm0705242
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有