你这代码写得真丑,满屏的try-catch,能不能直接全局管理异常呢?

本文介绍了一种优雅处理异常的方法,利用@ControllerAdvice和自定义异常处理器,实现了统一异常处理,减少了try-catch代码块,提高了代码可读性和维护性。

点击上方“程序IT圈”,选择加"星标"或“置顶”

重磅干货,第一时间送达

来源:https://www.cnblogs.com/jurendage/p/11255197.html

背景

软件开发过程中,不可避免的是需要处理各种异常,就我自己来说,至少有一半以上的时间都是在处理各种异常情况,所以代码中就会出现大量的try {...} catch {...} finally {...} 代码块,不仅有大量的冗余代码,而且还影响代码的可读性。比较下面两张图,看看您现在编写的代码属于哪一种风格?然后哪种编码风格您更喜欢?

 

丑陋的 try catch 代码块

 

优雅的Controller

上面的示例,还只是在Controller层,如果是在Service层,可能会有更多的try catch代码块。这将会严重影响代码的可读性、“美观性”。

所以如果是我的话,我肯定偏向于第二种,我可以把更多的精力放在业务代码的开发,同时代码也会变得更加简洁。

既然业务代码不显式地对异常进行捕获、处理,而异常肯定还是处理的,不然系统岂不是动不动就崩溃了,所以必须得有其他地方捕获并处理这些异常。

那么问题来了,如何优雅的处理各种异常?

什么是统一异常处理

Spring在3.2版本增加了一个注解@ControllerAdvice,可以与@ExceptionHandler、@InitBinder、@ModelAttribute 等注解注解配套使用,对于这几个注解的作用,这里不做过多赘述,若有不了解的,可以参考Spring3.2新注解@ControllerAdvice,先大概有个了解。

不过跟异常处理相关的只有注解@ExceptionHandler,从字面上看,就是 异常处理器 的意思,其实际作用也是:若在某个Controller类定义一个异常处理方法,并在方法上添加该注解,那么当出现指定的异常时,会执行该处理异常的方法,其可以使用springmvc提供的数据绑定,比如注入HttpServletRequest等,还可以接受一个当前抛出的Throwable对象。

但是,这样一来,就必须在每一个Controller类都定义一套这样的异常处理方法,因为异常可以是各种各样。这样一来,就会造成大量的冗余代码,而且若需要新增一种异常的处理逻辑,就必须修改所有Controller类了,很不优雅。

当然你可能会说,那就定义个类似BaseController的基类,这样总行了吧。

这种做法虽然没错,但仍不尽善尽美,因为这样的代码有一定的侵入性和耦合性。简简单单的Controller,我为啥非得继承这样一个类呢,万一已经继承其他基类了呢。大家都知道Java只能继承一个类。

那有没有一种方案,既不需要跟Controller耦合,也可以将定义的 异常处理器 应用到所有控制器呢?所以注解@ControllerAdvice出现了,简单的说,该注解可以把异常处理器应用到所有控制器,而不是单个控制器。借助该注解,我们可以实现:在独立的某个地方,比如单独一个类,定义一套对各种异常的处理机制,然后在类的签名加上注解@ControllerAdvice,统一对 不同阶段的、不同异常 进行处理。这就是统一异常处理的原理。

注意到上面对异常按阶段进行分类,大体可以分成:进入Controller前的异常 和Service 层异常,具体可以参考下图:

 

不同阶段的异常


目标

消灭95%以上的 try catch 代码块,以优雅的 Assert(断言) 方式来校验业务的异常情况,只关注业务逻辑,而不用花费大量精力写冗余的 try catch 代码块。

统一异常处理实战

在定义统一异常处理类之前,先来介绍一下如何优雅的判定异常情况并抛异常。


用 Assert(断言) 替换 throw exception

想必 Assert(断言) 大家都很熟悉,比如 Spring 家族的org.springframework.util.Assert,在我们写测试用例的时候经常会用到,使用断言能让我们编码的时候有一种非一般丝滑的感觉,比如:

    @Test
    public void test1() {
        ...
        User user = userDao.selectById(userId);
        Assert.notNull(user, "用户不存在.");
        ...
    }


    @Test
    public void test2() {
        // 另一种写法
        User user = userDao.selectById(userId);
        if (user == null) {
            throw new IllegalArgumentException("用户不存在.");
        }
    }

有没有感觉第一种判定非空的写法很优雅,第二种写法则是相对丑陋的 if {...} 代码块。那么神奇的 Assert.notNull() 背后到底做了什么呢?下面是 Assert 的部分源码:

public abstract class Assert {
    public Assert() {
    }


    public static void notNull(@Nullable Object object, String message) {
        if (object == null) {
            throw new IllegalArgumentException(message);
        }
    }
}

可以看到,Assert 其实就是帮我们把 if {...} 封装了一下,是不是很神奇。虽然很简单,但不可否认的是编码体验至少提升了一个档次。那么我们能不能模仿org.springframework.util.Assert,也写一个断言类,不过断言失败后抛出的异常不是IllegalArgumentException 这些内置异常,而是我们自己定义的异常。下面让我们来尝试一下。

Assert
public interface Assert {
    /**
     * 创建异常
     * @param args
     * @return
     */
    BaseException newException(Object... args);


    /**
     * 创建异常
     * @param t
     * @param args
     * @return
     */
    BaseException newException(Throwable t, Object... args);


    /**
     * <p>断言对象<code>obj</code>非空。如果对象<code>obj</code>为空,则抛出异常
     *
     * @param obj 待判断对象
     */
    default void assertNotNull(Object obj) {
        if (obj == null) {
            throw newException(obj);
        }
    }


    /**
     * <p>断言对象<code>obj</code>非空。如果对象<code>obj</code>为空,则抛出异常
     * <p>异常信息<code>message</code>支持传递参数方式,避免在判断之前进行字符串拼接操作
     *
     * @param obj 待判断对象
     * @param args message占位符对应的参数列表
     */
    default void assertNotNull(Object obj, Object... args) {
        if (obj == null) {
            throw newException(args);
        }
    }
}

上面的Assert断言方法是使用接口的默认方法定义的,然后有没有发现当断言失败后,抛出的异常不是具体的某个异常,而是交由2个newException接口方法提供。因为业务逻辑中出现的异常基本都是对应特定的场景,比如根据用户id获取用户信息,查询结果为null,此时抛出的异常可能为UserNotFoundException,并且有特定的异常码(比如7001)和异常信息“用户不存在”。所以具体抛出什么异常,有Assert的实现类决定。

