chenx221/java_ee_project
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

update

Browse Source 
修复头像更改页逻辑

Signed-off-by: Chenx221 <chenx221@yandex.com>
This commit is contained in:
Chenx221 2023-06-19 17:53:31 +08:00
parent fe8003faf5
commit 4f60452bd8
5 changed files with 104 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
project2/out/artifacts/project2_war_exploded/WEB-INF/classes/cyou/chenx221/controller/PersonController.class
View File

Binary file not shown.

39
project2/out/artifacts/project2_war_exploded/WEB-INF/views/person.jsp
View File

@ -140,32 +140,33 @@
<div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel" <div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel"
aria-labelledby="ex1-tab-1"> aria-labelledby="ex1-tab-1">
<div class="card-body" style="min-width: 175px"> <div class="card-body" style="min-width: 175px">
<form action="save_avatar" method="post"> <div class="note note-primary mb-3" id="note" style="display: none">
<strong>提示:</strong> 用户头像更新成功
</div>
<div class="row"> <div class="row">
<div class="col-lg-2 text-center"> <div class="col-lg-2 text-center">
<p> <p>
Avatar: 头像设置:
</p> </p>
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<i class="far fa-circle-user fa-8x" id="default_avatar"></i> <i class="far fa-circle-user fa-8x" id="default_avatar"
<img src="#" class="img-fluid rounded-circle" alt="avatar" style="display: none"></i>
<img src="/person/image" class="img-fluid rounded-circle" alt="avatar"
style="height: 128px;width: 128px;display: none" style="height: 128px;width: 128px;display: none"
id="custom_avatar"/> id="custom_avatar"/>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<label class="form-label" for="customFile">请选择要上传的图片</label> <label class="form-label"
for="customFile">请选择要上传的图片(大小<15MB)</label>
<input type="file" class="form-control" id="customFile" name="avatar"/> <input type="file" class="form-control" id="customFile" name="avatar"/>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-12 text-center mt-lg-5"> <div class="col-lg-12 text-center mt-lg-5">
<button type="submit" class="btn btn-secondary btn-lg" onclick="save()"> <%-- Todo: 换成消息框--%>
SAVE
</button>
</div> </div>
</div> </div>
</form>
</div> </div>
</div> </div>
</div> </div>
@ -212,6 +213,20 @@
$('#exampleModal').modal('show'); $('#exampleModal').modal('show');
</c:if> </c:if>
fetch("/person/image")
.then(function (response) {
if (response.ok) {
// 图像存在，显示自定义头像
$('#custom_avatar').show();
} else {
// 图像不存在，显示默认头像
$('#default_avatar').show();
}
})
.catch(function (error) {
console.log("请求失败:", error);
});
$('#customFile').on('change', function () { $('#customFile').on('change', function () {
var file = this.files[0]; // 获取选择的文件 var file = this.files[0]; // 获取选择的文件
@ -232,10 +247,10 @@
data: formData, data: formData,
processData: false, // 告诉jQuery不要处理FormData对象 processData: false, // 告诉jQuery不要处理FormData对象
contentType: false, // 告诉jQuery不要设置Content-Type请求头 contentType: false, // 告诉jQuery不要设置Content-Type请求头
success: function(response) { success: function () {
// 成功上传后的操作
$('#default_avatar').hide(); // 隐藏默认头像 $('#default_avatar').hide(); // 隐藏默认头像
$('#custom_avatar').attr('src', response.avatarUrl).show(); // 更新自定义头像的图像源 $('#custom_avatar').show(); // 显示自定义头像
$('#note').show(); // 显示提示消息
}, },
error: function (xhr, status, error) { error: function (xhr, status, error) {
console.log('上传失败:', error); console.log('上传失败:', error);

28
project2/project2.sql
View File

@ -11,7 +11,7 @@
Target Server Version : 80033 (8.0.33) Target Server Version : 80033 (8.0.33)
File Encoding : 65001 File Encoding : 65001
Date: 19/06/2023 10:39:55 Date: 19/06/2023 16:23:38
*/ */
SET NAMES utf8mb4; SET NAMES utf8mb4;
@ -80,7 +80,7 @@ CREATE TABLE `score` (
INDEX `fk_course`(`CourseID` ASC) USING BTREE, INDEX `fk_course`(`CourseID` ASC) USING BTREE,
CONSTRAINT `fk_course` FOREIGN KEY (`CourseID`) REFERENCES `course` (`CourseID`) ON DELETE RESTRICT ON UPDATE RESTRICT, CONSTRAINT `fk_course` FOREIGN KEY (`CourseID`) REFERENCES `course` (`CourseID`) ON DELETE RESTRICT ON UPDATE RESTRICT,
CONSTRAINT `fk_student` FOREIGN KEY (`StudentID`) REFERENCES `student` (`id`) ON DELETE RESTRICT ON UPDATE RESTRICT CONSTRAINT `fk_student` FOREIGN KEY (`StudentID`) REFERENCES `student` (`id`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 122 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = DYNAMIC; ) ENGINE = InnoDB AUTO_INCREMENT = 123 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = DYNAMIC;
-- ---------------------------- -- ----------------------------
-- Records of score -- Records of score
@ -206,6 +206,7 @@ INSERT INTO `score` VALUES (118, 667, 9, 47, 0);
INSERT INTO `score` VALUES (119, 586, 5, 9, 0); INSERT INTO `score` VALUES (119, 586, 5, 9, 0);
INSERT INTO `score` VALUES (120, 849, 11, 32, 0); INSERT INTO `score` VALUES (120, 849, 11, 32, 0);
INSERT INTO `score` VALUES (121, 1, 1, 100, 0); INSERT INTO `score` VALUES (121, 1, 1, 100, 0);
INSERT INTO `score` VALUES (122, 1, 2, 0, 0);
-- ---------------------------- -- ----------------------------
-- Table structure for student -- Table structure for student
@ -1285,25 +1286,26 @@ INSERT INTO `teacher` VALUES (22, '无名氏4', '男', '2023-06-17', 1, '2班',
DROP TABLE IF EXISTS `user`; DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` ( CREATE TABLE `user` (
`id` int NOT NULL AUTO_INCREMENT COMMENT '用户ID', `id` int NOT NULL AUTO_INCREMENT COMMENT '用户ID',
`username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '用户名', `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户名',
`password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '密码', `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '密码',
`roles` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT 'admin' COMMENT '角色(admin,student,teacher)', `roles` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT 'admin' COMMENT '角色(admin,student,teacher)',
`disabled` int NULL DEFAULT 0 COMMENT '禁用(default: 0 false)', `disabled` int NULL DEFAULT 0 COMMENT '禁用(default: 0 false)',
`detail` int NULL DEFAULT NULL COMMENT 'link to roles id', `detail` int NULL DEFAULT NULL COMMENT 'link to roles id',
PRIMARY KEY (`id`) USING BTREE `photo` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT 'link to avatar filename',
PRIMARY KEY (`id`, `username`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 10 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = DYNAMIC; ) ENGINE = InnoDB AUTO_INCREMENT = 10 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = DYNAMIC;
-- ---------------------------- -- ----------------------------
-- Records of user -- Records of user
-- ---------------------------- -- ----------------------------
INSERT INTO `user` VALUES (1, 'admin', '8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918', 'admin', 0, NULL); INSERT INTO `user` VALUES (1, 'admin', '8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918', 'admin', 0, NULL, 'efe7ea02-053b-4b77-b8b1-719d13b18d18_010 (2)_512.png');
INSERT INTO `user` VALUES (2, 'guest', '84983c60f7daadc1cb8698621f802c0d9f9a3c3c295c810748fb048115c186ec', 'admin', 1, NULL); INSERT INTO `user` VALUES (2, 'guest', '84983c60f7daadc1cb8698621f802c0d9f9a3c3c295c810748fb048115c186ec', 'admin', 1, NULL, NULL);
INSERT INTO `user` VALUES (3, 'chenx221', '62982ab94542113a449fc9528779583bb6b93988ac4678c3fd6c010b66e7a851', 'admin', 1, NULL); INSERT INTO `user` VALUES (3, 'chenx221', '62982ab94542113a449fc9528779583bb6b93988ac4678c3fd6c010b66e7a851', 'admin', 1, NULL, NULL);
INSERT INTO `user` VALUES (4, 'chenx2210', '2bd27a9cb9135ff37aee523b7e439873a46da4d5b482145927b991a95baf43bb', 'admin', 0, NULL); INSERT INTO `user` VALUES (4, 'chenx2210', '2bd27a9cb9135ff37aee523b7e439873a46da4d5b482145927b991a95baf43bb', 'admin', 0, NULL, NULL);
INSERT INTO `user` VALUES (5, 'newuser1', '7dcf407fa84a0e0519c7991154c4148de0244d7589020c0d9842db9efad82094', 'admin', 0, NULL); INSERT INTO `user` VALUES (5, 'newuser1', '7dcf407fa84a0e0519c7991154c4148de0244d7589020c0d9842db9efad82094', 'admin', 0, NULL, NULL);
INSERT INTO `user` VALUES (6, 'guest2', '6b93ccba414ac1d0ae1e77f3fac560c748a6701ed6946735a49d463351518e16', 'admin', 0, NULL); INSERT INTO `user` VALUES (6, 'guest2', '6b93ccba414ac1d0ae1e77f3fac560c748a6701ed6946735a49d463351518e16', 'admin', 0, NULL, NULL);
INSERT INTO `user` VALUES (7, 'student1', '49fe07d0f041bced9ba827a10c2cd31b2089229d4b4e3a63b074ed7a4370e88f', 'student', 0, 0); INSERT INTO `user` VALUES (7, 'student1', '49fe07d0f041bced9ba827a10c2cd31b2089229d4b4e3a63b074ed7a4370e88f', 'student', 0, 0, NULL);
INSERT INTO `user` VALUES (8, 'student2', '2d850eb5460ffb6bb9ae11186a2d78cc22d9df387f9cdbd3a297e0d1ea08a54b', 'student', 0, 4); INSERT INTO `user` VALUES (8, 'student2', '2d850eb5460ffb6bb9ae11186a2d78cc22d9df387f9cdbd3a297e0d1ea08a54b', 'student', 0, 4, NULL);
INSERT INTO `user` VALUES (9, 'teacher1', '0829db2785c8de0ad7d0231c903be3083f6729679bc69b092bf4cfd3dc629006', 'teacher', 0, 1); INSERT INTO `user` VALUES (9, 'teacher1', '0829db2785c8de0ad7d0231c903be3083f6729679bc69b092bf4cfd3dc629006', 'teacher', 0, 1, NULL);
SET FOREIGN_KEY_CHECKS = 1; SET FOREIGN_KEY_CHECKS = 1;

3
project2/src/main/java/cyou/chenx221/controller/PersonController.java
View File

@ -54,9 +54,8 @@ public class PersonController {
user.setAvatar(object); user.setAvatar(object);
userMapper.setAvatar(user); userMapper.setAvatar(user);
// 设置返回的avatarUrl值 // 设置返回的avatarUrl值
response.put("avatarUrl", "/person/image"); // response.put("avatarUrl", "/person/image");
// response.put("avatarUrl", avatarUrl); // response.put("avatarUrl", avatarUrl);
// 返回成功消息和avatarUrl // 返回成功消息和avatarUrl
return ResponseEntity.ok(response); return ResponseEntity.ok(response);
} catch (Exception e) { } catch (Exception e) {

38
project2/web/WEB-INF/views/person.jsp
View File

@ -140,33 +140,33 @@
<div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel" <div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel"
aria-labelledby="ex1-tab-1"> aria-labelledby="ex1-tab-1">
<div class="card-body" style="min-width: 175px"> <div class="card-body" style="min-width: 175px">
<form action="save_avatar" method="post"> <div class="note note-primary mb-3" id="note" style="display: none">
<strong>提示:</strong> 用户头像更新成功
</div>
<div class="row"> <div class="row">
<div class="col-lg-2 text-center"> <div class="col-lg-2 text-center">
<p> <p>
Avatar: 头像设置:
</p> </p>
</div> </div>
<div class="col-lg-2"> <div class="col-lg-2">
<i class="far fa-circle-user fa-8x" id="default_avatar"></i> <i class="far fa-circle-user fa-8x" id="default_avatar"
<img src="#" class="img-fluid rounded-circle" alt="avatar" style="display: none"></i>
<img src="/person/image" class="img-fluid rounded-circle" alt="avatar"
style="height: 128px;width: 128px;display: none" style="height: 128px;width: 128px;display: none"
id="custom_avatar"/> id="custom_avatar"/>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<label class="form-label" for="customFile">请选择要上传的图片</label> <label class="form-label"
for="customFile">请选择要上传的图片(大小<15MB)</label>
<input type="file" class="form-control" id="customFile" name="avatar"/> <input type="file" class="form-control" id="customFile" name="avatar"/>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-12 text-center mt-lg-5"> <div class="col-lg-12 text-center mt-lg-5">
<%-- <button type="submit" class="btn btn-secondary btn-lg" onclick="save()">--%>
<%-- SAVE--%>
<%-- </button>--%>
<%-- Todo: 换成消息框--%> <%-- Todo: 换成消息框--%>
</div> </div>
</div> </div>
</form>
</div> </div>
</div> </div>
</div> </div>
@ -213,6 +213,20 @@
$('#exampleModal').modal('show'); $('#exampleModal').modal('show');
</c:if> </c:if>
fetch("/person/image")
.then(function (response) {
if (response.ok) {
// 图像存在，显示自定义头像
$('#custom_avatar').show();
} else {
// 图像不存在，显示默认头像
$('#default_avatar').show();
}
})
.catch(function (error) {
console.log("请求失败:", error);
});
$('#customFile').on('change', function () { $('#customFile').on('change', function () {
var file = this.files[0]; // 获取选择的文件 var file = this.files[0]; // 获取选择的文件
@ -233,10 +247,10 @@
data: formData, data: formData,
processData: false, // 告诉jQuery不要处理FormData对象 processData: false, // 告诉jQuery不要处理FormData对象
contentType: false, // 告诉jQuery不要设置Content-Type请求头 contentType: false, // 告诉jQuery不要设置Content-Type请求头
success: function(response) { success: function () {
// 成功上传后的操作
$('#default_avatar').hide(); // 隐藏默认头像 $('#default_avatar').hide(); // 隐藏默认头像
$('#custom_avatar').attr('src', response.avatarUrl).show(); // 更新自定义头像的图像源 $('#custom_avatar').show(); // 显示自定义头像
$('#note').show(); // 显示提示消息
}, },
error: function (xhr, status, error) { error: function (xhr, status, error) {
console.log('上传失败:', error); console.log('上传失败:', error);