Web实战之用户头像

最新推荐文章于 2024-05-30 08:19:37 发布

原创

最新推荐文章于 2024-05-30 08:19:37 发布 · 4.6k 阅读

2 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何在Web应用中实现用户头像上传功能，包括使用AngularJS和Express框架，以及Angular-File-upload等第三方工具。通过维护一个栈来管理用户的三个候选头像，确保最新头像始终在栈顶。当用户上传新头像或在备用头像间切换时，根据具体情况更新头像栈，保持栈的长度不超过3。同时提供了前端和后端的相关代码片段。

在这次博客中我们为用户增加头像

实现功能

用户头像上传
为每个用户提供三个候选头像，分别是最近两次的头像和系统默认头像

依赖的第三方工具

AngularJS前端框架
Express后端框架
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">
       更换头像
       <span class="caret"></span>
   </butto