第六章 用户管理

源代码GitHub:https://github.com/ZhaoRd/Zrd_0001_AuthorityManagement

1.介绍

    用户管理主要是针对系统所有用户的管理功能，试图提供一个用户列表，以便管理员维护用户列表。

    本章主要介绍内容：angle的表格、angularjs表单验证、分页，后端代码查询等功能。

    界面预览是整个Demo所采用的列表和操作方式。

2.界面预览

图2-1

图2-2

图2-3

点击图2-1中的新增用户按钮，则弹出图2-2。

在图2-2中，如果不输入用户名，这提示必须输入用户名，输入用户名后，点击保存，保存结果会显示在图2-1中的“操作通知区域”。

点击图2-1列表内的删除按钮，则弹出图2-3，操作结果显示在图2-1中的"操作通知区域"。

3.功能实现

3.1 前台代码

 

@{

this.Layout = null;

ViewBag.Title = "List";

}

 

<h3>用户管理</h3>

 

<div class="panel panel-default" ng-controller="SearchController as panel">



<div ng-class="{'panel-heading-collapsed':panelSearch}" class="panel-heading">

<em class="fa fa-filter"></em>搜索条件|

<small>设置搜索用户条件</small>

 

<div class="pull-right" tool-collapse="tool-collapse">

<a class="ng-scope" ng-click="panelSearch = !panelSearch"

panel-collapse="" >

<em class="fa fa-plus ng-hide" ng-show="panelSearch" style=""></em>

<em class="fa fa-minus" ng-show="!panelSearch" style=""></em>

</a>



</div>



</div>



<div collapse="panelSearch" class="panel-wrapper">

<div class="panel-body">

<form name="formSearch" ng-submit="panel.submitForm()"

novalidate="" class="form-horizontal">



<div class="form-group">

<label class="col-lg-3 control-label">用户名</label>

<div class="col-lg-6">

<input type="text" name="username" required="" ng-model="filter.username" class="form-control" />



</div>

</div>

<div class="form-group">

<label class="col-lg-3 control-label"></label>

<div class="col-lg-6">

<button type="submit" class="btn btn-info">搜索</button>

<button type="reset" class="btn btn-danger">重置</button>

</div>



</div>

</form>

</div>

</div>

 

</div>

 

<div class="panel panel-default">



<div class="panel-heading" ng-controller="OperationController as operation">

<em class="fa fa-table"></em>用户列表



<div class="pull-right">

<button class="btn btn-labeled btn-info" type="button"

ng-click="operation.add()">

<span class="btn-label">

<i class="fa fa-plus"></i>

</span>

新增用户

</button>

</div>

 

</div>

<div class="panel-body">



<div class="row" ng-controller="DataTableController as table1">

<div class="col-lg-12">

<table datatable="ng" class="row-border hover"

dt-options="table1.dtOptions"

dt-column-defs="table1.dtColumnDefs">

<thead>

<tr>

<th>ID</th>

<th>姓名</th>

<th>邮箱</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="person in table1.persons.list">

<td>{{ person.Id }}</td>

<td>{{ person.UserName }}</td>

<td>{{ person.Email }}</td>

<td>

<button type="button" ng-click="table1.edit(person.Id)" class="btn btn-sm btn-warning"

ng-disabled="person.UserName=='super'">

<em class="fa fa-edit"></em>编辑

</button>

<button type="button" ng-click="table1.delete(person.Id)" class="btn btn-sm btn-danger"

ng-disabled="person.UserName=='super'">

<em class="fa fa-trash-o"></em>删除

</button>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<div class="row" ng-controller="UserPagingController as pag">

<div class="col-lg-3" style="margin-top: 21px">

<span>每页显示</span>

<div dropdown="dropdown" class="btn-group">

<button dropdown-toggle="" class="btn btn-default">{{pag.paging.pageSize}} <b class="caret"></b>

</button>

<ul role="menu" class="dropdown-menu animated fadeIn">



<li ng-repeat="sizeitem in pag.pageSizes">

<a ng-click="pag.pageSizeChanged(sizeitem)">{{sizeitem}}</a>

</li>

</ul>

</div>

条数据

</div>

<div class="col-lg-9">

<pagination total-items="pag.paging.total"

ng-model="pag.paging.currentPage"

max-size="pag.paging.pageSize"

items-per-page="pag.paging.pageSize"

boundary-links="true" rotate="false"

