Merge pull request 'Merge develop into main #2' (#14) from develop into main

Co-authored-by: p5yt4qn87 <2058152148@qq.com>
Co-committed-by: p5yt4qn87 <2058152148@qq.com>

backend/src/main/java/lsgwr/exam/config/IntercepterConfig.java

@@ -12,12 +12,21 @@ import org.springframework.context.annotation.Configuration;
 import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
+/**
+ * 拦截器配置类
+ */
 @Configuration
 public class IntercepterConfig implements WebMvcConfigurer {
 
+    /**
+     * 注入LoginInterceptor
+     */
     @Autowired
     private LoginInterceptor loginInterceptor;
 
+    /**
+     * 添加拦截器
+     */
     @Override
     public void addInterceptors(InterceptorRegistry registry) {
         // 拦截user下的api

backend/src/main/java/lsgwr/exam/config/ServletConfig.java

@@ -7,12 +7,22 @@ import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.http.HttpStatus;
 
+/**
+ * Servlet配置类
+ */
 @Configuration
 public class ServletConfig {
+    /**
+     * 创建一个WebServerFactoryCustomizer bean，用于自定义Web服务器的工厂
+     * @return WebServerFactoryCustomizer<ConfigurableWebServerFactory>
+     */
     @Bean
     public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
+        // 返回一个lambda表达式，用于自定义Web服务器的工厂
         return factory -> {
+            // 创建一个ErrorPage对象，用于处理404错误
             ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/");
+            // 将ErrorPage对象添加到Web服务器的工厂中
             factory.addErrorPages(error404Page);
         };
     }

backend/src/main/java/lsgwr/exam/config/Swagger2Config.java

@@ -23,12 +23,18 @@ import springfox.documentation.swagger2.annotations.EnableSwagger2;
 import java.util.ArrayList;
 import java.util.List;
 
+/**
+ * Swagger2配置类
+ */
 @Configuration
 @EnableSwagger2
 public class Swagger2Config {
+    /**
+     * 创建Docket bean
+     * @return Docket
+     */
     @Bean
     public Docket api() {
-
         ParameterBuilder ticketPar = new ParameterBuilder();
         List<Parameter> pars = new ArrayList<>();
         ticketPar.name("Access-Token").description("Rest接口权限认证token,无需鉴权可为空")
@@ -48,6 +54,10 @@ public class Swagger2Config {
                 .globalOperationParameters(pars);
     }
 
+    /**
+     * 创建ApiInfo对象
+     * @return ApiInfo
+     */
     private ApiInfo apiInfo() {
         return new ApiInfoBuilder()
                 .title("online exam by springboot")

backend/src/main/java/lsgwr/exam/controller/UploadDownloadController.java

@@ -40,51 +40,79 @@ public class UploadDownloadController {
 //        return FileTransUtil.uploadFile(uploadfile, "/root/" + File.separator + uploadfile.getOriginalFilename());
 //    }
 
+    /**
+     * 单文件上传
+     *
+     * @param dir 目录
+     * @param uploadfile 文件
+     * @return String
+     */
     @ApiOperation("单文件上传,支持同时传入参数")
     @PostMapping("/api/upload/singleAndparas")
-    // 单文件上传。
     public String uploadFileSingle(@RequestParam("dir") String dir, @RequestParam("file") MultipartFile uploadfile) {
-        // 调用FileTransUtil工具类中的uploadFile方法，将上传的文件和目录作为参数传入。
         return FileTransUtil.uploadFile(uploadfile, dir);
     }
 
-    // 单文件上传，支持同时传入参数，Model。
+    /**
+     * 单文件上传，支持同时传入参数，Model
+     *
+     * @param model UploadModel2对象
+     * @return String
+     */
     @ApiOperation("单文件上传,支持同时传入参数,Model")
     @PostMapping("/upload/single/model")
     public String singleUploadFileModel(@ModelAttribute("model") UploadModel2 model) {
-        // 调用FileTransUtil工具类中的uploadFile方法，将上传的文件和目录作为参数传入。
         return FileTransUtil.uploadFile(model.getFile(), model.getDir());
     }
 
-    // 多文件上传，支持同时传入参数。
+    /**
+     * 多文件上传，支持同时传入参数
+     *
+     * @param dir 目录
+     * @param uploadfiles 文件数组
+     * @return String
+     */
     @ApiOperation("多文件上传,支持同时传入参数")
     @PostMapping("upload/multiAndparas")
     public String uploadFileMulti(@RequestParam("dir") String dir, @RequestParam("files") MultipartFile[] uploadfiles) {
-        // 调用FileTransUtil工具类中的uploadFiles方法，将上传的文件数组和目录作为参数传入。
         return FileTransUtil.uploadFiles(uploadfiles, dir);
     }
 
-    // 多文件上传，支持同时传入参数。
+    /**
+     * 多文件上传，支持同时传入参数
+     *
+     * @param model UploadModel对象
+     * @return String
+     */
     @ApiOperation("多文件上传,支持同时传入参数")
     @PostMapping(value = "/upload/multi/model")
     public String multiUploadFileModel(@ModelAttribute(("model")) UploadModel model) {
-        // 调用FileTransUtil工具类中的uploadFiles方法，将上传的文件数组和目录作为参数传入。
         return FileTransUtil.uploadFiles(model.getFiles(), model.getDir());
     }
 
-    // Get下载文件
+    /**
+     * Get下载文件
+     *
+     * @param filePath 文件路径
+     * @return ResponseEntity<InputStreamResource>
+     * @throws IOException 异常
+     */
     @ApiOperation("Get下载文件")
     @GetMapping(value = "/download/get")
     public ResponseEntity<InputStreamResource> downloadFileGet(@RequestParam String filePath) throws IOException {
-        // 调用FileTransUtil工具类中的downloadFile方法，将文件路径作为参数传入。
         return FileTransUtil.downloadFile(filePath);
     }
 
-    // Post下载文件
+    /**
+     * Post下载文件
+     *
+     * @param downloadQo DownloadQo对象
+     * @return ResponseEntity<InputStreamResource>
+     * @throws IOException 异常
+     */
     @ApiOperation("Post下载文件")
     @PostMapping(value = "/download/post")
     public ResponseEntity<InputStreamResource> downloadFilePost(@RequestBody DownloadQo downloadQo) throws IOException {
-        // 调用FileTransUtil工具类中的downloadFile方法，将文件路径作为参数传入。
         return FileTransUtil.downloadFile(downloadQo.getPath());
     }
 }

backend/src/main/java/lsgwr/exam/controller/UserController.java

@@ -29,6 +29,12 @@ public class UserController {
     @Autowired
     private UserService userService;
 
+    /**
+     * 注册
+     *
+     * @param registerDTO RegisterDTO对象
+     * @return ResultVO<User>
+     */
     @PostMapping("/register")
     @ApiOperation("注册")
     ResultVO<User> register(@RequestBody RegisterDTO registerDTO) {
@@ -44,6 +50,12 @@ public class UserController {
         return resultVO;
     }
 
+    /**
+     * 根据用户名或邮箱登录,登录成功返回token
+     *
+     * @param loginQo LoginQo对象
+     * @return ResultVO<String>
+     */
     @PostMapping("/login")
     @ApiOperation("根据用户名或邮箱登录,登录成功返回token")
     ResultVO<String> login(@RequestBody LoginQo loginQo) { // 这里不用手机号是因为手机号和用户名难以进行格式区分，而用户名和
@@ -60,6 +72,12 @@ public class UserController {
         return resultVO;
     }
 
+    /**
+     * 获取用户信息
+     *
+     * @param request HttpServletRequest对象
+     * @return ResultVO<UserVo>
+     */
     @GetMapping("/user-info")
     @ApiOperation("获取用户信息")
     // 根据请求获取用户信息
@@ -72,6 +90,12 @@ public class UserController {
         return new ResultVO<>(ResultEnum.GET_INFO_SUCCESS.getCode(), ResultEnum.GET_INFO_SUCCESS.getMessage(), userVo);
     }
 
+    /**
+     * 获取用户的详细信息，包括个人信息页面和操作权限
+     *
+     * @param request HttpServletRequest对象
+     * @return ResultVO<UserInfoVo>
+     */
     @GetMapping("/info")
     @ApiOperation("获取用户的详细信息，包括个人信息页面和操作权限")
         // 获取用户信息的接口
@@ -86,6 +110,12 @@ public class UserController {
         return new ResultVO<>(ResultEnum.GET_INFO_SUCCESS.getCode(), ResultEnum.GET_INFO_SUCCESS.getMessage(), userInfoVo);
     }
 
+    /**
+     * 测试接口
+     *
+     * @param request HttpServletRequest对象
+     * @return String
+     */
     @GetMapping("/test")
     @ApiOperation("测试接口")
     String test(HttpServletRequest request) {

backend/src/main/java/lsgwr/exam/dto/RegisterDTO.java

@@ -8,11 +8,26 @@ package lsgwr.exam.dto;
 
 import lombok.Data;
 
+/**
+ * 注册接口参数
+ */
 @Data
 public class RegisterDTO {
+    /**
+     * 邮箱
+     */
     private String email;
+    /**
+     * 密码
+     */
     private String password;
+    /**
+     * 确认密码
+     */
     private String password2;
+    /**
+     * 手机号
+     */
     private String mobile;
     /**
      * 验证码

backend/src/main/java/lsgwr/exam/entity/Exam.java

@@ -23,37 +23,85 @@ import java.util.Date;
 @Entity
 @Data
 @DynamicUpdate
+
+/**
+ * 考试实体类
+ */
 public class Exam {
     // 使用JPA的@Id注解声明该字段为主键
+    /**
+     * 考试ID，唯一标识一场考试
+     */
     @Id
-    private String examId;// 考试ID，唯一标识一场考试
-    private String examName;// 考试名称
-    private String examAvatar; // 考试头像或图标
-    private String examDescription;// 考试描述或简介
-    private String examQuestionIds;// 存储所有问题ID的字符串，可能是逗号分隔的ID列表
-    private String examQuestionIdsRadio;// 存储所有单选题ID的字符串
-    private String examQuestionIdsCheck;// 存储所有多选题ID的字符串
-    private String examQuestionIdsJudge;// 存储所有判断题ID的字符串
-    private Integer examScore;// 考试总分
-    private Integer examScoreRadio;// 单选题总分
-    private Integer examScoreCheck;// 多选题总分
-    private Integer examScoreJudge;// 判断题总分
-    private String examCreatorId;// 创建者ID，标识谁创建了这场考试
-    private Integer examTimeLimit;// 考试时间限制，单位可能是分钟
-    // 考试开始时间，使用Jackson的@JsonFormat注解自定义日期格式
+    private String examId;
+    /**
+     * 考试名称
+     */
+    private String examName;
+    /**
+     * 考试头像或图标
+     */
+    private String examAvatar;
+    /**
+     * 考试描述或简介
+     */
+    private String examDescription;
+    /**
+     * 存储所有问题ID的字符串，可能是逗号分隔的ID列表
+     */
+    private String examQuestionIds;
+    /**
+     * 存储所有单选题ID的字符串
+     */
+    private String examQuestionIdsRadio;
+    /**
+     * 存储所有多选题ID的字符串
+     */
+    private String examQuestionIdsCheck;
+    /**
+     * 存储所有判断题ID的字符串
+     */
+    private String examQuestionIdsJudge;
+    /**
+     * 考试总分
+     */
+    private Integer examScore;
+    /**
+     * 单选题总分
+     */
+    private Integer examScoreRadio;
+    /**
+     * 多选题总分
+     */
+    private Integer examScoreCheck;
+    /**
+     * 判断题总分
+     */
+    private Integer examScoreJudge;
+    /**
+     * 创建者ID，标识谁创建了这场考试
+     */
+    private String examCreatorId;
+    /**
+     * 考试时间限制，单位可能是分钟
+     */
+    private Integer examTimeLimit;
+    /**
+     * 考试开始时间，使用Jackson的@JsonFormat注解自定义日期格式
+     */
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
     private Date examStartDate;
-    // 考试结束时间
+    /**
+     * 考试结束时间
+     */
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
     private Date examEndDate;
      /**
      * 创建时间，设计数据库表时设置了自动插入当前时间，因此在Java代码中无需手动设置。
      * 使用Jackson的@JsonFormat注解自定义日期格式以便于前端展示。
      */
-
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
     private Date createTime;
-
     /**
      * 更新时间，设计数据库表时也设置了自动插入当前时间（或更新为当前时间），在Java代码中无需手动维护。
      * 同时，由于使用了Hibernate的@DynamicUpdate注解，当数据库中的实体数据发生变化时，该字段会自动更新为当前时间。

backend/src/main/java/lsgwr/exam/entity/ExamRecordLevel.java

@@ -16,13 +16,22 @@ import javax.persistence.Id;// 引入JPA中的@Id注解，标识实体类的主
 @Data
 // 使用@Entity注解标识这是一个JPA实体类
 @Entity
+/**
+ * 考试记录等级实体类
+*/
  public class ExamRecordLevel {
-    // 考试记录等级的ID，是主键，通过@Id注解标识，并通过@GeneratedValue注解指定主键生成策略
+    /**
+     * 考试记录等级的ID，是主键，通过@Id注解标识，并通过@GeneratedValue注解指定主键生成策略
+     */
     @Id
     @GeneratedValue
     private Integer examRecordLevelId;
-    // 考试记录等级的名称，用于标识等级，如“优秀”、“良好”等
+    /**
+     * 考试记录等级的名称，用于标识等级，如“优秀”、“良好”等
+     */
     private String examRecordLevelName;
-    // 考试记录等级的描述，用于对等级进行更详细的说明
+    /**
+     * 考试记录等级的描述，用于对等级进行更详细的说明
+     */
     private String examRecordLevelDescription;
 }

backend/src/main/java/lsgwr/exam/entity/Page.java

@@ -12,16 +12,28 @@ import javax.persistence.Entity;
 import javax.persistence.GeneratedValue;
 import javax.persistence.Id;
 
+/**
+ * 前端页面实体类
+ */
 @Data
 @Entity
 public class Page {
+    /**
+     * 页面ID，是主键，通过@Id注解标识，并通过@GeneratedValue注解指定主键生成策略
+     */
     @Id
     @GeneratedValue
     private Integer pageId;
-
+    /**
+     * 页面名称
+     */
     private String pageName;
-
+    /**
+     * 页面描述
+     */
     private String pageDescription;
-
+    /**
+     * 页面关联的操作ID列表，以逗号分隔
+     */
     private String actionIds;
 }

backend/src/main/java/lsgwr/exam/exception/ExamException.java

@@ -9,18 +9,32 @@ package lsgwr.exam.exception;
 import lsgwr.exam.enums.ResultEnum;
 import lombok.Getter;
 
+/**
+ * 考试异常类
+ */
 @Getter
 public class ExamException extends RuntimeException {
-    // 定义异常码
+    /**
+     * 异常码
+     */
     private Integer code;
 
-    // 构造函数，传入枚举类型
+    /**
+     * 构造函数，传入枚举类型
+     *
+     * @param resultEnum ResultEnum对象
+     */
     public ExamException(ResultEnum resultEnum) {
         super(resultEnum.getMessage());
         this.code = resultEnum.getCode();
     }
 
-    // 构造函数，传入异常码和异常信息
+    /**
+     * 构造函数，传入异常码和异常信息
+     *
+     * @param code 异常码
+     * @param message 异常信息
+     */
     public ExamException( Integer code, String message) {
         super(message);
         this.code = code;

backend/src/main/java/lsgwr/exam/interceptor/LoginInterceptor.java

@@ -23,6 +23,10 @@ import java.io.PrintWriter;
  *
  * @author liangshanguang
  */
+
+/**
+ * 登录拦截器，主要用于校验Token
+ */
 @Component
 public class LoginInterceptor implements HandlerInterceptor {
 

backend/src/main/java/lsgwr/exam/qo/LoginQo.java

@@ -10,6 +10,9 @@ import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
+/**
+ * 登录的查询参数
+ */
 @Data
 @AllArgsConstructor
 @NoArgsConstructor

backend/src/main/java/lsgwr/exam/qo/UploadModel.java

@@ -12,6 +12,9 @@ import lombok.Data;
 import lombok.NoArgsConstructor;
 import org.springframework.web.multipart.MultipartFile;
 
+/**
+ * 文件传输的实体类
+ */
 @Data
 @AllArgsConstructor
 @NoArgsConstructor

backend/src/main/java/lsgwr/exam/qo/UploadModel2.java

@@ -12,6 +12,9 @@ import lombok.Data;
 import lombok.NoArgsConstructor;
 import org.springframework.web.multipart.MultipartFile;
 
+/**
+ * 文件传输的实体类，支持单个文件
+ */
 @Data
 @AllArgsConstructor
 @NoArgsConstructor

backend/src/main/java/lsgwr/exam/repository/ExamRecordLevelRepository.java

@@ -9,6 +9,8 @@ package lsgwr.exam.repository;
 import lsgwr.exam.entity.ExamRecordLevel;
 import org.springframework.data.jpa.repository.JpaRepository;
 
-// ExamRecordLevelRepository接口，继承JpaRepository接口，用于操作ExamRecordLevel实体类
+/**
+ * ExamRecordLevelRepository接口，继承JpaRepository接口，用于操作ExamRecordLevel实体类
+ */
 public interface ExamRecordLevelRepository extends JpaRepository<ExamRecordLevel, Integer> {
 }

backend/src/main/java/lsgwr/exam/repository/ExamRecordRepository.java

@@ -5,6 +5,9 @@ import org.springframework.data.jpa.repository.JpaRepository;
 
 import java.util.List;
 
+/**
+ * 考试记录仓库接口
+ */
 public interface ExamRecordRepository extends JpaRepository<ExamRecord, String> {
     /**
      * 获取指定用户参加过的所有考试

backend/src/main/java/lsgwr/exam/repository/ExamRepository.java

@@ -12,7 +12,9 @@ import org.springframework.data.jpa.repository.Query;
 
 import java.util.List;
 
-// ExamRepository接口，继承JpaRepository接口，用于操作Exam实体类
+/**
+ * ExamRepository接口，继承JpaRepository接口，用于操作Exam实体类
+ */
 public interface ExamRepository extends JpaRepository<Exam, String> {
     // 使用JPQL查询语句，查询Exam实体类，按照updateTime降序排列
     @Query("select e from Exam e order by e.updateTime desc")

backend/src/main/java/lsgwr/exam/repository/QuestionRepository.java

@@ -15,7 +15,18 @@ import java.util.List;
  * 题目接口
  */
 public interface QuestionRepository extends JpaRepository<Question, String> {
+    /**
+     * 根据题目类型ID查询题目
+     *
+     * @param id 题目类型ID
+     * @return 题目列表
+     */
     List<Question> findByQuestionTypeId(Integer id);
+    /**
+     * 查询所有题目，按更新时间降序排列
+     *
+     * @return 题目列表
+     */
     @Query("select q from Question q order by q.updateTime desc")
     List<Question> findAll();
 }

backend/src/main/java/lsgwr/exam/service/impl/ExamServiceImpl.java

@@ -19,6 +19,9 @@ import org.springframework.stereotype.Service;
 import javax.transaction.Transactional;
 import java.util.*;
 
+/**
+ * 考试服务实现类
+ */
 @Service
 @Transactional
 public class ExamServiceImpl implements ExamService {
@@ -39,6 +42,17 @@ public class ExamServiceImpl implements ExamService {
 
     private final QuestionOptionRepository questionOptionRepository;
 
+    /**
+     * 构造函数
+     * @param questionRepository
+     * @param userRepository
+     * @param questionLevelRepository
+     * @param questionTypeRepository
+     * @param questionCategoryRepository
+     * @param questionOptionRepository
+     * @param examRepository
+     * @param examRecordRepository
+     */
     public ExamServiceImpl(QuestionRepository questionRepository, UserRepository userRepository, QuestionLevelRepository questionLevelRepository, QuestionTypeRepository questionTypeRepository, QuestionCategoryRepository questionCategoryRepository, QuestionOptionRepository questionOptionRepository, ExamRepository examRepository, ExamRecordRepository examRecordRepository) {
         this.questionRepository = questionRepository;//
         this.userRepository = userRepository;//
@@ -50,12 +64,22 @@ public class ExamServiceImpl implements ExamService {
         this.examRecordRepository = examRecordRepository;
     }
 
+    /**
+     * @decription : 获取所有考试
+     * return List<QuestionVo>
+     */
     @Override
     public List<QuestionVo> getQuestionAll() {
         List<Question> questionList = questionRepository.findAll();
         return getQuestionVos(questionList);
     }
 
+    /**
+     * 获取问题列表的自定义Vo列表
+     *
+     * @param questionList 问题列表
+     * @return 自定义Vo列表
+     */
     private List<QuestionVo> getQuestionVos(List<Question> questionList) {
         // 需要自定义的question列表，
         List<QuestionVo> questionVoList = new ArrayList<>();

backend/src/main/java/lsgwr/exam/service/impl/UserServiceImpl.java

@@ -86,6 +86,12 @@ public class UserServiceImpl implements UserService {
         }
     }
 
+    /**
+     * 登陆
+     *
+     * @param loginQo 登陆信息
+     * @return 登陆成功返回token，失败返回null
+     */
     @Override
     public String login(LoginQo loginQo) {
         User user;

backend/src/main/resources/application.yml

@@ -5,7 +5,7 @@ spring:
     driver-class-name: com.mysql.cj.jdbc.Driver
     username: root
     password: aA111111
-    url: jdbc:mysql://localhost:3306/exam?characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
+    url: jdbc:mysql://localhost:3306/exam?characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai&&allowPublicKeyRetrieval=true
   jpa:
     # 调试的时候用，用于打印完成SQL语句(但是不打印参数),联合下面的logging.level一同打印最完整的SQL信息(语句+参数)
     show-sql: false

frontend/src/components/NoticeIcon/NoticeIcon.vue

@@ -1,4 +1,6 @@
 <template>
+<!-- 进入层。展示一个通知消息组件，透过点击设置触发展示。-->
+<!-- 通过 <a-popover> 实现通知消息框，配置消息流和点击事件。-->
   <a-popover
     v-model="visible"
     trigger="click"
@@ -9,23 +11,40 @@
     :overlayStyle="{ width: '300px', top: '50px' }"
   >
     <template slot="content">
+      <!-- 透过加载线段和标签，分类显示通知。 -->
       <a-spin :spinning="loadding">
         <a-tabs>
           <a-tab-pane tab="通知" key="1">
+            <!-- 显示通知列表，具体消息以组件形式显示 -->
             <a-list>
               <a-list-item>
-                <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
+                <a-list-item-meta
+                  title="你收到了 14 份新周报"
+                  description="一年前">
+                  <a-avatar
+                    style="background-color: white"
+                    slot="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
                 </a-list-item-meta>
               </a-list-item>
               <a-list-item>
-                <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
+                <a-list-item-meta
+                  title="你推荐的 曲妮妮 已通过第三轮面试"
+                  description="一年前">
+                  <a-avatar
+                    style="background-color: white"
+                    slot="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
                 </a-list-item-meta>
               </a-list-item>
               <a-list-item>
-                <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
+                <a-list-item-meta
+                  title="这种模板可以区分多种通知类型"
+                  description="一年前">
+                  <a-avatar
+                    style="background-color: white"
+                    slot="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
                 </a-list-item-meta>
               </a-list-item>
             </a-list>
@@ -39,6 +58,7 @@
         </a-tabs>
       </a-spin>
     </template>
+    <!-- 点击回调消息分类加载功能 -->
     <span @click="fetchNotice" class="header-notice">
       <a-badge count="12">
         <a-icon style="font-size: 16px; padding: 4px" type="bell" />
@@ -49,35 +69,39 @@
 
 <script>
 export default {
-  name: 'HeaderNotice',
+  name: 'HeaderNotice', // 组件名称
   data () {
     return {
-      loadding: false,
-      visible: false
+      loadding: false, // 加载状态
+      visible: false // 视图显示或隐藏状态
     }
   },
   methods: {
+    // 点击调用消息加载和切换显示状态
     fetchNotice () {
       if (!this.visible) {
         this.loadding = true
+        // 模拟加载耗时
         setTimeout(() => {
           this.loadding = false
         }, 2000)
       } else {
         this.loadding = false
       }
-      this.visible = !this.visible
+      this.visible = !this.visible // 切换加载状态
     }
   }
 }
 </script>
 
 <style lang="css">
+/* 通知框样式配置 */
 .header-notice-wrapper {
   top: 50px !important;
 }
 </style>
 <style lang="less" scoped>
+/* 层级框样式 */
 .header-notice{
   display: inline-block;
   transition: all 0.3s;

frontend/src/utils/device.js

@@ -1,12 +1,15 @@
 import enquireJs from 'enquire.js'
 
+// 定义设备类型的常量
 export const DEVICE_TYPE = {
   DESKTOP: 'desktop',
   TABLET: 'tablet',
   MOBILE: 'mobile'
 }
 
+// 检测设备类型的函数
 export const deviceEnquire = function (callback) {
+  // 定义每个设备类型的匹配函数
   const matchDesktop = {
     match: () => {
       callback && callback(DEVICE_TYPE.DESKTOP)
@@ -25,6 +28,7 @@ export const deviceEnquire = function (callback) {
     }
   }
 
+  // 为每个设备类型注册媒体查询
   // screen and (max-width: 1087.99px)
   enquireJs
     .register('screen and (max-width: 576px)', matchMobile)

frontend/src/utils/filter.js

@@ -1,8 +1,8 @@
-import Vue from 'vue'
-import moment from 'moment'
-import 'moment/locale/zh-cn'
-import $ from 'jquery'
-moment.locale('zh-cn')
+import Vue from 'vue' // 引入Vue
+import moment from 'moment' // 引入moment库
+import 'moment/locale/zh-cn' // 引入moment的中文语言包
+import $ from 'jquery' // 引入jQuery
+moment.locale('zh-cn') // 设置moment的语言为中文
 
 Vue.filter('NumberFormat', function (value) {
   if (!value) {

frontend/src/utils/helper/permission.js

@@ -1,3 +1,4 @@
+// 定义权限枚举
 const PERMISSION_ENUM = {
   'add': { key: 'add', label: '新增' },
   'delete': { key: 'delete', label: '删除' },
@@ -10,21 +11,30 @@ const PERMISSION_ENUM = {
   'export': { key: 'export', label: '导出' }
 }
 
+// 定义插件
 function plugin (Vue) {
+  // 如果插件已经安装，则返回
   if (plugin.installed) {
     return
   }
 
+  // 如果Vue实例中没有$auth属性，则定义$auth属性
   !Vue.prototype.$auth && Object.defineProperties(Vue.prototype, {
     $auth: {
       get () {
+        // 获取当前实例
         const _this = this
+        // 返回一个函数，用于判断权限
         return (permissions) => {
+          // 将权限字符串分割成permission和action
           const [permission, action] = permissions.split('.')
+          // 获取当前用户的权限列表
           const permissionList = _this.$store.getters.roles.permissions
+          // 在权限列表中查找对应的permission
           return permissionList.find((val) => {
             return val.permissionId === permission
           }).actionList.findIndex((val) => {
+            // 在actionList中查找对应的action
             return val === action
           }) > -1
         }
@@ -32,15 +42,21 @@ function plugin (Vue) {
     }
   })
 
+  // 如果Vue实例中没有$enum属性，则定义$enum属性
   !Vue.prototype.$enum && Object.defineProperties(Vue.prototype, {
     $enum: {
       get () {
         // const _this = this;
+        // 返回一个函数，用于获取枚举值
         return (val) => {
+          // 初始化result为PERMISSION_ENUM
           let result = PERMISSION_ENUM
+          // 如果val存在，则将val按'.'分割成数组
           val && val.split('.').forEach(v => {
+            // 在result中查找对应的值
             result = result && result[v] || null
           })
+          // 返回result
           return result
         }
       }
@@ -48,4 +64,5 @@ function plugin (Vue) {
   })
 }
 
+// 导出插件
 export default plugin

frontend/src/utils/mixin.js

@@ -1,9 +1,13 @@
 // import Vue from 'vue'
+// 引入Vue
 import { deviceEnquire, DEVICE_TYPE } from '../utils/device'
+// 引入设备检测工具和设备类型
 import { mapState } from 'vuex'
+// 引入Vuex的mapState方法
 
 // const mixinsComputed = Vue.config.optionMergeStrategies.computed
 // const mixinsMethods = Vue.config.optionMergeStrategies.methods
+// 定义Vue的computed和methods的合并策略
 
 const mixin = {
   computed: {
@@ -72,5 +76,5 @@ const AppDeviceEnquire = {
     })
   }
 }
-
+// 导出mixin、AppDeviceEnquire、mixinDevice
 export { mixin, AppDeviceEnquire, mixinDevice }

frontend/src/utils/permissions.js

@@ -1,8 +1,12 @@
+// 导出一个函数，将json字符串转换为对象
 export function actionToObject (json) {
   try {
+    // 尝试将json字符串转换为对象
     return JSON.parse(json)
   } catch (e) {
+    // 如果转换失败，打印错误信息
     console.log('err', e.message)
   }
+  // 返回一个空数组
   return []
 }

frontend/src/utils/request.js

@@ -15,6 +15,7 @@ const service = axios.create({
   timeout: 6000 // 请求超时时间
 })
 
+// 错误处理函数
 const err = (error) => {
   if (error.response) {
     const data = error.response.data

frontend/src/utils/storage.js

@@ -6,17 +6,22 @@
  * @param maxAge
  */
 export const setStore = (name, content, maxAge = null) => {
+  // 如果没有全局window对象或者没有传入name，则返回
   if (!global.window || !name) {
     return
   }
 
+  // 如果content不是字符串，则将其转换为字符串
   if (typeof content !== 'string') {
     content = JSON.stringify(content)
   }
 
+  // 获取localStorage对象
   const storage = global.window.localStorage
 
+  // 将content存储到localStorage中
   storage.setItem(name, content)
+  // 如果maxAge存在且为数字，则将过期时间存储到localStorage中
   if (maxAge && !isNaN(parseInt(maxAge))) {
     const timeout = parseInt(new Date().getTime() / 1000)
     storage.setItem(`${name}_expire`, timeout + maxAge)
@@ -30,13 +35,17 @@ export const setStore = (name, content, maxAge = null) => {
  * @returns {*}
  */
 export const getStore = name => {
+  // 如果没有全局window对象或者没有传入name，则返回
   if (!global.window || !name) {
     return
   }
 
+  // 获取localStorage中存储的content
   const content = window.localStorage.getItem(name)
+  // 获取localStorage中存储的过期时间
   const _expire = window.localStorage.getItem(`${name}_expire`)
 
+  // 如果过期时间存在，则判断当前时间是否超过过期时间
   if (_expire) {
     const now = parseInt(new Date().getTime() / 1000)
     if (now > _expire) {
@@ -44,9 +53,11 @@ export const getStore = name => {
     }
   }
 
+  // 尝试将content解析为JSON对象
   try {
     return JSON.parse(content)
   } catch (e) {
+    // 如果解析失败，则返回content
     return content
   }
 }
@@ -57,11 +68,14 @@ export const getStore = name => {
  * @param name
  */
 export const clearStore = name => {
+  // 如果没有全局window对象或者没有传入name，则返回
   if (!global.window || !name) {
     return
   }
 
+  // 从localStorage中移除content
   window.localStorage.removeItem(name)
+  // 从localStorage中移除过期时间
   window.localStorage.removeItem(`${name}_expire`)
 }
 
@@ -69,9 +83,11 @@ export const clearStore = name => {
  * Clear all storage
  */
 export const clearAll = () => {
+  // 如果没有全局window对象或者没有传入name，则返回
   if (!global.window || !name) {
     return
   }
 
+  // 清空localStorage
   window.localStorage.clear()
 }

frontend/src/utils/util.js

@@ -1,9 +1,11 @@
+// 导出一个函数，用于获取当前时间并返回相应的问候语
 export function timeFix () {
   const time = new Date()
   const hour = time.getHours()
   return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好'
 }
 
+// 导出一个函数，用于随机返回一个问候语
 export function welcome () {
   const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
   const index = Math.floor(Math.random() * arr.length)
@@ -13,6 +15,7 @@ export function welcome () {
 /**
  * 触发 window.resize
  */
+// 导出一个函数，用于触发 window.resize 事件
 export function triggerWindowResizeEvent () {
   const event = document.createEvent('HTMLEvents')
   event.initEvent('resize', true, true)
@@ -20,6 +23,7 @@ export function triggerWindowResizeEvent () {
   window.dispatchEvent(event)
 }
 
+// 导出一个函数，用于监听页面滚动事件
 export function handleScrollHeader (callback) {
   let timer = 0
 
@@ -50,6 +54,7 @@ export function handleScrollHeader (callback) {
  * @param id parent element id or class
  * @param timeout
  */
+// 导出一个函数，用于移除加载动画
 export function removeLoadingAnimate (id = '', timeout = 1500) {
   if (id === '') {
     return

frontend/src/views/exception/403.vue

@@ -1,11 +1,14 @@
 <template>
+  <!-- 这是 Vue 组件的模板部分 -->
   <exception-page type="403" />
 </template>
 
 <script>
+// 从 components 目录中导入 ExceptionPage 组件
 import { ExceptionPage } from '../../components'
 
 export default {
+  // 注册 ExceptionPage 组件
   components: {
     ExceptionPage
   }

frontend/src/views/list/ExamCardList.vue

@@ -1,18 +1,28 @@
 <template>
   <div class="card-list" ref="content">
+    <!-- 使用a-list组件，设置grid属性，gutter为24，lg为3，md为2，sm为1，xs为1 -->
     <a-list
       :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
       :dataSource="dataSource"
     >
+      <!-- 使用a-list-item组件，设置slot为renderItem，slot-scope为item -->
       <a-list-item slot="renderItem" slot-scope="item">
+        <!-- 使用a-card组件，设置hoverable为true，点击事件为joinExam -->
         <a-card :hoverable="true" @click="joinExam(item.id)">
+          <!-- 使用a-card-meta组件，设置slot为title，avatar，description -->
           <a-card-meta>
+            <!-- 设置title为item.title -->
             <div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
+            <!-- 设置avatar为item.avatar，使用imgSrcFilter过滤器 -->
             <a-avatar class="card-avatar" slot="avatar" :src="item.avatar | imgSrcFilter" size="large" />
+            <!-- 设置description为item.content -->
             <div class="meta-content" slot="description">{{ item.content }}</div>
           </a-card-meta>
+          <!-- 使用template组件，设置slot为actions -->
           <template class="ant-card-actions" slot="actions">
+            <!-- 设置a为满分：item.score分 -->
             <a>满分：{{ item.score }}分</a>
+            <!-- 设置a为限时：item.elapse分钟 -->
             <a>限时：{{ item.elapse }}分钟</a>
           </template>
         </a-card>
@@ -34,6 +44,7 @@ export default {
     }
   },
   methods: {
+    // 点击卡片时，跳转到对应的考试页面
     joinExam (id) {
       const routeUrl = this.$router.resolve({
         path: `/exam/${id}`

frontend/src/views/list/ExamDetail.vue

@@ -85,15 +85,15 @@ export default {
   },
   data () {
     return {
-      // 考试详情对象
+      // 考试详情对象。
       examDetail: {},
-      // 用户做过的问题都放到这个数组中，键为问题id, 值为currentQuestion(其属性answers属性用于存放答案选项地id或ids),，用于存放用户勾选的答案
+      // 用户做过的问题都放到这个数组中，键为问题id, 值为currentQuestion(其属性answers属性用于存放答案选项地id或ids),，用于存放用户勾选的答案。
       answersMap: {},
       // 当前用户的问题
       currentQuestion: '',
-      // 单选或判断题的绑定值，用于从answersMap中初始化做题状态
+      // 单选或判断题的绑定值，用于从answersMap中初始化做题状态。
       radioValue: '',
-      // 多选题的绑定值，用于从answersMap中初始化做题状态
+      // 多选题的绑定值，用于从answersMap中初始化做题状态。
       checkValues: [],
       optionStyle: {
         display: 'block',
@@ -106,7 +106,7 @@ export default {
   mounted () {
     this.answersMap = new Map()
     const that = this
-    // 从后端获取考试的详细信息，渲染到考试详情里
+    // 从后端获取考试的详细信息，渲染到考试详情里。
     getExamDetail(this.$route.params.id)
       .then(res => {
         if (res.code === 0) {
@@ -122,26 +122,26 @@ export default {
       })
   },
   methods: {
-    // 从全局变量中获取用户昵称和头像,
+    // 从全局变量中获取用户昵称和头像。
     ...mapGetters(['nickname', 'avatar']),
     getQuestionDetail (questionId) {
-      // 问题切换时从后端拿到问题详情，渲染到前端content中
+      // 问题切换时从后端拿到问题详情，渲染到前端content中。
       const that = this
-      // 清空问题绑定的值
+      // 清空问题绑定的值。
       this.radioValue = ''
       this.checkValues = []
       getQuestionDetail(questionId)
         .then(res => {
           if (res.code === 0) {
-            // 赋值当前考试对象
+            // 赋值当前考试对象。
             that.currentQuestion = res.data
-            // 查看用户是不是已经做过这道题又切换回来的，answersMap中查找，能找到这个题目id对应的值数组不为空说明用户做过这道题
+            // 查看用户是不是已经做过这道题又切换回来的，answersMap中查找，能找到这个题目id对应的值数组不为空说明用户做过这道题。
             if (that.answersMap.get(that.currentQuestion.id)) {
-              // 说明之前做过这道题了
+              // 说明之前做过这道题了。
               if (that.currentQuestion.type === '单选题' || that.currentQuestion.type === '判断题') {
                 that.radioValue = that.answersMap.get(that.currentQuestion.id)[0]
               } else if (that.currentQuestion.type === '多选题') {
-                // 数组是引用类型，因此需要进行拷贝，千万不要直接赋值
+                // 数组是引用类型，因此需要进行拷贝，千万不要直接赋值。
                 Object.assign(that.checkValues, that.answersMap.get(that.currentQuestion.id))
               }
             }