能源公司网站模板,提交网站到谷歌,个人网站建设公司地址,便宜旅游机票网站建设一、前言
最近在学习intra-mart框架#xff0c;在此总结下笔记。
intra-mart是一个前后端不分离的框架#xff0c;开发时主要用的就是xml、html、js这几个文件#xff1b; xml文件当做配置文件#xff0c;html当做前端页面文件#xff0c;js当做后端文件#xff08;js里…一、前言
最近在学习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 version1.0 encodingUTF-8?
routing-jssp-configxmlnshttp://www.intra-mart.jp/router/routing-jssp-configxmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://www.intra-mart.jp/router/routing-jssp-config routing-jssp-config.xsdauthz-default mapperwelcome-all /file-mapping path/test/test1 pagetest/myTest1 /file-mapping path/test/test2 pagetest/myTest2 /file-mapping path/test/test3 pagetest/myTest3 //routing-jssp-config其中用到了3个路径test1是登录首页test2是登录后的页面test3只是一个接口用来实现一个简单的注册功能。
2.登录页面
用到了2个文件 WEB-INF/jssp/src/test/myTest1.html script srcui/libs/jquery-validation-1.9.0/jquery.validate.js/script
script typetext/javascriptconsole.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);}});});})/scriptdiv classimui-titleh1Test/h1
/div
div classimui-toolbar-wrapdiv classimui-toolbar-inner!-- ツールバー左側 --ul classimui-list-toolbar!-- 戻る --lia href#dummy classimui-toolbar-icon title戻るspan classim-ui-icon-common-16-back/span/a/li/ul!-- ツールバー右側 --ul classimui-list-toolbar-utilitylia href#dummy classimui-toolbar-icon title最新情報span classim-ui-icon-common-16-refresh/span/a/li/ul/div
/divdiv classimui-form-container-widediv classimui-chapter-titleh2login/h2/divform methodpost nameLoginForm actiontest/test2
table classimui-formtbodytrthlabel classimui-required账号/label/thtdinput typetext nameuserName iduserName/td/trtrthlabel密码/label/thtdinput typetext nameuserPass iduserPass/td/tr/tbody
/table
div classimui-operation-partsinput typesubmit value登录 classimui-small-buttoninput typebutton value注册 classimui-small-button idregister
/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表里
最后返回提示信息。
页面效果 输入d4点击注册就会存入数据库。
4.登录后页面
用到了2个文件 WEB-INF/jssp/src/test/myTest2.html script srcui/libs/jquery-validation-1.9.0/jquery.validate.js/script
script typetext/javascript//放在这里面确保代码在 DOM 加载完成后执行
jQuery(function() {var data imart typestring valuedata /var nowUserList imart typestring valuenowUserList /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 idtr i tdjsonObj[i].user_name/tdtdjsonObj[i].user_pass/td/tr);}}
else{console.log(登录失败)
}})
/scriptimart typestring valuedata /.
table idtest_table classimui-table-sort
/tableWEB-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_namerequest.userName and user_passrequest.userPass );logger.info(arguments[{}], result);logger.info(lengthresult.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(result2result2.data.length);//logger.info(result2result2.data[0].user_name);//data result.data[0].user_name;}
跳转过来时都会先执行js文件其中先查询了下数据库用户是否存在然后把用户列表查询出来了前端用for循环展示下
html文件中有判断如果登录成功那就初始化下table展示下用户列表
如果登录失败那就只提示登录失败。
页面效果
三、备注
本文总结了下intra-mart各个页面参数传递方法接口调用方法与for循环展示列表方法。
js文件直接当后端使用比较少见参数传递也和java不太相同。
前后端未分离大部分用jquery和框架内置方法。
