【用户头像】功能实现学习记录
用户头像
用了差不多三天时间,搞完这个功能,学习记录如下
一、项目结构
- 前端: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 刷新图片的问题
【用户头像】功能实现学习记录相关推荐
- Vue + Spring Boot 学习笔记02:引入数据库实现用户登录功能
Vue + Spring Boot 学习笔记02:引入数据库实现用户登录功能 在学习笔记01里,我们利用跨域打通了前端的Vue与后端的Spring Boot,实现了用户登录功能,但是后台的登录控制器在 ...
- 基于微信小程序的学习记录与提醒应用设计与实现-计算机毕业设计源码+LW文档
摘 要 网络的广泛应用给生活带来了十分的便利.所以把学习记录与提醒应用管理与现在网络相结合,利用java技术建设学习记录与提醒应用app,实现学习记录与提醒应用的信息化.则对于进一步提高学习记录与提 ...
- android开发——用户头像
最近,小灵狐得知了一种能够加快修炼速度的绝世秘法,那便是修炼android神功.小灵狐打算用android神功做一个app,今天他的修炼内容就是头像功能.可是小灵狐是个android小白啊,所以修炼过 ...
- 基于Android的学生学习记录与提醒管理系统
末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用Vue技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件 ...
- Android实现更换头像功能(适配Android7.0版本)
只要涉及到用户的功能,基本都会使用到用户头像功能.那么切换用户头像,就是一个必做的功能.切换头像的图片源,一般有两个:一个是拍照然后裁剪图片,另一种是从图库中选择图片,然后裁剪图片.所以这里就来实现这 ...
- 两种方法为WordPress添加用户自定义头像功能
一般情况下,WordPress默认都是使用Gravatar头像,如果用户没有注册过Gravatar头像,那就使用网站设置的默认头像,这样用户体验不是很好:再则,如果直接调用远程Gravatar头像,还 ...
- flask上传头像功能
上传头像功能只需要以下N步: 首先我们要从HTML中获取头像文件 获取后,传入视图函数 # user.py # 修改用户头像功能 @user_blu.route("/user/avatar& ...
- java 记录用户_JavaWeb学习记录(六)——用户登录功能
使用JDBC.spring框架.servlet实现一个简单的用户登录功能. 一.mySql数据库 SET FOREIGN_KEY_CHECKS=0; -- ---------------------- ...
- 微信小程序开发学习记录(一):直播功能
微信小程序直播是最近上线的一个新功能,用了将近一天半的时间实现了用直播API去创建直播间,中间踩了很多坑(有的到现在也不是很明白为啥这样就可以 那样就不行),网上有关直播功能的参考文章也比较少,所以这 ...
最新文章
- 微服务该如何设计缓存?
- 华为S5700交换机开启telnet登录
- MySQL高级 之 explain执行计划详解
- 『中级篇』docker之wordpress容器SSL(番外篇)(78)
- fantouch os Android 7,Funtouch OS 3.1 with Android 7.1升级计划
- 程序猿之歌 PHP,1024丨腾讯第一首程序员之歌【Code代码】
- linux history操作的路径,绝对路径和相对路径,目录命令(cd,mkdir,rm,history)
- 对Linux 目录的认识
- java 实现类转接口_JAVA 基础 / 第二十九课:接口与继承 / JAVA中的对象转型
- html两个div有缝隙_HTML第一课
- STM32 MDK常见错误与解决
- [转载] 利用python对csv文件进行简单的数据分析
- LeetCode之 x 的平方根
- python操作sql_Python操作MSSQL
- hdu 1873“看病要排队”——优先队列的应用
- 在软件测试中,UT,IT,ST,UAT分别是什么意思?
- 国内银行CNAPS CODE 查询
- 【单片机】msp430几种不同开发平台的对比
- 怎么才能防止SSL劫持
- ACP知识域四---团队绩效