Vue.js／WebApi版

----------------------------------------以上略----------------------------------------
    <div class="row layout-container">
        <div class="col-md-3 d-none d-md-block">
            <div class="row">
                <div class="col-12">
                    <div class="list-group list-group-item-dark list-group-flush">
                        <router-link v-bind:to="{name: 'top'}" class="list-group-item list-group-item-action font-weight-bold border-top">{{$t("samples.ec01.layout.defaultLayout.home")}}</router-link>
                        <template v-for="category in categoryList">
                            <router-link v-bind:to="{name: 'category', query: {categoryId: category.oid}}" v-bind:key="category.oid" class="list-group-item list-group-item-action">{{category.name}}</router-link>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <router-view></router-view> (1)
    </div>
----------------------------------------以下略----------------------------------------

src.main.java
    ┗ samples.ec01
        ┣ bean
        ┗ annotation (1)
            ┃   ┣ Kana.java
            ┃   ┗ ......        　
            ┣ ui
            ┣ validator (2)
            ┃   ┣ group (3)
            ┃   ┃   ┗ JapaneseChecks.java
            ┃   ┣ KanaValidator.java
            ┃   ┗ ......
            ┣━ UserBean.java (4)
            ┗ ......

......
@WebApi(
        name = "samples/ec01/inquiry/doInquiry",
        displayName = "お問合せ登録WebApi",
        accepts = RequestType.REST_JSON,
        restJson = @RestJson(parameterName = "param"),
        methods = MethodType.POST,
        privileged = true,
        tokenCheck = @WebApiTokenCheck(
                executeCheck = true,
                consume = true,
                exceptionRollback = true),
        results = { RegistInquiryCommand.RESULT_MAPPING_RESULT })
@CommandClass(
        name = "samples/ec01/inquiry/RegistInquiryCommand",
        displayName = "お問合せ登録コマンド")
public class RegistInquiryCommand implements Command {

    private final BeanParamMapper mapper = new BeanParamMapper().withValidation()
            .whitelistPropertyNameRegex("^(mail|content|familyName(Kana)?|firstName(Kana)?)$"); (1)
    public static final String RESULT_INQUIRY_BEAN = "inquiryBean";
    public static final String RESULT_MAPPING_RESULT = "result";


    @Override
    public String execute(RequestContext request) {
        // 入力チェック
        InquiryBean inquiryBean = new InquiryBean();
        request.setAttribute(RESULT_INQUIRY_BEAN, inquiryBean);
        try {
            // 日本語専用"name_kana"取得フォーム
            if (Consts.LANGUAGE_JA.equals(TemplateUtil.getLanguage()) || TemplateUtil.getLanguage() == null) {
                mapper.populate(inquiryBean, request.getParamMap(), Default.class, JapaneseChecks.class); (2)
            } else {
                mapper.populate(inquiryBean, request.getParamMap(), Default.class); (3)
            }
        } catch (MappingException e) {
            request.setAttribute(RESULT_MAPPING_RESULT, e.getResult()); (4)
            return Constants.CMD_EXEC_ERROR;
        }

        Inquiry inquiry = inquiryBean.toEntity();
        // 問い合わせステータス
        // 1 : 未対応
        // 2 : 対応中
        // 3 : 対応完了
        // 4 : 終了
        SelectValue inquiryStatus = new SelectValue(InquiryStatus.NOT_DEAL.getValue());
        inquiry.setInquiryStatus(inquiryStatus);
        // 請求の登録
        EntityDaoHelper.insert(inquiry);

        return Constants.CMD_EXEC_SUCCESS;
    }
}

{"status":"ERROR","result":{"errors":[{"propertyPath":"mail","errorMessages":["値を入力してください。"]},{"propertyPath":"familyNameKana","errorMessages":["値を入力してください。"]},{"propertyPath":"firstNameKana","errorMessages":["値を入力してください。"]},{"propertyPath":"content","errorMessages":["値を入力してください。"]},{"propertyPath":"familyName","errorMessages":["値を入力してください。"]},{"propertyPath":"firstName","errorMessages":["値を入力してください。"]}]}}

