【Coldfusion】JSON 形式のリクエストボディを処理する #Vue.js

AngularJSやvue.jsでサーバサイド側（ColdFusion）宛にpost通信する際、
$http.postや、axiosを使うことになるが、送られてきた値がJSON 形式のリクエストボディとして受け取るのでこれらの値をform変数に突っ込んで通常のhttp post通信と同じ感じにする。

ColdFusionにはRESTサービス用の機能とか用意されているが、それらを使わず自前で実装する。

こちらのAngularJSの場合のサンプルを参考
Parsing AngularJS Request Data On The Server Using ColdFusion

呼び出されるwebサービス側

test.cfm


<cfscript>

// リクエストボディの内容を取得
requestBody = toString(getHttpRequestData().content);

if (len(requestBody)) {
    // jsonをParseしてform変数に値を挿入
    structAppend(form,deserializeJson(requestBody));
}

// クエリーを返すメソッド（メソッドの詳細は省略）
q = getItems(item_id = form.item_id);


items = [];

if(q.RecordCount > 0){
    for(row in q){
        column = {};
        column["item_id"] = row.item_id;
        column["item_name"] = row.item_name;
        column["amount"] = row.amount;
        arrayAppend(items,col);
    }
　　// レスポンスをjsonで返す
    writeOutput(serializeJSON(items));
}

</cfscript>

呼び出すHTMLファイル（VueJSの場合）

test.html


<html>
<body>

<div id="demo">

 <ul >
  <li v-for="item in items" >
アイテム：    {{ item.item_id }}
アイテム名称：    {{ item.item_name }}
数量：    {{ item.amount | money }}円
  </li>
</ul>

</div>
<script src="/vue.min.js"></script>
<script src="/axios.min.js"></script>
<script>
window.onload = function () {
    var vm = new Vue({
      el: '#demo',
      data: {
            items : []
      },
        created: function(){
        axios.post('/test.cfm', { item_id: '123456' })
          .then(function(response){
            vm.items = response.data;
          }); 
        }
    })
    Vue.filter('money',function(value){
      return value.toLocaleString();
    });

};
</script>
</body>
</html>