num-pages="pag.numPages"

ng-change="pag.pageChanged()"

previous-text="上一页"

next-text="下一页"

first-text="首页"

last-text="尾页"

class="pagination-sm"></pagination>

<pre> 显示第 {{(pag.paging.currentPage-1)*pag.paging.pageSize+1}} 至 {{pag.paging.currentPage*pag.paging.pageSize < pag.paging.total ? pag.paging.currentPage*pag.paging.pageSize:pag.paging.total}} 项结果，共 {{pag.paging.total}} 项；当前第 {{pag.paging.currentPage}} 页，共 {{pag.numPages}} 页 </pre>

</div>

</div>

</div>

</div>

 

<toaster-container toaster-options="{'position-class': 'toast-bottom-right', 'close-button':true}"></toaster-container>

 

 

<script type="text/ng-template" id="myModalContent.html">

<div class="modal-header">

<h3 class="modal-title">编辑用户</h3>

</div>

<div class="modal-body">

<form name="formValidate" ng-submit="submitForm()"

novalidate="" class="form-validate form-horizontal">



<div class="form-group">

<label class="col-lg-3 control-label">用户名<small class="text-muted">*</small></label>

<div class="col-lg-6">

<input type="text" name="username" required="" ng-model="user.UserName" class="form-control" />



</div>

<div class="col-lg-3 ">

<span ng-show="validateInput('username', 'required')" class="text-danger">

必须填入用户名

</span>

</div>

</div>



</form>



</div>

<div class="modal-footer">

<button class="btn btn-primary" type="button" ng-click="submitForm()">保存</button>

<button class="btn btn-warning" type="button" ng-click="cancel()">取消</button>

</div>

</script>

 

 

<script type="text/javascript">



// #region 检索面板的处理



(function() {

'use strict';

 

var app = angular.module('angle');

 

app.register.controller('SearchController', ['$scope', 'UserManagerService', function ($scope, UserManagerService) {

var vm = this;

activate();

 

////////////////

 

function activate() {

 

vm.filter = UserManagerService.filter;

 

vm.submitForm =function() {

UserManagerService.getUserList();

};

 

}

 

}]);

 

})();

 

// #endregion

 

// #region 用户管理业务

(function () {

'use strict';

 

angular.module('angle').register.factory('UserManagerService', ['$http', '$q', function ($http, $q) {

var self = this;

self.userInfo = {

list: []

};

self.filter = {

username: ''

};

 

self.paging = {

currentPage: 1,

pageSize: 10,

total:0

};

 

self.getUserList = function () {

$http.post('UserManager/List', {

pageIndex:self.paging.currentPage,

pageSize: self.paging.pageSize

})

.success(function (data, status, headers, config) {

 

self.userInfo.list.length = 0;

 

_.forEach(data.AppendData.Data, function (item) {

self.userInfo.list.push(item);

});

 

self.paging.total = data.AppendData.Total;



})

.error(function (data, status, headers, config) {

});

};

self.createUser = function () {

return $http.get('UserManager/Create');

};

 

self.getUser = function(userid) {

 

var uow = $q.defer();

 

$http.post('UserManager/Edit', { id: userid })

.success(function (data, status, headers, config) {

uow.resolve(data);

})

.error(function (data, status, headers, config) {

uow.reject(data);

});

 

return uow.promise;

 

};

 

self.deleteUser = function(userid) {

 

var uow = $q.defer();

 

$http.post('UserManager/Delete', { id: userid })

.success(function (data, status, headers, config) {

uow.resolve(data);

})

.error(function (data, status, headers, config) {

uow.reject(data);

});

 

return uow.promise;

 

};

 

 

// 采用promise模式是因为在业务里不处理任何与界面，也就是controller里有关的内容

self.save = function (user) {

 

var d = $q.defer();// 创建工作单元

 

$http.post('UserManager/SaveUser', { userInput: user }).success(function (data, status, headers, config) {

d.resolve(data);

}).error(function (data, status, headers, config) {

d.reject(data);

});

 

return d.promise;

};

 

return self;

}]);

 

 

})();

 

// #endregion



// #region 用户列表数据处理

