When we talk about Rest API, we usually talk about how to connect and use it. Let's create a service this time.

Rest Event

EFW rest events are stored in the tomcat/WEB-INF/efw/event folder just like web events. The difference is that they are written differently.
https://github.com/efwGrp/efw4.X/blob/master/help/api_restevent.md

Image of Test

Send from jsp to server. Forward from js event to RestAPI event, perform RestAPI DB processing and return the result. A light security check will be performed to check whether the token is correct.

JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="efw" uri="efw" %>
<!DOCTYPE HTML>
<HTML>
<HEAD>
	<title>Rest API Server and Client Test</title>
	<efw:Client lang="jp"/>
</HEAD>
<BODY>
	<button onclick="Efw('helloRestAPI_submit',{mode:'0'})">初期化（テーブル作成）</button><br><br>
	ID：<input type="text" id="customerId">
	Name：<input type="text" id="customerName"><br>
	token:<input type="text" id="token" value="1234567890">※httpヘッダからセキュリティ情報送信のテスト<br>
	<button onclick="Efw('helloRestAPI_submit',{mode:'1'})">顧客追加</button>
	<button onclick="Efw('helloRestAPI_submit',{mode:'2'})">顧客変更</button>
	<button onclick="Efw('helloRestAPI_submit',{mode:'3'})">顧客削除</button>
	<button onclick="Efw('helloRestAPI_submit',{mode:'4'})">顧客取得</button><br><br>
	<textarea style="width:800px;height:300px;">
	</textarea><br><br>
	<button onclick="Efw('helloRestAPI_submit',{mode:'9'})">終了（テーブル削除）</button><br><br>
</BODY>
</HTML>

Js Event

var helloRestAPI_submit={};
helloRestAPI_submit.paramsFormat={
	mode:null,
	"#customerId":null,
	"#customerName":null,
	"#token":null,
};
helloRestAPI_submit.fire=function(params){
	if (params.mode=="0"){
		db.change("helloRestAPI","createTbl",{});
		return new Result().alert("テーブルを作成しました。");
	}else if (params.mode=="9"){
		db.change("helloRestAPI","dropTbl",{});
		return new Result().alert("テーブルを削除しました。");
	}
	var url="http://localhost:8080/helloworld/efwRestAPI/customer";
	try{
		var ret=null;
		if (params.mode=="1"){//新規追加の場合
			ret=rest.post(url,
				{id:params["#customerId"],nm:params["#customerName"]},
				{token:params["#token"]});
		}else if (params.mode=="2"){//更新の場合
			ret=rest.put(url+"/"+params["#customerId"],
				{nm:params["#customerName"]},
				{token:params["#token"]});
		}else if (params.mode=="3"){//削除の場合
			ret=rest.delete(url+"/"+params["#customerId"],{token:params["#token"]});
		}else if (params.mode=="4"){//取得の場合
			ret=rest.get(url+"/"+params["#customerId"],{token:params["#token"]});
		}
		return new Result()
		.runat("body")
		.withdata({
			"textarea":rest.getStatus()+"\n"+JSON.stringify(ret),
		});
	}catch(e){//失敗の場合
		return new Result()
		.runat("body")
		.withdata({
			"textarea":rest.getStatus()+"\n"+e.getMessage(),
		});
	}
}

RestAPI Event

