js-引擎模板前台后台（java）实战

本文主要是介绍js-引擎模板前台后台（java）实战，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前台：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/hyappCommon.js"></script>
<script src="js/arttmpl.js"></script>
<style>
html,body {
background-color: #efeff4;
}
.title{
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
.oa-contact-cell.mui-table .mui-table-cell {
padding: 11px 0;
vertical-align: middle;
}

.oa-contact-cell {
position: relative;
margin: -11px 0;
}

.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
float: left;
}
</style>
</head>

<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">
最新注册会员
</div>
<ul id="ullist" class="mui-table-view mui-table-view-striped mui-table-view-condensed">


<div id="content"></div>

<script id="ul-li-template" type="text/html">
<% for(var i=0;i<list.length;i++){%>

<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="images/60x60.gif" style="width: 60px; height: 60px;" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">

<h4 class="oa-contact-name"><%=list[i].userInfo.nickname %></h4>
<span class="oa-contact-position mui-h6">男</span>
<span class="oa-contact-position mui-h6">单身</span>
<span class="oa-contact-position mui-h6">工程师</span>
</div>
<p class="oa-contact-email mui-h6">
个人宣言：yewenjie@sina.com
</p>
</div>
</div>
</div>
</li>
<%}%>
</script>

</ul>
</div>
</div>

<script src="js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
/*down: {
callback: pulldownRefresh
},*/
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});

mui.plusReady(function() {
//aa();
getAllUserLimit(0,5);
});

/**
* 下拉刷新具体业务实现
*/
/*function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1000);
}*/

/*function pulldownRefresh() {
console.log("fdsffffffffffff");
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');

getAllUserLimit(cells.length,3);*/

/*for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed*/
/*}, 1000);
}*/