(function () {

'use strict';

 

angular

.module('angle').register

.controller('DataTableController', DataTableController);

 

DataTableController.$inject = ['$scope', '$compile', '$modal', '$resource', '$http', 'DTOptionsBuilder', 'DTColumnDefBuilder', 'DTColumnBuilder', 'UserManagerService', 'SweetAlert', 'toaster'];

function DataTableController($scope, $compile, $modal, $resource, $http, DTOptionsBuilder, DTColumnDefBuilder, DTColumnBuilder, UserManagerService, SweetAlert, toaster) {

var vm = this;

 

vm.persons = UserManagerService.userInfo;

 

activate();

 

////////////////

 

function activate() {

 

UserManagerService.getUserList();

 

vm.dtOptions = DTOptionsBuilder.newOptions()

.withPaginationType('full_numbers') // 分页样式

.withOption("ordering", false) // 不排序

.withOption("info", false) // 显示信息

.withOption("searching", false) // 不允许搜索

.withOption("paging", false)

.withLanguage({

processing: "处理中...",

lengthMenu: "每页显示 _MENU_ 项结果",

zeroRecords: "没有匹配结果",

info: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项；当前第 _PAGE_页，共 _PAGES_ 页",

infoEmpty: "显示第 0 至 0 项结果，共 0 项",

infoFiltered: "(由 _MAX_ 项结果过滤)",

infoPostFix: "",

search: "搜索:",

url: "",

emptyTable: "表中数据为空",

loadingRecords: "载入中...",

infoThousands: ",",

paginate: {

first: "首页",

previous: "上页",

next: "下页",

last: "末页"

},

oAria: {

sortAscending: ": 以升序排列此列",

sortDescending: ": 以降序排列此列"

}

}) // 语言

 

;

 

vm.dtColumnDefs = [

DTColumnDefBuilder.newColumnDef(0).notVisible(),

DTColumnDefBuilder.newColumnDef(1),

DTColumnDefBuilder.newColumnDef(2),

DTColumnDefBuilder.newColumnDef(3)

];

 

}

 

vm.edit = edit;

vm.delete = del;

 

// 编辑用户

function edit(id) {

console.log('编辑', id);

 

UserManagerService.getUser(id).then(function (opresult) {

 

if (opresult == null) {

toaster.pop('error', '通知', '返回结果为空');

return;

}

 

if (opresult.ResultType === 0) {

opDialog(opresult.AppendData);

 

} else if (opresult.ResultType === 7) {

toaster.pop('error', '错误', opresult.Message);

}

 

});

 

 

};

 

// 删除用户

function del(id) {

console.log('删除', id);

 

SweetAlert.swal({

title: '确定删除吗?',

text: '删除数据后数据将永久删除,不可撤销',

type: 'warning',

showCancelButton: true,

confirmButtonColor: '#DD6B55',

confirmButtonText: '确定',

cancelButtonText: '删除',

closeOnConfirm: false,

closeOnCancel: true

}, function (isConfirm) {

if (isConfirm) {

 

UserManagerService.deleteUser(id).then(function(opResult) {



if (opResult.ResultType === 0) {

SweetAlert.swal(opResult.Message, '', 'success');

UserManagerService.getUserList();

}

 

});

 



}

});

 

}

 

// 对话框操作

function opDialog(dialogData) {

 

var modalInstance = $modal.open({

animation: $scope.animationsEnabled,

templateUrl: 'myModalContent.html',

controller: 'ModalInstanceCtrl',

backdrop: 'static',// 静态

keyboard: false,// 不能通过esc关闭

resolve: {

userInfo: function () {

return dialogData;//opResult.AppendData;

}

}

});

 

modalInstance.result.then(function (user) {

 

UserManagerService.save(user).then(function (opresult) {

 

if (opresult == null) {

toaster.pop('error', '通知', '返回结果为空');

return;

}

 

if (opresult.ResultType === 0) {

toaster.pop('success', '通知', opresult.Message);

UserManagerService.getUserList();

 

} else if (opresult.ResultType === 7) {

toaster.pop('error', '错误', opresult.Message);

}

 

});

}, function () {

// 取消操作

});

 

}

}

 

})();

 

// #endregion

 

// #region 分页控件的处理

(function () {

'use strict';

angular.module('angle').register.controller('UserPagingController', ['paginationConfig','UserManagerService',

function (paginationConfig, UserManagerService) {

var vm = this;



activate();

////////////////

 

function activate() {

 

vm.paging = UserManagerService.paging;

 

vm.paging.pageSize = 10;

vm.pageSizes = [5, 10, 20, 50, 100];

 

vm.setPage = function (pageNo) {

vm.paging.currentPage = pageNo;

};

 

vm.setNumPages=function() {



}

 

vm.pageChanged = function () {

console.log('切换页面到: ' + vm.paging.currentPage);

UserManagerService.getUserList();

};

 

vm.pageSizeChanged = function (pagesize) {

 

vm.paging.pageSize = pagesize;

vm.setPage(1);

vm.pageChanged();

}

 

}

}]);

})();

