前言
大家好，我是兔子呀，今天我继续给大家撸这个SpringBoot日记本系统哈，非常不错的一个项目，学习javaweb编程必备。
目录
本节完成内容：
1. 个人中心页面⭐
2.个人信息的修改⭐
3.SpringBoot文件上传和浏览⭐
1.完成后的效果
字段不多，难点在于图片的上传。
2.后台逻辑
2.1 Controller控制器
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
UserService userService;
@Autowired
RedisServiceImpl redisServiceImpl;
String salt = "diary188";
......
@RequestMapping("update")
public Result update(@RequestBody User user){
userService.update(user);
return Result.success();
}
@RequestMapping("get")
public User get(){
return userService.getByUserId(StpUtil.getLoginIdAsLong());
}
}update方法用于更新用户对象，get方法用来获取当前登录对象的信息。
2.2 Service服务类
@Service
public class UserServiceImpl implements UserService {
@Autowired
UserMapper userMapper;
@Autowired
RedisServiceImpl redisServiceImpl;
/**
* 根据用户名获取用户
* @param userName
* @return
*/
@Override
public User getByUserName(String userName) {
List<User> users = userMapper.selectList(new QueryWrapper<User>().eq("user_name", userName));
if(users.size() > 0){
return users.get(0);
}
return null;
}
/**
* 保存用户
* @param user
*/
@Override
public void save(User user) {
userMapper.insert(user);
}
@Override
public User getByUserId(long loginIdAsLong) {
return userMapper.selectById(loginIdAsLong);
}
@Override
public void update(User user) {
LambdaUpdateWrapper<User> lambdaUpdateWrapper = new LambdaUpdateWrapper<>();
lambdaUpdateWrapper = lambdaUpdateWrapper.set(User::getNickName, user.getNickName())
.set(User::getBirthday, user.getBirthday())
.set(User::getGender, user.getGender())
.set(User::getSignature, user.getSignature())
.set(User::getUpdateTime, DateUtil.now());
if(StrUtil.isNotEmpty(user.getFace())){
lambdaUpdateWrapper = lambdaUpdateWrapper.set(User::getFace,user.getFace());
}
lambdaUpdateWrapper.eq(User::getUid, StpUtil.getLoginIdAsLong());
userMapper.update(null,lambdaUpdateWrapper);
}
}3.前台页面
前台页面主要用的就是layUI的form组件和文件上传组件。
主要代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<title>个人中心</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="${basePath}/layui/layui.all.js" charset="utf-8"></script>
<script src="${basePath}/js/axios.min.js"></script>
<script src="${basePath}/js/vue.js"></script>
<link rel="stylesheet" href="${basePath}/layui/css/layui.css" media="all">
<style>
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-row layui-col-space10">
<div class="layui-row">
<div class="layui-col-md12">
<jsp:include page="../common/header.jsp"></jsp:include>
</div>
<div class="layui-col-md9">
<div class="layui-card dbox" style="border-right: 2px solid #eaeaea;height: 90%;padding: 16px;">
<form class="layui-form layui-form-pane" style="padding-top: 20px;" lay-filter="userInfo">
<div class="layui-form-item">
<label class="layui-form-label">我的昵称</label>
<div class="layui-input-block">
<input type="text" name="nickName" lay-verify="nickName" autocomplete="off" placeholder="请输入昵称" class="layui-input">
</div>
</div>
<div class="layui-upload">
<div style="margin-left: 0px;margin-bottom: 20px">
<div class="layui-upload-list" style="float: left;">
<!-- 图片预览 -->
<img style="width: 150px; height: 150px;" class="layui-upload-img" id="uploaderShow">
<p id="errorText"></p>
</div>
<div style="width: 150px;margin-top:100px;margin-left:20px;float: left">
<button type="button" style="margin-bottom: 10px;" class="layui-btn" id="uploader">上传图片</button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="gender" value="0" title="男" checked>
<input type="radio" name="gender" value="1" title="女" >
<input type="radio" name="gender" value="2" title="保密" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<input id="birthday" name="birthday" lay-verify="birthday" type="text" class="layui-input" id="test1" placeholder="yyyyMMdd">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">个性签名</label>
<div class="layui-input-block">
<input type="text" name="signature" lay-verify="signature" autocomplete="off" placeholder="请输入个性签名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="text-align: right;">
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即更新</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-col-md3" style="">
<jsp:include page="../common/sider.jsp"></jsp:include>
</div>
</div>
</div>
<jsp:include page="../common/footer.jsp"></jsp:include>
</div>
<script>
layui.use(['form', 'layedit', 'laydate','upload','element','jquery'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,upload = layui.upload
,element = layui.element
,$ = layui.jquery
,laydate = layui.laydate;
//日期
laydate.render({
elem: '#birthday'
});
//常规使用 - 普通图片上传
var uploadInst = upload.render({
elem: '#uploader'
//,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
,url: '${basePath}/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#uploaderShow').attr('src', result); //图片链接（base64）
});
console.log('before')
element.progress('progressBar', '0%'); //进度条复位
layer.msg('上传中', {icon: 16, time: 1000});
}
,done: function(res){
console.log(res)
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功的一些操作
//记录上传的图片地址
window.face = res.data.file;
$('#errorText').html(''); //置空上传失败的状态
}
,error: function(){
console.log('error')
//演示失败状态，并实现重传
var errorText = $('#errorText');
errorText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
errorText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
//监听提交
form.on('submit(demo1)', function(data){
data = {...data.field }
if(window.face){
data.face = window.face;
}
var index = layer.load(1); //添加laoding,0-2两种方式
axios.post('${basePath}/user/update',data).then(r =>{
layer.close(index); //返回数据关闭loading
if(r.data.code != '0000'){
layer.msg(r.data.message,{icon:2});
return;
}
layer.msg('个人信息更新成功!',{icon:1});
setTimeout(()=>{location.href="/diary/user.html"},500)
});
return false;
});
form.verify({
nickName: function(value){
if(value.length < 5){
return '昵称至少得5个字符啊！';
}
}
,birthday: function(value){
if(value.length < 1){
return '请选择出生日期！';
}
}
,signature: function(value){
if(value.length < 10){
return '请填写个性签名，至少10个字符！';
}
}
});
form.render();
form.val('userInfo', {
nickName: "${user.nickName}",
gender:"${user.gender}",
birthday:"${user.birthday}",
signature:"${user.signature}"
});
$('#uploaderShow').attr('src', "${basePath}/upload/${user.face}");
});
</script>
</body>
</html>
4.文件上传后台逻辑
配置一下文件上传的路径和预览URL：
@Configuration
public class MvcConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler(new String[] { "/upload/**" }).addResourceLocations(new String[] { "file:C:/upload/" });
}
}配置文件也要改
system:
filepath: c:\upload
urlpath: http://localhost/upload/最后是文件上传的代码：
@RestController
public class UploadController {
@Autowired
AppConfig appConfig;
@RequestMapping({"/upload"})
public Map upload(@RequestParam("file") MultipartFile file) {
String fileName = "";
if (!file.isEmpty()){
/**
* 获取文件后缀名
*/
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
if(suffix.equals(".PNG") || suffix.equals(".png") || suffix.equals(".jpg") || suffix.equals(".JPG") ) {
}else{
throw new BizException(ExceptionCodeEnum.ERROR.setDesc("非法文件格式！"));
}
/**
* 文件名
*/
fileName = System.currentTimeMillis() + suffix;
/**
* 返回的文件路径
*/
String fileNameForReturn = "/"+ StpUtil.getLoginIdAsLong() + "/" + fileName;
/**
* 文件的保存路径
*/
String saveFilePath = this.appConfig.getFilepath() + "/"+StpUtil.getLoginIdAsLong();
/**
* 父级目录若不存在就创建
*/
if(!new File(saveFilePath).exists()) {
new File(saveFilePath).mkdir();
}
String saveFileName = saveFilePath + "/" + fileName;
File dest = new File(saveFileName);
try {
/**
* 拷贝文件
*/
file.transferTo(dest);
return new HashMap(){{
put("file",fileNameForReturn);
}} ;
} catch (IOException e) {
e.printStackTrace();
throw new BizException(ExceptionCodeEnum.ERROR.setDesc("系统异常！"));
}
}
return null;
}
}
搞定！
⭐⭐⭐⭐⭐⭐⭐ 本章完，愿有所收获，一路长虹，祝你也祝我。⭐⭐⭐⭐⭐⭐⭐
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）