----------------------------------------以上略----------------------------------------
    <form class="custom-form mt-3">
        <div class="form-group row">
        ......
            <div class="col-12 col-md-6 mt-3">
                <div>
                    <label for="familyNameKana" class="col-form-label label-hidden">{{$t("samples.ec01.inquiry.regist.familyNameKana")}}</label>
                    <input type="text" class="form-control border rounded input-hint-visible" name="familyNameKana" v-model="inquiryBean.familyNameKana" v-bind:placeholder="$t('samples.ec01.inquiry.regist.familyNameKana')">
                    <small class="form-text text-danger"><template v-for="message in errorsMap.familyNameKana">{{message}}<br v-bind:key="message"/></template></small> (1)
                </div>
            </div>
        ......
    </form>
----------------------------------------以下略----------------------------------------

14:26:53.626 [http-nio-8080-exec-6] DEBUG 25 873   o.i.mtp.impl.auth.AuthContextHolder - check WebApiPermission [webApiName=samples/ec01/inquiry/doInquiry, parameter=org.iplass.mtp.webapi.permission.RequestContextWebApiParameter@1b1910ae] = true (privilegedExecution)
14:26:53.626 [http-nio-8080-exec-6] DEBUG 25 873 samples/ec01/inquiry/RegistInquiryCommand  o.i.m.i.transaction.LocalTransaction - create new Transaction:org.iplass.mtp.impl.transaction.LocalTransaction@791691ea with readOnly=false, stacked:null
14:26:53.626 [http-nio-8080-exec-6] DEBUG 25 873 samples/ec01/inquiry/RegistInquiryCommand  o.iplass.mtp.transaction.Transaction - rollback transaction cause org.iplass.mtp.web.actionmapping.TokenValidationException: 不正な画面遷移が発生しました(一連の登録処理中にブラウザの戻るボタン等を押下してしまいますと正常に処理を継続できない場合があります)。:org.iplass.mtp.impl.transaction.LocalTransaction@791691ea
org.iplass.mtp.web.actionmapping.TokenValidationException: 不正な画面遷移が発生しました(一連の登録処理中にブラウザの戻るボタン等を押下してしまいますと正常に処理を継続できない場合があります)。
    at org.iplass.mtp.impl.webapi.interceptors.TokenInterceptor.tokenError(TokenInterceptor.java:96)
    at org.iplass.mtp.impl.webapi.interceptors.TokenInterceptor.intercept(TokenInterceptor.java:76)
    at org.iplass.mtp.impl.command.InvocationImpl.proceedCommand(InvocationImpl.java:115)
    at org.iplass.mtp.impl.command.interceptors.TransactionInterceptor.lambda$intercept$0(TransactionInterceptor.java:34)
    at org.iplass.mtp.transaction.TransactionManager.doTransaction(TransactionManager.java:114)
    at org.iplass.mtp.transaction.Transaction.with(Transaction.java:303)
    at org.iplass.mtp.impl.command.interceptors.TransactionInterceptor.intercept(TransactionInterceptor.java:33)
    at org.iplass.mtp.impl.command.InvocationImpl.proceedCommand(InvocationImpl.java:115)
----------------------------------------以下略----------------------------------------

{"status":"FAILURE","exceptionType":"org.iplass.mtp.web.actionmapping.TokenValidationException","exceptionMessage":"不正な画面遷移が発生しました(一連の登録処理中にブラウザの戻るボタン等を押下してしまいますと正常に処理を継続できない場合があります)。"}