// #endregion



// #region 按钮操作的处理

(function () {

'use strict';

 

var app = angular.module('angle');

app.register

.controller('OperationController', ['$scope', '$modal', 'UserManagerService', 'toaster', function ($scope, $modal, UserManagerService, toaster) {

 

var self = this;

 

activate();

 

////////////////

 

function activate() {

 

self.add = function () {

 

UserManagerService.createUser().then(function success(data) {

 

var opResult = data.data;

console.log('data', opResult);

 

if (opResult == null) {

return;

}

 

if (opResult.ResultType === 0) {

opDialog(opResult.AppendData);

}

 

});

};

}

 

function opDialog(dialogData) {



var modalInstance = $modal.open({

animation: $scope.animationsEnabled,

templateUrl: 'myModalContent.html',

controller: 'ModalInstanceCtrl',

backdrop: 'static',// 静态

keyboard: false,// 不能通过esc关闭

resolve: {

userInfo: function () {

return dialogData;//opResult.AppendData;

}

}

});

 

modalInstance.result.then(function (user) {

 

UserManagerService.save(user).then(function (opresult) {

 

console.log('save user opresult ---->', opresult);

if (opresult == null) {

toaster.pop('error', '通知', '返回结果为空');

return;

}

 

if (opresult.ResultType === 0) {

toaster.pop('success', '通知', opresult.Message);

UserManagerService.getUserList();

 

} else if (opresult.ResultType === 7) {

toaster.pop('error', '错误', opresult.Message);

}

 

});

}, function () {

// 取消操作

});

 

}

 

}]);

 

// 编辑用户弹出框的controller

app.register.controller('ModalInstanceCtrl', function ($scope, $modalInstance, userInfo) {

 

$scope.user = userInfo;

 

$scope.submitted = false;

 

$scope.submitForm = function () {

$scope.submitted = true;

if ($scope.formValidate.$valid) {

console.log('Submitted!!');

$scope.ok();

return true;

} else {

console.log('Not valid!!');

return false;

}

 

};

 

$scope.validateInput = function (name, type) {

var input = $scope.formValidate[name];

return (input.$dirty || $scope.submitted) && input.$error[type];

};

 

$scope.ok = function () {

$modalInstance.close($scope.user);

};

 

$scope.cancel = function () {

$modalInstance.dismiss('cancel');

};

 

});

})();

 

// #endregion



 

</script>

 

 

html结果主要包括了几大部分：搜索、列表操作、列表、分页、通知区域、对话框

相应的，就有对应的几个Controller：SearchController、OperationController、DataTableController、UserPagingController、ModalInstanceCtrl

JS代码中还包括了一部分业务代码，包括了获取、创建、保存等主要业务，代码如下：

(function () {

'use strict';

 

angular.module('angle').register.factory('UserManagerService', ['$http', '$q', function ($http, $q) {

var self = this;

self.userInfo = {

list: []

};

self.filter = {

username: ''

};

 

self.paging = {

currentPage: 1,

pageSize: 10,

total:0

};

// 获取用户列表

self.getUserList = function () {

$http.post('UserManager/List', {

pageIndex:self.paging.currentPage,

pageSize: self.paging.pageSize

})

.success(function (data, status, headers, config) {

 

self.userInfo.list.length = 0;

 

_.forEach(data.AppendData.Data, function (item) {

self.userInfo.list.push(item);

});

 

self.paging.total = data.AppendData.Total;



})

.error(function (data, status, headers, config) {

});

};

 

// 创建用户

self.createUser = function () {

return $http.get('UserManager/Create');

};

 

// 获取用户

self.getUser = function(userid) {

 

var uow = $q.defer();

 

$http.post('UserManager/Edit', { id: userid })

.success(function (data, status, headers, config) {

uow.resolve(data);

})

.error(function (data, status, headers, config) {

uow.reject(data);

});

 

return uow.promise;

 

};

 

// 删除用户

self.deleteUser = function(userid) {

 

var uow = $q.defer();

 

$http.post('UserManager/Delete', { id: userid })

.success(function (data, status, headers, config) {

uow.resolve(data);

})

.error(function (data, status, headers, config) {

uow.reject(data);

});

 

return uow.promise;

 

};

 

 

// 采用promise模式是因为在业务里不处理任何与界面，也就是controller里有关的内容

// 保存用户

self.save = function (user) {

 

var d = $q.defer();// 创建工作单元

 

$http.post('UserManager/SaveUser', { userInput: user }).success(function (data, status, headers, config) {

d.resolve(data);

}).error(function (data, status, headers, config) {

d.reject(data);

});

 

return d.promise;

};

 

return self;

}]);

 

 

})();

 

 

