0
0

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

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

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

系统设置实现

设置用户基本信息、友情链接、个性化头像。

在这里插入图片描述

创建表和添加数据，执行下面SQL

-- ------------------------------ Table structure for t_config-- ----------------------------DROPTABLEIFEXISTS`t_config`;CREATETABLE`t_config`(`id`bigint(20)NOTNULL,`name`varchar(255)DEFAULTNULL,`value`varchar(255)DEFAULTNULL,`description`varchar(255)DEFAULTNULL,PRIMARYKEY(`id`))ENGINE=InnoDBDEFAULTCHARSET=utf8;-- ------------------------------ Records of t_config-- ----------------------------INSERTINTO`t_config`VALUES('1','site_name','CrazyStone','用户昵称');INSERTINTO`t_config`VALUES('2','site_profile','个人博客小站，主要发表关于Java、Spring、Docker等相关文章','个人简介');INSERTINTO`t_config`VALUES('3','site_tags','Java后台开发','兴趣标签');INSERTINTO`t_config`VALUES('4','site_theme','1','博客主题');INSERTINTO`t_config`VALUES('5','social_weibo',null,'微博账号');INSERTINTO`t_config`VALUES('6','social_zhihu',null,'知乎账号');INSERTINTO`t_config`VALUES('7','social_github',null,'Github账号');INSERTINTO`t_config`VALUES('8','social_twitter',null,'Twitter账号');INSERTINTO`t_config`VALUES('9','head_pic','/assets/img/me.jpg','头像');

添加静态HTML

setting.html

