一、前言

最近在學習intra-mart框架，在此總結下筆記。

intra-mart是一個前后端不分離的框架，開發時主要用的就是xml、html、js這幾個文件；
xml文件當做配置文件，html當做前端頁面文件，js當做后端文件（js里能連接數據庫）；
所以js文件需要注意，因為算后端文件，其中的語法與前端開發的js有些不太相同（日志打印不能用console.log）。

二、代碼部分

1.路由文件

WEB-INF/conf/routing-jssp-config/test.xml

<?xml version="1.0" encoding="UTF-8"?>
<routing-jssp-configxmlns="http://www.intra-mart.jp/router/routing-jssp-config"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.intra-mart.jp/router/routing-jssp-config routing-jssp-config.xsd"><authz-default mapper="welcome-all" /><file-mapping path="/test/test1" page="test/myTest1" /><file-mapping path="/test/test2" page="test/myTest2" /><file-mapping path="/test/test3" page="test/myTest3" /></routing-jssp-config>

其中用到了3個路徑，test1是登錄首頁，test2是登錄后的頁面，test3只是一個接口，用來實現一個簡單的注冊功能。

2.登錄頁面

用到了2個文件：
WEB-INF/jssp/src/test/myTest1.html

<script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
<script type="text/javascript">console.log("加載js")jQuery(function() {jQuery('#register').click(function() {console.log("點擊按鈕")console.log(jQuery('#userName').val())jQuery.ajax({headers:{'test1':'mytest'},error:imuiTransitionToErrorPage,async:false, cache:false, dataType:'json', type:'POST', url:'test/test3', data:{'userName': jQuery('#userName').val(),'userPass': jQuery('#userPass').val()},success:function(result) {console.log("返回信息")                console.log(result)if (result.error) {imuiShowErrorMessage(result.errorMessage, result.detailMessages);return;}imuiShowSuccessMessage(result.code, result.msg);}});});})</script><div class="imui-title"><h1>Test</h1>
</div>
<div class="imui-toolbar-wrap"><div class="imui-toolbar-inner"><!-- ツールバー左側 --><ul class="imui-list-toolbar"><!-- 戻る --><li><a href="#dummy" class="imui-toolbar-icon" title="戻る"><span class="im-ui-icon-common-16-back"></span></a></li></ul><!-- ツールバー右側 --><ul class="imui-list-toolbar-utility"><li><a href="#dummy" class="imui-toolbar-icon" title="最新情報"><span class="im-ui-icon-common-16-refresh"></span></a></li></ul></div>
</div><div class="imui-form-container-wide"><div class="imui-chapter-title"><h2>login</h2></div><form method="post" name="LoginForm" action="test/test2">
<table class="imui-form"><tbody><tr><th><label class="imui-required">賬號</label></th><td><input type="text" name="userName" id="userName"></td></tr><tr><th><label>密碼</label></th><td><input type="text" name="userPass" id="userPass"></td></tr></tbody>
</table>
<div class="imui-operation-parts"><input type="submit" value="登錄" class="imui-small-button"><input type="button" value="注冊" class="imui-small-button" id="register">
</div>
</form>  </div>

WEB-INF/jssp/src/test/myTest1.js

function init(request) {}

頁面效果：

這個頁面邏輯，主要是點擊登錄按鈕，就執行form表單的action，跳轉到test/test2頁面；

點擊注冊按鈕，就用ajax請求test/test3接口，把輸入的賬號和密碼存入數據庫，并返回相應提示。

3.注冊接口

用到了2個文件：
WEB-INF/jssp/src/test/myTest3.html

WEB-INF/jssp/src/test/myTest3.js

load('tenant/authz/ajax/common_api');
var MSG = MessageManager.getMessage;/*** @param request*/
function init(request) {var data;var logger = Logger.getLogger();logger.info(request.userName);logger.info(request.userPass);var database = new SharedDatabase("imart_test");var result;try{result = database.execute("insert into user_table (user_name, user_pass) VALUES ('"+request.userName+"', '"+request.userPass+"');");}catch(e){logger.info('error', e);  }logger.info('arguments=[{}]', result);logger.info('arguments3=[{}]', result.isSuccess()== true );var ret;if(result.isSuccess()){var ret = {"code":250, "msg":"success"};}else{var ret = {"code":249, "msg":"error"};}outputJSON(ret);}

雖然只是接口，但是也得寫個空的html文件；

js文件里，就會接收入參，存入數據庫user_table表里；

最后返回提示信息。

頁面效果：

輸入d，4，點擊注冊，就會存入數據庫。

4.登錄后頁面

用到了2個文件：
WEB-INF/jssp/src/test/myTest2.html

<script src="ui/libs/jquery-validation-1.9.0/jquery.validate.js"></script>
<script type="text/javascript">//放在這里面，確保代碼在 DOM 加載完成后執行
jQuery(function() {var data = '<imart type="string" value=data />'var nowUserList = '<imart type="string" value=nowUserList />'if(data=='登錄成功'){console.log("登錄成功")console.log(jQuery('#test_table').length)//初始化下listconsole.log(ImJson.parseJSON(nowUserList))var jsonObj = ImJson.parseJSON(nowUserList);jQuery('#test_table').append('<caption>當前數據庫已有的用戶信息</caption>');for (var i = 0; i < jsonObj.length; i++) {jQuery('#test_table').append('<tr id="tr' + i + '"><td>'+jsonObj[i].user_name+'</td><td>'+jsonObj[i].user_pass+'</td></tr>');}}
else{console.log("登錄失敗")
}})
</script><imart type="string" value=data />.
<table id="test_table" class="imui-table-sort">
</table>

WEB-INF/jssp/src/test/myTest2.js

var data;var nowUserList;function init(request) {var logger = Logger.getLogger();logger.info(request.userName);logger.info(request.userPass);var database = new SharedDatabase("imart_test");var result = database.execute("select * from user_table where user_name='"+request.userName+"' and user_pass='"+request.userPass+"' ");logger.info('arguments=[{}]', result);logger.info('length='+result.data.length);if(result.data.length > 0){data = "登錄成功"}else{data = "登錄失敗"}var result2 = database.execute("select * from user_table limit 10 ");//轉換為json字符串nowUserList = ImJson.toJSONString(result2.data);//字符串轉json對象//ImJson.parseJSON//logger.info('result2='+result2.data.length);//logger.info('result2='+result2.data[0].user_name);//data = result.data[0].user_name;}

跳轉過來時，都會先執行js文件，其中先查詢了下數據庫，用戶是否存在；然后把用戶列表查詢出來了，前端用for循環展示下；

html文件中，有判斷，如果登錄成功，那就初始化下table，展示下用戶列表；

如果登錄失敗，那就只提示登錄失敗。

頁面效果：

三、備注

本文總結了下intra-mart各個頁面參數傳遞方法，接口調用方法，與for循環展示列表方法。

js文件直接當后端使用，比較少見，參數傳遞也和java不太相同。

前后端未分離，大部分用jquery和框架內置方法。