基于 Spring Boot 博客系统开发(十三)
本系统是简易的个人博客系统开发,为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发(十二)👈👈
基本信息渲染
后台系统设置修改基本信息,前台显示基本信息。
添加配置工具类 ConfigUtils
ConfigUtils.java
@Component
public class ConfigUtils {
public static Map CONFIG_MAP;
@Autowired
private IConfigService configService;
public Map getConfigMap(){
if(CONFIG_MAP == null){//简单缓存判断
List<Config> list = configService.list();
CONFIG_MAP = new HashMap<>();
list.forEach(config -> {
CONFIG_MAP.put(config.getName(),config.getValue());
});
}
return CONFIG_MAP;
}
}
前端调用该工具类方法获取CONFIG_MAP对象进行渲染
使用表达式 ${@configUtils.getConfigMap().site_name} 获取昵称
index.html
<!-- 博主信息描述 -->
<div class="am-u-md-4 am-u-sm-12 blog-sidebar">
<div class="blog-sidebar-widget blog-bor">
<h2 class="blog-text-center blog-title"><span th:text="${@configUtils.getConfigMap().site_name}">CrazyStone</span></h2>
<img src="./assets/img/me.jpg" alt="about me" class="blog-entry-img"/>
<p th:text="${@configUtils.getConfigMap().site_tags}">
Java后台开发
</p>
<p th:text="${@configUtils.getConfigMap().site_profile}">个人博客小站,主要发表关于Java、Spring、Docker等相关文章</p>
</div>
<div class="blog-sidebar-widget blog-bor">
<h2 class="blog-text-center blog-title"><span>联系我</span></h2>
<p>
<a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
<a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
</p>
</div>
</div>
修改主题样式
include.html
<style th:if="${@configUtils.getConfigMap().site_theme eq '2'}">
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
</style>
当后台修改基本信息,CONFIG_MAP设置为null
@RequestMapping("/config/edit")
@ResponseBody
public AjaxResult edit(HttpServletRequest request){
//获取请求参数的map对象
Map<String, String[]> parameterMap = request.getParameterMap();
//遍历map的key集合,获取key和value,并使用service保存到数据库
for (String key : parameterMap.keySet()) {
String value = request.getParameter(key);
//根据key查询配置对象
QueryWrapper<Config> query = new QueryWrapper<>();
query.eq("name",key);
Config one = configService.getOne(query);
//修改值并执行更新
if(one !=null){
one.setValue(value);//设置新的值
configService.updateById(one);//执行更新
ConfigUtils.CONFIG_MAP = null; //更新完成CONFIG_MAP 设置为null
}
}
return AjaxResult.success();
}