行业知识
基于 Spring Boot 博客系统开发（十二）
2026-11-03 02:11:14
来源：互联网转载
基于 Spring Boot 博客系统开发（十二）
本系统是简易的个人博客系统开发，为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。
基于 Spring Boot 博客系统开发（十一）
系统设置实现
设置用户基本信息、友情链接、个性化头像。
创建表和添加数据，执行下面SQL
-- ------------------------------ Table structure for t_config-- ----------------------------DROP TABLE IF EXISTS `t_config`;CREATE TABLE `t_config` ( `id` bigint(20) NOT NULL, `name` varchar(255) DEFAULT NULL, `value` varchar(255) DEFAULT NULL, `description` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ------------------------------ Records of t_config-- ----------------------------INSERT INTO `t_config` VALUES ('1', 'site_name', 'CrazyStone', '用户昵称');INSERT INTO `t_config` VALUES ('2', 'site_profile', '个人博客小站，主要发表关于Java、Spring、Docker等相关文章', '个人简介');INSERT INTO `t_config` VALUES ('3', 'site_tags', 'Java后台开发', '兴趣标签');INSERT INTO `t_config` VALUES ('4', 'site_theme', '1', '博客主题');INSERT INTO `t_config` VALUES ('5', 'social_weibo', null, '微博账号');INSERT INTO `t_config` VALUES ('6', 'social_zhihu', null, '知乎账号');INSERT INTO `t_config` VALUES ('7', 'social_github', null, 'Github账号');INSERT INTO `t_config` VALUES ('8', 'social_twitter', null, 'Twitter账号');INSERT INTO `t_config` VALUES ('9', 'head_pic', 'https://blog.csdn.net/assets/img/me.jpg', '头像'); 添加静态HTML
setting.html
系统设置系统设置
基本信息
用户昵称 个人简介 兴趣标签 博客主题 默认主题 保存设置链接设置
微博账号 知乎账号 Github账号 Twitter账号 保存设置个性化设置
头像上传
保存设置 document.getElementById('uploadImage').addEventListener('change', function(e) { var file = e.target.files[0]; var reader = new FileReader(); var previewImage = document.getElementById('previewImage'); reader.onload = function(e) { var img = new Image(); img.onload = function() { var MAX_WIDTH = 220; // 设置最大宽度 var width = img.width; var height = img.height; // 检查图片是否需要缩放 if (width > MAX_WIDTH) { var ratio = MAX_WIDTH / width; width = MAX_WIDTH; height *= ratio; // 保持纵横比 } var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); var dataurl = canvas.toDataURL("image/png"); previewImage.src = dataurl; } img.src = e.target.result; } if (file) { reader.readAsDataURL(file); } else { previewImage.src = ""; } });
添加处理请求的方法，返回setting模板
浏览器访问 http://127.0.0.1:8080/admin/setting 效果和上面第一张图一样
@Controller@RequestMapping("/admin")public class SettingController { @RequestMapping("/setting") public String setting(){ return "admin/setting"; }} 代码生成器生成 t_config 表的基础代码，并将其放入项目中指定目录
后端查询数据，准备数据回显
@RequestMapping("/setting") public String setting(Model model){ //查询数据列表 List list = configService.list(); Map configMap = new HashMap(); //遍历list放到map容器中 list.forEach(config -> { configMap.put(config.getName(),config.getValue()); }); model.addAttribute("configMap",configMap); return "admin/setting"; } 基本信息数据的回显
使用thymeleaf表达式 显示数据
th:value=“${configMap.site_name}”
基本信息
用户昵称 个人简介 兴趣标签 博客主题 默认主题 灰色主题 保存设置
基本信息回显效果
添加保存设置后端方法
@RequestMapping("/config/edit") @ResponseBody public AjaxResult edit(HttpServletRequest request){ //获取请求参数的map对象 Map parameterMap = request.getParameterMap(); //遍历map的key集合，获取key和value,并使用service保存到数据库 for (String key : parameterMap.keySet()) { String value = request.getParameter(key); //根据key查询配置对象 QueryWrapper query = new QueryWrapper(); query.eq("name",key); Config one = configService.getOne(query); //修改值并执行更新 if(one !=null){ one.setValue(value);//设置新的值 configService.updateById(one);//执行更新 } } return AjaxResult.success(); } 添加点击保存设置的事件JS方法，调用后端方法/admin/config/edit执行修改操作
function saveSetting(){ $.ajax({ type: 'post', url: '/admin/config/edit', data: $("#baseInfoFormId").serialize(), async: false, dataType: 'json', success: function (result) { if(result.code == 0){ alert("更新成功") }else{ alert(result.msg) } } }); } 
