上传模块在web开发中是很常见的功能也是很重要的功能,在web应用中需要上传的可以是图片、pdf、压缩包等其它类型的文件,同时对于图片可能需要回显,对于其它文件要能够支持下载等。在守望博客系统中对于上传模块进行统一管理,同时对于上传不同的类型文件,留有自定义实现机制的接口,也即可扩展。

基于上传模块机制,就可以实现修改头像功能了。同时顺带将修改密码的功能也一起实现,这个修改密码的功能相对就很简单了。

1、可扩展上传模块

统一上传模块的体现就是上传所有类型的文件,都是调用统一的一个接口,即上传接口唯一;同时对于具体上传的类型文件,如有特殊处理的可以自定义实现处理方法。

对于上传的文件能够有自定义的实现机制,则需要一个上传文件的处理接口,即:IUploadHandler,内容如下:

/**
* 上传文件处理接口类
*
* @author lzj
* @since 1.0
* @date [2019-07-09]
*/
public interface IUploadHandler { /**
* 上传文件处理方法
* 文件上传成功,返回文件的相关信息
* 文件上传失败, 返回null
*
* @param file
* @param distType
* @param userId
* @return
* @throws Exception
*/
public Object upload(MultipartFile file, String distType, String userId) throws Exception; /**
* 下载文件
*
* @param fileId
* @param response
* @throws Exception
*/
public void download(String fileId, HttpServletResponse response) throws Exception; /**
* 根据条件列出文件信息
*
* @param distType
* @param userId
* @return
* @throws Exception
*/
public Object list(String distType, String userId) throws Exception;
}

目前本版本中暂定有3个方法,即:

  • upload方法,用于处理自定义上传文件方式;
  • download方法,用于处理自定义下载的方式;
  • list方法,用于处理自定义列出文件列表的方式。

这里以上传头像图片为例,则上传头像的实现类UploadAvatarHandler,内容如下:

/**
* 上传头像处理类
*
* @author lzj
* @since 1.0
* @date [2019-07-09]
*/
@Slf4j
@Component("_avatar")
public class UploadAvatarHandler implements IUploadHandler { @Autowired
private IUserService userService; @Resource(name = "configCache")
private ICache<Config> configCache; @Override
public Object upload(MultipartFile file, String distType, String userId) throws Exception {
Map<String, Object> result = new HashMap<String, Object>();
try {
// 获取图片的大小
long fileSize = file.getSize(); // 图片大小不能超过2M, 2M = 2 * 1024 * 1024B = 2097152B
if (fileSize > 2097152L) {
throw new TipException("您上传的图片超过2M");
} Config config = configCache.get(Config.CONFIG_IMG_AVATAR_PATH);
// 保存头像的根目录
String basePath = config.getConfigValue();
if (!basePath.endsWith("/")) {
basePath += "/";
} // 根据当前时间构建yyyyMM的文件夹,建立到月的文件夹
String dateDirName = DateUtil.date2Str(new Date(), DateUtil.YEAR_MONTH_FORMAT);
basePath += dateDirName; File imageDir = new File(basePath);
if (!imageDir.exists()) {
imageDir.mkdirs();
} String fileNewName = IdGenarator.guid() + ".jpg";
FileUtil.copy(file.getInputStream(), new FileOutputStream(new File(imageDir, fileNewName))); // 获取用户信息
User user = userService.getById(userId);
user.setPicture(dateDirName + "/" + fileNewName); // 更新信息
userService.updateById(user); result.put("success", true);
result.put("msg", "上传头像成功");
} catch (TipException e) {
result.put("success", false);
result.put("msg", e.getMessage());
} catch (Exception e) {
log.error("上传头像失败", e);
result.put("success", false);
result.put("msg", "上传头像失败");
} return result;
} @Override
public void download(String fileId, HttpServletResponse response) throws Exception {
} @Override
public Object list(String distType, String userId) throws Exception {
return null;
}

这里有2个注意点,即这个@Component("_avatar"),这个类的名称最好自定义命名,最好以处理这种文件的类型为名,例如此处的是处理头像的,所以就是avatar,但是为了防止重名,所以前缀加上了下划线。

另外一个需要注意的就是,并不是所有的方法都需要实现,例如此处就没有实现download和list方法,因为头像图片不是通过流的方式回显的,而是直接通过映射到具体的图片,同时也是不需要列出头像的功能。

前面说过所有上传文件,都是调用统一的一个接口,也即是UploadController,内容如下:

/**
* 处理文件上传下载控制器类
*
* @author lzj
* @date [2019-07-09]
* @since 1.0
*/
@Slf4j
@Controller
public class UploadController { @Autowired
private ApplicationContext context; // 用于存储处理上传文件对象
private Map<String, IUploadHandler> uploadHandlers; /**
* 初始化操作
*
* @throws Exception
*/
@PostConstruct
public void init() throws Exception {
uploadHandlers = context.getBeansOfType(IUploadHandler.class);
} /**
* 上传文件
*
* @param file
* @param request
* @param session
* @return
*/
@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public Object upload(@RequestParam(value = "_uploadFile", required = false) MultipartFile file, HttpServletRequest request, HttpSession session) {
Object result = null;
try {
// 接收参数
// 获取上传文件类型,参数名为_fileType
String _distType = request.getParameter("_distType"); // 获取用户信息
User user = (User) session.getAttribute(Const.SESSION_USER); result = uploadHandlers.get(_distType).upload(file, _distType, user.getUserId());
} catch (Exception e) {
log.error("上传文件失败", e);
}
return result;
}
}

这里需要注意init方法,该方法会将IUploadHandler接口的实现类都扫描出来,同时以类名为key,实例为value返回。

同时调用上传方法时是需要带_distType参数的,该参数值要与具体IUploadHandler的实现类的类名一样,例如:上传头像就需要将 _distType = _avatar参数带过来。这样UploadController就知道具体用哪个实现类来处理。

2、修改头像

有了前面的上传模块,对于修改头像就简单多了,首先需要实现上传头像的实现类,即UploadAvatarHandler类,代码在上方已经罗列了此处省略。

加载出修改头像页面的核心的如下:

/**
* 加载出修改头像页面
*
* @return
*/
@RequestMapping(value = "/user/avatar", method = RequestMethod.GET)
public String avatar(HttpSession session, Model model) {
// session中的信息
User sessionUser = (User) session.getAttribute(Const.SESSION_USER); // 从数据库中获取用户信息
User user = userService.getById(sessionUser.getUserId()); model.addAttribute("user", user);
return Const.BASE_INDEX_PAGE + "auth/user/avatar";
}

修改头像,运用了fullAvatarEditor插件,所以核心的前台代码如下:

<script type="text/javascript">
swfobject.addDomLoadEvent(function () {
var swf = new fullAvatarEditor("${rc.contextPath}/static/plugins/fullAvatarEditor/fullAvatarEditor.swf", "${rc.contextPath}/resources/plugins/fullAvatarEditor/expressInstall.swf", "swfContainer", {
id: 'swf',
upload_url: '${rc.contextPath}/upload?_distType=_avatar', //上传接口
method: 'post', //传递到上传接口中的查询参数的提交方式。更改该值时,请注意更改上传接口中的查询参数的接收方式
src_upload: 0, //是否上传原图片的选项,有以下值:0-不上传;1-上传;2-显示复选框由用户选择
avatar_box_border_width: 0,
avatar_sizes: '150*150',
avatar_sizes_desc: '150*150像素',
avatar_field_names: '_uploadFile'
}, function (msg) {
console.log(msg);
switch (msg.code) {
case 1 :
break;
case 2 :
document.getElementById("upload").style.display = "inline";
break;
case 3 :
if (msg.type == 0) { }
else if (msg.type == 1) {
alert("摄像头已准备就绪但用户未允许使用!");
}
else {
alert("摄像头被占用!");
}
break;
case 5 :
setTimeout(function () {
window.location.href = window.location.href;
}, 1000);
break;
}
}
);
document.getElementById("upload").onclick = function () {
swf.call("upload");
};
});
</script>

注意:

里面一个upload_url参数就是写上传接口的,上述中为:

upload_url: '${rc.contextPath}/upload?_distType=_avatar'

正如在前面讨论的一样的,需要带上 _distType参数

页面效果如下:

注意在回显图片时,需要加上如下配置:

/**
* 静态资源配置
*
* @param registry
*/
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// 映射头像图片
String avatarPath = configCache.get(Config.CONFIG_IMG_AVATAR_PATH).getConfigValue();
if (!avatarPath.endsWith("/")) {
avatarPath += "/";
}
registry.addResourceHandler("/img/avatar/**").addResourceLocations("file:" + avatarPath);
}

