第三天的内容

上传头像

首先设计持久层

@Param("SQL映射文件中#{}占位符的变量名")  此数据库中主键字段是自增的
解决的问题是：SQL语句的占位符和方法参数名不一致时，需要将某个参数强行注入到某个占位符变量上

Integer updateAvatarByUid(@Param("uid") Integer uid,
                          @Param("avatar") String avatar,
                          @Param("modifiedUser") String modifiedUser,
                          @Param("modifiedTime") Date modifiedTime);

<update id="updateAvatarByUid">
        update t_user set avatar=#{avatar},
                          modified_user=#{modifiedUser},
                          modified_time=#{modifiedTime}
        where uid=#{uid}
</update>

接着设计service层，没有传入修改时间是因为业务逻辑层写了

void changeAvatarByUid(Integer uid,
                       String avatar,
                       String modifiedUser);

@Override
    public void changeAvatarByUid(Integer uid, String avatar, String modifiedUser) {
        User byUid = userMapper.findById(uid);
        if (byUid == null || byUid.getIsDelete()==1){
            throw new UsernameNotFoundException("用户数据不存在");
        }
        Integer rows = userMapper.updateAvatarByUid(uid, avatar, byUid.getUsername(), new Date());
        if (rows != 1){
            throw new UpdateException("更新时异常");
        }
    }

设计controller层，此时需要上传头像文件，本项目中是在数据库中保存的文件地址，需要先设计可能出现的异常信息

 MultipartFile file必须和前端的命名保持一致

 

//MultipartFile接口是mvc提供的一个接口，这个接口为我们包装了获取文件类型的数据
    @RequestMapping("changeAvatar")
    public JsonResult<String> changeAvatar(HttpSession session,
                                           @RequestParam("file") MultipartFile file){
        //判断文件是否为空
        if (file.isEmpty()){
            throw new FileEmptyException("文件为空");
        }
        if (file.getSize()>AVATAR_MAX_SIZE){
            throw new FileEmptyException("文件超出限制");
        }
        //判断文件的类型是否是我们规定的后缀类型
        String contentType = file.getContentType();
        if (!AVATAR_TYPE.contains(contentType)){
            throw new FileTypeException("文件类型不支持");
        }
        //上传的文件.../upload/文件.png
        //getServletContext()获取上下文的路径
        String parent = session.getServletContext().getRealPath("upload");
        //File对象指向这个路径File是否存在
        File dir = new File(parent);
        if (!dir.exists()){//检测目录是否存在
            dir.mkdir();//创建当前目录
        }
        //获取到这个文件名称，UUID工具生成一个新的字符串作为文件名
        String originalFilename = file.getOriginalFilename();
        System.out.println(originalFilename);
        //获取文件后缀,有时候会出现同一文件名的情况，所以我们需要重新生成随机串，保证文件名唯一
        //但是后缀不会变，所以要截取后缀
        int index = originalFilename.lastIndexOf(".");
        String suffix = originalFilename.substring(index);
        String filename = UUID.randomUUID().toString().toUpperCase() + suffix;
        //创建目标文件 在dir下存放filename文件
        File dest = new File(dir,filename);
        try {
            //将参数file中的数据写入到空文件中
            file.transferTo(dest);
        } catch (IOException e) {
           throw new FileUploadIOException("文件读写异常");
        } catch (FileStateException e) {
            throw new FileStateException("文件状态异常");
        }
        String avatar = "/upload/" + filename;
        userService.changeAvatarByUid(getUidFromSession(session),
                getUsernameFromSession(session),
                avatar);
        //返回用户头像的路径给前端页面，将来用于头像的展示
        return new JsonResult<>(OK,avatar);
    }

前端页面的书写

<script type="text/javascript">
		$(document).ready(function (){
			let avatar = $.cookie("avatar");
			//将服务器返回的头像地址设置img标签的src属性上
			//attr(属性，属性值)：给某个属性设置某个值
			$("#img-avatar").attr("src",avatar);
		})
		$("#btn-change-avatar").click(function (){
			$.ajax({
				url:"/users/changeAvatar",
				type:"post",
				data:new FormData($("#form-change-avatar")[0]),
				processData:false,//处理数据的形式,关闭处理数据
				contentType:false,//提交数据的形式，关闭默认提交数据的形式
				dataType:"json",
				success: function (data){
					if (data.state==200){
						alert("头像修改成功");
						//将服务器返回的头像地址设置img标签的src属性上
						//attr(属性，属性值)：给某个属性设置某个值
						$("#img-avatar").attr("src",data.data);
						$.cookie("avatar",data.data,{expires:7});
					}else{
						alert("头像修改失败");
					}
				},
				error:function (data){
					alert("修改头像产生未知的异常"+data.message);
				}
			})
		})
	</script>