基于 Spring Boot 博客系统开发（十二）
本系统是简易的个人博客系统开发，为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发（十一）👈👈
系统设置实现
设置用户基本信息、友情链接、个性化头像。
创建表和添加数据，执行下面SQL
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', '/assets/img/me.jpg', '头像');添加静态HTML
setting.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>系统设置</title>
<th:block th:include="admin/include :: common-css" />
</head>
<body class="fixed-left">
<div id="wrapper">
<th:block th:include="admin/include :: header-menu(6)" />
<div class="content-page">
<div class="content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4 class="page-title">系统设置</h4>
</div>
<div class="col-md-6">
<div class="panel panel-color panel-primary">
<div class="panel-heading">
<h3 class="panel-title">基本信息</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" >
<div class="form-group">
<label class="col-md-3 control-label">用户昵称</label>
<div class="col-md-9">
<input type="text" class="form-control" name="site_name" placeholder="用户昵称"
required="required" aria-required="true"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">个人简介</label>
<div class="col-md-9">
<input type="text" class="form-control" name="site_profile" placeholder="个人简介"
required="required" aria-required="true"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">兴趣标签</label>
<div class="col-md-9">
<input type="text" class="form-control" name="site_tags" placeholder="兴趣标签"
required="required" aria-required="true"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">博客主题</label>
<div class="col-md-9">
<select name="site_theme" class="form-control">
<option value="default" >默认主题</option>
</select>
</div>
</div>
<div class="clearfix pull-right">
<button type="button" class="btn btn-primary waves-effect waves-light" onclick="saveSetting()">
保存设置
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-color panel-inverse">
<div class="panel-heading">
<h3 class="panel-title">链接设置</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-3 control-label">微博账号</label>
<div class="col-md-9">
<input type="text" class="form-control" name="social_weibo"
placeholder="微博账号，不输入则不显示"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">知乎账号</label>
<div class="col-md-9">
<input type="text" class="form-control" name="social_zhihu"
placeholder="知乎账号，不输入则不显示"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Github账号</label>
<div class="col-md-9">
<input type="text" class="form-control" name="social_github"
placeholder="Github账号，不输入则不显示"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Twitter账号</label>
<div class="col-md-9">
<input type="text" class="form-control" name="social_twitter"
placeholder="Twitter账号，不输入则不显示"/>
</div>
</div>
<div class="clearfix pull-right">
<button type="button" class="btn btn-inverse waves-effect waves-light"
onclick="saveIndiviSetting()">
保存设置
</button>
</div>
</form>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-6">
<div class="panel panel-color panel-success">
<div class="panel-heading">
<h3 class="panel-title">个性化设置</h3>
</div>
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group col-md-12 ">
<input id="uploadImage" style="display: none" class="form-control" accept="image/*" placeholder="文件上传" required="" aria-required="true" type="file"/>
<button type="button" class="btn btn-success waves-effect waves-light m-l-10" onclick="$('#uploadImage').click()">头像上传</button>
</div>
<br>
<div class="form-group col-md-12 " style="text-align: center;margin: 10px;">
<img id="previewImage" src="/assets/img/me.jpg" alt="预览图片">
</div>
<div class=" pull-right">
<button type="button" class="btn btn-success waves-effect waves-light"
onclick="saveIndiviSetting()">
保存设置
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<th:block th:include="admin/include :: footer" />
<th:block th:include="admin/include :: common-js" />
<script type="text/javascript">
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 = "";
}
});
</script>
</body>
</html>添加处理请求的方法，返回setting模板
浏览器访问 http://127.0.0.1:8080/admin/setting 效果和上面第一张图一样
java
@Controller
@RequestMapping("/admin")
public class SettingController {
@RequestMapping("/setting")
public String setting(){
return "admin/setting";
}
}代码生成器生成 t_config 表的基础代码，并将其放入项目中指定目录
后端查询数据，准备数据回显
java
@RequestMapping("/setting")
public String setting(Model model){
//查询数据列表
List<Config> list = configService.list();
Map<String, String> 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}"
html
<div class="col-md-6">
<div class="panel panel-color panel-primary">
<div class="panel-heading">
<h3 class="panel-title">基本信息</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" >
<div class="form-group">
<label class="col-md-3 control-label">用户昵称</label>
<div class="col-md-9">
<input type="text" class="form-control" name="site_name" placeholder="用户昵称"
th:value="${configMap.site_name}" required="required" aria-required="true"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">个人简介</label>
<div class="col-md-9">
<input type="text" class="form-control" name="site_profile" placeholder="个人简介"
th:value="${configMap.site_profile}" required="required" aria-required="true"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">兴趣标签</label>
<div class="col-md-9">
<input type="text" class="form-control" name="site_tags" placeholder="兴趣标签"
th:value="${configMap.site_tags}" required="required" aria-required="true"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">博客主题</label>
<div class="col-md-9">
<select name="site_theme" class="form-control" >
<option value="1" th:selected="${configMap.site_theme eq '1'}" >默认主题</option>
<option value="2" th:selected="${configMap.site_theme eq '2'}" >灰色主题</option>
</select>
</div>
</div>
<div class="clearfix pull-right">
<button type="button" class="btn btn-primary waves-effect waves-light" onclick="saveSetting()">
保存设置
</button>
</div>
</form>
</div>
</div>
</div>基本信息回显效果
添加保存设置后端方法
java
@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);//执行更新
}
}
return AjaxResult.success();
}添加点击保存设置的事件JS方法，调用后端方法/admin/config/edit执行修改操作
javascript
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)
}
}
});
}点击保存设置，弹出消息框
