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>