(一)存储策略
<1>数据库
可通过数据库用户表增加皮肤字段进行存取操作,如果用户表不便于增加字段,可以新增一张中间表进行存储用户,皮肤信息。
<2>读写配置
可以通过读写文件进行存储用户,皮肤信息。
<3>session
可以通过session来存储皮肤信息,这么做退出登录后,皮肤信息又会重置。
(二)后台逻辑实现
//存储(设置)皮肤代码
public void saveNowSkin(@PathVariable("code") String code, @PathVariable("userId") String userId){
SkinUserDto findSkinUserDto = skinUserClient.FindByUserId (userId);
if(findSkinUserDto == null){
SkinUserDto skinUserDto = new SkinUserDto ();
skinUserDto.setUserId (userId);
skinUserDto.setSkinCode (code);
skinUserClient.add (skinUserDto);
}else{
findSkinUserDto.setSkinCode (code);
skinUserClient.update (findSkinUserDto);
}
}
//获取皮肤信息传入前端
request.getSession ().setAttribute ("nowSkin", getSkinCode ());
(三)前端实现
<1>ThymeLeaf
<head>
<title>换肤</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet"
th:href="@{'/source/theme/'+${session.nowSkin==null?'default':session.nowSkin}+'/css/public.css'}"/>
</head>
//设置皮肤通过ajax发起请求,请求成功后刷新页面
window.location.href = newUrl;
<2>JSP
<head>
<title>换肤</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet"
href="'/source/theme/'+${session.nowSkin==null?'default':session.nowSkin}+'/css/public.css'"/>
</head>
//设置皮肤通过ajax发起请求,请求成功后刷新页面
window.location.href = newUrl;