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

06-18 1287阅读

基于 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)
                }
            }
        });
    }