跟着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!