----------------------------------------以上略----------------------------------------
        fullTextSearch: function() {
            if (this.productName == "") {
                this.helpMessage = this.$t('samples.ec01.search.nokeyword');
                return false;
            }
            var url = this.apiFulltextSearch();
            var data = {productName: this.productName, categoryOid: this.categoryOid};
            this.$http.post(url, data) (1)
                .then((response) => {
                    var commandResult = response.data;
                    if(commandResult.status == 'SUCCESS') {
                        if(commandResult.defaultResult != null && commandResult.defaultResult.length > 0){
                            this.fullSearchResult = this.ListSearchResult(commandResult.defaultResult, this.productName); (2)
                            $('#searchResultDiv').html(this.fullSearchResult);
                        }
                        else{
                            this.helpMessage = this.$t('samples.ec01.search.keyword') + this.productName + ", " + this.$t('samples.ec01.search.noResult');
                        }
                    } else {
                        console.log(response);
                    }
                })
                .catch((error) => { (3)
                    var errorResult = error.response.data;
                    if (errorResult.exceptionType != null) {
                        alert(this.$t('samples.ec01.search.jsError') + errorResult.exceptionType + "\n" + errorResult.exceptionMessage);
                        return;
                    }
                });
        },
        dropdownSelect: function(event) {
            var t = $(event.target);
            var v = t.attr("category-item-value");
            $("#categoryList").text(t.html()).attr("category-item-selected", v);
        },
        ListSearchResult: function(entities, productName){ (4)
            var yen = this.$t('samples.ec01.all.yen');
            var html =  "<div class=\"col-12 mb-2\">";
                html += "   <h4>" + this.$t('samples.ec01.search.result') + productName + "</h4>";
                html += "</div>";
            for(var i =0; i < entities.length; i++){
                var name = entities[i].name;
                var price = isNaN(entities[i].price)? "" : entities[i].price;
                var imageUrl = this.imgUrl(entities[i].productImg);
                var detailUrl = "#/product/detail?productId=" + entities[i].oid;
                html += "<div class=\"col-12 col-md-4\">";
                html += "   <div class=\"card border-light border-0\">";
                html += "       <a href=\"" + detailUrl + "\" class=\"h-100\">";
                html += "          <img class=\"card-img-top img-thumbnail img-fluid all-product-img\" src=" + imageUrl + " alt=\"" + name + "\">";
                html += "       </a>";
                html += "       <div class=\"card-body pt-md-1 text-center\">";
                html += "          <div>";
                html += "              <a href=\""+ detailUrl +"\" class=\"card-link text-dark\">" + name + "</a>";
                html += "           </div>";
                html += "           <div class=\"all-price\">";
                html += "              <span>" + price + "</span>" + yen;
                html += "           </div>";
                html += "       </div>";
                html += "   </div>";
                html += "</div>";
            }
            return html;
        }
----------------------------------------以下略----------------------------------------

----------------------------------------以上略----------------------------------------
    <div class="card col-12 bg-light">
        <div class="card-body">
            <div class="row mt-3 border-bottom">
                <div class="col-12 col-md-4">
                    <span class="text-muted font-weight-bold">{{$t("samples.ec01.member.regist.userId")}}</span>
                </div>
                <div class="col-12 col-md-8">{{userBean.userId}}</div> (1)
            </div>
            <div class="row mt-3 border-bottom">
                <div class="col-12 col-md-4">
                    <span class="text-muted  font-weight-bold">{{$t("samples.ec01.member.registConfirm.fullName")}}</span>
                </div>
                <div class="col-12 col-md-3">
                    <span class="text-muted  font-weight-bold">{{$t("samples.ec01.member.regist.familyName")}}</span>
                    &nbsp;{{userBean.familyName}} (1)
                </div>
                <div class="col-12 col-md-3">
                    <span class="text-muted  font-weight-bold">{{$t("samples.ec01.member.regist.firstName")}}</span>
                    &nbsp;{{userBean.firstName}} (1)
                </div>
            </div>
            <div class="row mt-3 border-bottom" v-if="locale == 'ja' || locale === undefined">
                <div class="col-12 col-md-4">
                    <span class="text-muted  font-weight-bold">{{$t("samples.ec01.member.registConfirm.fullNameKana")}}</span>
                </div>
                <div class="col-12 col-md-3">
                    <span class="text-muted  font-weight-bold">{{$t("samples.ec01.member.regist.familyNameKana")}}</span>
                    &nbsp;{{userBean.familyNameKana}} (1)
                </div>
                <div class="col-12 col-md-3">
                    <span class="text-muted  font-weight-bold">{{$t("samples.ec01.member.regist.firstNameKana")}}</span>
                    &nbsp;{{userBean.firstNameKana}} (1)
                </div>
            </div>
            <div class="row mt-3 border-bottom">
                <div class="col-12 col-md-4">
                    <span class="text-muted  font-weight-bold">{{$t("samples.ec01.member.regist.mail")}}</span>
                </div>
                <div class="col-12 col-md-8">{{userBean.mail}}</div> (1)
            </div>
        </div>
    </div>
