1、项目描述

今天突然想联系一下前后端分离的运用，上手项目比较简单，员工管理系统。

2、需求分析

用户模块： 1、用户登录（验证码校验） 2、用户退出 3、用户注册 员工模块： 1、员工列表显示 2、员工增删改查操作 3、员工信息存入redis缓存当中

3、项目演示

用户注册：

<!--引入Vue--> <script src="/js/vue.js"></script> <!--引入axios--> <script src="/js/axios.min.js"></script> <script src="/js/sweetalert.min.js"></script> <script> var vue=new Vue({ el:"#wrap", data:{ url:"", code:"", user:{ username:"", password:"", realname:"", sex:"" } }, created() { this.getUrlCommon() }, methods: { //更换验证码 getImg() { this.getUrlCommon() }, //封装获取验证码方法 getUrlCommon() { axios.get("http://localhost:8888/user/getImage?time=" + Math.random()) .then(response => { this.url = response.data }) }, register(){ axios.post("http://localhost:8888/user/register?code="+this.code,this.user) .then(response=>{ if(response.data.state) swal({ title: '确定删除吗？', text: '你将无法恢复它！', type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: '确定删除！', }) }) }, } }) 提示框采用sweetAlter插件，**个人非常喜欢这款插件** 网站：http://mishengqiang.com/sweetalert/ 其他功能我就附上图了，业务逻辑也超级简单，权当自己练习的项目。

员工列表显示

添加员工 集成Redis 导入pom依赖

<!--redis--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency>

改配置类

#redis redis: host: localhost port: 6379 database: 0 ``` 写ApplicationContextUtils ```java @Component public class ApplicationContextUtils implements ApplicationContextAware { private static ApplicationContext applicationContext; @Override public void setApplicationContext(ApplicationContext applicationContext) throws BeansException { this.applicationContext = applicationContext; } //redisTemplate stringRedisTemplate public static Object getBean(String name){ return applicationContext.getBean(name); } }

Cache方法

@Slf4j public class RedisCache implements Cache { private String id; public RedisCache(String id) { log.info("当前的缓存id: [{}]",id); this.id = id; } @Override public String getId() { return this.id; } @Override//放入redis缓存 public void putObject(Object key, Object value) { log.info("放入缓存key:[{}] 放入缓存的value:[{}]",key,value); getRedisTemplate().opsForHash().put(id,key.toString(),value); } @Override//从redis缓存获取 public Object getObject(Object key) { log.info("获取缓存的key:[{}]",key.toString()); return getRedisTemplate().opsForHash().get(id,key.toString()); } @Override//删除指定缓存信息 public Object removeObject(Object o) { return null; } @Override//清除缓存 public void clear() { log.info("清除所有缓存信息..."); getRedisTemplate().delete(id); } @Override public int getSize() { return getRedisTemplate().opsForHash().size(id).intValue(); } //封装获取redistemplate的方法 public RedisTemplate getRedisTemplate(){ RedisTemplate redisTemplate = (RedisTemplate) ApplicationContextUtils.getBean("redisTemplate"); redisTemplate.setKeySerializer(new StringRedisSerializer()); redisTemplate.setHashKeySerializer(new StringRedisSerializer()); return redisTemplate; } }

最后在EmlMapper添加

<!--使用缓存--> <cache type="com.xiaohe.cache.RedisCache"/>

这个项目是看小陈老师的讲解，加上自己的练习，在这个项目中自己也更加巩固了自己的知识，对于编程大家也要多动手，肌肉记忆真的存在，最后这个项目发布在我的个人码云上，大家可以拿去练手，这种简单的例子花不了多少时间，但可以将自己学过的东西串一下，对自己的帮助很大。

码云：https://gitee.com/luckyHZB/emp QQ:986125495