一个简单的前后端分离项目，适合新手练手

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