【用户头像】功能实现学习记录

用户头像

用了差不多三天时间，搞完这个功能，学习记录如下

一、项目结构

• 前端：vue + element-ui
• 后端：Springboot
• 数据库：mysql

二、需求

1、右上角增加【用户中心】，可以显示用户头像、更改用户信息等

2、【添加用户】要求能够上传用户头像

3、【编辑用户信息】要求可以更换用户头像

4、可以在【用户列表】显示用户头像，有一列【查看头像】的按钮，还有展开显示全部信息

三、难点及解决方式（开发过程中遇到的先后顺序）

1、图片存储方式

头像是图片，保存是个问题，我查到了有三种保存方式

1、将图片保存在后端的本地文件夹中（本次选用）

​ 这种方式作为没有服务器的替代品，还是比较好用的

​ 就是前端将图片上传到后端，后端保存在本地文件夹中，数据库只保存图片名称

2、将图片上传到服务器中

​ 最好用，但是我没有服务器，这个项目也没有，所以没有机会实际操作

3、直接将图片保存在数据库中

​ 这个也很灵活，主要是没有什么路径问题（应该吧），但是对数据库容量要求比较大

2、头像上传

• 首先想到了【数据上传】这个功能里面的【文件上传】，使用el-upload组件进行上传，关掉这个组件的自动上传功能，主要是为了获得文件的File格式，然后进行手动上传

• 手动上传要将文件放到表单里，和其他信息一起进行上传

• 后端接收头像使用【工号】进行命名，问了保证工号的唯一性，设置了校验方法

• 考虑到【头像】不是必须上传的，所以设置了【默认头像】，并在后端所有包含头像的接口都设置了【有头像版】和【无头像版】

• 在【头像展示】这里使用三种，一种是el-avatar，一种是一个预览对话框，一种是上传界面的显示

• 对了，这里头像的加载一直使用的require()，这里是一个比较大的坑，不是他坑，而是换了之后比较坑

3、vue-image-crop-upload/upload-2.vue的使用

• 因为自己写的【头像上传】比较难看，为了好看一点，使用现成的组件vue-image-crop-upload/upload-2.vue
• 一开始引入这个组件不好使呀，取消和关闭按钮不好使呀，之后一摔鼠标一叹气就好使了，迷惑猫猫脸？
• 使用这个组件同理，关闭自动上传，获得文件的File格式
• 这个组件可以获得图像的**base64格式**，所以要转化，过程是：base64格式—>Blob格式—>File格式，然后处理就和之前一样

4、图片路径问题

• 使用require()的话，要在前端也保存一份文件路径，这货还不支持变量作为参数，就是纯纯的导入静态资源的，找了好久都没解决，但是除了要保存文件路径之外，我找不到其他缺点
• 转为使用localhost:8080这种方式
• 之后使用resources->static这个配置，但是他都是静态资源，不经过编译不能读取，这就导致了前端读不到，所以新上传和更改的文件，我是一点都看不着啊
• 然后去搭配虚拟路径，刚开始看了tomcat（没试过），看着挺麻烦，然后找了一个配置方法，搞一个类，继承一个什么东西，就搞好了
• localhost:8080这种方式的标签不会自动刷新，也要手动刷新才可以，然后就去找了vue的刷新方法，结果整个页面都没了
• 在上一点之后，我去找了标签单独刷新的方法，很好使

5、参考博客

1、[vue-image-crop-upload/upload-2.vue](Vue+SpringBoot 实现用户头像上传（附前后端源码）_智慧zhuhuix的博客-CSDN博客_vue上传头像前后端)

​ [大佬的示例代码](src/views/user/center.vue · zhuhuix/startup-frontend - Gitee.com)

2、[后台接收](Vue+element ui+springboot实现用户头像修改_parsifal_cc的博客-CSDN博客_elementui更换头像)

3、在vue项目中 使用require 获取动态的src属性

4、在保证工号唯一性的时候遇到的问题

​ Axios和(async,await)

5、头像上传回退

​ vue-image-crop-upload裁剪工具使用踩坑

6、，将头像转换成File格式

​ vue-image-corp-upload插件保存裁剪图片和取消图片像素验证

7、require的一下相关的知识：

​ vue中，图片如何加载绝对路径的图片？

​ 为什么vue项目require引入json文件不能直接用变量接收地址？

​ 关于React使用require动态引入图片路径的问题

8、tomcat设置虚拟路径

​ 前后端分离项目部署到阿里云服务器的tomcat，并直接使用域名进行访问，修改tomcat默认路径配置

9、通过一个类进行虚拟路径

​ 使用SpringBoot设置虚拟路径映射绝对路径

​ SpringBoot配置虚拟路径，我用的这个

10、那个静态资源的

​ springboot项目直接url访问项目图片

11、vue的刷新方式

​ Vue中刷新页面的三种方式

12、标签的刷新

​ HTML img 刷新图片的问题