一個簡單的前后端分離項目，適合新手練手

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