JET 调用后端Rest Service

调用Rest Service可以基于两种方式：

一种是oj.Collection.extend

一种是$.ajax

• CORS问题

但在调用之前，首先需要解决rest service的CORS问题.(跨域调用不允许),方法如下：

• 首先下载jar包:

http://software.dzhuvinov.com/cors-filter-installation.html

• 在rest服务的project中将cors-filter-2.4.jar java-property-utils-1.9.1.jar加入到项目的library中。
• 在web.xml中加入

<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, PATCH, DELETE</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

然后重新部署rest service.

• AJAX调用

通过ajax调用的代码如下:

login.js

/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/

/**
* login module
*/
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojinputtext','ojs/ojbutton'],

function (oj, ko, $)
{

function LoginModel()
{
var self = this;
self.username = ko.observable("eric");
self.password = ko.observable();

self.tracker = ko.observable();

self.login = function (data, event) {

alert(self.username() +" - " +self.password());

$.ajax({
url: "http://127.0.0.1:7001/RestfulApplication-RestfulProject-context-root/resources/restfulproject/login",
data: JSON.stringify({ "loginname": self.username(), "password": self.password() }),
type: "POST",
contentType: "application/json",
success: function (data, textStatus, jqXHR) {
alert("Success");

//var response = $.parseJSON(data);

self.username(null);
self.password(null);

self.router = oj.Router.rootInstance;
self.router.configure({
'dashboard': {label: 'Dashboard', isDefault: true},
'incidents': {label: 'Incidents'},
'customers': {label: 'Customers'},
'about': {label: 'About'}
});

var data = [
{name: 'Dashboard', id: 'dashboard',
iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-chart-icon-24'},
{name: 'Incidents', id: 'incidents',
iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-fire-icon-24'},
{name: 'Customers', id: 'customers',
iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-people-icon-24'},
{name: 'About', id: 'about',
iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-info-icon-24'}
];

// self.navDataSource = new oj.ArrayTableDataSource(data, {idAttribute: 'id'});

//
//
var rootViewModel = ko.dataFor(document.getElementById('mainContent'));
rootViewModel.navDataSource.reset(data, {idAttribute: 'id'});
//rootViewModel.userLogin('redsam');
//rootViewModel.isLoggedIn('true');
//rootViewModel.restSessionId(jqXHR.getResponseHeader('REST_SESSIONID'));

oj.Router.sync();
},
error: function (jqXHR, textStatus, errorThrown) {
alert("401 Unauthorized");
alert("jqXHR",jqXHR.toString());
alert('something went wrong', textStatus.toString());
alert('something ', errorThrown.toString());
}
});
return true;
};

}

return LoginModel();

});

• oj.Collection: customer.js

/**
* Copyright (c) 2014, 2016, Oracle and/or its affiliates.
* The Universal Permissive License (UPL), Version 1.0
*/
/**
* Main content module
*/
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojmodel', 'ojs/ojcollectiontabledatasource',
'ojs/ojtable', 'ojs/ojpagingcontrol'],
function(oj, ko, $) {
/**
* The view model for the main content view template. Please note that since
* this example uses ojModule binding, you do not need to call ko.applyBindings
* like the JET Cookbook examples. ojModule handles applying bindings for its
* associated view.
*/
function peopleContentViewModel() {
var self = this;
self.serviceURL = 'http://127.0.0.1:7001/RestfulApplication-RestfulProject-context-root/resources/restfulproject/Persons';
self.collectionEmployees = ko.observable();
self.pagingDatasource = ko.observable();

parseEmpl = function (response) {

return {
FirstName: response['firstname'],
HireDate: response['hiredate'],
Id:response['id'],
LastName: response['lastname']
};
};

function getURL(operation, collection, options) {
return self.serviceURL;
};

var collEmpls = new oj.Collection.extend({
customURL: getURL,
fetchSize: 5,
model: new oj.Model.extend({
idAttribute: 'Id',
parse: parseEmpl
})
});

self.collectionEmployees(new collEmpls());
self.pagingDatasource = new oj.PagingTableDataSource(new oj.CollectionTableDataSource(self.collectionEmployees()));
}

/**
* This example returns a view model instance, but can instead return a constructor function
* which will be invoked to create a view model instance for each module reference.
* This instance example will be used as a singleton whenever this module is referenced.
* Please see the 'ViewModel's Lifecycle' section of the ojModule doc for more info.
*/
return new peopleContentViewModel();
});

• 调试工具:

脚本可以通过alert进行信息的输出.

Rest服务的调试：

下载chrome Advanced Rest client,然后通过chrome://apps/,选择ARC后启动测试Rest Service。

应用调试

通过chrome带的developer tools,选择network,可以看到每个请求及响应

• 结果：