实现的功能
- 用户可以查阅自己加入黑名单的用户
- 选中批量删除黑名单内名字
- 单个删除黑名单内名字
- 全部删除黑名单
依赖的第三方工具
- AngularJS框架
- BootStrap框架
- Express框架
页面代码
由于在我的博客中前端实战之用户控制台中有详细的页面代码这里只出示一小部分，方便大家阅读
<div role="tabpanel" class="tab-pane" id="blacklist" ng-controller="blacklistCtrl">
<div class="block" ng-init="initBlackList()">
<p>
您可以在用户状态和用户主页中将其加入黑名单。您将无法看到加入黑名单的用户发表的状态和评论。
</p>
<table class="table table-bordered">
<tbody>
<tr>
<th colspan="2">
黑名单用户
</th>
<th>
操作
</th>
</tr>
<tr ng-repeat="person in personList">
<td>
<input class="check-helper" type="checkbox" ng-model="person.checked">
</td>
<td>
<a ng-href="/users/{{person.name}}">{{person.name}}</a>
</td>
<td>
<label class="btn-link btn-small unblock" ng-click="remove(person)">
从黑名单移除
</label>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<input class="check-helper" type="checkbox" ng-click="selectAll()">
<span>全选</span>
<label class="btn-link pull-right" style="color:#555555" ng-click="removeAll()">
批量移除
</label>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
前端交互代码
angular.module('settingAPP',['myApp.Services','angularFileUpload']).controller('setCtrl',function($rootScope,$scope,$http,$jquery){
$rootScope.msg='';
$rootScope.display=false;
document.user={};
$scope.getUser=function(){
$http.get('/users/getUser').success(function(data){
if(!data.success){
if(!data.err.message) data.err.message="未知错误，稍后再试"
$rootScope.msg=data.err.message;
$rootScope.display=true;
}
else{
document.user=data.content;
$scope.$broadcast('userDone');
}
}).error(function(data){
$rootScope.msg='未知错误，请重试';
$rootScope.display=true;
});
}
}).controller('blacklistCtrl',function($rootScope,$scope,$http){
$scope.personList=new Array();
var initBlackList=function(){
var tmp=document.user.blacklist;
for(var i in tmp){
$scope.personList.push({
name:tmp[i],
checked:false
});
}
};
$scope.$on('userDone',initBlackList);
$scope.selectAll=function(){
for(var i in $scope.personList){
$scope.personList[i].checked=!($scope.personList[i].checked);
}
};
$scope.remove=function(person){
var temp1=[];
var temp2=[];
for(var i in $scope.personList){
if(person==$scope.personList[i]) continue;
temp1.push($scope.personList[i]);
temp2.push($scope.personList[i].name);
}
$http.post('/settings/removeBlacklist',{persons:temp2}).success(function(data){
if(!data.success){
if(!data.err.message) data.err.message="未知错误，稍后再试"
$rootScope.msg=data.err.message;
$rootScope.display=true;
}
else{
$scope.personList=temp1;
}
}).error(function(data){
$rootScope.msg='未知错误，请重试';
$rootScope.display=true;
});
};
$scope.removeAll=function(){
var temp1=[];
var temp2=[];
var person;
for(var i in $scope.personList){
person=$scope.personList[i];
if(!person.checked){
temp1.push(person);
temp2.push(person.name);
}
}
$http.post('/settings/removeBlacklist',{persons:temp2}).success(function(data){
if(!data.success){
if(!data.err.message) data.err.message="未知错误，稍后再试"
$rootScope.msg=data.err.message;
$rootScope.display=true;
}
else{
$scope.personList=temp1;
}
}).error(function(data){
$rootScope.msg='未知错误，请重试';
$rootScope.display=true;
});
};
});
为了一开始就能展现黑名单页面，我们使用了ng-init，但这还不够，由于该页面是包裹在整个控制台页面里，我想直接拿到整个user的信息而非仅黑名单，那初始化操作就必须在父控制器SetCtrl里做了，可用ng-init的话黑名单的初始化就早于拿到user了，怎么办呢？利用事件。
$scope.$broadcast('userDone');//父控制器
$scope.$on('userDone',$scope.initBlackList);//子控制器
后端代码
function rmBlack(req,res){
Then(function(cont){
User.findOne({username:req.session.uname},cont);
}).then(function(cont,doc){
if(!doc) return cont(new Err(msg.USER.userNone));
doc.blacklist=req.body.persons;
doc.save(cont);
}).then(function(cont,doc){
res.json({
success:true,
err:null
});
}).fail(function(cont,err){
console.log(err.stack);
if(!err.message) err.message='后台错误，稍后再试';
res.json({
success:false,
err:err
});
});
}