3、修改密码

修改密码功能相对简单,页面效果如下:

此处就只列出修改密码的核心逻辑,即:

/**
* 修改密码
*
* @param request
* @param session
* @param model
* @return
*/
@RequestMapping(value = "/user/password", method = RequestMethod.POST)
@ResponseBody
public Result password(HttpServletRequest request, HttpSession session) {
Result result = new Result();
try {
// 获取登录信息
User tempUser = (User) session.getAttribute(Const.SESSION_USER);
String userId = tempUser.getUserId(); // 接收参数
String password = request.getParameter("password");
String newPwd = request.getParameter("newPwd");
String confirmNewPwd = request.getParameter("confirmNewPwd"); if (StringUtils.isEmpty(password) || StringUtils.isEmpty(newPwd) || StringUtils.isEmpty(confirmNewPwd)) {
throw new TipException("缺少必要请求参数");
} if (!newPwd.equals(confirmNewPwd)) {
throw new TipException("两次输入的新密码不相等");
} // 获取用户信息
User user = userService.getById(userId);
if (!user.getPassword().equals(StringUtil.md5(password))) {
throw new TipException("旧密码输入不正确");
} // 修改密码
user.setPassword(StringUtil.md5(newPwd));
boolean flag = userService.updateById(user); if (!flag) {
throw new TipException("修改密码失败");
} result.setCode(Result.CODE_SUCCESS);
result.setMsg("修改成功");
} catch (TipException e) {
result.setCode(Result.CODE_EXCEPTION);
result.setMsg(e.getMessage());
} catch (Exception e) {
log.error("修改密码失败", e);
result.setCode(Result.CODE_EXCEPTION);
result.setMsg("修改密码失败");
}
return result;
}

关注我

以你最方便的方式关注我:

微信公众号:

