基于 Spring Boot 博客系统开发（十三）

基于 Spring Boot 博客系统开发（十三）

本系统是简易的个人博客系统开发，为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发（十二）👈👈

基本信息渲染

后台系统设置修改基本信息，前台显示基本信息。

添加配置工具类 ConfigUtils

ConfigUtils.java

@Component
public class ConfigUtils {public static Map CONFIG_MAP;@Autowiredprivate 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

ConfigUtils.CONFIG_MAP = null;

	@RequestMapping("/config/edit")@ResponseBodypublic 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();}

修改完配置渲染效果