----------------------------------------以下略----------------------------------------

  beforeRouteEnter: function(to, from, next) { (1)
    // 不正な画面遷移が発生したと判断
    if(['regist'].indexOf(from.name) == -1 || to.params.userBean === undefined) {
      next(new Error('samples.ec01.exception.invalidTransition'));
    } else {
      next();
    }
  }

----------------------------------------以上略----------------------------------------
// Axiosの設定
Vue.prototype.$http = axios.create({
    headers: {'X-Requested-With': 'XMLHttpRequest'}　(1)
});
----------------------------------------以下略----------------------------------------

metaDataList
    ┣ contextPath (name=/entity) (1)
    ┣ contextPath (name=/property/select) (1)
    ┣ contextPath (name=/template)　※　帳票出力機能と管理トップ画面 (1)
    ┣ contextPath (name=/view/calendar) (1)
    ┣ contextPath (name=/view/generic) (1)
    ┣ contextPath (name=/view/menu/item) (1)
    ┣ contextPath (name=/view/menu/tree) (1)
    ┣ contextPath (name=/view/top) (1)
    ┣ contextPath (name=/view/treeview) (1)
    ┣ contextPath (name=/view/filter) (1)
    ┗ contextPath (name=/template)　(2)

----------------------------------------以上略----------------------------------------
<contextPath name="/template">
    <!-- Backoffice pages start -->
    <metaDataEntry>
        <metaData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:type="metaJspTemplate">
            <name>samples/ec01/backoffice/stock/stockUpdate</name>
            <displayName>在庫一括更新画面</displayName>
            <path>/jsp/samples/ec01/backOffice/stock/stockUpdate.jsp</path>
            <layoutId>/action/gem/layout/defaultLayout</layoutId>
            <contentType>text/html; charset=utf-8</contentType>
        </metaData>
    </metaDataEntry>
    <!-- Backoffice pages end -->
</contextPath>
----------------------------------------以下略----------------------------------------

{
    "en": {
        "samples": {
            "ec01": {
                "all": {
                    "breadcrumb": {
                        "home": "Home" (1)
                    },
                    "pagination": {
                        "next": "Next",
                        "prev": "Prev"
                    },
                    "yen": "Yen"
                },
            ......
            }
        }
    },
    "ja": {
        "samples": {
            "ec01": {
                "all": {
                    "breadcrumb": {
                        "home": "ホーム" (1)
                    },
                    "pagination": {
                        "next": "次へ",
                        "prev": "前へ"
                    },
                    "yen": "円"
                },
            ......
            }
        }
    }
}

<template>
<div class="col-sm-12 col-md-9">
    <div class="row">
        <div class="col-12">
            <div class="border-top"></div>
            <nav class="breadcrumb all-breadcrumb">
                <router-link class="breadcrumb-item text-primary" v-bind:to="{name: 'top'}">{{$t("samples.ec01.all.breadcrumb.home")}}</router-link> (1)
                <span class="breadcrumb-item active">{{categoryNameLocale}}</span>
            </nav>
        </div>
    </div>
    ......
</template>

samples.ec01.bean.validation.Tel.invalidChar    = 「数字」および「-」のみ利用可能です。(1)
samples.ec01.bean.validation.UserId.invalidChar = 「英数字」および「-」(ハイフン)「@」「_」「.」(ピリオド)のみ利用可能です。
samples.ec01.bean.validation.UserId.outOfLength = ユーザーIDは{min}文字以上{max}文字以下です (2)
samples.ec01.bean.validation.isBlank            = 値を入力してください。
samples.ec01.bean.validation.notKana            = 全角カタカナを入力してください。
......

samples.ec01.bean.validation.Tel.invalidChar    = Please enter alphanumeric characters or "-"(hypen) . (1)
samples.ec01.bean.validation.UserId.invalidChar = Please enter alphanumeric characters or "-"(hypen), "@", "_"(underscore), "."(dot) .
samples.ec01.bean.validation.UserId.outOfLength = User ID must be in range between {min} and {max} characters. (2)
samples.ec01.bean.validation.isBlank            = Please enter value.
samples.ec01.bean.validation.notKana            = Please enter Katakana.
......