DataTableController 处的代码主要是控制用户列表的显示，使用的是angular 下的datatables的插件

UserPagingController 主要是负责分页区域的逻辑控制 。

在使用angularjs中，由于并不是一次性加载所有逻辑文件到浏览器中，所以在网上找到了一段扩展的代码 app.register来延迟定义controller、factory等功能，此处代码放在后文，在写angle时会单独提出来说明。

 

3.2 后台代码

在3.1中，angular通过使用factory定义了一个业务，每个业务调用对应的访问地址获取后台数据。

对应的控制器代码如下：

 

/// <summary>

/// The user manager controller.

/// </summary>

[NeedLogined]

[SystemModel("用户管理")]

public class UserManagerController : Controller

{

/// <summary>

/// The user service.

/// </summary>

private readonly IUserService userService;

 

/// <summary>

/// Initializes a new instance of the <see cref="UserManagerController"/> class.

/// </summary>

/// <param name="userService">

/// The user service.

/// </param>

public UserManagerController(IUserService userService)

{

this.userService = userService;

}

 

/// <summary>

/// The index.

/// </summary>

/// <returns>

/// The <see cref="ActionResult"/>.

/// </returns>

public ActionResult Index()

{

return this.RedirectToAction("List");

}

 

/// <summary>

/// The list.

/// </summary>

/// <returns>

/// The <see cref="ActionResult"/>.

/// </returns>

[PermissionSetting(PermissionValue.Lookup)]

public ActionResult List()

{

return this.View();

}

 

/// <summary>

/// The search list.

/// </summary>

/// <returns>

/// The <see cref="JsonResult"/>.

/// </returns>

[HttpPost]

[ActionName("List")]

public JsonResult SearchList(int pageIndex =1,int pageSize = 10)

{

var total = 0;

 

var userList = this.userService.GetAllUser(pageIndex, pageSize, out total);

 

return

this.Json(

OperationResult.Success(

string.Empty,

string.Empty,

new { Total = total, PageSize = pageSize, Data = userList }));

}

 

/// <summary>

/// 获取新用户，若要对新增功能进行控制，则必须添加一个httpget方法才行

/// </summary>

/// <returns>

/// The <see cref="ActionResult"/>.

/// </returns>

[PermissionSetting(PermissionValue.Create)]

public ActionResult Create()

{

var newUser = new EditUserInputDto();

return this.Json(OperationResult.Success(string.Empty, string.Empty, newUser),JsonRequestBehavior.AllowGet);

}

 

/// <summary>

/// The create post.

/// </summary>

/// <param name="userInput">

/// The user input.

/// </param>

/// <returns>

/// The <see cref="ActionResult"/>.

/// </returns>

[HttpPost]

public ActionResult SaveUser(EditUserInputDto userInput)

{

try

{

if (userInput.Id == Guid.Empty)

{

this.userService.Add(userInput);

}

else

{

this.userService.Update(userInput);

}

 

return this.Json(OperationResult.Success("保存成功"));

}

catch (Exception e)

{

return this.Json(OperationResult.Error("保存失败," + e.Message));

}

}

 

/// <summary>

/// The edit.

/// </summary>

/// <param name="id">

/// The id.

/// </param>

/// <returns>

/// The <see cref="ActionResult"/>.

/// </returns>

[PermissionSetting(PermissionValue.Edit)]

public ActionResult Edit(Guid id)

{

var user = this.userService.GetUserById(id);

return this.Json(OperationResult.Success(string.Empty,string.Empty,user));

}

 

/// <summary>

/// The delete.

/// </summary>

/// <param name="id">

/// The id.

/// </param>

/// <returns>

/// The <see cref="ActionResult"/>.

/// </returns>

[PermissionSetting(PermissionValue.Delete)]

public ActionResult Delete(Guid id)

{

this.userService.Delete(id);

return this.Json(OperationResult.Success("删除成功"));

}

}

 

 

