1.实现效果(后面有时间再美化)
用户登录
用户注册
显示用户资料与修改
美化建议:使用图标替代文字链接;确定一个主题色为民大绿;设计一个logo;设计风格应该统一
2.用户注册实现
1.设计接口
2.测试接口
3.封装请求
//注册
export const Register = (data) => requests({ url: '/tUser/register', data, method: 'post' });
4.绑定事件
3.用户登录实现
1.设计接口
其实SPA好像也没有必要携带token进行拦截验证!
2.测试接口
3.封装请求
//注册
export const Register = (data) => requests({ url: '/tUser/register', data, method: 'post' });
4.绑定事件
4.资料卡查看与修改实现
其实就是查询用户表和更新用户表,限于时间关系,不再赘述!
5.遇到的问题
1.elementUI的日期选择器时区问题
在将前台返回的要更新的日期时间先加8小时,然后再保存到数据库中,就不会出现时间更新后日期减1的bug
user.setBirthday(user.getBirthday().plusHours(8));
2.redis无法解析LocalDateTime将其保存到内存中
pom.xml引入依赖包jackson-datatype-jsr310
在实体类中的所有类型为LocalDateTime的属性前添加以下注解
@JsonSerialize(using = LocalDateTimeSerializer.class)
@JsonDeserialize(using = LocalDateTimeDeserializer.class)
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")`
3.vuex的刷新数据丢失问题
保存到本地缓存中如sessionStorage
sessionStorage.setItem("token", res.token);//存储
sessionStorage.getItem("token");//获取
或者在组件渲染的created时期把所有用户相关数据都请求到,存储到vuex中,这样每次刷新就可以重新获得数据了
6.学到的新知识
1.@Cacheable
定义:@Cacheable(value= “users”,key = “#id”,condition = “#id > 1”,unless= “#result == null”)
作用:注解在方法前,方法的返回值添加到redis缓存中,以后查询相同的数据,直接从缓存中取,不需要调用方法
参数解释:value(或者cacheNames,指定一个缓存组的名字) key(指定方法返回值的key为方法参数的id) condition(指定缓存的条件) unless(指定不缓存的条件)
应用:注解在查询方法前,特别是经常需要请求查询的数据,
2.@CacheEvict
定义:@CacheEvict(value= “users”,key = “#user.id”)
作用:注解在方法前,方法的执行都会触发缓存的清除操作
参数解释: 清除users缓存组中key为user.id的缓存
应用:非查询方法前(增加,删除,更新方法)
参考文章:浅析springboot的@Cacheable加入缓存@CacheEvict清除缓存及spEL表达式编写key