跟着JHipster学做项目 (5) 异常处理（下）Vue前端

JHipster前端处理异常主要包括三个方面，异常获取，异常显示，以及异常信息国际化。

异常获取JHipster通常放在组件类中实现，比如register.component.ts

this.registerService()
        .processRegistration(this.registerAccount)
        .then(() => {
          this.success = true;
        })
        .catch(error => {
          console.log(error.response.data)
          this.success = null;
          if (error.response.status === 400 && error.response.data.type === LOGIN_ALREADY_USED_TYPE) {
            this.errorUserExists = 'ERROR';
          } else if (error.response.status === 400 && error.response.data.type === EMAIL_ALREADY_USED_TYPE) {
            this.errorEmailExists = 'ERROR';
          } else {
            this.error = 'ERROR';
          }
        });

上篇提到关于注册ProblemModule和ConstraintViolationProblemModule，下面对比一下注册前后前端获取的信息：

注册前： 注意包含了stack trace信息

注册后：

entityName:"userManagement"
errorKey:"emailexists"
message:"error.emailexists"
params:"userManagement"
status:400
title:"Email is already in use!"
type:"https://www.jhipster.tech/problem/email-already-used"

对于信息返回优化是显而易见的。

对于异常显示一般通过v-if来实现，register.vue

 <div class="alert alert-success" role="alert" v-if="success" v-html="$t('register.messages.success')">
                    <strong>Registration saved!</strong> Please check your email for confirmation.
                </div>

                <div class="alert alert-danger" role="alert" v-if="error" v-html="$t('register.messages.error.fail')">
                    <strong>Registration failed!</strong> Please try again later.
                </div>

                <div class="alert alert-danger" role="alert" v-if="errorUserExists" v-html="$t('register.messages.error.userexists')">
                    <strong>Login name already registered!</strong> Please choose another one.
                </div>

                <div class="alert alert-danger" role="alert" v-if="errorEmailExists" v-html="$t('register.messages.error.emailexists')">
                    <strong>Email is already in use!</strong> Please choose another one.
                </div>

                <div class="alert alert-danger" role="alert" v-if="doNotMatch" v-text="$t('global.messages.error.dontmatch')">
                    The password and its confirmation do not match!
                </div>

利用vue-i18n组件统一完成信息国际化功能, 以register.json为例

{
  "register": {
    "title": "注册",
    "form": {
      "button": "注册"
    },
    "messages": {
      "validate": {
        "login": {
          "required": "您的账号是必填项.",
          "minlength": "您的账号长度至少要有1个字符",
          "maxlength": "您的账号长度不能超过50个字符",
          "pattern": "你的账号只能使用小写英文以及数字"
        }
      },
      "success": "<strong>注册成功!</strong> 请检查您的邮箱.",
      "error": {
        "fail": "<strong>注册失败!</strong> 请稍后再试.",
        "userexists": "<strong>账号已被注册!</strong> 请选择其它账号.",
        "emailexists": "<strong>邮件已经被注册!</strong> 请选择其它邮件."
      }
    }
  }
}

Good Luck,

Cheers!