看到这里,您可能会有这样的疑问,按照上面的说法,那岂不是有多少异常情况,就得有定义等量的断言类和异常类,这显然是反人类的,这也没想象中高明嘛。别急,且听我细细道来。

善解人意的Enum

自定义异常BaseException有2个属性,即code、message,这样一对属性,有没有想到什么类一般也会定义这2个属性?没错,就是枚举类。且看我如何将 Enum 和 Assert 结合起来,相信我一定会让你眼前一亮。如下:

public interface IResponseEnum {
    int getCode();
    String getMessage();
}
/**
 * <p>业务异常</p>
 * <p>业务处理时,出现异常,可以抛出该异常</p>
 */
public class BusinessException extends  BaseException {


    private static final long serialVersionUID = 1L;


    public BusinessException(IResponseEnum responseEnum, Object[] args, String message) {
        super(responseEnum, args, message);
    }


    public BusinessException(IResponseEnum responseEnum, Object[] args, String message, Throwable cause) {
        super(responseEnum, args, message, cause);
    }
}
public interface BusinessExceptionAssert extends IResponseEnum, Assert {


    @Override
    default BaseException newException(Object... args) {
        String msg = MessageFormat.format(this.getMessage(), args);


        return new BusinessException(this, args, msg);
    }


    @Override
    default BaseException newException(Throwable t, Object... args) {
        String msg = MessageFormat.format(this.getMessage(), args);


        return new BusinessException(this, args, msg, t);
    }


}
@Getter
@AllArgsConstructor
public enum ResponseEnum implements BusinessExceptionAssert {


    /**
     * Bad licence type
     */
    BAD_LICENCE_TYPE(7001, "Bad licence type."),
    /**
     * Licence not found
     */
    LICENCE_NOT_FOUND(7002, "Licence not found.")
    ;


    /**
     * 返回码
     */
    private int code;
    /**
     * 返回消息
     */
    private String message;
}

看到这里,有没有眼前一亮的感觉,代码示例中定义了两个枚举实例:

BAD_LICENCE_TYPE、LICENCE_NOT_FOUND,分别对应了BadLicenceTypeException、LicenceNotFoundException两种异常。以后每增加一种异常情况,只需增加一个枚举实例即可,再也不用每一种异常都定义一个异常类了。然后再来看下如何使用,假设LicenceService有校验Licence是否存在的方法,如下:

    /**
     * 校验{@link Licence}存在
     * @param licence
     */
    private void checkNotNull(Licence licence) {
        ResponseEnum.LICENCE_NOT_FOUND.assertNotNull(licence);
    }

若不使用断言,代码可能如下:

   private void checkNotNull(Licence licence) {
        if (licence == null) {
            throw new LicenceNotFoundException();
            // 或者这样
            throw new BusinessException(7001, "Bad licence type.");
        }
    }

使用枚举类结合(继承)Assert,只需根据特定的异常情况定义不同的枚举实例,如上面的BAD_LICENCE_TYPE、LICENCE_NOT_FOUND,就能够针对不同情况抛出特定的异常(这里指携带特定的异常码和异常消息),这样既不用定义大量的异常类,同时还具备了断言的良好可读性,当然这种方案的好处远不止这些,请继续阅读后文,慢慢体会。

注:上面举的例子是针对特定的业务,而有部分异常情况是通用的,比如:服务器繁忙、网络异常、服务器异常、参数校验异常、404等,所以有CommonResponseEnum、ArgumentResponseEnum、ServletResponseEnum,其中ServletResponseEnum 会在后文详细说明。


定义统一异常处理器类

@Slf4j
@Component
@ControllerAdvice
@ConditionalOnWebApplication
@ConditionalOnMissingBean(UnifiedExceptionHandler.class)
public class UnifiedExceptionHandler {
    /**
     * 生产环境
     */
    private final static String ENV_PROD = "prod"; 


    @Autowired
    private UnifiedMessageSource unifiedMessageSource;


    /**
     * 当前环境
     */
    @Value("${spring.profiles.active}")
    private String profile;
    
    /**
     * 获取国际化消息
     *
     * @param e 异常
     * @return
     */
    public String getMessage(BaseException e) {
        String code = "response." + e.getResponseEnum().toString();
        String message = unifiedMessageSource.getMessage(code, e.getArgs());


        if (message == null || message.isEmpty()) {
            return e.getMessage();
        }


        return message;
    }


    /**
     * 业务异常
     *
     * @param e 异常
     * @return 异常结果
     */
    @ExceptionHandler(value = BusinessException.class)
    @ResponseBody
    public ErrorResponse handleBusinessException(BaseException e) {
        log.error(e.getMessage(), e);


        return new ErrorResponse(e.getResponseEnum().getCode(), getMessage(e));
    }


    /**
     * 自定义异常
     *
     * @param e 异常
     * @return 异常结果
     */
    @ExceptionHandler(value = BaseException.class)
    @ResponseBody
    public ErrorResponse handleBaseException(BaseException e) {
        log.error(e.getMessage(), e);


        return new ErrorResponse(e.getResponseEnum().getCode(), getMessage(e));
    }


    /**
     * Controller上一层相关异常
     *
     * @param e 异常
     * @return 异常结果
     */
    @ExceptionHandler({
            NoHandlerFoundException.class,
            HttpRequestMethodNotSupportedException.class,
            HttpMediaTypeNotSupportedException.class,
            MissingPathVariableException.class,
            MissingServletRequestParameterException.class,
            TypeMismatchException.class,
            HttpMessageNotReadableException.class, 
            HttpMessageNotWritableException.class,
            // BindException.class,
            // MethodArgumentNotValidException.class
            HttpMediaTypeNotAcceptableException.class,
            ServletRequestBindingException.class,
            ConversionNotSupportedException.class,
            MissingServletRequestPartException.class,
            AsyncRequestTimeoutException.class
    })
    @ResponseBody
    public ErrorResponse handleServletException(Exception e) {
        log.error(e.getMessage(), e);
        int code = CommonResponseEnum.SERVER_ERROR.getCode();
        try {
            ServletResponseEnum servletExceptionEnum = ServletResponseEnum.valueOf(e.getClass().getSimpleName());
            code = servletExceptionEnum.getCode();
        } catch (IllegalArgumentException e1) {
            log.error("class [{}] not defined in enum {}", e.getClass().getName(), ServletResponseEnum.class.getName());
        }


        if (ENV_PROD.equals(profile)) {
            // 当为生产环境, 不适合把具体的异常信息展示给用户, 比如404.
            code = CommonResponseEnum.SERVER_ERROR.getCode();
            BaseException baseException = new BaseException(CommonResponseEnum.SERVER_ERROR);
            String message = getMessage(baseException);
            return new ErrorResponse(code, message);
        }


        return new ErrorResponse(code, e.getMessage());
    }




