intra-mart实现简易登录页面笔记
一、前言
最近在学习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-config
xmlns="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)
//初始化下list
console.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和框架内置方法。