Web实际用户头像


在这博客中,我们为用户添加了头像。

兑现力量

  • 用户头像上污染
  • 也每个用户提供三只候选头像,即最后两个头像和网默认头像。

依傍之老三正工具

  • AngularJS前端框架
  • 很快后端平框架
  • Angular-File-upload插件
  • Connect-busboy插件
  • Then.js小工具
  • Mongoose数据库插件

问题浅析

采取长度也3之仓库来保存用户之候选头像,并且堆栈的脚必须是系默认的头像。较新的化身更靠近堆栈的顶部。

事态分类

及传新头像

一旦用户上传与自己事先高达污染之同名的头像,我欠怎么处置?

  • 及当下头像名称一致,什么都非开
  • 同备用头像名称相同,将目前头像推入堆栈,删除备用头像名称,并转当前头像名称。
  • 非等同,当前底头像被推入堆栈,然后看看长度不是顶尖,超级删除第一单头像(默认后面的一个)
轮换为代头像
  • 用户挑选时默认的默认头像,并且不履行另外操作。
  • 用户挑选顶替化身,其是默认化身。当前底头像没有让推入堆栈。堆栈删除相应的备用头像。
  • 用户选择默认化身,当前化身不是默认化身,并且当前化身为推入堆栈。如果堆栈长度逾3,则去头像1
  • 眼下非默认化身,用户挑选顶替化身,当前化身为推入堆叠,并且相应的替代化身被去除。

页面代码

哪怕像自己的博客一样前者用户控制台此处出详实的页面代码,只显示了同有点一些,便于大家读。

<label class="control-label col-sm-2">
    头像
</label>
<div class="avatar col-sm-2">
   <img alt="用户头像" class="img-circle" ng-src="{{profile.avatar}}">
</div>
<div class="btn-group change-avatar col-sm-2">
   <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       更换头像

   </button>
   <ul class="dropdown-menu" role="menu">
       <li class="upload-button">
           <div class="btn btn-lg btn-link upload-avatar" type="file" ng-file-select="fileSelect($files)" accept="image/*">

                            上传头像
           </div>
       </li>
       <li class="divider">
       </li>
       <li class="available-avatar">
           <img ng-repeat="pic in picList" ng-src="{{pic}}" ng-click="changeAvatar(pic)">

        </li>
    </ul>
</div>

前端代码

angular.module('settingAPP',['myApp.Services','angularFileUpload']).controller('profileCtrl',function($rootScope,$scope,$http,$upload){
        $scope.count=0;
        $scope.$on('userDone',function(){
            $scope.profile=document.user.profile;
            $scope.picList=$scope.profile.available_avatar;

        });
        $scope.fileSelect=function($files){

            var file=$files[0];
            $scope.upload=$upload.upload({
                url:'/settings/newAvatar',
                file:file

            }).success(function(data, status, headers, config){
                if(!data.success){
                    if(!data.err.message) data.err.message="未知错误,稍后再试"
                    $rootScope.msg=data.err.message;
                    $rootScope.display=true;
                }
                else{
                    $scope.profile.avatar=data.avatar_path;
                    $scope.picList=data.list;
                }
            });
        };

        $scope.changeAvatar=function(pic){
            var count,tmp;
            for(var i=0;i<3;i++){
                if($scope.picList[i]==pic){
                    count=i;
                }
            }
            $http.post('/settings/changeAvatar',{pic:pic,num:count}).success(function(data){
                if(!data.success){
                    if(!data.err.message) data.err.message="未知错误,稍后再试"
                    $rootScope.msg=data.err.message;
                    $rootScope.display=true;
                }
                else{
                     $scope.picList=data.list;
                    $scope.profile.avatar=pic;
                }
            }).error(function(data){
                $rootScope.msg='未知错误,请重试';
                $rootScope.display=true;
            });
        };

    });

后端代码

function newAvatar(req,res){//上传新头像
   var img_path;
    Then(function(cont){
        req.pipe(req.busboy);
        req.busboy.on('file',cont);
    }).fin(function(cont,fieldname,file,filename){
        img_path='/img/avatar/'+req.session.uname+'_'+filename;
        var fileStream=fs.createWriteStream('public'+img_path);
        file.pipe(fileStream);
        fileStream.on('close',cont);
    }).fin(function(cont){
        User.findOne({username:req.session.uname},cont);
    }).then(function(cont,doc){
        if(!doc) return cont(new Err(msg.USER.userNone));
        var tmp=doc.profile.available_avatar;
        //与当前头像名相同,什么都不做
        if(img_path==doc.profile.avatar) return cont(null,doc);
        //与备用头像名相同,当前头像入栈,删除备用头像名,当前改为上传头像名
        for(var i in tmp){
            if(tmp[i]==img_path){
                tmp.splice(i,1);
                tmp.push(doc.profile.avatar);
                doc.profile.avatar=img_path;
                return doc.save(cont);
            }
        }
        //都不相同,当前入栈,再看长度有没有超,超了删1号
        tmp.push(doc.profile.avatar);
        doc.profile.avatar=img_path;
        if(tmp.length>3) tmp.splice(1,1);
        return doc.save(cont);



    }).then(function(cont,doc){
        res.json({
            success:true,
            err:null,
            avatar_path:img_path,
            list:doc.profile.available_avatar
        });
    }).fail(EndHandler);
}

function changeAvatar(req,res){//从候选头像中选择
   var tmp=req.body;
   Then(function(cont){
       User.findOne({username:req.session.uname},cont);
   }).then(function(cont,doc){
       if(!doc) return cont(new Err(msg.USER.userNone));
       //与当前头像名相同,什么都不做
       if(tmp.pic==doc.profile.avatar) return cont(null,doc);
       //用户选默认,当前入栈,若栈长超过3,删除1号
       if(tmp.num==0){
           doc.profile.available_avatar.push(doc.profile.avatar);
           if(doc.profile.available_avatar.length>3){
               doc.profile.available_avatar.splice(1,1);
           }
           doc.profile.avatar=tmp.pic;
           return doc.save(cont);
       }
       //用户选备用,当前默认,不入栈,删除对应备用
       if(doc.profile.avatar==doc.profile.available_avatar[0]){
           doc.profile.avatar=tmp.pic;
           doc.profile.available_avatar.splice(tmp.num,1);
           return doc.save(cont);
       }
       //当前非默认,用户选备用,当前入栈,删除相应备用
       doc.profile.available_avatar.push(doc.profile.avatar);
       doc.profile.available_avatar.splice(tmp.num,1);
       doc.profile.avatar=tmp.pic;
       return doc.save(cont);


   }).then(function(cont,doc){
       res.json({
           success:true,
           err:null,
           list:doc.profile.available_avatar
       });
   }).fail(EndHandler);
}

相关文章