所有的Action操作都比较简单，就是直接调用Service层代码

对应的UesrService使用代码如下：

/// <summary>

/// 用户服务实现

/// </summary>

public class UserService:IUserService

{

/// <summary>

/// 用户仓储

/// </summary>

private readonly IUserRepository userRepository;

 

/// <summary>

/// Initializes a new instance of the <see cref="UserService"/> class.

/// </summary>

/// <param name="userRepository">

/// The user repository.

/// </param>

public UserService(IUserRepository userRepository)

{

this.userRepository = userRepository;

}

 

/// <summary>

/// The add.

/// </summary>

/// <param name="userInput">

/// The user input.

/// </param>

public void Add(EditUserInputDto userInput)

{

Guard.ArgumentNotNull(() => userInput);

var toAdd = Mapper.Map<User>(userInput);

 

using (var uof = EngineContext.Current.Resolve<ISkymateUnitOfWork>())

{

if (toAdd.ID == Guid.Empty)

{

toAdd.ID = Guid.NewGuid();

}

 

this.userRepository.Add(toAdd);

uof.Commit();

}

}

 

/// <summary>

/// The update.

/// </summary>

/// <param name="userInput">

/// The user input.

/// </param>

public void Update(EditUserInputDto userInput)

{

Guard.ArgumentNotNull(() => userInput);

Guard.ArgumentNotEmpty(() => userInput.Id);

 

var toUpdate = this.userRepository.GetByKey(userInput.Id);

 

toUpdate = Mapper.Map<EditUserInputDto, User>(userInput, toUpdate);

this.userRepository.Update(toUpdate);

this.userRepository.Context.Commit();

}

 

/// <summary>

/// The delete.

/// </summary>

/// <param name="userid">

/// The userid.

/// </param>

public void Delete(Guid userid)

{

Guard.ArgumentNotEmpty(() => userid);

 

var toRemove = this.userRepository.GetByKey(userid);

this.userRepository.Remove(toRemove);

this.userRepository.Context.Commit();

}

 

/// <summary>

/// The get user by id.

/// </summary>

/// <param name="userid">

/// The userid.

/// </param>

/// <returns>

/// The <see cref="EditUserInputDto"/>.

/// </returns>

public EditUserInputDto GetUserById(Guid userid)

{

Guard.ArgumentNotEmpty(() => userid);

 

var user = this.userRepository.GetByKey(userid);

return Mapper.Map<EditUserInputDto>(user);

}

 

/// <summary>

/// The get all user.

/// </summary>

/// <param name="pageIndex">

/// The page index.

/// </param>

/// <param name="pageSize">

/// The page size.

/// </param>

/// <param name="total">

/// The total.

/// </param>

/// <returns>

/// The <see cref="IEnumerable"/>.

/// </returns>

/// <exception cref="Exception">

/// </exception>

public IEnumerable<UserListOutputDto> GetAllUser(int pageIndex, int pageSize, out int total)

{

Guard.ArgumentInRange<int>(pageIndex, 0, int.MaxValue, "pageIndex");



var query = this.userRepository.FindAll();

 

total = query.Count();

query = query.OrderBy(u => u.UserName).Skip((pageIndex - 1) * pageSize).Take(pageSize);

 

return query.ToList().Select(Mapper.Map<UserListOutputDto>);

}

}

 

代码中并没有使用检索功能，所有的代码亦比较简单，就是简单的增删改查！

 

4.总结

    本章主要介绍了用户管理模块的前端代码和后端代码的内容，还有相关的功能并未实现，比如添加/编辑用户的时候没有对用户组的操作、查询中并没有检索功能等等，这些功能会在后面的代码中补全。

    本章内容依然使用了mvc中的访问控制器中的内容来获取数据，计划在写完博客只会，研究使用webapi提供数据服务，这样就可以使用mvc的控制器负责页面跳转，webapi提供数据，js/html负责展示数据，做到前后端分离。

----------------------------------------------------------------------------------------------

推荐QQ群：

278252889(AngularJS中文社区)

5008599(MVC EF交流群)

134710707(ABP架构设计交流群 )

59557329(c#基地 )

230516560(.NET DDD基地 )

本人联系方式：QQ：351157970