    /**
     * 参数绑定异常
     *
     * @param e 异常
     * @return 异常结果
     */
    @ExceptionHandler(value = BindException.class)
    @ResponseBody
    public ErrorResponse handleBindException(BindException e) {
        log.error("参数绑定校验异常", e);


        return wrapperBindingResult(e.getBindingResult());
    }


    /**
     * 参数校验异常,将校验失败的所有异常组合成一条错误信息
     *
     * @param e 异常
     * @return 异常结果
     */
    @ExceptionHandler(value = MethodArgumentNotValidException.class)
    @ResponseBody
    public ErrorResponse handleValidException(MethodArgumentNotValidException e) {
        log.error("参数绑定校验异常", e);


        return wrapperBindingResult(e.getBindingResult());
    }


    /**
     * 包装绑定异常结果
     *
     * @param bindingResult 绑定结果
     * @return 异常结果
     */
    private ErrorResponse wrapperBindingResult(BindingResult bindingResult) {
        StringBuilder msg = new StringBuilder();


        for (ObjectError error : bindingResult.getAllErrors()) {
            msg.append(", ");
            if (error instanceof FieldError) {
                msg.append(((FieldError) error).getField()).append(": ");
            }
            msg.append(error.getDefaultMessage() == null ? "" : error.getDefaultMessage());


        }


        return new ErrorResponse(ArgumentResponseEnum.VALID_ERROR.getCode(), msg.substring(2));
    }


    /**
     * 未定义异常
     *
     * @param e 异常
     * @return 异常结果
     */
    @ExceptionHandler(value = Exception.class)
    @ResponseBody
    public ErrorResponse handleException(Exception e) {
        log.error(e.getMessage(), e);


        if (ENV_PROD.equals(profile)) {
            // 当为生产环境, 不适合把具体的异常信息展示给用户, 比如数据库异常信息.
            int code = CommonResponseEnum.SERVER_ERROR.getCode();
            BaseException baseException = new BaseException(CommonResponseEnum.SERVER_ERROR);
            String message = getMessage(baseException);
            return new ErrorResponse(code, message);
        }


        return new ErrorResponse(CommonResponseEnum.SERVER_ERROR.getCode(), e.getMessage());
    }
    
}

可以看到,上面将异常分成几类,实际上只有两大类,一类是ServletException、ServiceException,还记得上文提到的 按阶段分类 吗,即对应 进入Controller前的异常 和 Service 层异常;然后 ServiceException 再分成自定义异常、未知异常。对应关系如下:

  • 进入Controller前的异常: handleServletException、handleBindException、handleValidException

  • 自定义异常: handleBusinessException、handleBaseException

  • 未知异常: handleException

接下来分别对这几种异常处理器做详细说明。


异常处理器说明
handleServletException

一个http请求,在到达Controller前,会对该请求的请求信息与目标控制器信息做一系列校验。这里简单说一下:

  • NoHandlerFoundException:首先根据请求Url查找有没有对应的控制器,若没有则会抛该异常,也就是大家非常熟悉的404异常;

  • HttpRequestMethodNotSupportedException:若匹配到了(匹配结果是一个列表,不同的是http方法不同,如:Get、Post等),则尝试将请求的http方法与列表的控制器做匹配,若没有对应http方法的控制器,则抛该异常;

  • HttpMediaTypeNotSupportedException:然后再对请求头与控制器支持的做比较,比如content-type请求头,若控制器的参数签名包含注解@RequestBody,但是请求的content-type请求头的值没有包含application/json,那么会抛该异常(当然,不止这种情况会抛这个异常);

  • MissingPathVariableException:未检测到路径参数。比如url为:/licence/{licenceId},参数签名包含@PathVariable("licenceId"),当请求的url为/licence,在没有明确定义url为/licence的情况下,会被判定为:缺少路径参数;

  • MissingServletRequestParameterException:缺少请求参数。比如定义了参数@RequestParam("licenceId") String licenceId,但发起请求时,未携带该参数,则会抛该异常;

  • TypeMismatchException: 参数类型匹配失败。比如:接收参数为Long型,但传入的值确是一个字符串,那么将会出现类型转换失败的情况,这时会抛该异常;

  • HttpMessageNotReadableException:与上面的HttpMediaTypeNotSupportedException举的例子完全相反,即请求头携带了"content-type: application/json;charset=UTF-8",但接收参数却没有添加注解@RequestBody,或者请求体携带的 json 串反序列化成 pojo 的过程中失败了,也会抛该异常;

  • HttpMessageNotWritableException:返回的 pojo 在序列化成 json 过程失败了,那么抛该异常;

  • HttpMediaTypeNotAcceptableException:未知;

  • ServletRequestBindingException:未知;

  • ConversionNotSupportedException:未知;

  • MissingServletRequestPartException:未知;

  • AsyncRequestTimeoutException:未知;


handleBindException

参数校验异常,后文详细说明。


handleValidException

参数校验异常,后文详细说明。

handleBusinessException、handleBaseException

处理自定义的业务异常,只是handleBaseException处理的是除了 BusinessException 意外的所有业务异常。就目前来看,这2个是可以合并成一个的。


handleException

处理所有未知的异常,比如操作数据库失败的异常。

注:上面的handleServletException、handleException 这两个处理器,返回的异常信息,不同环境返回的可能不一样,以为这些异常信息都是框架自带的异常信息,一般都是英文的,不太好直接展示给用户看,所以统一返回SERVER_ERROR代表的异常信息。


异于常人的404

上文提到,当请求没有匹配到控制器的情况下,会抛出NoHandlerFoundException异常,但其实默认情况下不是这样,默认情况下会出现类似如下页面:

 

Whitelabel Error Page

 

这个页面是如何出现的呢?实际上,当出现404的时候,默认是不抛异常的,而是forward跳转到/error控制器,spring也提供了默认的error控制器,如下:

 

BasicErrorController

 

那么,如何让404也抛出异常呢,只需在properties文件中加入如下配置即可:

spring.mvc.throw-exception-if-no-handler-found=true
spring.resources.add-mappings=false

如此,就可以异常处理器中捕获它了,然后前端只要捕获到特定的状态码,立即跳转到404页面即可

 

捕获404对应的异常

 

统一返回结果

在验证统一异常处理器之前,顺便说一下统一返回结果。说白了,其实是统一一下返回结果的数据结构。code、message 是所有返回结果中必有的字段,而当需要返回数据时,则需要另一个字段 data 来表示。