var count = 0;
/**
* 上拉加载具体业务实现
*/
/* function pullupRefresh() {
console.log("vvvvvvvvv");
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
}

*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
getAllUserLimit(cells.length,5);
}, 1000);
}

function TemplateViewData(configData)
{
var data={
list:configData
};
var html=template('ul-li-template',data);
document.getElementById("ullist").innerHTML=html;
}

function viewListData(configData)
{
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
var storage = window.localStorage;
storage.setItem("userslist_data",configData);
console.log(configData[0].userInfo.nickname);

for (var i =0; i <data.userslist.length;i++) {
var nickname=data.userslist[i].userInfo.nickname;
var job=data.userslist[i].userInfo.job;
var sex='男';
if(data.userslist[i].userInfo.sex=='sexnv')
{
var sex='女';
}
var singleOrDouble=data.userslist[i].userInfo.singleOrdouble;
var birthday=data.userslist[i].userInfo.birthdayStr;
var heading=data.userslist[i].userInfo.heading;
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.id=data.userslist[i].userInfo.user_id;
li.value=data.userslist[i];
var a='<div id="listdiv'+li+'" class="mui-slider-cell"><div class="oa-contact-cell mui-table"><div class="oa-contact-avatar mui-table-cell"><img id="heading'+li.id+'" style="width: 60px; height: 60px;" src="'+data.userslist[i].userInfo.heading+'" /></div><div class="oa-contact-content mui-table-cell"><div class="mui-clearfix"><h4 id="nickname'+li.id+'" class="oa-contact-name">'+data.userslist[i].userInfo.nickname+'</h4><span id="sex'+li.id+'" class="oa-contact-position mui-h6">'+sex+'</span> <span id="singleOrDouble'+li.id+'" class="oa-contact-position mui-h6">'+singleOrDouble+'</span> <span id="job'+li.id+'" class="oa-contact-position mui-h6">'+job+'</span></div><p class="oa-contact-email mui-h6">个人宣言aaaa：yewenjie@sina.com</p></div></div></div><div id="birthday'+li.id+'" style="display: none;">'+birthday+'</div>';
li.innerHTML=a;
li.addEventListener('tap', function(li) {
var storage = window.localStorage;
var isLogin=storage.getItem("people_isLogin");
if(isLogin!=1)
{
alert("请先登录");
return;
}
else
{

var myliid = this.getAttribute('id');
storage.setItem("userslist_checked_user_id",myliid);
storage.setItem("userslist_checked_nickname",document.getElementById("nickname"+myliid).innerText);
storage.setItem("userslist_checked_sex",document.getElementById("sex"+myliid).innerText);
storage.setItem("userslist_checked_singleOrDouble",document.getElementById("singleOrDouble"+myliid).innerText);
storage.setItem("userslist_checked_job",document.getElementById("job"+myliid).innerText);
storage.setItem("userslist_checked_birthday",document.getElementById("birthday"+myliid).innerText);
storage.setItem("userslist_checked_heading",document.getElementById("heading"+myliid).src);

mui.openWindow({
id:'list-userinfo5.html',
url:'list-userinfo5.html'
});
}
});

//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed

}

function getAllUserLimit(start,end)
{
//var func_url="http://192.168.21.106:8080/tan.maven.springmvc Maven Webapp/users.do?method=allUsers";
// var func_url="http://192.168.21.106:8081/tan.maven.springmvc Maven Webapp/users.do?method=getAllUserLimit";

var func_url=ServerUrl.IP+"/tan.maven.springmvc Maven Webapp/users.do?method=getAllUserLimit&callback='jsoncallback'";
mui.ajax(func_url,{
data:{
start:start,end:end
},
dataType:'jsonp',//服务器返回json格式数据
//dataType:'json',
type:'post',//HTTP请求类型
//timeout:10000,//超时时间设置为10秒；
jsonp:"jsoncallback",
success:function(data){
console.log("测试："+data);
var configData=JSON.parse(data); //解析数据 cinfig：OK
if(configData && configData.length>0)
{TemplateViewData(configData);}
},
error:function(xhr,type,errorThrown){
//异常处理；
//console.log(xhr.Message+" "+type+" "+errorThrown);
}
});
}

</script>
</body>
</html>

后台：

@RequestMapping(params = "method=getAllUserLimit")
public void getAllUserLimit(Users user,HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException{
System.out.println("UsersController.java getAllUserLimit");
request.setCharacterEncoding("utf-8");
int start = Integer.parseInt(request.getParameter("start"));
int end = Integer.parseInt(request.getParameter("end"));

userSignInDao=new UserSignInDao();
List<UserSignIn> userslist=userSignInDao.getAllUserLimit(start, end);

response.setContentType("text/html;charset=GBK");
/* JSONObject jsonObj = new JSONObject();
jsonObj.put("userslist",userslist); */

// JSONObject jsonObject = JSONObject.fromObject(jsonObj);
// System.out.println(jsonObject);//输出
//JSONArray jsonArray = JSONArray.fromObject(userslist);

try {
// ok1
response.setHeader("Access-Control-Allow-Origin", "");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");

JSONArray jsonArray = JSONArray.fromObject(userslist);
System.out.println(jsonArray);
response.getWriter().print(jsonArray.toString());

//ok2
/*【需要解决】
String jsonp=request.getParameter("callback");
System.out.println("jsonp "+jsonp);
response.setHeader("Access-Control-Allow-Origin", "");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");
JSONArray jsonArray = JSONArray.fromObject(userslist);
System.out.println("获取"+jsonArray.toString());
response.getWriter().print(jsonp+"("+jsonArray.toString()+")");*/

/* 【需要解决】
JSONObject jsonObj = new JSONObject();
jsonObj.put("userslist",userslist);
JSONObject jsonObject = JSONObject.fromObject(jsonObj);
String jsonp=request.getParameter("callback");
System.out.println("jsonp "+jsonp);
response.setHeader("Access-Control-Allow-Origin", "");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().print(jsonp+"("+jsonObject.toString()+")");*/

} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}