基于SpringBoot从零构建博客网站 - 设计可扩展上传模块和开发修改头像密码功能的更多相关文章

  1. 基于SpringBoot从零构建博客网站 - 技术选型和整合开发环境

    技术选型和整合开发环境 1.技术选型 博客网站是基于SpringBoot整合其它模块而开发的,那么每个模块选择的技术如下: SpringBoot版本选择目前较新的2.1.1.RELEASE版本 持久化 ...

  2. 基于SpringBoot从零构建博客网站 - 确定需求和表结构

    要确定一个系统的需求,首先需要明确该系统的用户有哪些,然后针对每一类用户,确定其需求.对于博客网站来说,用户有3大类,分别是: 作者,也即是注册用户 游客,也即非注册用户 管理员,网站维护人员 那么从 ...

  3. 基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能

    发布文章功能里面最重要的就是需要集成富文本编辑器,目前富文本编辑器有很多,例如ueditor,CKEditor.editor.md等.这里守望博客里面是集成的editor.md,因为editor.md ...

  4. 基于SpringBoot从零构建博客网站 - 新增创建、修改、删除专栏功能

    守望博客是支持创建专栏的功能,即可以将一系列相关的文章归档到专栏中,方便用户管理和查阅文章.这里主要讲解专栏的创建.修改和删除功能,至于专栏还涉及其它的功能,例如关注专栏等后续会穿插着介绍. 1.创建 ...

  5. 基于SpringBoot从零构建博客网站 - 开发设置主页标识和修改个人信息功能

    由于守望博客系统中支持由用户自己设置个人主页的URL的后半段,所以必须要用户设置该标识的功能,而且是用户注册登录之后自动弹出的页面,如果用户没有设置该标识,其它的操作是不能够操作的,同时要求主页标识只 ...

  6. 基于SpringBoot从零构建博客网站 - 开发文章详情页面

    文章详情页面是博客系统中最为重要的页面,登录用户与游客都可以浏览文章详情页面,只不过只有登录用户才能进行其它的一些操作,比如评论.点赞和收藏等等. 本次的开发任务只是将文章详情页面展示出来,至于一些收 ...

  7. 基于SpringBoot从零构建博客网站 - 整合ehcache和开发注册登录功能

    对于程序中一些字典信息.配置信息应该在程序启动时加载到缓存中,用时先到缓存中取,如果没有命中,再到数据库中获取同时放到缓存中,这样做可以减轻数据库层的压力.目前暂时先整合ehcache缓存,同时预留了 ...

  8. 基于SpringBoot从零构建博客网站 - 整合lombok和mybatis-plus提高开发效率

    在上一章节中<技术选型和整合开发环境>,确定了开发的技术,但是如果直接这样用的话,可能开发效率会不高,为了提高开发的效率,这里再整合lombok和mybatis-plus两个组件. 1.l ...

  9. 基于SpringBoot从零构建博客网站 - 分页显示文章列表功能

    显示文章列表一般都是采用分页显示,比如每页10篇文章显示.这样就不用每次就将所有的文章查询出来,而且当文章数量特别多的时候,如果一次性查询出来很容易出现OOM异常. 后台的分页插件采用的是mybati ...

随机推荐

  1. WPF的逻辑树和视觉树

    原文:WPF的逻辑树和视觉树 这部分的内容来自于即将出版的新书<WPF Unleashed>的第三章样章.关于什么是逻辑树,我们先看下面的一个伪XAML代码的例子: <Window ...

  2. JS 两种数组类型

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  3. 用友u8各版本在输出的时候报错提示:外部数据库驱动程序(1)中的意外错误

    从10月12日起很多U8用户反馈,在各版本U8中输出报表时软件报错,报错内容“外部数据库驱动程序(1)中的意外错误”,经初步分析有以下解决方案:1.卸载微软的补丁:(1)如果是PC操作系统(一般是客户 ...

  4. Win10《芒果TV》送7天免费会员,邀您抢先看萌心自制《妈妈是超人3》

    <妈妈是超人>第三季萌心归来,霍思燕,贾静雯,黄圣依,邓莎联合释放"妈妈的声音",嗯哼,咘咘,波妞,安迪,大麟子五位萌娃共同出镜,萌化屏幕.Win10<芒果TV& ...

  5. LINQ查询表达式---------join子句

    LINQ查询表达式---------join子句 join 子句接受两个源序列作为输入. 每个序列中的元素都必须是可以与另一个序列中的相应属性进行比较的属性,或者包含一个这样的属性. join子句使用 ...

  6. Android零基础入门第19节:Button使用详解

    原文:Android零基础入门第19节:Button使用详解 Button(按钮)是Android开发中使用非常频繁的组件,主要是在UI界面上生成一个按钮,该按钮可以供用户单击,当用户单击按钮时,按钮 ...

  7. Windows Mount NFS Share from e.g. Linux

    Note: Not Stable, so steps below are for reference only ************ Linux Configuration NFS Share 1 ...

  8. UItableView UIcollectionView下拉刷新会跳动?看了此篇就能解决这个Bug了

    顺序如下:   1.数组添加:   for (id model in modellist.list) {     IDSCommentWeplayList *commentListModel = [I ...

  9. Excel报表开发(本节主要讲述导出到Excel操作)

    一.Excel导入到GridView以及数据库操作比较简单,这儿不做过多讲解,需要注意的有二点: 1.设置IMEX=1将强制混合数据转换为文本. 2.解决Excel驱动程序默认读取8行:将" ...

  10. webpack中添加px2rem-loader

    在buid->util.js const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } // gene ...