所以首先定义一个 BaseResponse 来作为所有返回结果的基类;

然后定义一个通用返回结果类CommonResponse,继承 BaseResponse,而且多了字段data;

为了区分成功和失败返回结果,于是再定义一个 ErrorResponse;

最后还有一种常见的返回结果,即返回的数据带有分页信息,因为这种接口比较常见,所以有必要单独定义一个返回结果类 QueryDataResponse,该类继承自CommonResponse,只是把 data 字段的类型限制为 QueryDdata,QueryDdata中定义了分页信息相应的字段,即totalCount、pageNo、 pageSize、records。

其中比较常用的只有 CommonResponse 和 QueryDataResponse,但是名字又贼鬼死长,何不定义2个名字超简单的类来替代呢?于是 R 和 QR 诞生了,以后返回结果的时候只需这样写:new R<>(data)、new QR<>(queryData)。

所有的返回结果类的定义这里就不贴出来了


验证统一异常处理

因为这一套统一异常处理可以说是通用的,所有可以设计成一个 common包,以后每一个新项目/模块只需引入该包即可。所以为了验证,需要新建一个项目,并引入该 common包。项目结构如下:

 

项目结构

以后只需这样引入即可

 

引入common包


主要代码

下面是用于验证的主要源码:

@Service
public class LicenceService extends ServiceImpl<LicenceMapper, Licence> {


    @Autowired
    private OrganizationClient organizationClient;


    /**
     * 查询{@link Licence} 详情
     * @param licenceId
     * @return
     */
    public LicenceDTO queryDetail(Long licenceId) {
        Licence licence = this.getById(licenceId);
        checkNotNull(licence);


        OrganizationDTO org = ClientUtil.execute(() -> organizationClient.getOrganization(licence.getOrganizationId()));
        return toLicenceDTO(licence, org);
    }


    /**
     * 分页获取
     * @param licenceParam 分页查询参数
     * @return
     */
    public QueryData<SimpleLicenceDTO> getLicences(LicenceParam licenceParam) {
        String licenceType = licenceParam.getLicenceType();
        LicenceTypeEnum licenceTypeEnum = LicenceTypeEnum.parseOfNullable(licenceType);
        // 断言, 非空
        ResponseEnum.BAD_LICENCE_TYPE.assertNotNull(licenceTypeEnum);


        LambdaQueryWrapper<Licence> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(Licence::getLicenceType, licenceType);
        IPage<Licence> page = this.page(new QueryPage<>(licenceParam), wrapper);
        return new QueryData<>(page, this::toSimpleLicenceDTO);
    }


    /**
     * 新增{@link Licence}
     * @param request 请求体
     * @return
     */
    @Transactional(rollbackFor = Throwable.class)
    public LicenceAddRespData addLicence(LicenceAddRequest request) {
        Licence licence = new Licence();
        licence.setOrganizationId(request.getOrganizationId());
        licence.setLicenceType(request.getLicenceType());
        licence.setProductName(request.getProductName());
        licence.setLicenceMax(request.getLicenceMax());
        licence.setLicenceAllocated(request.getLicenceAllocated());
        licence.setComment(request.getComment());
        this.save(licence);


        return new LicenceAddRespData(licence.getLicenceId());
    }


    /**
     * entity -> simple dto
     * @param licence {@link Licence} entity
     * @return {@link SimpleLicenceDTO}
     */
    private SimpleLicenceDTO toSimpleLicenceDTO(Licence licence) {
        // 省略
    }


    /**
     * entity -> dto
     * @param licence {@link Licence} entity
     * @param org {@link OrganizationDTO}
     * @return {@link LicenceDTO}
     */
    private LicenceDTO toLicenceDTO(Licence licence, OrganizationDTO org) {
        // 省略
    }


    /**
     * 校验{@link Licence}存在
     * @param licence
     */
    private void checkNotNull(Licence licence) {
        ResponseEnum.LICENCE_NOT_FOUND.assertNotNull(licence);
    }


}

ps: 这里使用的DAO框架是mybatis-plus。
启动时,自动插入的数据为:

-- licence
INSERT INTO licence (licence_id,  organization_id, licence_type, product_name, licence_max, licence_allocated)
VALUES (1, 1, 'user','CustomerPro', 100,5);
INSERT INTO licence (licence_id,  organization_id, licence_type, product_name, licence_max, licence_allocated)
VALUES (2, 1, 'user','suitability-plus', 200,189);
INSERT INTO licence (licence_id,  organization_id, licence_type, product_name, licence_max, licence_allocated)
VALUES (3, 2, 'user','HR-PowerSuite', 100,4);
INSERT INTO licence (licence_id,  organization_id, licence_type, product_name, licence_max, licence_allocated)
VALUES (4, 2, 'core-prod','WildCat Application Gateway', 16,16);


-- organizations
INSERT INTO organization (id, name, contact_name, contact_email, contact_phone)
VALUES (1, 'customer-crm-co', 'Mark Balster', 'mark.balster@custcrmco.com', '823-555-1212');
INSERT INTO organization (id, name, contact_name, contact_email, contact_phone)
VALUES (2, 'HR-PowerSuite', 'Doug Drewry','doug.drewry@hr.com', '920-555-1212');


开始验证

捕获自定义异常

  1. 获取不存在的 licence 详情:http://localhost:10000/licence/5。成功响应的请求:licenceId=1

     

    校验非空

    捕获 Licence not found 异常

       Licence not found

 

2.根据不存在的 licence type 获取 licence 列表:http://localhost:10000/licence/list?licenceType=ddd。可选的 licence type 为:user、core-prod 。

 

校验非空

捕获 Bad licence type 异常

Bad licence type

 

捕获进入 Controller 前的异常

  1. 访问不存在的接口:http://localhost:10000/licence/list/ddd

     

    捕获404异常

  2. http 方法不支持:http://localhost:10000/licence

     

    PostMapping

    捕获 Request method not supported 异常

      Request method not supported

    

3 校验异常1:http://localhost:10000/licence/list?licenceType=

 

getLicences

LicenceParam

捕获参数绑定校验异常

licence type cannot be empty

4.校验异常2:post 请求,这里使用postman模拟。

addLicence

LicenceAddRequest

请求url即结果

 

捕获参数绑定校验异常

注:因为参数绑定校验异常的异常信息的获取方式与其它异常不一样,所以才把这2种情况的异常从 进入 Controller 前的异常 单独拆出来,下面是异常信息的收集逻辑:

 

异常信息的收集

 

捕获未知异常

假设我们现在随便对 Licence 新增一个字段 test,但不修改数据库表结构,然后访问:http://localhost:10000/licence/1。

 

