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

最新推荐文章于 2022-09-11 00:21:52 发布
最新推荐文章于 2022-09-11 00:21:52 发布
阅读量1.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010242159/article/details/52515972
版权

前台：

<!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">


              <!-- <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/togetimage/1.jpg" style="width: 60px; height: 60px;" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">昵称</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>
-->
<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">昵称</h4>-->
<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>&nbsp;<span id="singleOrDouble'+li.id+'" class="oa-contact-position mui-h6">'+singleOrDouble+'</span>&nbsp;<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();
}

}



u010242159
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前后端分离如何传递参数（接口传参）
qq_48578877的博客
10-16 5149
前后端参数的传递（接口传参）
1.后端将数据传给前端并展现
xuan__xia的博客
07-24 652
我通过前端发送id，查询返回得到的数据类型如下，其中Object中是我想要的数据，数据格式为{“key1":"value1","key2":value2,……Promise从语法上来说是一个构造函数，从功能上来讲，用Promise的实例封装异步操作并获取数据。我们需要通过Promise.then方法获取数据，并且我想把这个Object数据放在一个数组中，tableData：[{}]，因此就要想办法取出Object数据，这样就可以把数据放在tabledata中了。
后端将资源发送给前端
qq_48321086的博客
07-27 2944
2.创建一个服务器对象回调函数不会直接运行会在用户每次访问当前计算器的IP的8081端口。将服务器挂起后访问该网页需要注意的事网址为IP地址+端口号（想要跳转的页面自己设置）1.引入node自带的模块http这个模块可以调用函数来创建后端服务器。node运行成功后访问可以访问到图片。...
后端的数据传到前端
qq_42638422的博客
04-14 8434
后端的数据传到前端接受的方式 /** * 1、后端使用HttpServletRequest 使用request.setAttribute的方式，将数据传到前端，前端在requestScope中获取参数 * 2、后端设置HttpSession 使用session.setAttribute的方式，将数据传到前端，前端在sessionScope中获取参数 * @param session * @param request * @return */ @RequestMapping("/testRet
springboot/vue前后端交互（后台传数据到前台）
weixin_48524739的博客
05-28 5467
继续上面两篇博客（后台需添加了跨域配置），后台接口已经写好，前端vue使用element-plus，axios实现数据交互 后台跨域配置，新建一个文件CorsConfiguration： import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springfra...
SpringBoot项目博客系统-包含前台后台前端后端-适合作为Java学习的第一练手项目.zip
03-09
项目包含了完整的前后台功能，涵盖了从前端界面到后端服务的开发，提供了全面的实战经验。以下将详细解析这个项目的各个组成部分及其涉及的技术知识点。 首先，`pom.xml`是Maven项目的配置文件，它定义了项目依赖、...
Java大型企业级项目-在线教育系统实战课程教程(17.37G)
04-11
Java大型企业级项目-在线教育系统实战课程教程(17.37G) 〖课程介绍〗: 在线教育系统，分为前台网站系统和后台运营平台，B2C模式。 前台用户系统包括课程、讲师、问答、文章几大大部分，使用了微服务技术架构，前后端...
maxmall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现。.zip
最新发布
03-26
3. **src/main/resources** - 存放配置文件（如application.properties或yaml）、静态资源（如CSS、JavaScript）和模板文件（如Thymeleaf或Freemarker）。 4. **src/main/webapp** - 对于传统的Web应用，此目录会...
java软件工程师简历（合集）.docx
06-28
【Java软件工程师简历知识点】 Java软件工程师是一种专注于Java平台上的...这些项目经验展示了陶**的实战能力和全面的Java技术栈，他的能力覆盖了从基础编程到复杂系统开发的多个方面，具有较高的综合素质和实践经验。
基于JavaWeb项目实战的点餐系统源码
06-10
技术：JSP，JavaScript，jQuery，servlet，JDBC，Mysql。 前台涉及的功能：餐桌的占位与取消占位，购物车功能，下单功能，菜单管理，订单管理，用户登录及记住密码，用户注册。 后台涉及的功能：餐桌管理，菜品类型...
javaweb前台+后台界面模板
05-13
这是我个人从网上下载或者试问同事要的，总共包括32个后台界面模板，还有将近十个前台界面的模板，好的模板在编程中会省事许多，特意拿出来共享。
javaWeb后台管理系统模板（仅含前台所有模板，超详细）
10-07
这是一个后台管理系统的模板，显示出了所有的前端页面并实现了部分功能；使用css、js、Highcharts等一些技术实现显示框拉缩，管理分类、报表等功能
非常好的前端模板
08-08
非常好的前端开发模板，可以拿来直接使用
java 前台农产品企业网站html整站模板
10-20
java 前台农产品企业网站html整站模板java 前台农产品企业网站html整站模板
优秀后台模板.rar
05-25
这是来自于“模板之家”的一个非常不错的模板，此处只是学习使用。
前后端数据互传问题
一名不想学习的未来程序猿。
08-07 1011
her~~llo，我是你们的好朋友Lyle，是名梦想成为计算机大佬的男人！博客是为了记录自我的学习历程，加强记忆方便复习，如有不足之处还望多多包涵！非常欢迎大家的批评指正。今天来一篇前后端数据互传问题的总结。持续更新。我在开发时如果遇到就会记录。......
前后端交互--------后端传JSON给前端
大叔的博客
02-22 9026
一.使用@RestController注解或者@Controller+@Responbody注解 二，使用request传递参数 三.使用model传递参数
史上最全的java从后台向前台jsp以及js传值的方法总结
热门推荐
lyy的博客
11-20 2万+
本文github：https://github.com/CtrlZ1/java-.git 本文背景： 在学习java web的过程中，前后台传值的问题是很令人头痛的问题，那么看了本文，就可以有效缓解。 文件目录： 1.首先，后台向前台的jsp页面传值： 实体类： package com.example.demo.entity; public class User { p...
详细讲解前端如何给后端传输数据，后端如何给前端传输数据(java)
web13170611647的博客
09-11 6838
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
Thymeleaf 3.0.11.RELEASE：现代Java模板引擎解析
"Thymeleaf 3.0.11.RELEASE 官方文档 简体中文，是一个Java模板引擎，适用于Web和非Web环境，尤其适合在基于MVC的Web应用中作为视图层处理XHTML/HTML5模板。Thymeleaf的核心理念是自然模板，使得模板在设计阶段保持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值