JavaWeb_(视频网站)_二、用户模块4 基本信息维护(下)
2023-09-14 08:57:04 时间
用户传递图片时,通过saveImage()方法,实现传递的是用户头像或者是用户背景
修改uploadImage上传图片的请求,添加一个参数,用来判断用户传递的是头像还是背景
@RequestMapping("/uploadImage") public String uploadImage(String base64,String type) throws IOException { //System.out.println("我被点击到了!!"); User user = (User) httpSession.getAttribute("user"); //System.out.println(base64)可以在表单提交查看后端是否传入该数据 //base64的数据非常大,输出出来的话是空白 //获得classpath在本地的地址 String path = ""; if(type.equals("cover")) { path = ResourceUtils.getURL("classpath:").getPath()+"static/upload/user/cover"; }else { path = ResourceUtils.getURL("classpath:").getPath()+"static/upload/user/head"; } //保存图片 File file = new File(path); if(file.exists()) { file.mkdir(); } //替换数据 if(base64.indexOf("jpeg")!= -1) { base64 = base64.replaceFirst("jpeg", "jpg"); } //文件名 String upName = UUID.randomUUID().toString()+System.currentTimeMillis()+ "." +base64.substring(11,14); //将base64中有用的数据保存下来 String iconBase64 = base64.substring(22); //将base64换位字节数据 byte[] buffer = Base64Coder.decode(iconBase64); //用FileOutputStream写文件 FileOutputStream out = new FileOutputStream(path + "/" +upName); out.write(buffer); out.close(); System.out.println(path+"/"+upName); //保存到数据库 if(type.equals("cover")) { user.setCoverImage("user/cover/"+upName); }else { user.setCoverImage("user/head/"+upName); } userService.saveUser(user); return "redirect:/findUserProfileSettingsById?id="+user.getId(); }
使用thymeleaf进行图片的回显
th:style="'background: url(http://www.pinzhi365.com/upload/'+${session.user.coverImage}+') no-repeat;'"
数据库中user存储图片字段cover_image字段
在user-bar.html中制作头像模块
<img src="http://placehold.it/120x110" alt="profile author img"> <button class="btn-upload" onclick="document.getElementById('headFile').click()"> <i class="fa fa-camera"></i> <span>Avatar(500*500)</span> </button> <form action="/cropper" method="post" enctype="multipart/form-data"> <input style="display:none ;" type="text" value="head" name="type"> <input id="headFile" style="display:none;" name="file" type="file"> <input id="fileSubmit" style="display:none;" type="submit"> </form>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- Cropper --> <script type="text/javascript" th:inline="javascript"> //获得image const image = document.getElementById("image"); var cropper; //初始化Cropper window.onload = function() { if([[${type}]] == 'cover'){ cropper = new Cropper(image,{ //裁剪框比例 aspectRatio:1920/350, viewMode:2, //预览 preview:".small", //关闭双击会改变方式 toggleDragModeOnDblclick:false, //拖拽模式 dragMove:'move', }) }else{ cropper = new Cropper(image,{ //裁剪框比例 aspectRatio:120/110, viewMode:2, //预览 preview:".userHead", //关闭双击会改变方式 toggleDragModeOnDblclick:false, //拖拽模式 dragMove:'move', }) } //替换图片 cropper.replace("http://www.pinzhi365.com/upload/user/temp/"+[[${fileName}]],false); } //上传文本 function saveImage() { var width = cropper.getCropBoxData().width; var height = cropper.getCropBoxData().height; //拿到Bases 64格式为本 //1920*350 //120*110 var base64URL; if([[${type}]] == 'cover') { base64URL = cropper.getCroppedCanvas({width:1920,height:350}).toDataURL("image/jpeg"); } else { base64URL = cropper.getCroppedCanvas({width:600,height:550}).toDataURL("image/jpeg"); } $("#base64Input").val(base64URL); $("#headCoverType").val([[${type}]]); $("#uploadImageSubmit").click(); } </script>
当用户保存保存,更换头像更换背景后,在user-bar上显示图片的回显
<img th:if="${page} eq 'ProfileSettings'" th:src="|upload/${user.headImage}|" alt="profile author img">
更新用户,用户数据的回显
数据回显流程
在profile-setting.html页面中完成用户信息模块的回显
<div class="setting-form-inner"> <div class="row"> <div class="large-12 columns"> <h6 class="borderBottom">Username Setting:</h6> </div> <div class="medium-6 columns"> <label> First Name: <input required="required" type="text" name="firstName" th:value="${session.user.firstName}" placeholder="enter your first name.."> </label> </div> <div class="medium-6 columns"> <label> Last Name: <input required="required" type="text" name="lastName" th:value="${session.user.lastName}" placeholder="enter your last name.."> </label> </div> <div class="medium-6 columns"> <label> User Name(Final): <input readonly="readonly" name="username" type="text" th:value="${session.user.username}" placeholder="enter your user name.."> </label> </div> <div class="medium-6 columns"> <label> Display Name: <input type="text" name="displayName" th:value="${session.user.displayName}" placeholder="select your display name" required="required"> </label> </div> </div> </div>
<div class="setting-form-inner"> <div class="row"> <div class="large-12 columns"> <h6 class="borderBottom">Update Password:</h6> </div> <div class="medium-6 columns"> <label> New Password: <!--<input type="password" th:value="${session.user.password}" placeholder="enter your new password.." required="required">--> <input th:value="${session.user.password}" type="password" id="password" name="password" placeholder="Enter your password" required> </label> </div> <div class="medium-6 columns"> <label> Retype Password: <!-- <input type="password" th:value="${session.user.password}" placeholder="enter your new password.." required="required"> --> <input type="password" th:value="${session.user.password}" id="repassword" placeholder="Re-type your password" required pattern="alpha_numeric" data-equalto="password"> </label> </div> </div> </div>
<div class="setting-form-inner"> <div class="row"> <div class="large-12 columns"> <h6 class="borderBottom">About Me:</h6> </div> <div class="medium-6 columns"> <label> Email ID: <input type="email" name="email" th:value="${session.user.email}" placeholder="enter your email address.." required="required"> </label> </div> <div class="medium-6 columns"> <label> Website URL: <input type="url" name="webUrl" th:value="${session.user.webUrl}" placeholder="enter your website url.." required="required"> </label> </div> <div class="medium-6 columns end"> <label> Phone No: <input type="tel" name="phone" th:value="${session.user.phone}" placeholder="enter your website url.." required="required"> </label> </div> <div class="medium-12 columns"> <label> Bio Description: <textarea name="description" th:text="${session.user.description}" required="required"></textarea> </label> </div> </div> </div>
校验表单数据Email与Username,校验表单邮箱可以使用data-abide novalidate与required="required"
<form method="post" th:action="@{~/index}" data-abide novalidate>
<input required="required" type="text" name="firstName" th:value="${session.user.firstName}" placeholder="enter your first name..">
用户提交更新表单,发送updateUser请求,UserController.java进行处理请求
@RequestMapping("/updateUser") public String updateUser(User user) { User u = (User) session.getAttribute("user"); //更新user //System.out.println(user); u.setFirstName(user.getFirstName()); u.setLastName(user.getLastName()); u.setUsername(user.getUsername()); u.setDescription(user.getDescription()); u.setPassword(user.getPassword()); u.setEmail(user.getEmail()); u.setWebUrl(user.getWebUrl()); u.setPhone(user.getPhone()); u.setDisplayName(user.getDisplayName()); u.setQqLink(user.getQqLink()); u.setWeixinLink(user.getWeixinLink()); userService.saveUser(u); return "redirect:/findUserProfileSettingsById?id="+u.getId(); }
测试:
完成更新用户完善AboutMe页面(profile-abou-me.html)
<div class="heading"> <i class="fa fa-user"></i> <h4>Description</h4> </div> <div class="description"> <p th:text="${user.description}">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> <div class="site profile-margin"> <button><i class="fa fa-globe"></i>Site</button> <a th:href="${user.webUrl}" class="inner-btn" th:text="${user.webUrl}">www.betube.com</a> </div> <div class="email profile-margin"> <button><i class="fa fa-envelope"></i>Email</button> <span class="inner-btn" th:text="${user.email}">support@betube.com</span> </div> <div class="phone profile-margin"> <button><i class="fa fa-phone"></i>Phone</button> <span class="inner-btn" th:text="${user.phone}">92-568-748</span> </div> <div class="socialLinks profile-margin"> <button><i class="fa fa-share-alt"></i>get socialize</button> <a th:href="${user.qqLink}" class="inner-btn"><i class="fa fa-qq"></i></a> <a th:href="${user.weixinLink}" class="inner-btn"><i class="fa fa-weixin"></i></a> </div>
通过user访问的其他人页面,session.user访问的是自己的页面
th:style="'background: url(http://www.pinzhi365.com/upload/'+${user.coverImage}+') no-repeat;'"
解决一些用户资料bug,如果不是自己,不可以查看自己profile-setting
在profile.html中解决,非自己用户,不可查看自己的Profile Settings
<ul class="profile-overview"> <li class="clearfix"><a th:if="${page} eq 'AboutMe'" class="active" th:href="|/findUserAboutMeById?id=${user.id}|"> <i class="fa fa-user"></i>about me</a> <a th:if="${page} ne 'AboutMe'" th:href="|/findUserAboutMeById?id=${user.id}|"><i class="fa fa-user"></i>about me</a></li> <li class="clearfix"><a th:if="${page} eq 'Videos'" class="active" th:href="|/findUserVideosById?id=${user.id}|"> <i class="fa fa-video-camera"></i>Videos <span class="float-right">36</span></a><a th:if="${page} ne 'Videos'" th:href="|/findUserVideosById?id=${user.id}|"><i class="fa fa-video-camera"></i>Videos <span class="float-right">36</span></a></li> <li class="clearfix"><a th:if="${page} eq 'FavoriteVideos'" class="active" th:href="|/findUserFavoriteVideosById?id=${user.id}|"> <i class="fa fa-heart"></i>Favorite Videos<span class="float-right">50</span></a> <a th:if="${page} ne 'FavoriteVideos'" th:href="|/findUserFavoriteVideosById?id=${user.id}|"><i class="fa fa-heart"></i>Favorite Videos<span class="float-right">50</span></a></li> <li class="clearfix"><a th:if="${page} eq 'Followers'" class="active" th:href="|/findUserFollowersById?id=${user.id}|"> <i class="fa fa-users"></i>Followers<span class="float-right" th:text="${followersNum}">6</span></a><a th:if="${page} ne 'Followers'" th:href="|/findUserFollowersById?id=${user.id}|"> <i class="fa fa-users"></i>Followers<span class="float-right" th:text="${followersNum}">6</span></a></li> <li class="clearfix"><a th:if="${page} eq 'Comments'" class="active" th:href="|/findUserCommentsById?id=${user.id}|"> <i class="fa fa-comments-o"></i>comments<span class="float-right">26</span></a><a th:if="${page} ne 'Comments'" th:href="|/findUserCommentsById?id=${user.id}|"><i class="fa fa-comments-o"></i>comments<span class="float-right">26</span></a></li> <li class="clearfix"><a th:if="${page} eq 'ProfileSettings'" class="active" th:href="|/findUserProfileSettingsById?id=${session.user.id}|"> <i class="fa fa-gears"></i>Profile Settings</a><a th:if="${page} ne 'ProfileSettings'" th:href="|/findUserProfileSettingsById?id=${session.user.id}|"><i class="fa fa-gears"></i>Profile Settings</a></li> <li if="${session.user.id} eq ${user.id}" class="clearfix"><a th:href="@{~/signOut}"><i class="fa fa-sign-out"></i>Logout</a></li> </ul>
在profile-setting.html中,非自己用户也不可修改自己的个人资料
<div th:if="${session.user.id} eq ${user.id}" class="upload-bg"> <form action="/cropper" method="post" enctype="multipart/form-data"> <label for="topfileupload" class="btn-upload"> <i class="fa fa-camera"></i> <span>update cover image</span> </label> <input type="file" id="topfileupload" name="file" class="show-for-sr"> <input id="fileuploadSubmit" style="display:none ;" type="submit"> <input style="display:none;" type="text" value="cover" name="type"> </form> </div>
在user-bar.html中,非自己用户也不可上传自己的个人头像和背景
<div class="profile-author-img"> <!-- head cover --> <img th:if="${type eq null || type eq 'cover'}" th:src="|upload/${user.headImage}|" alt="profile author img"> <div th:if="${page} ne 'ProfileSettings'" class="userHead" style="overflow:hidden; height:110px; width:120px;posistion:relative;"></div> <div th:if="${session.user.id} eq ${user.id}"> <button th:if="${page} eq 'ProfileSettings'" class="btn-upload" onclick="document.getElementById('headFile').click()"> <i class="fa fa-camera"></i> <span>Avatar(500*500)</span> </button> </div> <form action="/cropper" method="post" enctype="multipart/form-data"> <input style="display:none ;" type="text" value="head" name="type"> <input id="headFile" style="display:none;" name="file" type="file"> <input id="fileSubmit" style="display:none;" type="submit"> </form> </div>
相关文章
- 子比美化-在网站右侧边栏添加和风天气模块
- IIS 配置集中式证书模块实现网站自动绑定证书文件
- 【说站】python copy模块中的函数使用
- 智能振弦传感器的核心技术-电子标签模块
- WiFi模块 driver驱动框架(sdio接口、pcie接口)「建议收藏」
- 【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )
- python的os模块fnmatch模块介绍详解编程语言
- iPhone 8支持无线充电了?传鸿海正为苹果开发无线充电模块
- 基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
- 不重新编译PHP为php增加openssl模块的方法
- python解析模块(ConfigParser)使用方法