增加test字段

 

捕获数据库异常

 

Error querying database

 

小结

可以看到,测试的异常都能够被捕获,然后以 code、message 的形式返回。每一个项目/模块,在定义业务异常的时候,只需定义一个枚举类,然后实现接口BusinessExceptionAssert,最后为每一种业务异常定义对应的枚举实例即可,而不用定义许多异常类。使用的时候也很方便,用法类似断言。


扩展

在生产环境,若捕获到 未知异常 或者 ServletException,因为都是一长串的异常信息,若直接展示给用户看,显得不够专业,于是,我们可以这样做:当检测到当前环境是生产环境,那么直接返回 "网络异常"。

 

生产环境返回“网络异常”


可以通过以下方式修改当前环境:

 

修改当前环境为生产环境

 

# 总结

使用 断言 和 枚举类 相结合的方式,再配合统一异常处理,基本大部分的异常都能够被捕获。为什么说大部分异常,因为当引入 spring cloud security 后,还会有认证/授权异常,网关的服务降级异常、跨模块调用异常、远程调用第三方服务异常等,这些异常的捕获方式与本文介绍的不太一样,不过限于篇幅,这里不做详细说明,以后会有单独的文章介绍。

另外,当需要考虑国际化的时候,捕获异常后的异常信息一般不能直接返回,需要转换成对应的语言,不过本文已考虑到了这个,获取消息的时候已经做了国际化映射,逻辑如下:

获取国际化消息

 

最后总结,全局异常属于老生长谈的话题,希望这次通过手机的项目对大家有点指导性的学习。大家根据实际情况自行修改。

 

也可以采用以下的jsonResult对象的方式进行处理,也贴出来代码.

 

@Slf4j
@RestControllerAdvice
public class GlobalExceptionHandler {


    /**
     * 没有登录
     * @param request
     * @param response
     * @param e
     * @return
     */
    @ExceptionHandler(NoLoginException.class)
    public Object noLoginExceptionHandler(HttpServletRequest request,HttpServletResponse response,Exception e)
{
        log.error("[GlobalExceptionHandler][noLoginExceptionHandler] exception",e);
        JsonResult jsonResult = new JsonResult();
        jsonResult.setCode(JsonResultCode.NO_LOGIN);
        jsonResult.setMessage("用户登录失效或者登录超时,请先登录");
        return jsonResult;
    }


    /**
     *  业务异常
     * @param request
     * @param response
     * @param e
     * @return
     */
    @ExceptionHandler(ServiceException.class)
    public Object businessExceptionHandler(HttpServletRequest request,HttpServletResponse response,Exception e)
{
        log.error("[GlobalExceptionHandler][businessExceptionHandler] exception",e);
        JsonResult jsonResult = new JsonResult();
        jsonResult.setCode(JsonResultCode.FAILURE);
        jsonResult.setMessage("业务异常,请联系管理员");
        return jsonResult;
    }


    /**
     * 全局异常处理
     * @param request
     * @param response
     * @param e
     * @return
     */
    @ExceptionHandler(Exception.class)
    public Object exceptionHandler(HttpServletRequest request,HttpServletResponse response,Exception e)
{
        log.error("[GlobalExceptionHandler][exceptionHandler] exception",e);
        JsonResult jsonResult = new JsonResult();
        jsonResult.setCode(JsonResultCode.FAILURE);
        jsonResult.setMessage("系统错误,请联系管理员");
        return jsonResult;
    }
}

更多Java推文,大家可以关注这个号,也是每天更新!