<!DOCTYPEhtml><htmllang="en"><head><title>系统设置</title><th:blockth:include="admin/include :: common-css"/></head><bodyclass="fixed-left"><divid="wrapper"><th:blockth:include="admin/include :: header-menu(6)"/><divclass="content-page"><divclass="content"><divclass="container"><divclass="row"><divclass="col-sm-12"><h4class="page-title">系统设置</h4></div><divclass="col-md-6"><divclass="panel panel-color panel-primary"><divclass="panel-heading"><h3class="panel-title">基本信息</h3></div><divclass="panel-body"><formclass="form-horizontal"role="form"><divclass="form-group"><labelclass="col-md-3 control-label">用户昵称</label><divclass="col-md-9"><inputtype="text"class="form-control"name="site_name"placeholder="用户昵称"required="required"aria-required="true"/></div></div><divclass="form-group"><labelclass="col-md-3 control-label">个人简介</label><divclass="col-md-9"><inputtype="text"class="form-control"name="site_profile"placeholder="个人简介"required="required"aria-required="true"/></div></div><divclass="form-group"><labelclass="col-md-3 control-label">兴趣标签</label><divclass="col-md-9"><inputtype="text"class="form-control"name="site_tags"placeholder="兴趣标签"required="required"aria-required="true"/></div></div><divclass="form-group"><labelclass="col-md-3 control-label">博客主题</label><divclass="col-md-9"><selectname="site_theme"class="form-control"><optionvalue="default">默认主题</option></select></div></div><divclass="clearfix pull-right"><buttontype="button"class="btn btn-primary waves-effect waves-light"onclick="saveSetting()">
                                            保存设置
                                        </button></div></form></div></div></div><divclass="col-md-6"><divclass="panel panel-color panel-inverse"><divclass="panel-heading"><h3class="panel-title">链接设置</h3></div><divclass="panel-body"><formclass="form-horizontal"role="form"><divclass="form-group"><labelclass="col-md-3 control-label">微博账号</label><divclass="col-md-9"><inputtype="text"class="form-control"name="social_weibo"placeholder="微博账号，不输入则不显示"/></div></div><divclass="form-group"><labelclass="col-md-3 control-label">知乎账号</label><divclass="col-md-9"><inputtype="text"class="form-control"name="social_zhihu"placeholder="知乎账号，不输入则不显示"/></div></div><divclass="form-group"><labelclass="col-md-3 control-label">Github账号</label><divclass="col-md-9"><inputtype="text"class="form-control"name="social_github"placeholder="Github账号，不输入则不显示"/></div></div><divclass="form-group"><labelclass="col-md-3 control-label">Twitter账号</label><divclass="col-md-9"><inputtype="text"class="form-control"name="social_twitter"placeholder="Twitter账号，不输入则不显示"/></div></div><divclass="clearfix pull-right"><buttontype="button"class="btn btn-inverse waves-effect waves-light"onclick="saveIndiviSetting()">
                                            保存设置
                                        </button></div></form></div></div></div><divclass="clearfix"></div><divclass="col-md-6"><divclass="panel panel-color panel-success"><divclass="panel-heading"><h3class="panel-title">个性化设置</h3></div><divclass="panel-body"><formclass="form-inline"role="form"><divclass="form-group col-md-12 "><inputid="uploadImage"style="display: none"class="form-control"accept="image/*"placeholder="文件上传"required=""aria-required="true"type="file"/><buttontype="button"class="btn btn-success waves-effect waves-light m-l-10"onclick="$('#uploadImage').click()">头像上传</button></div><br><divclass="form-group col-md-12 "style="text-align: center;margin: 10px;"><imgid="previewImage"src="/assets/img/me.jpg"alt="预览图片"></div><divclass=" pull-right"><buttontype="button"class="btn btn-success waves-effect waves-light"onclick="saveIndiviSetting()">
                                            保存设置
                                        </button></div></form></div></div></div></div></div></div></div></div><th:blockth:include="admin/include :: footer"/><th:blockth:include="admin/include :: common-js"/><scripttype="text/javascript">
    document.getElementById('uploadImage').addEventListener('change',function(e){var file = e.target.files[0];var reader =newFileReader();var previewImage = document.getElementById('previewImage');

        reader.onload=function(e){var img =newImage();
            img.onload=function(){varMAX_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 ="";}});</script></body></html>

添加处理请求的方法，返回setting模板

浏览器访问 http://127.0.0.1:8080/admin/setting 效果和上面第一张图一样

@Controller@RequestMapping("/admin")publicclassSettingController{@RequestMapping("/setting")publicStringsetting(){return"admin/setting";}}

代码生成器生成 t_config 表的基础代码，并将其放入项目中指定目录

在这里插入图片描述

后端查询数据，准备数据回显

@RequestMapping("/setting")publicStringsetting(Model model){//查询数据列表List<Config> list = configService.list();Map<String,String> configMap =newHashMap<>();//遍历list放到map容器中
        list.forEach(config ->{
            configMap.put(config.getName(),config.getValue());});
        model.addAttribute("configMap",configMap);return"admin/setting";}

基本信息数据的回显

使用thymeleaf表达式 显示数据

th:value=“${configMap.site_name}”

<divclass="col-md-6"><divclass="panel panel-color panel-primary"><divclass="panel-heading"><h3class="panel-title">基本信息</h3></div><divclass="panel-body"><formclass="form-horizontal"role="form"><divclass="form-group"><labelclass="col-md-3 control-label">用户昵称</label><divclass="col-md-9"><inputtype="text"class="form-control"name="site_name"placeholder="用户昵称"th:value="${configMap.site_name}"required="required"aria-required="true"/></div></div><divclass="form-group"><labelclass="col-md-3 control-label">个人简介</label><divclass="col-md-9"><inputtype="text"class="form-control"name="site_profile"placeholder="个人简介"th:value="${configMap.site_profile}"required="required"aria-required="true"/></div></div><divclass="form-group"><labelclass="col-md-3 control-label">兴趣标签</label><divclass="col-md-9"><inputtype="text"class="form-control"name="site_tags"placeholder="兴趣标签"th:value="${configMap.site_tags}"required="required"aria-required="true"/></div></div><divclass="form-group"><labelclass="col-md-3 control-label">博客主题</label><divclass="col-md-9"><selectname="site_theme"class="form-control"><optionvalue="1"th:selected="${configMap.site_theme eq '1'}">默认主题</option><optionvalue="2"th:selected="${configMap.site_theme eq '2'}">灰色主题</option></select></div></div><divclass="clearfix pull-right"><buttontype="button"class="btn btn-primary waves-effect waves-light"onclick="saveSetting()">
                        保存设置
                    </button></div></form></div></div></div>

基本信息回显效果

在这里插入图片描述

添加保存设置后端方法

@RequestMapping("/config/edit")@ResponseBodypublicAjaxResultedit(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 =newQueryWrapper<>();
            query.eq("name",key);Config one = configService.getOne(query);//修改值并执行更新if(one !=null){
                one.setValue(value);//设置新的值
                configService.updateById(one);//执行更新}}returnAjaxResult.success();}

添加点击保存设置的事件JS方法，调用后端方法/admin/config/edit执行修改操作

functionsaveSetting(){
        $.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)}}});}

点击保存设置，弹出消息框

在这里插入图片描述

标签： spring boot
本文转载自: https://blog.csdn.net/qq_29385297/article/details/139303958
版权归原作者 呆萌很 所有， 如有侵权，请联系我们删除。
登录后发布评论

“基于 Spring Boot 博客系统开发（十二）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航