var customer={};
customer.POST=function(keys,params){//新規作成
	var token=Packages.efw.framework.getRequest().getHeader("token");
	if("1234567890"!=token){throw new Error("セキュリティエラー");}
	db.change("helloRestAPI","insertRow",{"id":params.id,"name":params.nm});
	return {url:"efwRestAPI/customer/"+params.id}
};
customer.PUT=function(keys,params){//更新
	var token=Packages.efw.framework.getRequest().getHeader("token");
	if("1234567890"!=token){throw new Error("セキュリティエラー");}
	var rt=db.change("helloRestAPI","updateRow",{"id":keys[0],"name":params.nm});
	if (rt==0) throw new Error("更新対象のデータは存在しません。");
	return null;
};
customer.DELETE=function(keys){//削除
	var token=Packages.efw.framework.getRequest().getHeader("token");
	if("1234567890"!=token){throw new Error("セキュリティエラー");}
	var rt=db.change("helloRestAPI","deleteRow",{"id":keys[0]});
	if (rt==0) throw new Error("削除対象のデータは存在しません。");
	return null;
};
customer.GET=function(keys){//取得
	var token=Packages.efw.framework.getRequest().getHeader("token");
	if("1234567890"!=token){throw new Error("セキュリティエラー");}
	return db.select("helloRestAPI","selectRow",{"id":keys[0]}).getSingle();
};

Sql

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqls>
<sqls>
<sql id="createTbl">
	CREATE TABLE tbl_customer(
		id character varying(10) NOT NULL,
		name character varying(20),
		CONSTRAINT tbl_customer_pkey PRIMARY KEY (id)
	)
</sql>
<sql id="dropTbl">
	DROP TABLE tbl_customer;
</sql>
<sql id="selectRow">
	SELECT
		id,
		name
	FROM tbl_customer
	WHERE
		id=:id;
</sql>
<sql id="insertRow">
	INSERT INTO tbl_customer(
		id,
		name
	)VALUES (
		:id,
		:name
	);
</sql>
<sql id="updateRow">
	UPDATE tbl_customer
	SET
		name=:name
	WHERE id=:id;
</sql>
<sql id="deleteRow">
	DELETE FROM tbl_customer
	WHERE id=:id;
</sql>
</sqls>

Explanation

POST：insert, url http://localhost:8080/helloworld/efwRestAPI/customer
The return value is the URL of the inserted data, the http status is 200

PUT：update, url http://localhost:8080/helloworld/efwRestAPI/customer/[customerID]
No return value, http status is 204

GET：acquisition, http://localhost:8080/helloworld/efwRestAPI/customer/[customerID]
The return value is the retrieved data, http status is 200

DELETE：delete, http://localhost:8080/helloworld/efwRestAPI/customer/[customerID]
No return value, http status is 204

When an error occurs,
For example, in the case of duplicate insert keys, no update/delete data, etc.
Return value is error information, http status is 500

Test tool connection

Test from browser

When testing from a browser, the purpose is to see if the implementation is compatible with cors.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="efw" uri="efw" %>
<!DOCTYPE HTML>
<HTML>
<HEAD>
	<title>Rest API Server and Client Test</title>
	<efw:Client lang="jp"/>
</HEAD>
<BODY>
	ID：<input type="text" id="customerId">
	Name：<input type="text" id="customerName"><br>
	token:<input type="text" id="token" value="1234567890">※httpヘッダからセキュリティ情報送信のテスト<br>

<script>
	function browserTest(samedomain){
		var domain=samedomain?"localhost":"127.0.0.1";
		var url="http://"+domain+":8080/helloworld/efwRestAPI/customer/"+$("#customerId").val();
		$.ajax({
			url:url,
			xhrFields: { withCredentials: true },
			headers:{ token:$("#token").val()},
			type: "GET",
			cache: false,
			async: true,
			dataType: "json",// send or get data by json type
			contentType: "application/json;charset=UTF-8",
			success:function(result){
				window.alert(JSON.stringify(result));
			},
			error:function(errorResponse){
				window.alert(JSON.stringify(errorResponse));
			}
		})
	}
</script>
<button onclick="browserTest(true)">ブラウザーテスト</button>
<button onclick="browserTest(false)">別ドメインテスト</button>
</BODY>
</HTML>

The two buttons send from localhost and 127.0.0.1 respectively. And when you compare it with the referer, one will always be judged as cors.
The first time is to send options.

The second time is a get transmission.

This is a link for explanations related to cors.
https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34

Environmental Preparation

Since DB is also used, please refer to the following article.
https://qiita.com/changkejun/items/b273b3ae64c76e5b016a

This sample can be downloaded from the link below.