<template> <Teleport to="body"> <div v-if="visible" class="pdf-mask" @mousedown="startDrag"> <div ref="modalRef" class="pdf-modal" :style="modalStyle"> <!-- PDF 头部:标题 + 操作按钮 --> <div class="pdf-header"> <span class="title">报关资料</span> <div class="tools"> <el-button size="small" @click="zoomIn">放大</el-button> <el-button size="small" @click="zoomOut">缩小</el-button> <el-button size="small" @click="close">关闭</el-button> </div> </div> <!-- PDF 标签页 + 内容区域 --> <el-tabs v-model="activeTab" class="pdf-tabs" @tab-click="handleTabClick"> <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.name" :name="tab.id.toString()" <!-- 统一为字符串,避免 el-tabs 类型警告 --> > <!-- 单个 PDF 滚动容器(每个 tab 独立 ref,修复类型断言) --> <div class="pdf-body" :ref="(el) => el && scrollRefMap.set(tab.id, el as HTMLDivElement)" <!-- 显式类型断言 --> @wheel="(e) => onWheel(e, tab.id)" @mousedown="(e) => onPdfMouseDown(e, tab.id)" > <!-- PDF 渲染容器(每个 tab 独立存储,修复类型断言) --> <div :ref="(el) => el && setPdfContainer(tab.id, el as HTMLDivElement)" /> </div> </el-tab-pane> </el-tabs> </div> </div> </Teleport> </template> <script setup lang="ts"> import { ref, reactive, watch, nextTick, onUnmounted } from 'vue' import type { CSSProperties } from 'vue' // 导入 CSS 类型 import * as pdfjsLib from 'pdfjs-dist' import pdfjsWorker from 'pdfjs-dist/build/pdf.worker?worker&url' // 导入 pdfjs 核心类型(解决 PDFLoadingTask/promise 类型错误) import type { PDFLoadingTask, PDFDocumentProxy, PageViewport, RenderTask } from 'pdfjs-dist' // 导入 Element Plus 组件(确保类型正确) import { ElButton, ElTabs, ElTabPane } from 'element-plus' import type { TabsPaneContext } from 'element-plus' // PDF.js 初始化:设置 Worker 路径 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker /* ---------------- Props & Emits 定义 ---------------- */ const props = defineProps<{ visible: boolean url?: string highlight?: { x0: number; y0: number; x1: number; y1: number } | null }>() const emit = defineEmits<{ (e: 'update:visible', value: boolean): void (e: 'tabschange', tabId: string | number): void }>() /* ---------------- 状态管理(每个 tab 独立数据) ---------------- */ // 标签页数据:id/名称/PDF 地址 const tabs = ref<Array<{ id: string | number; name: string; url: string }>>([]) // 当前激活的标签页(统一为字符串类型,适配 el-tabs) const activeTab = ref<string>('') // 每个 tab 的 PDF 渲染容器(DOM 引用,明确类型) const pdfContainerMap = new Map<string | number, HTMLDivElement>() // 每个 tab 的滚动容器(DOM 引用,明确类型) const scrollRefMap = new Map<string | number, HTMLDivElement>() // 每个 tab 的缩放比例(0.5~3 范围) const tabScale = new Map<string | number, number>() // 每个 tab 的 PDF 原始视口(用于计算坐标,明确类型) const tabBaseViewport = new Map<string | number, PageViewport>() // PDF 实渲染尺寸 const pdfRealSize = ref({ width: 0, height: 0 }) // 弹窗 DOM 引用(明确类型) const modalRef = ref<HTMLDivElement | null>(null) // 异步渲染中断控制器(防止切换 tab 时重复渲染) let abortController: AbortController | null = null // 当前 PDF 拖拽对应的滚动容器(解决事件参数不匹配问题) let currentScrollContainer: HTMLDivElement | null = null /* ---------------- 弹窗位置 & 样式(修复 cursor 类型) ---------------- */ // 显式声明 modalStyle 类型,cursor 支持所有 CSS cursor 值 const modalStyle = reactive<{ left: string top: string width: string height: string cursor: CSSProperties['cursor'] // 关键:使用 CSS 原生 cursor 类型 }>({ left: '0px', top: '0px', width: '800px', height: '600px', cursor: 'default' // 初始值符合类型 }) // 拖拽起始坐标 let dragStart: { x: number; y: number } | null = null /* ---------------- 标签页初始化 & 渲染 ---------------- */ /** * 打开 PDF 标签页(外部调用入口) * @param list 标签页数据:code(唯一ID)/name(标签名)/url(PDF地址) */ async function openWithTabs( list: Array<{ code: string; name: string; url: string }> ) { // 1. 清空历史数据(防止前一次残留导致重复) tabs.value = [] pdfContainerMap.clear() scrollRefMap.clear() tabScale.clear() tabBaseViewport.clear() if (abortController) { abortController.abort() abortController = null } // 2. 格式化标签页数据(过滤 all_files 项) tabs.value = list .filter(item => item.name !== 'all_files') .map(item => ({ id: item.code, name: item.name, url: item.url })) // 3. 激活第一个标签页(转为字符串,适配 el-tabs) const firstTabId = tabs.value[0]?.id.toString() ?? '' activeTab.value = firstTabId emit('update:visible', true) // 4. 等待 DOM 更新后,渲染第一个标签页的 PDF await nextTick() const firstTab = tabs.value[0] if (firstTab) { const container = pdfContainerMap.get(firstTab.id) if (container) { await renderSinglePDF(firstTab.url, container, firstTab.id) } } // 5. 弹窗居中显示 const windowWidth = window.innerWidth const windowHeight = window.innerHeight modalStyle.left = `${(windowWidth - 800) / 2}px` modalStyle.top = `${(windowHeight - 600) / 2}px` } /** * 绑定 PDF 容器到 Map(明确类型) * @param tabId 标签页唯一ID * @param el DOM 元素(已断言为 HTMLDivElement) */ function setPdfContainer(tabId: string | number, el: HTMLDivElement) { pdfContainerMap.set(tabId, el) } /** * 渲染单个标签页的 PDF(核心渲染逻辑,修复 pdfjs 类型) * @param pdfUrl PDF 文件地址 * @param container 渲染容器(明确 HTMLDivElement 类型) * @param currentTabId 当前标签页ID(防止异步渲染错位) */ async function renderSinglePDF( pdfUrl: string, container: HTMLDivElement, currentTabId: string | number ) { // 校验:当前标签页是否已切换,若切换则终止渲染 if (activeTab.value !== currentTabId.toString()) return // 校验:容器是否合法 if (!(container instanceof HTMLDivElement)) return // 1. 中断前一次未完成的渲染(解决重复加载) if (abortController) { abortController.abort() abortController = null } abortController = new AbortController() // 2. 清空容器(删除所有旧内容,防止残留) container.innerHTML = '' // 获取当前标签页的滚动容器 const scrollContainer = scrollRefMap.get(currentTabId) if (!scrollContainer) return try { // 3. 加载 PDF 文件(显式声明 PDFLoadingTask 类型,解决 promise 类型错误) const pdfLoadingTask: PDFLoadingTask<PDFDocumentProxy> = pdfjsLib.getDocument({ url: pdfUrl, signal: abortController.signal }) const pdfDoc = await pdfLoadingTask.promise // 现在 TS 能识别 promise 属性 // 渲染第一页(显式声明 Page 类型) const pdfPage = await pdfDoc.getPage(1) // 再次校验标签页(异步延迟防护) if (activeTab.value !== currentTabId.toString()) return // 4. 计算渲染尺寸(基于当前标签页的缩放比例) const baseViewport = pdfPage.getViewport({ scale: 1 }) tabBaseViewport.set(currentTabId, baseViewport) const currentScale = tabScale.get(currentTabId) ?? 1 // 默认缩放 1 // 基准宽度 800px,适配弹窗初始宽度 const renderScale = currentScale * (800 / baseViewport.width) const renderViewport = pdfPage.getViewport({ scale: renderScale }) // 5. 创建 Canvas 并渲染 PDF const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') if (!ctx) { container.innerHTML = '<div style="padding:20px;text-align:center;color:#f56c6c;">Canvas 初始化失败</div>' return } canvas.width = renderViewport.width canvas.height = renderViewport.height canvas.dataset.scale = String(currentScale) // 存储当前缩放比例 container.appendChild(canvas) // 渲染 PDF 内容(显式声明 RenderTask 类型,解决参数类型警告) const renderTask: RenderTask = pdfPage.render({ canvasContext: ctx, viewport: renderViewport, signal: abortController.signal } as Parameters<typeof pdfPage.render>[0]) // 类型断言匹配渲染参数 await renderTask.promise // 第三次校验标签页(渲染完成后防护) if (activeTab.value !== currentTabId.toString()) { container.innerHTML = '' return } // 6. 设置滚动容器尺寸(适配 PDF 渲染尺寸) scrollContainer.style.width = `${renderViewport.width}px` scrollContainer.style.height = `${renderViewport.height}px` pdfRealSize.value = { width: renderViewport.width, height: renderViewport.height } // 7. 若有高亮需求,渲染高亮区域 if (props.highlight) { drawHighlight(props.highlight, currentTabId) } } catch (error) { // 忽略中断错误,其他错误提示 if ((error as Error).name !== 'AbortError') { console.error(`PDF 加载失败(标签页: ${currentTabId}):`, error) container.innerHTML = `<div style="padding:20px;text-align:center;color:#f56c6c;">PDF 加载失败,请重试</div>` } } } /* ---------------- 标签页切换 & 缩放 ---------------- */ /** * 切换标签页时触发(防止 el-tabs 自带事件与 watch 冲突) */ function handleTabClick(tab: TabsPaneContext) { emit('tabschange', tab.paneName) } /** * 监听 activeTab 变化:切换标签页时重新渲染 PDF */ watch(activeTab, (newTabIdStr) => { // 将字符串 tabId 转回原始类型(适配 Map 存储的 key) const newTabId = tabs.value.find(tab => tab.id.toString() === newTabIdStr)?.id if (!newTabId) return const targetTab = tabs.value.find(tab => tab.id === newTabId) const targetContainer = pdfContainerMap.get(newTabId) if (targetTab && targetContainer) { renderSinglePDF(targetTab.url, targetContainer, newTabId) } }, { immediate: false }) /** * 放大 PDF(当前激活标签页) */ const zoomIn = () => { const currentTabIdStr = activeTab.value const currentTabId = tabs.value.find(tab => tab.id.toString() === currentTabIdStr)?.id if (!currentTabId) return // 缩放范围:0.5 ~ 3 const newScale = Math.min((tabScale.get(currentTabId) ?? 1) + 0.2, 3) tabScale.set(currentTabId, newScale) rerenderActiveTab() } /** * 缩小 PDF(当前激活标签页) */ const zoomOut = () => { const currentTabIdStr = activeTab.value const currentTabId = tabs.value.find(tab => tab.id.toString() === currentTabIdStr)?.id if (!currentTabId) return // 缩放范围:0.5 ~ 3 const newScale = Math.max((tabScale.get(currentTabId) ?? 1) - 0.2, 0.5) tabScale.set(currentTabId, newScale) rerenderActiveTab() } /** * 重新渲染当前激活的标签页 */ async function rerenderActiveTab() { const currentTabIdStr = activeTab.value const currentTabId = tabs.value.find(tab => tab.id.toString() === currentTabIdStr)?.id if (!currentTabId) return const targetTab = tabs.value.find(tab => tab.id === currentTabId) const targetContainer = pdfContainerMap.get(currentTabId) if (targetTab && targetContainer) { await renderSinglePDF(targetTab.url, targetContainer, currentTabId) } } /* ---------------- 弹窗拖拽功能 ---------------- */ /** * 开始拖拽弹窗(仅头部和遮罩区域触发) */ function startDrag(e: MouseEvent) { const target = e.target as HTMLElement // 仅允许点击遮罩或头部拖拽 if (!target.classList.contains('pdf-mask') && !target.closest('.pdf-header')) { return } if (!modalRef.value) return dragStart = { x: e.clientX, y: e.clientY } modalStyle.cursor = 'grabbing' // 现在类型兼容(CSSProperties['cursor'] 支持) // 绑定全局拖拽/停止事件(使用同一函数引用) document.addEventListener('mousemove', onDrag) document.addEventListener('mouseup', stopDrag) e.preventDefault() } /** * 拖拽中:更新弹窗位置 */ function onDrag(e: MouseEvent) { if (!dragStart) return const dx = e.clientX - dragStart.x const dy = e.clientY - dragStart.y // 更新弹窗位置(基于当前位置累加偏移) modalStyle.left = `${parseFloat(modalStyle.left) + dx}px` modalStyle.top = `${parseFloat(modalStyle.top) + dy}px` // 更新拖拽起始点 dragStart = { x: e.clientX, y: e.clientY } } /** * 停止拖拽:清理事件和状态 */ function stopDrag() { dragStart = null modalStyle.cursor = 'default' // 解绑全局事件(与绑定的函数一致) document.removeEventListener('mousemove', onDrag) document.removeEventListener('mouseup', stopDrag) } /* ---------------- PDF 内容拖拽(放大后支持,修复事件参数) ---------------- */ let isPdfDragging = false // 是否处于 PDF 拖拽状态 let pdfDragStart = { x: 0, y: 0 } // PDF 拖拽起始坐标 let scrollStart = { left: 0, top: 0 } // 滚动容器起始位置 /** * PDF 内容鼠标按下:开始拖拽(仅放大时支持,存储当前滚动容器) */ function onPdfMouseDown(e: MouseEvent, tabId: string | number) { const scrollContainer = scrollRefMap.get(tabId) if (!scrollContainer) return // 仅当缩放比例 >1 时允许拖拽 const currentScale = tabScale.get(tabId) ?? 1 if (currentScale <= 1) return isPdfDragging = true pdfDragStart = { x: e.clientX, y: e.clientY } scrollStart = { left: scrollContainer.scrollLeft, top: scrollContainer.scrollTop } // 存储当前拖拽对应的滚动容器(解决事件参数不匹配) currentScrollContainer = scrollContainer // 绑定全局拖拽/停止事件(使用无额外参数的函数) document.addEventListener('mousemove', onPdfMouseMove) document.addEventListener('mouseup', onPdfMouseUp) e.preventDefault() } /** * PDF 内容拖拽中:更新滚动位置(不依赖外部参数,从状态获取容器) */ function onPdfMouseMove(e: MouseEvent) { if (!isPdfDragging || !currentScrollContainer) return const dx = e.clientX - pdfDragStart.x const dy = e.clientY - pdfDragStart.y // 反向滚动(拖拽方向与滚动方向相反) currentScrollContainer.scrollTo({ left: scrollStart.left - dx, top: scrollStart.top - dy, behavior: 'auto' // 即时滚动,无动画 }) } /** * PDF 内容拖拽停止:清理事件和状态 */ function onPdfMouseUp() { isPdfDragging = false currentScrollContainer = null // 清空当前滚动容器 // 解绑全局事件(与绑定的函数一致) document.removeEventListener('mousemove', onPdfMouseMove) document.removeEventListener('mouseup', onPdfMouseUp) } /* ---------------- 滚轮事件(防止冒泡影响页面) ---------------- */ function onWheel(e: WheelEvent, tabId: string | number) { e.stopPropagation() // 阻止滚轮事件冒泡到页面 const scrollContainer = scrollRefMap.get(tabId) if (scrollContainer) { // 自定义滚轮行为(横向+纵向滚动) scrollContainer.scrollLeft -= e.deltaX scrollContainer.scrollTop -= e.deltaY e.preventDefault() // 防止页面整体滚动 } } /* ---------------- 高亮区域绘制 ---------------- */ /** * 绘制 PDF 高亮区域(支持外部调用) * @param rect 高亮坐标(PDF 原始坐标) * @param tabId 标签页ID(默认当前激活标签页) */ function drawHighlight( rect: { x0: number; y0: number; x1: number; y1: number }, tabId?: string | number ) { const targetTabId = tabId ?? ( tabs.value.find(tab => tab.id.toString() === activeTab.value)?.id ?? '' ) const pdfContainer = pdfContainerMap.get(targetTabId) const scrollContainer = scrollRefMap.get(targetTabId) if (!pdfContainer || !scrollContainer) return // 1. 清除旧的高亮区域 pdfContainer.querySelectorAll('.pdf-highlight').forEach(el => el.remove()) // 2. 获取 Canvas 和基础数据 const canvas = pdfContainer.querySelector('canvas') const baseViewport = tabBaseViewport.get(targetTabId) if (!canvas || !baseViewport) return const currentScale = parseFloat(canvas.dataset.scale || '1') // 计算 PDF 原始坐标到 Canvas 渲染坐标的比例 const scaleX = canvas.width / baseViewport.width const scaleY = canvas.height / baseViewport.height // 3. 计算高亮区域在 Canvas 上的位置和尺寸 const highlightStyle = { left: `${rect.x0 * scaleX}px`, top: `${rect.y0 * scaleY}px`, width: `${(rect.x1 - rect.x0) * scaleX}px`, height: `${(rect.y1 - rect.y0) * scaleY}px` } // 4. 创建高亮元素 const highlightEl = document.createElement('div') highlightEl.className = 'pdf-highlight' Object.assign(highlightEl.style, { ...highlightStyle, position: 'absolute', background: 'rgba(0, 255, 0, 0.4)', border: '2px dashed #ff4d4f', pointerEvents: 'none', // 不影响鼠标事件 zIndex: 9999 // 确保高亮在最上层 }) // 5. 添加到容器并自动滚动到高亮区域 pdfContainer.style.position = 'relative' pdfContainer.appendChild(highlightEl) // 等待 DOM 更新后执行滚动 nextTick(() => { const containerWidth = scrollContainer.clientWidth const containerHeight = scrollContainer.clientHeight // 滚动到高亮区域中心 scrollContainer.scrollTo({ left: Math.max(0, parseFloat(highlightStyle.left) + parseFloat(highlightStyle.width) / 2 - containerWidth / 2), top: Math.max(0, parseFloat(highlightStyle.top) + parseFloat(highlightStyle.height) / 2 - containerHeight / 2), behavior: 'smooth' // 平滑滚动 }) }) } /** * 外部调用的高亮方法(适配暴露接口) */ function drawHighlightByCoords(rect: { x0: number; y0: number; x1: number; y1: number }) { drawHighlight(rect) } /* ---------------- 监听 Props 变化 ---------------- */ // 监听 visible 变化:弹窗显示/隐藏时的处理 watch( () => props.visible, async (isVisible, oldVisible) => { // 弹窗隐藏时:重置缩放和中断渲染 if (!isVisible) { tabScale.clear() if (abortController) { abortController.abort() abortController = null } currentScrollContainer = null // 清空拖拽容器状态 return } // 弹窗从隐藏变为显示时:居中弹窗 await nextTick() if (oldVisible === false) { const windowWidth = window.innerWidth const windowHeight = window.innerHeight modalStyle.left = `${(windowWidth - 800) / 2}px` modalStyle.top = `${(windowHeight - 600) / 2}px` } }, { immediate: true } ) // 监听 highlight 变化:外部传入高亮坐标时绘制 watch( () => props.highlight, (newHighlight) => { if (newHighlight && activeTab.value) { drawHighlight(newHighlight) } }, { immediate: false, deep: true } ) /* ---------------- 关闭弹窗 ---------------- */ function close() { // 中断渲染并重置状态 if (abortController) { abortController.abort() abortController = null } currentScrollContainer = null pdfRealSize.value = { width: 0, height: 0 } emit('update:visible', false) } /* ---------------- 组件卸载清理 ---------------- */ onUnmounted(() => { // 1. 中断所有未完成的渲染 if (abortController) { abortController.abort() abortController = null } // 2. 解绑所有全局事件(防止内存泄漏,确保与绑定函数一致) document.removeEventListener('mousemove', onDrag) document.removeEventListener('mouseup', stopDrag) document.removeEventListener('mousemove', onPdfMouseMove) document.removeEventListener('mouseup', onPdfMouseUp) // 3. 清空所有状态 pdfContainerMap.clear() scrollRefMap.clear() tabScale.clear() tabBaseViewport.clear() currentScrollContainer = null }) /* ---------------- 暴露外部调用的方法 ---------------- */ defineExpose({ openWithTabs, // 打开 PDF 标签页 drawHighlight: drawHighlightByCoords // 绘制高亮区域 }) </script> <style scoped> /* 遮罩层:全屏覆盖 */ .pdf-mask { position: fixed; inset: 0; z-index: 9999; pointer-events: none; /* 仅弹窗区域可点击 */ background: rgba(0, 0, 0, 0.3); /* 增加半透明背景,提升体验 */ } /* 弹窗容器:可拖拽、可缩放 */ .pdf-modal { position: absolute; background: #ffffff; border: 1px solid #e4e7ed; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; pointer-events: auto; min-width: 400px; min-height: 300px; resize: both; /* 允许手动缩放弹窗 */ overflow: hidden; } /* 弹窗头部:标题 + 操作按钮 */ .pdf-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #f5f7fa; cursor: grab; /* 拖拽光标 */ border-bottom: 1px solid #e4e7ed; user-select: none; /* 禁止文本选中 */ } .pdf-header:active { cursor: grabbing; /* 拖拽中光标 */ } .pdf-header .title { font-size: 16px; font-weight: 500; color: #1f2937; } .pdf-header .tools { display: flex; gap: 8px; /* 按钮间距 */ } /* 标签页容器:占满弹窗剩余高度 */ .pdf-tabs { flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* PDF 内容容器:滚动区域 */ .pdf-body { flex: 1; overflow: auto; position: relative; /* 为高亮区域提供定位上下文 */ } /* PDF Canvas:禁止鼠标事件(避免影响拖拽) */ .pdf-body canvas { pointer-events: none; display: block; /* 消除 Canvas 默认空隙 */ } /* 高亮区域样式 */ .pdf-highlight { box-sizing: border-box; /* 边框不影响尺寸计算 */ } /* 适配 Element Plus 标签页样式(避免冲突) */ .pdf-tabs .el-tabs__content { flex: 1; overflow: hidden; padding: 0 !important; /* 清除默认内边距 */ } .pdf-tabs .el-tab-pane { height: 100%; display: flex; flex-direction: column; } </style>这个代码里面有个别是错误的,比如没有PDFLoadingTask,需要帮我重新分析下代码,功能逻辑,把错误的更新掉,并给我重新生成代码
最新发布
08-28
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值