pswqm3ot6
/
spring-boot-online-exam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request"更新注释文档"(#11) from feature/wy into develop

Browse Source
feature/wyh
王勇 3 days ago committed by 王奕辉
parent db8aaf463e
commit e8b4b16459
60 changed files with 884 additions and 105 deletions
Show Stats Download Patch File Download Diff File

3
backend/src/main/java/lsgwr/exam/qo/DownloadQo.java
Unescape View File

@ -13,5 +13,8 @@ import lombok.NoArgsConstructor;
@AllArgsConstructor @AllArgsConstructor
@NoArgsConstructor @NoArgsConstructor
public class DownloadQo { public class DownloadQo {
/**
* 文件路径
*/
String path; String path;
} }

4
backend/src/main/java/lsgwr/exam/repository/PageRepository.java
Unescape View File

@ -8,6 +8,8 @@ package lsgwr.exam.repository;
import lsgwr.exam.entity.Page; import lsgwr.exam.entity.Page;
import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaRepository;
/**
* 页面数据库操作类
*/
public interface PageRepository extends JpaRepository<Page, Integer> { public interface PageRepository extends JpaRepository<Page, Integer> {
} }

4
backend/src/main/java/lsgwr/exam/repository/QuestionCategoryRepository.java
Unescape View File

@ -8,6 +8,8 @@ package lsgwr.exam.repository;
import lsgwr.exam.entity.QuestionCategory; import lsgwr.exam.entity.QuestionCategory;
import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaRepository;
/**
* 题目分类持久层接口
*/
public interface QuestionCategoryRepository extends JpaRepository<QuestionCategory, Integer> { public interface QuestionCategoryRepository extends JpaRepository<QuestionCategory, Integer> {
} }

4
backend/src/main/java/lsgwr/exam/repository/QuestionLevelRepository.java
Unescape View File

@ -8,6 +8,8 @@ package lsgwr.exam.repository;
import lsgwr.exam.entity.QuestionLevel; import lsgwr.exam.entity.QuestionLevel;
import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaRepository;
/**
* 题目难度的持久层接口
*/
public interface QuestionLevelRepository extends JpaRepository<QuestionLevel, Integer> { public interface QuestionLevelRepository extends JpaRepository<QuestionLevel, Integer> {
} }

4
backend/src/main/java/lsgwr/exam/repository/QuestionOptionRepository.java
Unescape View File

@ -8,6 +8,8 @@ package lsgwr.exam.repository;
import lsgwr.exam.entity.QuestionOption; import lsgwr.exam.entity.QuestionOption;
import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaRepository;
/**
* 题目选项的持久层接口
*/
public interface QuestionOptionRepository extends JpaRepository<QuestionOption, String> { public interface QuestionOptionRepository extends JpaRepository<QuestionOption, String> {
} }

4
backend/src/main/java/lsgwr/exam/repository/QuestionRepository.java
Unescape View File

@ -11,7 +11,9 @@ import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query; import org.springframework.data.jpa.repository.Query;
import java.util.List; import java.util.List;
/**
* 题目接口
*/
public interface QuestionRepository extends JpaRepository<Question, String> { public interface QuestionRepository extends JpaRepository<Question, String> {
List<Question> findByQuestionTypeId(Integer id); List<Question> findByQuestionTypeId(Integer id);
@Query("select q from Question q order by q.updateTime desc") @Query("select q from Question q order by q.updateTime desc")

4
backend/src/main/java/lsgwr/exam/repository/QuestionTypeRepository.java
Unescape View File

@ -8,6 +8,8 @@ package lsgwr.exam.repository;
import lsgwr.exam.entity.QuestionType; import lsgwr.exam.entity.QuestionType;
import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaRepository;
/**
* 题目类型接口
*/
public interface QuestionTypeRepository extends JpaRepository<QuestionType, Integer> { public interface QuestionTypeRepository extends JpaRepository<QuestionType, Integer> {
} }

3
backend/src/main/java/lsgwr/exam/repository/RoleRepository.java
Unescape View File

@ -9,5 +9,8 @@ package lsgwr.exam.repository;
import lsgwr.exam.entity.Role; import lsgwr.exam.entity.Role;
import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaRepository;
/**
* 角色的数据库操作类
*/
public interface RoleRepository extends JpaRepository<Role, Integer> { public interface RoleRepository extends JpaRepository<Role, Integer> {
} }

4
backend/src/main/java/lsgwr/exam/repository/UserRepository.java
Unescape View File

@ -8,7 +8,9 @@ package lsgwr.exam.repository;
import lsgwr.exam.entity.User; import lsgwr.exam.entity.User;
import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaRepository;
/**
* 用户表的操作类
*/
public interface UserRepository extends JpaRepository<User, String> { public interface UserRepository extends JpaRepository<User, String> {
/** /**
* 根据用户名查找到合适的用户 * 根据用户名查找到合适的用户

21
backend/src/main/java/lsgwr/exam/service/impl/UserServiceImpl.java
Unescape View File

@ -47,7 +47,12 @@ public class UserServiceImpl implements UserService {
@Autowired @Autowired
ActionRepository actionRepository; ActionRepository actionRepository;
/**
* 注册用户
*
* @param registerDTO 前端传来的注册信息
* @return 注册成功返回用户信息，失败返回null
*/
@Override @Override
public User register(RegisterDTO registerDTO) { public User register(RegisterDTO registerDTO) {
try { try {
@ -106,7 +111,12 @@ public class UserServiceImpl implements UserService {
} }
return null; return null;
} }
/**
* 获取用户信息
*
* @param userId 用户id
* @return 用户信息
*/
@Override @Override
public UserVo getUserInfo(String userId) { public UserVo getUserInfo(String userId) {
User user = userRepository.findById(userId).orElse(null); User user = userRepository.findById(userId).orElse(null);
@ -115,7 +125,12 @@ public class UserServiceImpl implements UserService {
BeanUtils.copyProperties(user, userVo); BeanUtils.copyProperties(user, userVo);
return userVo; return userVo;
} }
/**
* 获取用户详细信息
*
* @param userId 用户id
* @return 用户详细信息
*/
@Override @Override
public UserInfoVo getInfo(String userId) { public UserInfoVo getInfo(String userId) {
User user = userRepository.findById(userId).orElse(null); User user = userRepository.findById(userId).orElse(null);

20
backend/src/main/java/lsgwr/exam/utils/ResultVOUtil.java
Unescape View File

@ -7,22 +7,32 @@
package lsgwr.exam.utils; package lsgwr.exam.utils;
import lsgwr.exam.vo.ResultVO; import lsgwr.exam.vo.ResultVO;
/**
* 封装返回结果
*/
public class ResultVOUtil { public class ResultVOUtil {
/**
* 成功返回结果
*/
public static ResultVO success(Integer code, String msg, Object object) { public static ResultVO success(Integer code, String msg, Object object) {
return new ResultVO(code, msg, object); return new ResultVO(code, msg, object);
} }
/**
* 成功返回结果
*/
public static ResultVO success(Object object) { public static ResultVO success(Object object) {
return new ResultVO(0, "成功", object); return new ResultVO(0, "成功", object);
} }
/**
* 成功返回结果
*/
public static ResultVO success() { public static ResultVO success() {
return new ResultVO(0, "成功", null); return new ResultVO(0, "成功", null);
} }
/**
* 失败返回结果
*/
public static ResultVO error(Integer code, String msg) { public static ResultVO error(Integer code, String msg) {
return new ResultVO(code, msg, null); return new ResultVO(code, msg, null);
} }

15
backend/src/main/java/lsgwr/exam/vo/ActionVo.java
Unescape View File

@ -8,15 +8,24 @@ package lsgwr.exam.vo;
import com.fasterxml.jackson.annotation.JsonProperty; import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; import lombok.Data;
/**
* Action前端展示类
*/
@Data @Data
public class ActionVo { public class ActionVo {
/**
* 动作名称
*/
@JsonProperty("action") @JsonProperty("action")
private String actionName; private String actionName;
/**
* 动作描述
*/
@JsonProperty("describe") @JsonProperty("describe")
private String actionDescription; private String actionDescription;
/**
* 是否默认选中
*/
@JsonProperty("defaultCheck") @JsonProperty("defaultCheck")
private Boolean defaultCheck; private Boolean defaultCheck;
} }

4
backend/src/main/java/lsgwr/exam/vo/JsonData.java
Unescape View File

@ -16,7 +16,9 @@ import java.io.Serializable;
@AllArgsConstructor @AllArgsConstructor
@NoArgsConstructor @NoArgsConstructor
public class JsonData implements Serializable { public class JsonData implements Serializable {
/**
* 序列化id
*/
private static final long serialVersionUID = 1L; private static final long serialVersionUID = 1L;
/** /**

15
backend/src/main/java/lsgwr/exam/vo/PageVo.java
Unescape View File

@ -10,15 +10,24 @@ import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; import lombok.Data;
import java.util.List; import java.util.List;
/**
* 页面展示类
*/
@Data @Data
public class PageVo { public class PageVo {
/**
* 页面动作集合
*/
@JsonProperty("actionEntitySet") @JsonProperty("actionEntitySet")
private List<ActionVo> actionVoList; private List<ActionVo> actionVoList;
/**
* 页面名称，即路由名称
*/
@JsonProperty("permissionId") @JsonProperty("permissionId")
private String pageName; private String pageName;
/**
* 页面描述，即路由描述
*/
@JsonProperty("permissionName") @JsonProperty("permissionName")
private String pageDescription; private String pageDescription;
} }

4
backend/src/main/java/lsgwr/exam/vo/QuestionCreateSimplifyVo.java
Unescape View File

@ -10,7 +10,9 @@ import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; import lombok.Data;
import java.util.List; import java.util.List;
/**
* 问题创建的实体类,简化了下
*/
@Data @Data
public class QuestionCreateSimplifyVo { public class QuestionCreateSimplifyVo {
/** /**

4
backend/src/main/java/lsgwr/exam/vo/QuestionCreateVo.java
Unescape View File

@ -10,7 +10,9 @@ import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; import lombok.Data;
import java.util.List; import java.util.List;
/**
* 创建问题的实体类
*/
@Data @Data
public class QuestionCreateVo { public class QuestionCreateVo {
/** /**

4
backend/src/main/java/lsgwr/exam/vo/QuestionDetailVo.java
Unescape View File

@ -11,7 +11,9 @@ import lombok.Data;
import java.util.ArrayList; import java.util.ArrayList;
import java.util.List; import java.util.List;
/**
* 问题详情的实体类
*/
@Data @Data
public class QuestionDetailVo { public class QuestionDetailVo {
/** /**

4
backend/src/main/java/lsgwr/exam/vo/QuestionOptionCreateVo.java
Unescape View File

@ -8,7 +8,9 @@ package lsgwr.exam.vo;
import com.fasterxml.jackson.annotation.JsonProperty; import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; import lombok.Data;
/**
* 问题选项的外层对象
*/
@Data @Data
public class QuestionOptionCreateVo { public class QuestionOptionCreateVo {

19
backend/src/main/java/lsgwr/exam/vo/QuestionOptionVo.java
Unescape View File

@ -8,18 +8,29 @@ package lsgwr.exam.vo;
import com.fasterxml.jackson.annotation.JsonProperty; import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; import lombok.Data;
/**
* 问题选项的自定义实体类
*/
@Data @Data
public class QuestionOptionVo { public class QuestionOptionVo {
/**
* 问题选项的id
*/
@JsonProperty("id") @JsonProperty("id")
private String questionOptionId; private String questionOptionId;
/**
* 问题选项的内容
*/
@JsonProperty("content") @JsonProperty("content")
private String questionOptionContent; private String questionOptionContent;
/**
* 问题选项是否是答案
*/
@JsonProperty("answer") @JsonProperty("answer")
private Boolean answer = false; private Boolean answer = false;
/**
* 问题选项的描述
*/
@JsonProperty("description") @JsonProperty("description")
private String questionOptionDescription; private String questionOptionDescription;
} }

4
backend/src/main/java/lsgwr/exam/vo/QuestionPageVo.java
Unescape View File

@ -10,7 +10,9 @@ import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; import lombok.Data;
import java.util.List; import java.util.List;
/**
* 问题列表反馈给前端的对象
*/
@Data @Data
public class QuestionPageVo { public class QuestionPageVo {

15
backend/src/main/java/lsgwr/exam/vo/QuestionSelectionVo.java
Unescape View File

@ -13,15 +13,24 @@ import lsgwr.exam.entity.QuestionType;
import lombok.Data; import lombok.Data;
import java.util.List; import java.util.List;
/**
* 前端创建问题时的下拉列表选择
*/
@Data @Data
public class QuestionSelectionVo { public class QuestionSelectionVo {
/**
* 问题类型
*/
@JsonProperty("types") @JsonProperty("types")
private List<QuestionType> questionTypeList; private List<QuestionType> questionTypeList;
/**
* 问题分类
*/
@JsonProperty("categories") @JsonProperty("categories")
private List<QuestionCategory> questionCategoryList; private List<QuestionCategory> questionCategoryList;
/**
* 问题难度
*/
@JsonProperty("levels") @JsonProperty("levels")
private List<QuestionLevel> questionLevelList; private List<QuestionLevel> questionLevelList;
} }

15
backend/src/main/java/lsgwr/exam/vo/QuestionVo.java
Unescape View File

@ -12,15 +12,24 @@ import lombok.Data;
import java.util.Date; import java.util.Date;
import java.util.List; import java.util.List;
/**
* 问题的VO类，用于返回给前端
*/
@Data @Data
public class QuestionVo { public class QuestionVo {
/**
* 问题id，从数据库表question中获取
*/
@JsonProperty("id") @JsonProperty("id")
private String questionId; private String questionId;
/**
* 问题名称，从数据库表question中获取
*/
@JsonProperty("name") @JsonProperty("name")
private String questionName; private String questionName;
/**
* 问题分值，从数据库表question中获取
*/
@JsonProperty("score") @JsonProperty("score")
private Integer questionScore; private Integer questionScore;

4
backend/src/main/java/lsgwr/exam/vo/RecordDetailVo.java
Unescape View File

@ -11,7 +11,9 @@ import lombok.Data;
import java.util.HashMap; import java.util.HashMap;
import java.util.List; import java.util.List;
/**
* 考试记录详情的VO
*/
@Data @Data
public class RecordDetailVo { public class RecordDetailVo {
/** /**

7
backend/src/main/java/lsgwr/exam/vo/ResultVO.java
Unescape View File

@ -13,7 +13,12 @@ import lombok.Data;
@JsonInclude(JsonInclude.Include.NON_NULL) // 避免返回NULL的字段 @JsonInclude(JsonInclude.Include.NON_NULL) // 避免返回NULL的字段
public class ResultVO<T> { public class ResultVO<T> {
/**
* 构造函数
* @param code 错误码
* @param msg 提示信息
* @param data 具体内容
*/
public ResultVO(Integer code, String msg, T data) { public ResultVO(Integer code, String msg, T data) {
this.code = code; this.code = code;
this.msg = msg; this.msg = msg;

19
backend/src/main/java/lsgwr/exam/vo/RoleVo.java
Unescape View File

@ -10,18 +10,29 @@ import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; import lombok.Data;
import java.util.List; import java.util.List;
/**
* 角色的VO类
*/
@Data @Data
public class RoleVo { public class RoleVo {
/**
* 角色名
*/
@JsonProperty("id") @JsonProperty("id")
private String roleName; private String roleName;
/**
* 角色描述
*/
@JsonProperty("name") @JsonProperty("name")
private String roleDescription; private String roleDescription;
/**
* 角色的详细描述
*/
@JsonProperty("describe") @JsonProperty("describe")
private String roleDetail; private String roleDetail;
/**
* 角色所拥有的权限
*/
@JsonProperty("permissions") @JsonProperty("permissions")
private List<PageVo> pageVoList; private List<PageVo> pageVoList;
} }

20
backend/src/main/java/lsgwr/exam/vo/UserInfoVo.java
Unescape View File

@ -8,19 +8,29 @@ package lsgwr.exam.vo;
import com.fasterxml.jackson.annotation.JsonProperty; import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; import lombok.Data;
/**
* 用户信息展示类
*/
@Data @Data
public class UserInfoVo { public class UserInfoVo {
/**
* 用户ID，唯一
*/
@JsonProperty("id") @JsonProperty("id")
private String userId; private String userId;
/**
* 头像URL
*/
@JsonProperty("avatar") @JsonProperty("avatar")
private String userAvatar; private String userAvatar;
/**
* 用户名，唯一
*/
@JsonProperty("name") @JsonProperty("name")
private String userNickname; private String userNickname;
/**
* 账号，唯一
*/
@JsonProperty("username") @JsonProperty("username")
private String userUsername; private String userUsername;

35
backend/src/main/java/lsgwr/exam/vo/UserVo.java
Unescape View File

@ -8,30 +8,49 @@ package lsgwr.exam.vo;
import com.fasterxml.jackson.annotation.JsonProperty; import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data; import lombok.Data;
/**
* 用户信息展示类
*/
@Data @Data
public class UserVo { public class UserVo {
/**
* 用户ID
*/
@JsonProperty("id") @JsonProperty("id")
private String userId; private String userId;
/**
* 用户名
*/
@JsonProperty("username") @JsonProperty("username")
private String userUsername; private String userUsername;
/**
* 昵称
*/
@JsonProperty("nickname") @JsonProperty("nickname")
private String userNickname; private String userNickname;
/**
* 角色ID
*/
@JsonProperty("role") @JsonProperty("role")
private Integer userRoleId; private Integer userRoleId;
/**
* 头像
*/
@JsonProperty("avatar") @JsonProperty("avatar")
private String userAvatar; private String userAvatar;
/**
* 个人简介
*/
@JsonProperty("description") @JsonProperty("description")
private String userDescription; private String userDescription;
/**
* 邮箱
*/
@JsonProperty("email") @JsonProperty("email")
private String userEmail; private String userEmail;
/**
* 电话
*/
@JsonProperty("phone") @JsonProperty("phone")
private String userPhone; private String userPhone;
} }

80
frontend/public/index.html vendored
Unescape View File

@ -6,13 +6,91 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>logo.png"> <link rel="icon" href="<%= BASE_URL %>logo.png">
<title>在线考试系统</title> <title>在线考试系统</title>
<style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style> <!-- 定义加载中的样式 -->
<style>#loading-mask{
position:fixed;left:0;top:0;height:100%;
width:100%;background:#fff;user-select:none;
z-index:9999;overflow:hidden}
.loading-wrapper{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-100%)
}
.loading-dot{
animation:antRotate 1.2s infinite linear;
transform:rotate(45deg);
position:relative;
display:inline-block;
font-size:64px;
width:64px;
height:64px;
box-sizing:border-box}
.loading-dot i{
width:22px;
height:22px;
position:absolute;
display:block;
background-color:#1890ff;
border-radius:100%;
transform:scale(.75);
transform-origin:50% 50%;
opacity:.3;
animation:antSpinMove 1s infinite linear alternate
}
.loading-dot i:nth-child(1){
top:0;
left:0
}
.loading-dot i:nth-child(2){
top:0;
right:0;
-webkit-animation-delay:.4s;
animation-delay:.4s
}
.loading-dot i:nth-child(3){
right:0;
bottom:0;
-webkit-animation-delay:.8s;
animation-delay:.8s
}
.loading-dot i:nth-child(4){
bottom:0;
left:0;
-webkit-animation-delay:1.2s;
animation-delay:1.2s
}
@keyframes antRotate{
to{
-webkit-transform:rotate(405deg);
transform:rotate(405deg)
}
}
@-webkit-keyframes antRotate{to{
-webkit-transform:rotate(405deg);
transform:rotate(405deg)
}
}
@keyframes antSpinMove{
to{
opacity:1
}
}
@-webkit-keyframes antSpinMove{
to{
opacity:1
}
}
</style>
</head> </head>
<body> <body>
<!-- 当JavaScript被禁用时显示提示信息 -->
<noscript> <noscript>
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<!-- 应用的主容器 -->
<div id="app"> <div id="app">
<!-- 加载中的遮罩层 -->
<div id="loading-mask"> <div id="loading-mask">
<div class="loading-wrapper"> <div class="loading-wrapper">
<span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span> <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>

53
frontend/public/loading/loading.css
Unescape View File

@ -1 +1,52 @@
#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;} @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}} #preloadingAnimation{
position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;
z-index: 9999;overflow: hidden}
.lds-roller{
display:inline-block;
position:relative;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:64px;
height:64px;
}
.lds-roller div{
animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
transform-origin:32px 32px;
}
.lds-roller div:after{
content:" ";
display:block;
position:absolute;
width:6px;
height:6px;
border-radius:50%;
background:#13c2c2;
margin:-3px 0 0 -3px;
}
.lds-roller div:nth-child(1){animation-delay:-0.036s;}
.lds-roller div:nth-child(1):after{top:50px;left:50px;}
.lds-roller div:nth-child(2){animation-delay:-0.072s;}
.lds-roller div:nth-child(2):after{top:54px;left:45px;}
.lds-roller div:nth-child(3){animation-delay:-0.108s;}
.lds-roller div:nth-child(3):after{top:57px;left:39px;}
.lds-roller div:nth-child(4){animation-delay:-0.144s;}
.lds-roller div:nth-child(4):after{top:58px;left:32px;}
.lds-roller div:nth-child(5){animation-delay:-0.18s;}
.lds-roller div:nth-child(5):after{top:57px;left:25px;}
.lds-roller div:nth-child(6){animation-delay:-0.216s;}
.lds-roller div:nth-child(6):after{top:54px;left:19px;}
.lds-roller div:nth-child(7){animation-delay:-0.252s;}
.lds-roller div:nth-child(7):after{top:50px;left:14px;}
.lds-roller div:nth-child(8){animation-delay:-0.288s;}
.lds-roller div:nth-child(8):after{top:45px;left:10px;}
#preloadingAnimation .load-tips{
color: #13c2c2;
font-size:2rem;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);margin-top:80px;
text-align:center;width:400px;height:64px;}
@keyframes lds-roller{0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}}

28
frontend/public/loading/loading.html
Unescape View File

@ -1 +1,27 @@
<div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div> <div id="preloadingAnimation"><div class=lds-roller><div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div class=load-tips>Loading</div>
</div>

28
frontend/public/loading/option2/html_code_segment.html
Unescape View File

@ -1,5 +1,31 @@
/**
* 预加载动画
*/
<div class="preloading-animate"> <div class="preloading-animate">
<!--预加载的包装容器 -->
<div class="preloading-wrapper"> <div class="preloading-wrapper">
<svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="67.802" cy="59.907" r="6" fill="#51CACC"><animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77"><animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle></svg> <svg class="preloading-balls"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="67.802" cy="59.907" r="6" fill="#51CACC">
<animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
<animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
<animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
</circle>
<circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
<animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
<animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
</circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77">
<animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
<animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
<animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
</circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
<animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
<animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
</circle>
<circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
<animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
<animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
</circle>
</svg>
</div> </div>
</div> </div>

21
frontend/public/loading/option2/loading.css
Unescape View File

@ -1 +1,20 @@
.preloading-animate{background:#ffffff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:299;}.preloading-animate .preloading-wrapper{position:absolute;width:5rem;height:5rem;left:50%;top:50%;transform:translate(-50%,-50%);}.preloading-animate .preloading-wrapper .preloading-balls{font-size:5rem;} .preloading-animate{
background:#ffffff;
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
z-index:299;
}
.preloading-animate .preloading-wrapper{
position:absolute;
width:5rem;
height:5rem;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.preloading-animate .preloading-wrapper .preloading-balls{
font-size:5rem;
}

14
frontend/src/components/Exception/ExceptionPage.vue
Unescape View File

@ -1,24 +1,33 @@
<template> <template>
<!--异常页面-->
<div class="exception"> <div class="exception">
<!--背景图-->
<div class="imgBlock"> <div class="imgBlock">
<!-- 图片元素，根据传入的type动态设置背景图片 -->
<div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}"> <div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}">
</div> </div>
</div> </div>
<!-- 内容区块 -->
<div class="content"> <div class="content">
<!-- 根据传入的type动态显示标题 -->
<h1>{{ config[type].title }}</h1> <h1>{{ config[type].title }}</h1>
<!-- 根据传入的type动态显示描述 -->
<div class="desc">{{ config[type].desc }}</div> <div class="desc">{{ config[type].desc }}</div>
<!-- 操作按钮区块 -->
<div class="actions"> <div class="actions">
<!-- 点击按钮返回首页 -->
<a-button type="primary" @click="handleToHome">返回首页</a-button> <a-button type="primary" @click="handleToHome">返回首页</a-button>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>// 引入不同异常类型的配置
import types from './type' import types from './type'
export default { export default {
name: 'Exception', name: 'Exception',
// 定义组件属性
props: { props: {
type: { type: {
type: String, type: String,
@ -27,11 +36,14 @@ export default {
}, },
data () { data () {
return { return {
// 配置数据，包含不同异常类型的图片、标题和描述
config: types config: types
} }
}, },
methods: { methods: {
// 点击按钮返回首页
handleToHome () { handleToHome () {
// 使用Vue Router导航到dashboard页面
this.$router.push({ name: 'dashboard' }) this.$router.push({ name: 'dashboard' })
} }
} }

10
frontend/src/components/Exception/type.js
Unescape View File

@ -1,19 +1,27 @@
/**
* 定义一个常量对象types，用于存储不同HTTP状态码的信息
* 每个状态码都包含一个图片URL、状态码标题和描述信息
* 这些信息可以用于在界面上展示更友好的错误提示
*/
const types = { const types = {
// 403状态码信息：禁止访问
403: { 403: {
img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg', img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
title: '403', title: '403',
desc: '抱歉，你无权访问该页面' desc: '抱歉，你无权访问该页面'
}, },
// 404状态码信息：页面未找到
404: { 404: {
img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg', img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
title: '404', title: '404',
desc: '抱歉，你访问的页面不存在或仍在开发中' desc: '抱歉，你访问的页面不存在或仍在开发中'
}, },
// 500状态码信息：服务器内部错误
500: { 500: {
img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg', img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
title: '500', title: '500',
desc: '抱歉，服务器出错了' desc: '抱歉，服务器出错了'
} }
} }
// 将types对象导出，以便在其他模块中使用
export default types export default types

11
frontend/src/components/GlobalFooter/GlobalFooter.vue
Unescape View File

@ -1,18 +1,25 @@
<template> <template>
<!-- 底部信息栏 -->
<div class="footer"> <div class="footer">
<!-- 友情链接区域 -->
<div class="links"> <div class="links">
<!-- 链接：项目代码仓库 -->
<a href="https://github.com/19920625lsg/spring-boot-online-exam" target="_blank">代码仓</a> <a href="https://github.com/19920625lsg/spring-boot-online-exam" target="_blank">代码仓</a>
<!-- 链接：关于我的页面 -->
<a href="https://19920625lsg.github.io" target="_blank">关于我</a> <a href="https://19920625lsg.github.io" target="_blank">关于我</a>
<!-- 链接：联系我 -->
<a href="mailto:liangshanguang2@gmail.com">联系我</a> <a href="mailto:liangshanguang2@gmail.com">联系我</a>
</div> </div>
<!-- 版权信息区域 -->
<div class="copyright"> <div class="copyright">
Copyright Copyright
<!-- 版权图标 -->
<a-icon type="copyright" /> 2020 <span>Liang Shan Guang</span> <a-icon type="copyright" /> 2020 <span>Liang Shan Guang</span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>// 定义全局底部组件
export default { export default {
name: 'GlobalFooter', name: 'GlobalFooter',
data () { data () {
@ -21,7 +28,7 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>// 底部样式定义
.footer { .footer {
padding: 0 16px; padding: 0 16px;
margin: 24px 0 24px; margin: 24px 0 24px;

21
frontend/src/components/GlobalHeader/GlobalHeader.vue
Unescape View File

@ -1,22 +1,31 @@
<template> <template>
<!-- 使用 transition 组件为头部添加动画效果 -->
<transition name="showHeader"> <transition name="showHeader">
<!-- 根据 visible 属性控制头部的显示与隐藏 -->
<div v-if="visible" class="header-animat"> <div v-if="visible" class="header-animat">
<!-- 根据 visible 属性、fixedHeader、sidebarOpened 等属性动态设置头部样式 -->
<a-layout-header <a-layout-header
v-if="visible" v-if="visible"
:class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]" :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
:style="{ padding: '0' }"> :style="{ padding: '0' }">
<!-- 根据 mode 属性判断菜单类型，并根据不同设备类型显示不同的折叠/展开图标 -->
<div v-if="mode === 'sidemenu'" class="header"> <div v-if="mode === 'sidemenu'" class="header">
<a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/> <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
<a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/> <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
<!-- 渲染用户菜单组件 -->
<user-menu></user-menu> <user-menu></user-menu>
</div> </div>
<!-- 对于顶部菜单，根据设备类型和折叠状态显示不同布局和图标 -->
<div v-else :class="['top-nav-header-index', theme]"> <div v-else :class="['top-nav-header-index', theme]">
<div class="header-index-wide"> <div class="header-index-wide">
<div class="header-index-left"> <div class="header-index-left">
<!-- 渲染 logo 组件，根据设备类型决定是否显示标题 -->
<logo class="top-nav-header" :show-title="device !== 'mobile'"/> <logo class="top-nav-header" :show-title="device !== 'mobile'"/>
<!-- 根据设备类型和折叠状态渲染菜单 -->
<s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" /> <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
<a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" /> <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
</div> </div>
<!-- 渲染用户菜单组件 -->
<user-menu class="header-index-right"></user-menu> <user-menu class="header-index-right"></user-menu>
</div> </div>
</div> </div>
@ -25,10 +34,11 @@
</transition> </transition>
</template> </template>
<script> <script>// 导入用户菜单、菜单和 logo 组件
import UserMenu from '../tools/UserMenu' import UserMenu from '../tools/UserMenu'
import SMenu from '../Menu/' import SMenu from '../Menu/'
import Logo from '../tools/Logo' import Logo from '../tools/Logo'
// 导入混入以使用通用方法和属性
import { mixin } from '../../utils/mixin' import { mixin } from '../../utils/mixin'
export default { export default {
@ -39,6 +49,7 @@ export default {
Logo Logo
}, },
mixins: [mixin], mixins: [mixin],
// 定义组件属性，包括菜单模式、菜单项、主题、折叠状态和设备类型
props: { props: {
mode: { mode: {
type: String, type: String,
@ -67,14 +78,18 @@ export default {
}, },
data () { data () {
return { return {
// 控制头部的显示与隐藏
visible: true, visible: true,
// 用于记录上一次滚动位置
oldScrollTop: 0 oldScrollTop: 0
} }
}, },
// 监听滚动事件，以自动隐藏/显示头部
mounted () { mounted () {
document.body.addEventListener('scroll', this.handleScroll, { passive: true }) document.body.addEventListener('scroll', this.handleScroll, { passive: true })
}, },
methods: { methods: {
// 处理滚动事件，根据滚动方向和位置控制头部的显示与隐藏
handleScroll () { handleScroll () {
if (!this.autoHideHeader) { if (!this.autoHideHeader) {
return return
@ -96,17 +111,19 @@ export default {
}) })
} }
}, },
// 发送 toggle 事件以控制菜单的折叠与展开
toggle () { toggle () {
this.$emit('toggle') this.$emit('toggle')
} }
}, },
// 在组件销毁前移除滚动事件监听器
beforeDestroy () { beforeDestroy () {
document.body.removeEventListener('scroll', this.handleScroll, true) document.body.removeEventListener('scroll', this.handleScroll, true)
} }
} }
</script> </script>
<style lang="less"> <style lang="less">// 定义头部动画相关样式
.header-animat{ .header-animat{
position: relative; position: relative;
z-index: 2; z-index: 2;

5
frontend/src/components/Menu/SideMenu.vue
Unescape View File

@ -1,11 +1,14 @@
<template> <template>
<!-- 侧边栏组件，包含logo和菜单 -->
<a-layout-sider <a-layout-sider
:class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]" :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
width="256px" width="256px"
:collapsible="collapsible" :collapsible="collapsible"
v-model="collapsed" v-model="collapsed"
:trigger="null"> :trigger="null">
<!-- Logo组件 -->
<logo /> <logo />
<!-- 菜单组件 -->
<s-menu <s-menu
:collapsed="collapsed" :collapsed="collapsed"
:menu="menus" :menu="menus"
@ -17,7 +20,7 @@
</template> </template>
<script> <script>// 导入Logo和SMenu组件以及混入的工具函数
import Logo from '../../components/tools/Logo' import Logo from '../../components/tools/Logo'
import SMenu from './index' import SMenu from './index'
import { mixin, mixinDevice } from '../../utils/mixin' import { mixin, mixinDevice } from '../../utils/mixin'

39
frontend/src/components/MultiTab/MultiTab.vue
Unescape View File

@ -26,22 +26,35 @@
--> -->
<script> <script>
/**
* 多标签页组件
*/
export default { export default {
name: 'MultiTab', name: 'MultiTab',
data () { data () {
return { return {
// 存储所有标签页的 fullPath
fullPathList: [], fullPathList: [],
// 存储所有标签页的路由信息
pages: [], pages: [],
// 当前激活的标签页的 fullPath
activeKey: '', activeKey: '',
// 新标签页的索引
newTabIndex: 0 newTabIndex: 0
} }
}, },
created () { created () {
// 在组件创建时，将当前路由添加到标签页列表中，并选中它
this.pages.push(this.$route) this.pages.push(this.$route)
this.fullPathList.push(this.$route.fullPath) this.fullPathList.push(this.$route.fullPath)
this.selectedLastPath() this.selectedLastPath()
}, },
methods: { methods: {
/**
* 处理标签页编辑事件
* @param {String} targetKey - 目标标签页的 fullPath
* @param {String} action - 操作类型（例如：'remove'）
*/
onEdit (targetKey, action) { onEdit (targetKey, action) {
this[action](targetKey) this[action](targetKey)
}, },
@ -53,11 +66,14 @@ export default {
this.selectedLastPath() this.selectedLastPath()
} }
}, },
/**
* 选择最后一个标签页
*/
selectedLastPath () { selectedLastPath () {
this.activeKey = this.fullPathList[this.fullPathList.length - 1] this.activeKey = this.fullPathList[this.fullPathList.length - 1]
}, },
// content menu // 以下为标签页右键菜单相关方法
closeThat (e) { closeThat (e) {
this.remove(e) this.remove(e)
}, },
@ -93,6 +109,10 @@ export default {
} }
}) })
}, },
/**
* 处理右键菜单点击事件
* @param {Object} { key, item, domEvent } - 菜单项的相关信息
*/
closeMenuClick ({ key, item, domEvent }) { closeMenuClick ({ key, item, domEvent }) {
const vkey = domEvent.target.getAttribute('data-vkey') const vkey = domEvent.target.getAttribute('data-vkey')
switch (key) { switch (key) {
@ -111,6 +131,10 @@ export default {
break break
} }
}, },
/**
* 渲染标签页右键菜单
* @param {String} e - 标签页的 fullPath
*/
renderTabPaneMenu (e) { renderTabPaneMenu (e) {
return ( return (
<a-menu {...{ on: { click: this.closeMenuClick } }}> <a-menu {...{ on: { click: this.closeMenuClick } }}>
@ -122,6 +146,11 @@ export default {
) )
}, },
// render // render
/**
* 渲染标签页
* @param {String} title - 标签页的标题
* @param {String} keyPath - 标签页的 fullPath
*/
renderTabPane (title, keyPath) { renderTabPane (title, keyPath) {
const menu = this.renderTabPaneMenu(keyPath) const menu = this.renderTabPaneMenu(keyPath)
@ -133,6 +162,10 @@ export default {
} }
}, },
watch: { watch: {
/**
* 监听路由变化，更新标签页列表和激活的标签页
* @param {Object} newVal - 新的路由信息
*/
'$route': function (newVal) { '$route': function (newVal) {
this.activeKey = newVal.fullPath this.activeKey = newVal.fullPath
if (this.fullPathList.indexOf(newVal.fullPath) < 0) { if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
@ -140,6 +173,10 @@ export default {
this.pages.push(newVal) this.pages.push(newVal)
} }
}, },
/**
* 监听激活的标签页变化，更新路由
* @param {String} newPathKey - 新的激活标签页的 fullPath
*/
activeKey: function (newPathKey) { activeKey: function (newPathKey) {
this.$router.push({ path: newPathKey }) this.$router.push({ path: newPathKey })
} }

21
frontend/src/components/PageHeader/PageHeader.vue
Unescape View File

@ -1,28 +1,38 @@
<template> <template>
<!-- 页面头部组件 -->
<div class="page-header"> <div class="page-header">
<div class="page-header-index-wide"> <div class="page-header-index-wide">
<!-- 面包屑导航 -->
<s-breadcrumb /> <s-breadcrumb />
<div class="detail"> <div class="detail">
<!-- 主要内容区域 -->
<div class="main" v-if="!$route.meta.hiddenHeaderContent"> <div class="main" v-if="!$route.meta.hiddenHeaderContent">
<div class="row"> <div class="row">
<!-- Logo图片 -->
<img v-if="logo" :src="logo" class="logo"/> <img v-if="logo" :src="logo" class="logo"/>
<!-- 页面标题 -->
<h1 v-if="title" class="title">{{ title }}</h1> <h1 v-if="title" class="title">{{ title }}</h1>
<!-- 自定义操作区域 -->
<div class="action"> <div class="action">
<slot name="action"></slot> <slot name="action"></slot>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<!-- 头像 -->
<div v-if="avatar" class="avatar"> <div v-if="avatar" class="avatar">
<a-avatar :src="avatar" /> <a-avatar :src="avatar" />
</div> </div>
<!-- 自定义内容区域 -->
<div v-if="this.$slots.content" class="headerContent"> <div v-if="this.$slots.content" class="headerContent">
<slot name="content"></slot> <slot name="content"></slot>
</div> </div>
<!-- 额外的自定义区域 -->
<div v-if="this.$slots.extra" class="extra"> <div v-if="this.$slots.extra" class="extra">
<slot name="extra"></slot> <slot name="extra"></slot>
</div> </div>
</div> </div>
<div> <div>
<!-- 页面菜单 -->
<slot name="pageMenu"></slot> <slot name="pageMenu"></slot>
</div> </div>
</div> </div>
@ -31,25 +41,28 @@
</div> </div>
</template> </template>
<script> <script>// 导入面包屑组件
import Breadcrumb from '../../components/tools/Breadcrumb' import Breadcrumb from '../../components/tools/Breadcrumb'
// 页面头部组件定义
export default { export default {
name: 'PageHeader', name: 'PageHeader',
components: { components: {
's-breadcrumb': Breadcrumb 's-breadcrumb': Breadcrumb
}, },
props: { props: {
// 页面标题，可接受字符串或布尔值，默认为true
title: { title: {
type: [String, Boolean], type: [String, Boolean],
default: true, default: true,
required: false required: false
}, },
// Logo图片地址
logo: { logo: {
type: String, type: String,
default: '', default: '',
required: false required: false
}, },
// 头像地址
avatar: { avatar: {
type: String, type: String,
default: '', default: '',
@ -62,7 +75,7 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>// 页面头部样式
.page-header { .page-header {
background: #fff; background: #fff;
padding: 16px 32px 0; padding: 16px 32px 0;
@ -152,7 +165,7 @@ export default {
} }
} }
} }
// 移动端页面头部样式
.mobile .page-header { .mobile .page-header {
.main { .main {
.row { .row {

14
frontend/src/components/Result/Result.vue
Unescape View File

@ -1,28 +1,34 @@
<template> <template>
<!-- 结果展示组件 -->
<div class="result"> <div class="result">
<!-- 根据成功或错误状态动态显示对应图标 -->
<div> <div>
<a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess ? 'check-circle' : 'close-circle'"/> <a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess ? 'check-circle' : 'close-circle'"/>
</div> </div>
<!-- 标题区域，支持自定义插槽内容 -->
<div class="title"> <div class="title">
<slot name="title"> <slot name="title">
{{ title }} {{ title }}
</slot> </slot>
</div> </div>
<!-- 描述区域，支持自定义插槽内容 -->
<div class="description"> <div class="description">
<slot name="description"> <slot name="description">
{{ description }} {{ description }}
</slot> </slot>
</div> </div>
<!-- 额外信息区域，根据插槽内容动态显示 -->
<div class="extra" v-if="$slots.default"> <div class="extra" v-if="$slots.default">
<slot></slot> <slot></slot>
</div> </div>
<!-- 操作区域，根据插槽内容动态显示 -->
<div class="action" v-if="$slots.action"> <div class="action" v-if="$slots.action">
<slot name="action"></slot> <slot name="action"></slot>
</div> </div>
</div> </div>
</template> </template>
<script> <script>// 定义结果类型枚举
const resultEnum = ['success', 'error'] const resultEnum = ['success', 'error']
export default { export default {
@ -33,6 +39,7 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 结果类型，支持 success 或 error
type: { type: {
type: String, type: String,
default: resultEnum[0], default: resultEnum[0],
@ -40,16 +47,19 @@ export default {
return (val) => resultEnum.includes(val) return (val) => resultEnum.includes(val)
} }
}, },
// 标题文本
title: { title: {
type: String, type: String,
default: '' default: ''
}, },
// 描述文本
description: { description: {
type: String, type: String,
default: '' default: ''
} }
}, },
computed: { computed: {
// 根据类型动态计算是否成功
localIsSuccess: function () { localIsSuccess: function () {
return this.type === resultEnum[0] return this.type === resultEnum[0]
} }
@ -69,9 +79,11 @@ export default {
line-height: 72px; line-height: 72px;
margin-bottom: 24px; margin-bottom: 24px;
} }
// 成功状态的图标样式
.success { .success {
color: #52c41a; color: #52c41a;
} }
// 错误状态的图标样式
.error { .error {
color: red; color: red;
} }

14
frontend/src/components/SettingDrawer/SettingItem.vue
Unescape View File

@ -1,12 +1,22 @@
<template> <template>
<!-- 设置项容器 -->
<div class="setting-drawer-index-item"> <div class="setting-drawer-index-item">
<!-- 设置项标题 -->
<h3 class="setting-drawer-index-title">{{ title }}</h3> <h3 class="setting-drawer-index-title">{{ title }}</h3>
<!-- 插槽内容，用于显示设置项的具体内容 -->
<slot></slot> <slot></slot>
<!-- 根据props中的divider决定是否显示分割线 -->
<a-divider v-if="divider"/> <a-divider v-if="divider"/>
</div> </div>
</template> </template>
<script> <script>
/**
* 设置项组件
*
* @param {String} title - 设置项的标题，默认为空字符串
* @param {Boolean} divider - 是否显示设置项后的分割线，默认不显示
*/
export default { export default {
name: 'SettingItem', name: 'SettingItem',
props: { props: {
@ -22,11 +32,11 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>/* 设置项样式 */
.setting-drawer-index-item { .setting-drawer-index-item {
margin-bottom: 24px; margin-bottom: 24px;
/* 设置项标题样式 */
.setting-drawer-index-title { .setting-drawer-index-title {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, .85); color: rgba(0, 0, 0, .85);

21
frontend/src/components/StandardFormRow/StandardFormRow.vue
Unescape View File

@ -1,15 +1,18 @@
<template> <template>
<!-- 标准表单行组件，根据不同的属性组合有不同的样式表现 -->
<div :class="[prefixCls, lastCls, blockCls, gridCls]"> <div :class="[prefixCls, lastCls, blockCls, gridCls]">
<!-- 标题部分，只有当title属性存在时才显示 -->
<div v-if="title" class="antd-pro-components-standard-form-row-index-label"> <div v-if="title" class="antd-pro-components-standard-form-row-index-label">
<span>{{ title }}</span> <span>{{ title }}</span>
</div> </div>
<!-- 内容部分，使用slot以便于自定义内容 -->
<div class="antd-pro-components-standard-form-row-index-content"> <div class="antd-pro-components-standard-form-row-index-content">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</template> </template>
<script> <script>// 定义类名数组，用于根据不同属性动态添加类名
const classes = [ const classes = [
'antd-pro-components-standard-form-row-index-standardFormRowBlock', 'antd-pro-components-standard-form-row-index-standardFormRowBlock',
'antd-pro-components-standard-form-row-index-standardFormRowGrid', 'antd-pro-components-standard-form-row-index-standardFormRowGrid',
@ -17,6 +20,7 @@ const classes = [
] ]
export default { export default {
name: 'StandardFormRow', name: 'StandardFormRow',
// 定义组件的属性，包括前缀类名、标题、以及三个控制样式的布尔值属性
props: { props: {
prefixCls: { prefixCls: {
type: String, type: String,
@ -36,6 +40,7 @@ export default {
type: Boolean type: Boolean
} }
}, },
// 计算属性，根据props的值动态返回对应的类名
computed: { computed: {
lastCls () { lastCls () {
return this.last ? classes[2] : null return this.last ? classes[2] : null
@ -50,9 +55,9 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>// 导入全局样式变量
@import '../index.less'; @import '../index.less';
// 定义标准表单行的基础样式
.antd-pro-components-standard-form-row-index-standardFormRow { .antd-pro-components-standard-form-row-index-standardFormRow {
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
@ -71,7 +76,7 @@ export default {
padding: 0; padding: 0;
line-height: 32px; line-height: 32px;
} }
// 标题部分的样式
.antd-pro-components-standard-form-row-index-label { .antd-pro-components-standard-form-row-index-label {
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 24px; margin-right: 24px;
@ -87,27 +92,27 @@ export default {
} }
} }
} }
// 内容部分的样式
.antd-pro-components-standard-form-row-index-content { .antd-pro-components-standard-form-row-index-content {
flex: 1 1 0; flex: 1 1 0;
/deep/ .ant-form-item:last-child { /deep/ .ant-form-item:last-child {
margin-right: 0; margin-right: 0;
} }
} }
// 当表单行是最后一个时的样式
&.antd-pro-components-standard-form-row-index-standardFormRowLast { &.antd-pro-components-standard-form-row-index-standardFormRowLast {
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
border: none; border: none;
} }
// 当表单行使用block样式时的样式
&.antd-pro-components-standard-form-row-index-standardFormRowBlock { &.antd-pro-components-standard-form-row-index-standardFormRowBlock {
/deep/ .ant-form-item, /deep/ .ant-form-item,
div.ant-form-item-control-wrapper { div.ant-form-item-control-wrapper {
display: block; display: block;
} }
} }
// 当表单行使用grid样式时的样式
&.antd-pro-components-standard-form-row-index-standardFormRowGrid { &.antd-pro-components-standard-form-row-index-standardFormRowGrid {
/deep/ .ant-form-item, /deep/ .ant-form-item,
div.ant-form-item-control-wrapper { div.ant-form-item-control-wrapper {

14
frontend/src/components/tools/Breadcrumb.vue
Unescape View File

@ -1,6 +1,9 @@
<template> <template>
<!-- 面包屑组件 -->
<a-breadcrumb class="breadcrumb"> <a-breadcrumb class="breadcrumb">
<!-- 遍历面包屑列表，生成每个面包屑项 -->
<a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name"> <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
<!-- 根据条件渲染面包屑项的链接或文本 -->
<router-link <router-link
v-if="item.name != name && index != 1" v-if="item.name != name && index != 1"
:to="{ path: item.path === '' ? '/' : item.path }" :to="{ path: item.path === '' ? '/' : item.path }"
@ -14,26 +17,35 @@
export default { export default {
data () { data () {
return { return {
// 当前路由名称
name: '', name: '',
// 面包屑列表
breadList: [] breadList: []
} }
}, },
created () { created () {
// 在组件创建时获取面包屑信息
this.getBreadcrumb() this.getBreadcrumb()
}, },
methods: { methods: {
/**
* 获取面包屑信息
* 该方法根据当前路由生成面包屑列表
*/
getBreadcrumb () { getBreadcrumb () {
this.breadList = [] this.breadList = []
// this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}}) // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
// 设置当前路由名称
this.name = this.$route.name this.name = this.$route.name
this.$route.matched.forEach(item => { this.$route.matched.forEach(item => {
// item.name !== 'index' && this.breadList.push(item) // item.name !== 'index' && this.breadList.push(item)
// 将匹配项添加到面包屑列表中
this.breadList.push(item) this.breadList.push(item)
}) })
} }
}, },
watch: { watch: {
// 监听路由变化，当路由变化时重新获取面包屑信息
$route () { $route () {
this.getBreadcrumb() this.getBreadcrumb()
} }

7
frontend/src/components/tools/HeadInfo.vue
Unescape View File

@ -1,14 +1,19 @@
<template> <template>
<!-- 头部信息组件，根据props调整样式和布局 -->
<div class="head-info" :class="center && 'center'"> <div class="head-info" :class="center && 'center'">
<!-- 显示标题 -->
<span>{{ title }}</span> <span>{{ title }}</span>
<!-- 显示内容 -->
<p>{{ content }}</p> <p>{{ content }}</p>
<!-- 根据bordered prop决定是否显示边框 -->
<em v-if="bordered"/> <em v-if="bordered"/>
</div> </div>
</template> </template>
<script> <script>// 定义头部信息组件
export default { export default {
name: 'HeadInfo', name: 'HeadInfo',
// 组件属性，包括标题、内容、是否显示边框和文本是否居中
props: { props: {
title: { title: {
type: String, type: String,

10
frontend/src/components/tools/Logo.vue
Unescape View File

@ -1,26 +1,34 @@
<template> <template>
<!-- Logo组件主体 -->
<div class="logo"> <div class="logo">
<!-- 使用router-link组件创建到dashboard的链接 -->
<router-link :to="{name:'dashboard'}"> <router-link :to="{name:'dashboard'}">
<!-- 渲染LogoSvg组件，带alt属性说明 -->
<LogoSvg alt="logo" /> <LogoSvg alt="logo" />
<!-- 根据showTitle属性决定是否显示标题 -->
<h1 v-if="showTitle">{{ title }}</h1> <h1 v-if="showTitle">{{ title }}</h1>
</router-link> </router-link>
</div> </div>
</template> </template>
<script> <script>// 导入并内联logo.svg作为组件
import LogoSvg from '../../assets/logo.svg?inline' import LogoSvg from '../../assets/logo.svg?inline'
// 定义并导出一个名为Logo的组件
export default { export default {
name: 'Logo', name: 'Logo',
// 注册组件内的组件
components: { components: {
LogoSvg LogoSvg
}, },
props: { props: {
// 设置title属性，类型为String，默认值为'Online Exam'，非必需
title: { title: {
type: String, type: String,
default: 'Online Exam', default: 'Online Exam',
required: false required: false
}, },
// 设置showTitle属性，类型为Boolean，默认值为true，非必需
showTitle: { showTitle: {
type: Boolean, type: Boolean,
default: true, default: true,

11
frontend/src/components/tools/UserMenu.vue
Unescape View File

@ -1,19 +1,28 @@
<template> <template>
<!-- 用户信息和操作菜单的容器 -->
<div class="user-wrapper"> <div class="user-wrapper">
<div class="content-box"> <div class="content-box">
<!-- 用户下拉菜单 -->
<a-dropdown> <a-dropdown>
<!-- 用户信息展示区域 -->
<span class="action ant-dropdown-link user-dropdown-menu"> <span class="action ant-dropdown-link user-dropdown-menu">
<!-- 用户头像 -->
<a-avatar class="avatar" size="small" :src="avatar()"/> <a-avatar class="avatar" size="small" :src="avatar()"/>
<!-- 用户昵称 -->
<span>{{ nickname() }}</span> <span>{{ nickname() }}</span>
</span> </span>
<!-- 下拉菜单内容 -->
<a-menu slot="overlay" class="user-dropdown-menu-wrapper"> <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
<!-- 账户设置菜单项 -->
<a-menu-item key="1"> <a-menu-item key="1">
<router-link :to="{ name: 'settings' }"> <router-link :to="{ name: 'settings' }">
<a-icon type="setting"/> <a-icon type="setting"/>
<span>账户设置</span> <span>账户设置</span>
</router-link> </router-link>
</a-menu-item> </a-menu-item>
<!-- 菜单分割符 -->
<a-menu-divider/> <a-menu-divider/>
<!-- 退出登录菜单项 -->
<a-menu-item key="3"> <a-menu-item key="3">
<a href="javascript:;" @click="handleLogout"> <a href="javascript:;" @click="handleLogout">
<a-icon type="logout"/> <a-icon type="logout"/>
@ -44,6 +53,7 @@ export default {
return that.Logout({}).then(() => { return that.Logout({}).then(() => {
window.location.reload() window.location.reload()
}).catch(err => { }).catch(err => {
// 注销失败错误处理
that.$message.error({ that.$message.error({
title: '错误', title: '错误',
description: err.message description: err.message
@ -51,6 +61,7 @@ export default {
}) })
}, },
onCancel () { onCancel () {
// 取消注销操作
} }
}) })
} }

10
frontend/src/core/directives/action.js
Unescape View File

@ -14,16 +14,26 @@ import store from '../../store'
* *
* @see https://github.com/sendya/ant-design-pro-vue/pull/53 * @see https://github.com/sendya/ant-design-pro-vue/pull/53
*/ */
/**
* 创建一个 Vue 自定义指令 'action'，用于控制元素基于用户权限的显示
*/
const action = Vue.directive('action', { const action = Vue.directive('action', {
inserted: function (el, binding, vnode) { inserted: function (el, binding, vnode) {
// 获取指令的参数，即动作名称
const actionName = binding.arg const actionName = binding.arg
// 从 Vuex store 中获取当前用户的角色信息
const roles = store.getters.roles const roles = store.getters.roles
// 获取当前路由的权限配置
const elVal = vnode.context.$route.meta.permission const elVal = vnode.context.$route.meta.permission
// 确保权限配置为数组形式
const permissionId = elVal instanceof String && [elVal] || elVal const permissionId = elVal instanceof String && [elVal] || elVal
// 遍历用户角色的权限列表
roles.permissions.forEach(p => { roles.permissions.forEach(p => {
// 如果当前权限ID不在元素的权限配置中，直接返回
if (!permissionId.includes(p.permissionId)) { if (!permissionId.includes(p.permissionId)) {
return return
} }
// 如果当前权限有动作列表限制，且动作列表中不包含指令的参数，移除或隐藏元素
if (p.actionList && !p.actionList.includes(actionName)) { if (p.actionList && !p.actionList.includes(actionName)) {
el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none') el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
} }

8
frontend/src/layouts/BlankLayout.vue
Unescape View File

@ -1,16 +1,20 @@
<template> <template>
<!-- 主要用于渲染子路由组件 -->
<div> <div>
<router-view /> <router-view />
</div> </div>
</template> </template>
<script> <script>
/**
* 定义一个名为 BlankLayout 的 Vue 组件
* 该组件用作空白布局，通常用于需要一个干净的页面来进行特定的功能或展示
*/
export default { export default {
name: 'BlankLayout' name: 'BlankLayout'
} }
</script> </script>
<style scoped> <style scoped>
/* 此处添加特定于组件的样式，使用 scoped 属性确保样式仅在本组件内生效 */
</style> </style>

17
frontend/src/layouts/PageView.vue
Unescape View File

@ -1,10 +1,16 @@
<template> <template>
<!-- 根据路由元数据决定是否显示页面头部内容 -->
<div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null"> <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
<!-- pageHeader , route meta :true on hide --> <!-- pageHeader , route meta :true on hide -->
<!-- 条件渲染页面头部组件 -->
<page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar"> <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar">
<!-- 插槽用于自定义操作按钮 -->
<slot slot="action" name="action"></slot> <slot slot="action" name="action"></slot>
<!-- 插槽用于自定义头部内容 -->
<slot slot="content" name="headerContent"></slot> <slot slot="content" name="headerContent"></slot>
<!-- 默认头部内容，当没有自定义头部内容且存在描述时显示 -->
<div slot="content" v-if="!this.$slots.headerContent && description"> <div slot="content" v-if="!this.$slots.headerContent && description">
<!-- 显示链接列表 -->
<p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p> <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
<div class="link"> <div class="link">
<template v-for="(link, index) in linkList"> <template v-for="(link, index) in linkList">
@ -15,12 +21,15 @@
</template> </template>
</div> </div>
</div> </div>
<!-- 插槽用于自定义额外内容 -->
<slot slot="extra" name="extra"> <slot slot="extra" name="extra">
<div class="extra-img"> <div class="extra-img">
<img v-if="typeof extraImage !== 'undefined'" :src="extraImage"/> <img v-if="typeof extraImage !== 'undefined'" :src="extraImage"/>
</div> </div>
</slot> </slot>
<!-- 页面菜单区域 -->
<div slot="pageMenu"> <div slot="pageMenu">
<!-- 条件渲染搜索框 -->
<div class="page-menu-search" v-if="search"> <div class="page-menu-search" v-if="search">
<a-input-search <a-input-search
style="width: 80%; max-width: 522px;" style="width: 80%; max-width: 522px;"
@ -29,6 +38,7 @@
enterButton="搜索" enterButton="搜索"
/> />
</div> </div>
<!-- 条件渲染标签页 -->
<div class="page-menu-tabs" v-if="tabs && tabs.items"> <div class="page-menu-tabs" v-if="tabs && tabs.items">
<!-- @change="callback" :activeKey="activeKey" --> <!-- @change="callback" :activeKey="activeKey" -->
<a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback"> <a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback">
@ -37,10 +47,13 @@
</div> </div>
</div> </div>
</page-header> </page-header>
<!-- 主要内容区域 -->
<div class="content"> <div class="content">
<!-- 插槽用于自定义页面内容 -->
<div class="page-header-index-wide"> <div class="page-header-index-wide">
<slot> <slot>
<!-- keep-alive --> <!-- keep-alive -->
<!-- 条件渲染路由视图，支持多页签 -->
<keep-alive v-if="multiTab"> <keep-alive v-if="multiTab">
<router-view ref="content" /> <router-view ref="content" />
</keep-alive> </keep-alive>
@ -96,15 +109,19 @@ export default {
this.getPageMeta() this.getPageMeta()
}, },
methods: { methods: {
// 获取页面元数据
getPageMeta () { getPageMeta () {
// eslint-disable-next-line // eslint-disable-next-line
// 根据传入的title属性或路由元数据设置页面标题
this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title
const content = this.$refs.content const content = this.$refs.content
if (content) { if (content) {
if (content.pageMeta) { if (content.pageMeta) {
// 如果内容组件提供了pageMeta属性，则合并到当前组件的数据
Object.assign(this, content.pageMeta) Object.assign(this, content.pageMeta)
} else { } else {
// 否则直接设置相关属性
this.description = content.description this.description = content.description
this.linkList = content.linkList this.linkList = content.linkList
this.extraImage = content.extraImage this.extraImage = content.extraImage

11
frontend/src/layouts/RouteView.vue
Unescape View File

@ -1,22 +1,32 @@
<script> <script>
/**
* 定义一个名为 RouteView 的 Vue 组件
* 该组件根据路由的 meta 信息和 store 中的 multiTab 状态决定是否缓存路由视图
*/
export default { export default {
// 组件名称
name: 'RouteView', name: 'RouteView',
props: { props: {
// 是否保持缓存，默认值为 true
keepAlive: { keepAlive: {
type: Boolean, type: Boolean,
default: true default: true
} }
}, },
// 组件数据
data () { data () {
return {} return {}
}, },
// 渲染函数
render () { render () {
// 解构获取路由的 meta 信息和 store 中的 getters
const { $route: { meta }, $store: { getters } } = this const { $route: { meta }, $store: { getters } } = this
const inKeep = ( const inKeep = (
<keep-alive> <keep-alive>
<router-view /> <router-view />
</keep-alive> </keep-alive>
) )
// 定义不缓存路由视图的组件
const notKeep = ( const notKeep = (
<router-view /> <router-view />
) )
@ -26,6 +36,7 @@ export default {
if (!getters.multiTab && meta.keepAlive === false) { if (!getters.multiTab && meta.keepAlive === false) {
return notKeep return notKeep
} }
// 根据 keepAlive 属性、multiTab 状态和路由的 keepAlive 属性决
return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep
} }
} }

13
frontend/src/layouts/UserLayout.vue
Unescape View File

@ -1,34 +1,39 @@
<template> <template>
<!-- 用户布局模板，根据设备类型调整样式 -->
<div id="userLayout" :class="['user-layout-wrapper', device]"> <div id="userLayout" :class="['user-layout-wrapper', device]">
<div class="container"> <div class="container">
<div class="top"> <div class="top">
<div class="header"> <div class="header">
<!-- 顶部标题和logo -->
<a href="/"> <a href="/">
<img src="../assets/logo.svg" class="logo" alt="logo"> <img src="../assets/logo.svg" class="logo" alt="logo">
<span class="title">Online Exam</span> <span class="title">Online Exam</span>
</a> </a>
</div> </div>
<div class="desc"> <div class="desc">
<!-- 系统描述 -->
基于SpringBoot+Vue实现的在线考试系统 基于SpringBoot+Vue实现的在线考试系统
</div> </div>
</div> </div>
<!-- 路由视图，用于显示子路由的内容 -->
<route-view></route-view> <route-view></route-view>
<div class="footer"> <div class="footer">
<div class="links"> <div class="links">
<!-- 底部链接 -->
<a href="https://github.com/19920625lsg/spring-boot-online-exam" target="_blank">代码仓</a> <a href="https://github.com/19920625lsg/spring-boot-online-exam" target="_blank">代码仓</a>
<a href="https://19920625lsg.github.io" target="_blank">关于我</a> <a href="https://19920625lsg.github.io" target="_blank">关于我</a>
<a href="mailto:liangshanguang2@gmail.com">联系我</a> <a href="mailto:liangshanguang2@gmail.com">联系我</a>
</div> </div>
<div class="copyright"> <div class="copyright">
<!-- 版权信息 -->
Copyright &copy; 2020 Liang Shan Guang Copyright &copy; 2020 Liang Shan Guang
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
// 导入RouteView组件和设备类型混入
<script> <script>
import RouteView from './RouteView' import RouteView from './RouteView'
import { mixinDevice } from '../utils/mixin' import { mixinDevice } from '../utils/mixin'
@ -41,9 +46,11 @@ export default {
return {} return {}
}, },
mounted () { mounted () {
// 在组件挂载时，为body添加userLayout类名
document.body.classList.add('userLayout') document.body.classList.add('userLayout')
}, },
beforeDestroy () { beforeDestroy () {
// 在组件销毁前，移除body上的userLayout类名
document.body.classList.remove('userLayout') document.body.classList.remove('userLayout')
} }
} }
@ -52,7 +59,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
#userLayout.user-layout-wrapper { #userLayout.user-layout-wrapper {
height: 100%; height: 100%;
// 针对移动设备的样式调整
&.mobile { &.mobile {
.container { .container {
.main { .main {

7
frontend/src/views/exception/404.vue
Unescape View File

@ -1,11 +1,14 @@
<template> <template>
<!-- 使用 ExceptionPage 组件来显示 404 错误页面 -->
<exception-page type="404" /> <exception-page type="404" />
</template> </template>
<script> <script>
// 从../../components中导入ExceptionPage组件
import { ExceptionPage } from '../../components' import { ExceptionPage } from '../../components'
// 导出一个包含components属性的默认对象
export default { export default {
// 定义组件
components: { components: {
ExceptionPage ExceptionPage
} }
@ -13,5 +16,5 @@ export default {
</script> </script>
<style scoped> <style scoped>
/* 此处写入组件的样式，scoped属性确保样式仅在本组件生效 */
</style> </style>

6
frontend/src/views/exception/500.vue
Unescape View File

@ -1,10 +1,12 @@
<template> <template>
<!-- 使用 ExceptionPage 组件来显示 500 错误页面 -->
<exception-page type="500" /> <exception-page type="500" />
</template> </template>
<script> <script>
// 导入 ExceptionPage 组件，用于展示异常页面
import { ExceptionPage } from '../../components' import { ExceptionPage } from '../../components'
// 导出一个包含 components 属性的默认对象，注册 ExceptionPage 组件
export default { export default {
components: { components: {
ExceptionPage ExceptionPage
@ -13,5 +15,5 @@ export default {
</script> </script>
<style scoped> <style scoped>
>/* 此处添加组件的样式，由于没有样式内容，所以留空 */
</style> </style>

14
frontend/src/views/home/Banner.vue
Unescape View File

@ -1,24 +1,35 @@
<template> <template>
<!-- 头部区域 -->
<div class="banner-wrapper"> <div class="banner-wrapper">
<!-- 标题区域 -->
<div class="banner-title-wrapper"> <div class="banner-title-wrapper">
<!-- 标题线动画效果 -->
<div class="title-line-wrapper" style="opacity: 1; transform: translate(0px, 0px);"> <div class="title-line-wrapper" style="opacity: 1; transform: translate(0px, 0px);">
<div class="title-line" style="transform: translateX(-64px);"></div> <div class="title-line" style="transform: translateX(-64px);"></div>
</div> </div>
<!-- 主标题 -->
<h1 class="" style="opacity: 1; transform: translate(0px, 0px);">Online Exam</h1> <h1 class="" style="opacity: 1; transform: translate(0px, 0px);">Online Exam</h1>
<!-- 副标题 -->
<p style="opacity: 1; transform: translate(0px, 0px);"> <p style="opacity: 1; transform: translate(0px, 0px);">
<span>基于SpringBoot+Vue技术栈开发的在线考试系统</span> <span>基于SpringBoot+Vue技术栈开发的在线考试系统</span>
</p> </p>
<!-- 按钮区域 -->
<div class="button-wrapper"> <div class="button-wrapper">
<!-- 预览按钮，链接到GitHub页面 -->
<a href="https://github.com/19920625lsg"> <a href="https://github.com/19920625lsg">
<a-button type="primary">预览</a-button> <a-button type="primary">预览</a-button>
</a> </a>
<!-- 开始使用按钮，点击后导航到文档页面 -->
<a @click="$router.push({ name: 'docs' })"> <a @click="$router.push({ name: 'docs' })">
<a-button style="margin: 0 16px;">开始使用</a-button> <a-button style="margin: 0 16px;">开始使用</a-button>
</a> </a>
</div> </div>
</div> </div>
<!-- 图片轮播区域 -->
<div class="banner-image-wrapper" style="opacity: 1;"> <div class="banner-image-wrapper" style="opacity: 1;">
<!-- 图片轮播组件，设置自动播放和显示箭头 -->
<a-carousel arrows autoplay> <a-carousel arrows autoplay>
<!-- 动态生成轮播图片 -->
<div v-for="i in 5" :key="i"> <div v-for="i in 5" :key="i">
<img :src="`/home/cover${i}.jpg`" style="height: 324px"/> <img :src="`/home/cover${i}.jpg`" style="height: 324px"/>
</div> </div>
@ -28,11 +39,12 @@
</template> </template>
<script> <script>
// 定义一个名为 'Banner' 的组件
export default { export default {
name: 'Banner' name: 'Banner'
} }
</script> </script>
// 引入外部样式文件
<style lang="less"> <style lang="less">
@import "home"; @import "home";
</style> </style>

9
frontend/src/views/home/List.vue
Unescape View File

@ -1,6 +1,8 @@
<template> <template>
<!-- 使用 v-for 遍历 dataSource 数组，为每个列表生成一个 ul 元素 -->
<div> <div>
<ul class="page1-box-wrapper" v-for="(list, index) in dataSource" :key="index"> <ul class="page1-box-wrapper" v-for="(list, index) in dataSource" :key="index">
<!-- 使用 v-for 遍历当前列表，为每个项生成一个 listItem 组件 -->
<template v-for="item in list"> <template v-for="item in list">
<list-item :item="item" :key="item.title"/> <list-item :item="item" :key="item.title"/>
</template> </template>
@ -9,14 +11,18 @@
</template> </template>
<script> <script>
// 导入 ListItem 组件，用于在列表中显示每个项
import ListItem from './ListItem' import ListItem from './ListItem'
// 定义一个名为 List 的 Vue 组件
export default { export default {
name: 'List', name: 'List',
components: { components: {
// 注册 ListItem 组件
ListItem ListItem
}, },
props: { props: {
// 定义 dataSource 属性，它是一个数组，用于传递给组件的数据源
dataSource: { dataSource: {
type: Array, type: Array,
requited: true, requited: true,
@ -26,6 +32,7 @@ export default {
} }
}, },
watch: { watch: {
// 监听 dataSource 属性的变化，当其值变化时，输出新的值到控制台
dataSource (val) { dataSource (val) {
console.log('dataSource::update', val) console.log('dataSource::update', val)
} }
@ -34,5 +41,5 @@ export default {
</script> </script>
<style scoped> <style scoped>
/* 此处添加组件的样式，使用 scoped 属性限制样式仅在当前组件生效 */
</style> </style>

9
frontend/src/views/home/ListItem.vue
Unescape View File

@ -1,19 +1,28 @@
<template> <template>
<!-- 使用 :key 动态绑定列表项的唯一键值，以优化渲染性能 -->
<li :key="item.title"> <li :key="item.title">
<div class="page1-box"> <div class="page1-box">
<!-- 用于装饰或布局的 div，可能包含一些样式或动画效果 -->
<div class="page1-point-wrapper"></div> <div class="page1-point-wrapper"></div>
<!-- 使用 :style 动态绑定图片框的阴影颜色，增强视觉效果 -->
<div class="page1-image" :style="{ boxShadow: `${item.shadowColor} 0px 6px 12px` }"> <div class="page1-image" :style="{ boxShadow: `${item.shadowColor} 0px 6px 12px` }">
<!-- 动态加载图片资源 -->
<img :src="item.src" /> <img :src="item.src" />
</div> </div>
<!-- 显示列表项的标题 -->
<h3>{{ item.title }}</h3> <h3>{{ item.title }}</h3>
<!-- 显示列表项的内容 -->
<p>{{ item.content }}</p> <p>{{ item.content }}</p>
</div> </div>
</li> </li>
</template> </template>
<script> <script>
// 定义一个 Vue 组件，名为 ListItem
export default { export default {
// 定义组件的属性
name: 'ListItem', name: 'ListItem',
// item 属性是一个对象，包含列表项的相关数据，是必须的属性
props: { props: {
item: { item: {
type: Object, type: Object,

20
frontend/src/views/home/Page1.vue
Unescape View File

@ -1,17 +1,26 @@
<template> <template>
<!-- HomePage的主布局 -->
<div class="home-page page1"> <div class="home-page page1">
<!-- 内容包装器，用于承载页面元素 -->
<div class="home-page-wrapper" id="page1-wrapper"> <div class="home-page-wrapper" id="page1-wrapper">
<!-- 背景文本，通过样式进行位置调整 -->
<div class="page1-bg" style="transform: translate(0px, 200.953px);">Feature</div> <div class="page1-bg" style="transform: translate(0px, 200.953px);">Feature</div>
<!-- 主标题，描述页面核心内容 -->
<h2>What can <span>Online System</span> do for you </h2> <h2>What can <span>Online System</span> do for you </h2>
<!-- 标题下装饰线 -->
<div class="title-line-wrapper page1-line"></div> <div class="title-line-wrapper page1-line"></div>
<!-- 使用List组件展示特性列表 -->
<list :data-source="features" /> <list :data-source="features" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// 导入List组件，用于展示特性列表
import List from './List' import List from './List'
// 定义中文特性数组，包含六个特性对象，每个对象有标题、内容、图片链接、颜色和阴影色
const featuresCN = [ const featuresCN = [
// 特性一：优雅美观
{ {
title: '优雅美观', title: '优雅美观',
content: '基于 Ant Design 体系精心设计', content: '基于 Ant Design 体系精心设计',
@ -19,6 +28,7 @@ const featuresCN = [
color: '#13C2C2', color: '#13C2C2',
shadowColor: 'rgba(19,194,194,.12)' shadowColor: 'rgba(19,194,194,.12)'
}, },
// 特性二：常见设计模式
{ {
title: '常见设计模式', title: '常见设计模式',
content: '提炼自中后台应用的典型页面和场景', content: '提炼自中后台应用的典型页面和场景',
@ -26,6 +36,7 @@ const featuresCN = [
color: '#2F54EB', color: '#2F54EB',
shadowColor: 'rgba(47,84,235,.12)' shadowColor: 'rgba(47,84,235,.12)'
}, },
// 特性三：最新技术栈
{ {
title: '最新技术栈', title: '最新技术栈',
content: '使用 Vue/vuex/antd 等前端前沿技术开发', content: '使用 Vue/vuex/antd 等前端前沿技术开发',
@ -33,6 +44,7 @@ const featuresCN = [
color: '#F5222D', color: '#F5222D',
shadowColor: 'rgba(245,34,45,.12)' shadowColor: 'rgba(245,34,45,.12)'
}, },
// 特性四：响应式
{ {
title: '响应式', title: '响应式',
content: '针对不同屏幕大小设计', content: '针对不同屏幕大小设计',
@ -40,6 +52,7 @@ const featuresCN = [
color: '#1AC44D', color: '#1AC44D',
shadowColor: 'rgba(26,196,77,.12)' shadowColor: 'rgba(26,196,77,.12)'
}, },
// 特性五：最佳实践
{ {
title: '最佳实践', title: '最佳实践',
content: '良好的工程实践助你持续产出高质量代码', content: '良好的工程实践助你持续产出高质量代码',
@ -47,6 +60,7 @@ const featuresCN = [
color: '#FA8C16', color: '#FA8C16',
shadowColor: 'rgba(250,140,22,.12)' shadowColor: 'rgba(250,140,22,.12)'
}, },
// 特性六：UI 测试
{ {
title: 'UI 测试', title: 'UI 测试',
content: '自动化测试保障前端产品质量', content: '自动化测试保障前端产品质量',
@ -57,19 +71,25 @@ const featuresCN = [
] ]
export default { export default {
// 定义组件名称
name: 'Page1', name: 'Page1',
// 注册组件
components: { components: {
List List
}, },
// 定义数据属性
data () { data () {
return { return {
features: featuresCN features: featuresCN
} }
}, },
// 在组件创建时调用更新特性列表的方法
created () { created () {
this.updateFeatures() this.updateFeatures()
}, },
// 定义方法
methods: { methods: {
// 更新特性列表，将一维数组转换为二维数组，以便在界面上进行特定布局
updateFeatures () { updateFeatures () {
const arr = featuresCN const arr = featuresCN
const newArr = [[], [], []] const newArr = [[], [], []]

142
frontend/src/views/list/QuestionTableList.vue
Unescape View File

@ -1,7 +1,11 @@
<template> <template>
<!-- 使用Ant Design的a-card组件作为外层容器，设置无边框 -->
<a-card :bordered="false"> <a-card :bordered="false">
<!-- 定义操作按钮的工具栏区域 -->
<div id="toolbar"> <div id="toolbar">
<!-- 新建按钮，类型为主要按钮（primary），带有加号图标，点击时调用$refs.createQuestionModal.create()方法来触发新建操作 -->
<a-button type="primary" icon="plus" @click="$refs.createQuestionModal.create()">新建</a-button>&nbsp; <a-button type="primary" icon="plus" @click="$refs.createQuestionModal.create()">新建</a-button>&nbsp;
<!-- 全量刷新按钮，类型为主要按钮（primary），带有刷新图标，点击时调用loadAll()方法来重新加载所有题目数据 -->
<a-button type="primary" icon="reload" @click="loadAll()">全量刷新</a-button> <a-button type="primary" icon="reload" @click="loadAll()">全量刷新</a-button>
</div> </div>
<BootstrapTable <BootstrapTable
@ -12,8 +16,11 @@
/> />
<!-- ref是为了方便用this.$refs.modal直接引用，下同 --> <!-- ref是为了方便用this.$refs.modal直接引用，下同 -->
<step-by-step-question-modal ref="createQuestionModal" @ok="handleOk" /> <step-by-step-question-modal ref="createQuestionModal" @ok="handleOk" />
<!-- 更新题目模态框 -->
<summernote-update-modal ref="questionUpdateModal" @ok="handleOk" /> <summernote-update-modal ref="questionUpdateModal" @ok="handleOk" />
<!-- 查看题目模态框 -->
<question-view-modal ref="modalView" @ok="handleOk" /> <question-view-modal ref="modalView" @ok="handleOk" />
<!-- 编辑题目模态框 -->
<question-edit-modal ref="modalEdit" @ok="handleOk" /> <question-edit-modal ref="modalEdit" @ok="handleOk" />
</a-card> </a-card>
</template> </template>
@ -28,6 +35,15 @@ import SummernoteUpdateModal from '@views/list/modules/SummernoteUpdateModal'
import $ from 'jquery' import $ from 'jquery'
export default { export default {
/**
* 名称：QuestionTableList 组件
* 描述：此组件用于显示问题表格列表，并提供对问题进行详细操作的功能
* 组件包含：
* - SummernoteUpdateModal: 用于更新问题描述的模态框
* - StepByStepQuestionModal: 用于逐步解答问题的模态框
* - QuestionViewModal: 用于查看问题详情的模态框
* - QuestionEditModal: 用于编辑问题的模态框
*/
name: 'QuestionTableList', name: 'QuestionTableList',
components: { components: {
SummernoteUpdateModal, SummernoteUpdateModal,
@ -44,69 +60,113 @@ export default {
title: '序号', title: '序号',
field: 'serial', field: 'serial',
formatter: function (value, row, index) { formatter: function (value, row, index) {
// 格式化函数，用于生成序号
// 参数:
// value: 当前单元格的值
// row: 当前行的数据
// index: 当前行的索引
return index + 1 // 这样的话每翻一页都会重新从1开始， return index + 1 // 这样的话每翻一页都会重新从1开始，
// 注释解释了代码的功能和潜在的行为特点
} }
}, },
// 定义表格列的配置对象
{ {
// 列标题
title: '题干', title: '题干',
// 对应的数据字段
field: 'name', field: 'name',
// 列宽度
width: 200, width: 200,
formatter: (value, row) => { formatter: (value, row) => {
// 返回格式化后的HTML，包装题干文本到一个div中
return '<div class="question-name" style="height: 100%;width: 100%">' + value + '</div>' return '<div class="question-name" style="height: 100%;width: 100%">' + value + '</div>'
}, },
// 定义列相关的事件处理函数
events: { events: {
'click .question-name': function (e, value, row, index) { 'click .question-name': function (e, value, row, index) {
// 调用编辑题干的模态框组件，传递所需参数和回调函数
that.$refs.questionUpdateModal.edit('summernote-question-name-update', row, 'name', '更新题干', questionUpdate) that.$refs.questionUpdateModal.edit('summernote-question-name-update', row, 'name', '更新题干', questionUpdate)
} }
} }
}, },
{ {
// 定义表格列的标题
title: '解析', title: '解析',
// 定义表格列对应的数据字段
field: 'description', field: 'description',
// 设置列的宽度
width: 200, width: 200,
formatter: (value, row) => { formatter: (value, row) => {
// 将当前行的描述值包装在名为question-desc的div中
return '<div class="question-desc">' + value + '</div>' return '<div class="question-desc">' + value + '</div>'
}, },
// 定义列相关事件的处理函数
events: { events: {
// 定义点击question-desc类元素的事件处理函数
'click .question-desc': function (e, value, row, index) { 'click .question-desc': function (e, value, row, index) {
that.$refs.questionUpdateModal.edit('summernote-question-desc-update', row, 'description', '更新题目解析', questionUpdate) that.$refs.questionUpdateModal.edit('summernote-question-desc-update', row, 'description', '更新题目解析', questionUpdate)
} }
} }
}, },
{ {
// 定义表格列的标题
title: '分数', title: '分数',
// 定义表格列的数据字段
field: 'score', field: 'score',
// 定义单元格内容的格式化函数
formatter: (value, row) => { formatter: (value, row) => {
// 将分数值包裹在div中，以便于后续的事件处理
return '<div class="question-score">' + value + '</div>' return '<div class="question-score">' + value + '</div>'
}, },
// 定义与列相关的事件处理函数
events: { events: {
// 当点击分数所在的单元格时触发的事件
'click .question-score': function (e, value, row, index) { 'click .question-score': function (e, value, row, index) {
// 将事件目标元素转换为jQuery对象，以便使用jQuery方法
const $element = $(e.target) // 把元素转换成html对象 const $element = $(e.target) // 把元素转换成html对象
$element.html('<input type="text" value="' + value + '">') $element.html('<input type="text" value="' + value + '">')
} }
} }
}, },
{ {
/**
* 配置表格列标题和数据字段
*
* @param {String} title - 表格列的标题，用于显示在表头
* @param {String} field - 表格列的数据字段，用于绑定数据源中的属性
*/
title: '创建人', title: '创建人',
field: 'creator' field: 'creator'
}, },
{ {
// 列的标题
title: '难度', title: '难度',
// 列的数据字段
field: 'level', field: 'level',
formatter: (value, row) => { formatter: (value, row) => {
// 格式化列的显示内容
// 参数 value: 当前单元格的值
// 参数 row: 当前行的数据
return '<div class="question-level">' + value + '</div>' return '<div class="question-level">' + value + '</div>'
}, },
events: { events: {
'click .question-level': function (e, value, row, index) { 'click .question-level': function (e, value, row, index) {
// 点击难度列的事件处理函数
// 参数 e: 事件对象
// 参数 value: 当前单元格的值
// 参数 row: 当前行的数据
// 参数 index: 当前行的索引
const $element = $(e.target) // 把元素转换成html对象 const $element = $(e.target) // 把元素转换成html对象
if ($element.children().length > 0) return // 防止重复渲染 if ($element.children().length > 0) return // 防止重复渲染
getQuestionSelection().then(res => { getQuestionSelection().then(res => {
// 获取问题下拉选项的异步处理函数
console.log(res) console.log(res)
if (res.code === 0) { if (res.code === 0) {
console.log(res.data) console.log(res.data)
const levels = res.data.levels const levels = res.data.levels
let inner = '<select>' let inner = '<select>'
for (let i = 0; i < levels.length; i++) { for (let i = 0; i < levels.length; i++) {
// 生成下拉选项
if (levels[i].description === value) { if (levels[i].description === value) {
// 设置默认的选中值为当前的值 // 设置默认的选中值为当前的值
inner += '<option value ="' + levels[i].id + '" name="' + levels[i].name + '" selected="selected">' + levels[i].description + '</option>' inner += '<option value ="' + levels[i].id + '" name="' + levels[i].name + '" selected="selected">' + levels[i].description + '</option>'
@ -117,6 +177,7 @@ export default {
inner += '</select>' inner += '</select>'
$element.html(inner) $element.html(inner)
} else { } else {
// 显示错误通知
that.$notification.error({ that.$notification.error({
message: '获取问题下拉选项失败', message: '获取问题下拉选项失败',
description: res.msg description: res.msg
@ -127,16 +188,27 @@ export default {
} }
}, },
{ {
// 列的标题
title: '题型', title: '题型',
// 对应的数据字段
field: 'type', field: 'type',
formatter: (value, row) => { formatter: (value, row) => {
// 格式化函数，用于渲染单元格内容
// value: 当前单元格的值
// row: 当前行的数据
return '<div class="question-type">' + value + '</div>' return '<div class="question-type">' + value + '</div>'
}, },
events: { events: {
'click .question-type': function (e, value, row, index) { 'click .question-type': function (e, value, row, index) {
// 点击事件处理函数
// e: 事件对象
// value: 当前单元格的值
// row: 当前行的数据
// index: 当前行的索引
const $element = $(e.target) // 把元素转换成html对象 const $element = $(e.target) // 把元素转换成html对象
if ($element.children().length > 0) return // 防止重复渲染 if ($element.children().length > 0) return // 防止重复渲染
getQuestionSelection().then(res => { getQuestionSelection().then(res => {
// 获取问题下拉选项
console.log(res) console.log(res)
if (res.code === 0) { if (res.code === 0) {
console.log(res.data) console.log(res.data)
@ -163,21 +235,27 @@ export default {
} }
}, },
{ {
// 列的标题
title: '学科', title: '学科',
// 对应的数据字段
field: 'category', field: 'category',
formatter: (value, row) => { formatter: (value, row) => {
// 数据格式化函数
// 返回学科列的HTML，用于在界面上显示
return '<div class="question-category">' + value + '</div>' return '<div class="question-category">' + value + '</div>'
}, },
events: { events: {
'click .question-category': function (e, value, row, index) { 'click .question-category': function (e, value, row, index) {
const $element = $(e.target) // 把元素转换成html对象 const $element = $(e.target) // 把元素转换成html对象
if ($element.children().length > 0) return // 防止重复渲染 if ($element.children().length > 0) return // 防止重复渲染
// 异步获取问题选择数据
getQuestionSelection().then(res => { getQuestionSelection().then(res => {
console.log(res) console.log(res)
if (res.code === 0) { if (res.code === 0) {
console.log(res.data) console.log(res.data)
const categories = res.data.categories const categories = res.data.categories
let inner = '<select>' let inner = '<select>'
// 遍历学科类别数组，生成<option>元素
for (let i = 0; i < categories.length; i++) { for (let i = 0; i < categories.length; i++) {
if (categories[i].name === value) { // 学科还是用名字吧 if (categories[i].name === value) { // 学科还是用名字吧
// 设置默认的选中值为当前的值 // 设置默认的选中值为当前的值
@ -189,6 +267,7 @@ export default {
inner += '</select>' inner += '</select>'
$element.html(inner) $element.html(inner)
} else { } else {
// 如果获取数据失败，显示错误通知
that.$notification.error({ that.$notification.error({
message: '获取问题下拉选项失败', message: '获取问题下拉选项失败',
description: res.msg description: res.msg
@ -199,22 +278,32 @@ export default {
} }
}, },
{ {
// 列标题
title: '更新时间', title: '更新时间',
// 列数据字段
field: 'updateTime' field: 'updateTime'
}, },
{ {
// 列标题
title: '操作', title: '操作',
// 列数据字段
field: 'action', field: 'action',
// 列对齐方式
align: 'center', align: 'center',
// 自定义列内容格式化函数
formatter: (value, row) => { formatter: (value, row) => {
// 返回操作按钮组的HTML字符串
return '<button type="button" class="btn btn-success view-question">详情</button>' + return '<button type="button" class="btn btn-success view-question">详情</button>' +
'&nbsp;&nbsp;' + '&nbsp;&nbsp;' +
'<button type="button" class="btn btn-success edit-question">编辑</button>' '<button type="button" class="btn btn-success edit-question">编辑</button>'
}, },
// 定义列内元素的事件监听器
events: { events: {
// 点击详情按钮事件处理函数
'click .view-question': function (e, value, row, index) { 'click .view-question': function (e, value, row, index) {
that.handleSub(row) that.handleSub(row)
}, },
// 点击编辑按钮事件处理函数
'click .edit-question': function (e, value, row, index) { 'click .edit-question': function (e, value, row, index) {
that.handleEdit(row) that.handleEdit(row)
} }
@ -223,14 +312,20 @@ export default {
], ],
tableData: [], // bootstrap-table的数据 tableData: [], // bootstrap-table的数据
// custom bootstrap-table // custom bootstrap-table
// 自定义bootstrap-table配置选项
options: { options: {
// 启用搜索功能
search: true, search: true,
// 显示列选择下拉框
showColumns: true, showColumns: true,
// 显示导出按钮
showExport: true, showExport: true,
// 启用分页
pagination: true, pagination: true,
toolbar: '#toolbar', toolbar: '#toolbar',
// 下面两行是支持高级搜索，即按照字段搜索 // 下面两行是支持高级搜索，即按照字段搜索
advancedSearch: true, advancedSearch: true,
// 下面两行是支持高级搜索，即按照字段搜索
idTable: 'advancedTable', idTable: 'advancedTable',
// 下面是常用的事件，更多的点击事件可以参考：http://www.itxst.com/bootstrap-table-events/tutorial.html // 下面是常用的事件，更多的点击事件可以参考：http://www.itxst.com/bootstrap-table-events/tutorial.html
// onClickRow: that.clickRow, // onClickRow: that.clickRow,
@ -243,17 +338,35 @@ export default {
this.loadAll() // 加载所有问题的数据 this.loadAll() // 加载所有问题的数据
}, },
methods: { methods: {
/**
* 编辑问题
* @param {Object} record - 问题记录
*/
handleEdit (record) { handleEdit (record) {
this.$refs.modalEdit.edit(record) this.$refs.modalEdit.edit(record)
}, },
handleSub (record) { handleSub (record) {
// 查看题目 // 查看题目
/**
* 查看问题
* @param {Object} record - 问题记录
*/
console.log(record) console.log(record)
this.$refs.modalView.edit(record) this.$refs.modalView.edit(record)
}, },
/**
* 确认操作后重新加载数据
*/
handleOk () { handleOk () {
this.loadAll() // 加载所有问题的数据 this.loadAll() // 加载所有问题的数据
}, },
/**
* 双击表格单元格进行编辑
* @param {String} field - 字段名
* @param {String} value - 字段值
* @param {Object} row - 行记录
* @param {Object} $element - DOM元素
*/
dblClickCell (field, value, row, $element) { dblClickCell (field, value, row, $element) {
if (field === 'score') { // 更新分数 if (field === 'score') { // 更新分数
const childrenInput = $element.children('.question-score').children('input') // 获取输入框的值 const childrenInput = $element.children('.question-score').children('input') // 获取输入框的值
@ -274,18 +387,24 @@ export default {
} }
if (field === 'level') { // 更新难度 if (field === 'level') { // 更新难度
// 获取输入框的值
const childrenSelect = $element.children('.question-level').children('select') // 获取输入框的值 const childrenSelect = $element.children('.question-level').children('select') // 获取输入框的值
if (childrenSelect.length === 0) return if (childrenSelect.length === 0) return
// 找到选中的选项
const optionSelected = $(childrenSelect[0]).find('option:selected') const optionSelected = $(childrenSelect[0]).find('option:selected')
// 更新行数据的难度ID和难度名称
row.levelId = optionSelected.val() row.levelId = optionSelected.val()
console.log(row.levelId) console.log(row.levelId)
// 调用问题更新API进行异步更新
row.level = optionSelected.text() row.level = optionSelected.text()
// 成功就跳转到结果页面
console.log(row.level) console.log(row.level)
const that = this const that = this
questionUpdate(row).then(res => { questionUpdate(row).then(res => {
// 成功就跳转到结果页面 // 成功就跳转到结果页面
console.log(res) console.log(res)
if (res.code === 0) { if (res.code === 0) {
// 更新成功后，修改页面显示的难度，并显示成功通知
$element.children('.question-level').text(row.level) $element.children('.question-level').text(row.level)
that.$notification.success({ that.$notification.success({
message: '更新成功', message: '更新成功',
@ -296,17 +415,24 @@ export default {
} }
if (field === 'type') { // 更新题型 if (field === 'type') { // 更新题型
// 获取输入框的值
const childrenSelect = $element.children('.question-type').children('select') // 获取输入框的值 const childrenSelect = $element.children('.question-type').children('select') // 获取输入框的值
if (childrenSelect.length === 0) return if (childrenSelect.length === 0) return
// 找到选中的选项
const optionSelected = $(childrenSelect[0]).find('option:selected') const optionSelected = $(childrenSelect[0]).find('option:selected')
// 更新row对象的typeId和type属性
row.typeId = optionSelected.val() row.typeId = optionSelected.val()
row.type = optionSelected.text() row.type = optionSelected.text()
// 保存this的引用以便在promise中使用
const that = this const that = this
// 调用questionUpdate函数更新问题，然后根据结果进行处理
questionUpdate(row).then(res => { questionUpdate(row).then(res => {
// 成功就跳转到结果页面 // 成功就跳转到结果页面
console.log(res) console.log(res)
if (res.code === 0) { if (res.code === 0) {
// 更新页面上显示的题型
$element.children('.question-type').text(row.type) $element.children('.question-type').text(row.type)
// 显示成功通知
that.$notification.success({ that.$notification.success({
message: '更新成功', message: '更新成功',
description: '更新成功' description: '更新成功'
@ -316,18 +442,24 @@ export default {
} }
if (field === 'category') { // 更新学科 if (field === 'category') { // 更新学科
// 获取输入框的值
const childrenSelect = $element.children('.question-category').children('select') // 获取输入框的值 const childrenSelect = $element.children('.question-category').children('select') // 获取输入框的值
console.log(childrenSelect) console.log(childrenSelect)
if (childrenSelect.length === 0) return if (childrenSelect.length === 0) return
// 找到选中的选项
const optionSelected = $(childrenSelect[0]).find('option:selected') const optionSelected = $(childrenSelect[0]).find('option:selected')
// 更新行数据的学科ID和学科名称
row.categoryId = optionSelected.val() row.categoryId = optionSelected.val()
row.category = optionSelected.text() row.category = optionSelected.text()
const that = this const that = this
// 调用问题更新API
questionUpdate(row).then(res => { questionUpdate(row).then(res => {
// 成功就跳转到结果页面 // 成功就跳转到结果页面
console.log(res) console.log(res)
if (res.code === 0) { if (res.code === 0) {
// 更新成功后，修改界面上的学科名称
$element.children('.question-category').text(row.category) $element.children('.question-category').text(row.category)
// 显示成功的通知
that.$notification.success({ that.$notification.success({
message: '更新成功', message: '更新成功',
description: '更新成功' description: '更新成功'
@ -336,14 +468,24 @@ export default {
}) })
} }
}, },
/**
* 加载所有问题数据
* 此方法通过调用后端API来获取所有问题的列表，并将其用于更新表格数据
*/
loadAll () { loadAll () {
// 创建一个指向当前组件实例的引用，以避免在回调函数中直接使用this
const that = this const that = this
// 调用获取所有问题的API
getQuestionAll() getQuestionAll()
.then(res => { .then(res => {
// 检查返回的响应码
if (res.code === 0) { if (res.code === 0) {
// 如果成功，更新表格数据
that.tableData = res.data that.tableData = res.data
// 调用表格组件的初始化方法，以应用新的数据
that.$refs.table._initTable() that.$refs.table._initTable()
} else { } else {
// 如果失败，显示错误通知
that.$notification.error({ that.$notification.error({
message: '获取全部问题的列表失败', message: '获取全部问题的列表失败',
description: res.msg description: res.msg

21
frontend/src/views/list/modules/QuestionEditModal.vue
Unescape View File

@ -1,6 +1,9 @@
<!-- 问题编辑模态框组件 -->
<template> <template>
<!-- 模态框主体 -->
<a-modal title="编辑题目" :width="640" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel"> <a-modal title="编辑题目" :width="640" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<!-- 问题编辑表单 -->
<a-form :form="form"> <a-form :form="form">
<h3><b>题干：</b></h3> <h3><b>题干：</b></h3>
<div id="summernote-question-name-edit" /> <div id="summernote-question-name-edit" />
@ -48,6 +51,7 @@
<div id="summernote-question-desc-edit" /> <div id="summernote-question-desc-edit" />
</a-form> </a-form>
</a-spin> </a-spin>
<!-- 模态框底部按钮区域 -->
<template slot="footer"> <template slot="footer">
<a-button key="cancel" @click="handleCancel">关闭</a-button> <a-button key="cancel" @click="handleCancel">关闭</a-button>
<a-button key="update" type="primary" @click="handleUpdate">更新</a-button> <a-button key="update" type="primary" @click="handleUpdate">更新</a-button>
@ -56,6 +60,7 @@
</template> </template>
<script> <script>
// 导入富文本编辑器插件和API
import '../../../plugins/summernote' import '../../../plugins/summernote'
import $ from 'jquery' import $ from 'jquery'
import { questionUpdate } from '../../../api/exam' import { questionUpdate } from '../../../api/exam'
@ -65,10 +70,13 @@ export default {
name: 'QuestionEditModal', name: 'QuestionEditModal',
data () { data () {
return { return {
// 模态框是否可见
visible: false, visible: false,
// 模态框尺寸
size: 'default', size: 'default',
// 确认按钮加载状态
confirmLoading: false, confirmLoading: false,
// 表单实例
form: this.$form.createForm(this), form: this.$form.createForm(this),
// 每个问题 // 每个问题
question: {}, question: {},
@ -85,7 +93,7 @@ export default {
desc: '' desc: ''
} }
}, },
// 组件更新时初始化富文本编辑器并设置内容
updated () { updated () {
this.initSummernote('summernote-question-name-edit') this.initSummernote('summernote-question-name-edit')
this.initSummernote('summernote-question-desc-edit') this.initSummernote('summernote-question-desc-edit')
@ -93,6 +101,7 @@ export default {
this.setSummernoteContent('summernote-question-desc-edit', this.desc) this.setSummernoteContent('summernote-question-desc-edit', this.desc)
}, },
methods: { methods: {
// 初始化富文本编辑器
initSummernote (divId) { initSummernote (divId) {
console.log('初始化富文本插件：' + divId) console.log('初始化富文本插件：' + divId)
$('#' + divId).summernote({ $('#' + divId).summernote({
@ -120,9 +129,11 @@ export default {
} }
}) })
}, },
// 获取富文本编辑器内容
getSummernoteContent (divId) { getSummernoteContent (divId) {
return $('#' + divId).summernote('code') return $('#' + divId).summernote('code')
}, },
// 设置富文本编辑器内容
setSummernoteContent (divId, content) { setSummernoteContent (divId, content) {
return $('#' + divId).summernote('code', content) return $('#' + divId).summernote('code', content)
}, },
@ -166,7 +177,7 @@ export default {
} }
console.log(`Selected: ${value}`) console.log(`Selected: ${value}`)
}, },
// 多选题答案变更处理
handleMultiChange (values) { handleMultiChange (values) {
console.log(values) console.log(values)
// 直接更新选项id的数组 // 直接更新选项id的数组
@ -191,11 +202,11 @@ export default {
} }
} }
}, },
// 弹出框滚动事件处理
popupScroll () { popupScroll () {
console.log('popupScroll') console.log('popupScroll')
}, },
// 更新问题
handleUpdate () { handleUpdate () {
const that = this const that = this
that.question.name = that.getSummernoteContent('summernote-question-name-edit') that.question.name = that.getSummernoteContent('summernote-question-name-edit')

17
frontend/src/views/list/modules/QuestionViewModal.vue
Unescape View File

@ -1,24 +1,32 @@
<template> <template>
<!-- 题目信息模态框 -->
<a-modal title="题目信息" :width="640" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel"> <a-modal title="题目信息" :width="640" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
<!-- 加载状态 -->
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<!-- 表单 -->
<a-form :form="form"> <a-form :form="form">
<!-- 题干 -->
<h3><b>题干：</b></h3> <h3><b>题干：</b></h3>
<div v-html="question.name"></div> <div v-html="question.name"></div>
<br> <br>
<!-- 选项 -->
<h3><b>选项：</b></h3> <h3><b>选项：</b></h3>
<ul> <ul>
<li v-for="option in question.options" :key="option.id" v-html="option.content"/> <li v-for="option in question.options" :key="option.id" v-html="option.content"/>
</ul> </ul>
<br> <br>
<!-- 答案 -->
<h3><b>答案：</b></h3> <h3><b>答案：</b></h3>
<ul> <ul>
<li v-for="option in question.options" :key="option.id" v-show="option.answer===true" v-html="option.content"/> <li v-for="option in question.options" :key="option.id" v-show="option.answer===true" v-html="option.content"/>
</ul> </ul>
<br> <br>
<!-- 解析 -->
<h3><b>解析：</b></h3> <h3><b>解析：</b></h3>
<div v-html="question.description"></div> <div v-html="question.description"></div>
</a-form> </a-form>
</a-spin> </a-spin>
<!-- 模态框底部按钮 -->
<template slot="footer"> <template slot="footer">
<a-button key="cancel" @click="handleCancel">关闭</a-button> <a-button key="cancel" @click="handleCancel">关闭</a-button>
</template> </template>
@ -32,23 +40,28 @@ export default {
name: 'QuestionViewModal', name: 'QuestionViewModal',
data () { data () {
return { return {
// 模态框是否可见
visible: false, visible: false,
// 确认按钮加载状态
confirmLoading: false, confirmLoading: false,
// 表单实例
form: this.$form.createForm(this), form: this.$form.createForm(this),
// 每个问题 // 每个问题
question: {}, question: {},
// 当前问题
options: [], options: [],
// 答案选项
answerOption: '' answerOption: ''
} }
}, },
methods: { methods: {
// 编辑问题
edit (record) { edit (record) {
this.visible = true this.visible = true
// 把当前的记录赋值到data中的变量 // 把当前的记录赋值到data中的变量
this.question = record this.question = record
}, },
// 关闭模态框
handleCancel () { handleCancel () {
// clear form & currentStep // clear form & currentStep
this.visible = false this.visible = false

Write Preview
Loading…
Cancel
Save