10天完成民猫电商毕设——用户模块实现（2nd day）

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