實(shí)現(xiàn)的功能

• 用戶(hù)可以查閱自己加入黑名單的用戶(hù)
• 選中批量刪除黑名單內(nèi)名字
• 單個(gè)刪除黑名單內(nèi)名字
• 全部刪除黑名單

依賴(lài)的第三方工具

• AngularJS框架
• BootStrap框架
• Express框架

頁(yè)面代碼

由于在我的博客中前端實(shí)戰(zhàn)之用戶(hù)控制臺(tái)中有詳細(xì)的頁(yè)面代碼這里只出示一小部分，方便大家閱讀

<div role="tabpanel" class="tab-pane" id="blacklist" ng-controller="blacklistCtrl">
    <div class="block" ng-init="initBlackList()">
        <p>
            您可以在用戶(hù)狀態(tài)和用戶(hù)主頁(yè)中將其加入黑名單。您將無(wú)法看到加入黑名單的用戶(hù)發(fā)表的狀態(tài)和評(píng)論。
        </p>
        <table class="table table-bordered">
            <tbody>
            <tr>
                <th colspan="2">
                    黑名單用戶(hù)
                </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="未知錯(cuò)誤，稍后再試"
                    $rootScope.msg=data.err.message;
                    $rootScope.display=true;
                }
                else{
                    document.user=data.content;
                    $scope.$broadcast('userDone');
                }
            }).error(function(data){
                $rootScope.msg='未知錯(cuò)誤，請(qǐng)重試';
                $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="未知錯(cuò)誤，稍后再試"
                    $rootScope.msg=data.err.message;
                    $rootScope.display=true;
                }
                else{
                    $scope.personList=temp1;
                }
            }).error(function(data){
                $rootScope.msg='未知錯(cuò)誤，請(qǐng)重試';
                $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="未知錯(cuò)誤，稍后再試"
                    $rootScope.msg=data.err.message;
                    $rootScope.display=true;
                }
                else{
                    $scope.personList=temp1;
                }
            }).error(function(data){
                $rootScope.msg='未知錯(cuò)誤，請(qǐng)重試';
                $rootScope.display=true;
            });
        };

    });

為了一開(kāi)始就能展現(xiàn)黑名單頁(yè)面，我們使用了ng-init，但這還不夠，由于該頁(yè)面是包裹在整個(gè)控制臺(tái)頁(yè)面里，我想直接拿到整個(gè)user的信息而非僅黑名單，那初始化操作就必須在父控制器SetCtrl里做了，可用ng-init的話(huà)黑名單的初始化就早于拿到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='后臺(tái)錯(cuò)誤，稍后再試';
        res.json({
            success:false,
            err:err
        });
    });
}