一个简单的前后端分离项目,适合新手练手
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