使用IDEA的众筹项目（九）广告模块

最新推荐文章于 2023-10-18 17:18:29 发布

摸鱼菜腿子

最新推荐文章于 2023-10-18 17:18:29 发布

阅读量402

点赞数

CC 4.0 BY-SA版权

分类专栏： IDEA版众筹项目

本文链接：https://blog.youkuaiyun.com/qq_41884677/article/details/99477362

IDEA版众筹项目专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了广告模块的文件上传功能实现，包括原理分析、表单定义及处理请求等步骤。同时，深入探讨了使用jQuery插件进行异步文件上传的方法，以及通过pagination插件实现分页功能的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 广告模块 - 文件上传 - 原理分析

创建文件上传路径
原理分析

org.springframework.web.multipart.commons.CommonsMultipartFile
org.apache.commons.fileupload.disk.DiskFileItem
上传到临时目录下：F:\atcrowdfunding\workspace.metadata.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost_

2.广告模块 - 文件上传 - 功能实现

定义表单
提交表单;采用同步方式提交表单
处理请求

3. JQuery

在这里插入图片描述

4. jquery- form 插件

在这里插入图片描述

5. 广告模块

保存广告,上传图片服务器返回的json数据.由于是同步提交请求,所以返回json串.
异步提交文件上传表单

6. pagination_zh 分页插件介绍

插件介绍：
在这里插入图片描述

7. pagination 分页插件使用

.引用pagination插件的样式和js文件

页面/WEB-INF/jsp/advert/index.jsp
（1）使用容器
在这里插入图片描述
（2）绑定事件

    $(function () {
 	    $(".list-group-item").click(function(){
 		    if ( $(this).find("ul") ) {
 			$(this).toggleClass("tree-closed");
 			if ( $(this).hasClass("tree-closed") ) {
 				$("ul", this).hide("fast");
 			} else {
 				$("ul", this).show("fast");
 			}
 			}
 		});
 	    
 	    <c:if test="${empty param.pageno}">
 	    queryPage(0);
 	    </c:if>
 	    <c:if test="${not empty param.pageno}">
 	    queryPage(${param.pageno}-1);
 	    </c:if>
 	    
 	    showMenu();
     });
     
     function changePageno( pageno ) {
     	//window.location.href = "<%=request.getContextPath() %>/advert/index.htm?pageno="+pageno;
     	queryPage(pageno-1);
     }
     
     //使用Ajax异步查询数据
     function queryPage( pageIndex ){
     	var dataObj = {
 			"pageno" : pageIndex+1 ,   //pageno 是属性名称,是否增加双引号无所谓
 			"pagesize" : 2
 		};
     	if(condition){
     		dataObj.pagetext = $("#queryText").val(); //增加模糊查询条件
     	}
     	
     	var loadingIndex = -1 ;
     	$.ajax({
     		
     		url : "${APP_PATH}/advert/pageQuery.do",
     		type : "post",
     		data : dataObj,
     		beforeSend : function(){
     			loadingIndex = layer.msg('数据查询中', {icon: 6});
     			return true ;
     		},
     		success : function(result){
     			//显示结果
     			layer.close(loadingIndex);
     			if(result.success){
     				//循环遍历,显示数据
     				var pageObj = result.page;
     				var list = pageObj.data ;
     				var content = "";
     				$("tbody").html(content);
     				$.each(list,function(i,n){
     					
     					content+="<tr>";
 						content+="	<td>"+(i+1)+"</td>";
 						content+="	<td><input type='checkbox' value='"+n.id+"'></td>";
 						content+="	<td>"+n.name+"</td>";
 						content+="	<td>"+n.url+"</td>";
 						
 						if(n.status=='0'){
 							content+="	<td>草稿</td>";
 						}else if(n.status=='1'){
 							content+="	<td>未审核</td>";
 						}else if(n.status=='2'){
 							content+="	<td>审核完成</td>";
 						}else if(n.status=='3'){
 							content+="	<td>发布</td>";
 						}
 						
 						content+="	<td>";
 						content+="		<button type='button' onclick='window.location.href=\"${APP_PATH}/advert/edit.htm?pageno="+pageObj.pageno+"&id="+n.id+"\"' class='btn btn-primary btn-xs'>";
 						content+="			<i class=' glyphicon glyphicon-pencil'></i>";
 						content+="		</button>";
 						content+="		<button type='button' class='btn btn-danger btn-xs' onclick='deleteAdvert("+n.id+",\""+n.name+"\")'>";
 						content+="			<i class=' glyphicon glyphicon-remove'></i>";
 						content+="		</button>";
 						content+="	</td>";
 						content+="</tr>";
     					
     				});
     				//$("tbody").append(content);
 					$("tbody").html(content);
     				
     				// 创建分页
     				var num_entries = pageObj.totalsize ;
     				$("#Pagination").pagination(num_entries, {
     					num_edge_entries: 2, //边缘页数
     					num_display_entries: 4, //主体页数
     					callback: queryPage, //查询当前页的数据.
     					items_per_page:pageObj.pagesize, //每页显示1项
     					current_page:(pageObj.pageno-1), //当前页,索引从0开始
     					prev_text:"上一页",
     					next_text:"下一页"
     				});
     				
     			}else{
     				
     				layer.msg("广告分页查询数据失败", {time:1000, icon:5, shift:6});
     				
     			}
     		},
     		error : function(){
     			layer.msg("广告分页查询数据错误", {time:1000, icon:5, shift:6});
     		}
     		
     	});
     }
     
     var condition = false ;
     //条件查询
     function queryAdvert(){
     	var queryText = $("#queryText");
     	
     	if($.trim(queryText.val())==""){
     		layer.msg("查询条件不能为空", {time:1000, icon:5, shift:6}, function(){
     			queryText.focus();
     		});
     		return ;
     	}
     	condition = true ;
     	queryPage(0);
     }
     
     function deleteAdvert(id,name){
     	
 		layer.confirm("是否要删除广告?",  {icon: 3, title:'提示'}, function(cindex){
 			
 			$.ajax({
 				url : "${APP_PATH}/advert/delete.do",
 				type : "POST",
 				data : {id:id},
 				success : function(result){
 					if(result.success){
 						layer.msg("删除"+name+"广告成功!", {time:1000, icon:6}, function(){
 							queryPage(0);
 						});
 					}else{
 						layer.msg("删除"+name+"广告失败!", {time:1000, icon:5, shift:6});
 					}
 				}
 			});
 			
 		    layer.close(cindex);
 		}, function(cindex){    				
 		    layer.close(cindex);
 		});
     	
     }
     
     
     $(".table thead :checkbox").click(function(){
     	var checked = this.checked ;
     	var checkboxList = $(".table tbody :checkbox");
     	$.each(checkboxList,function(i,n){
     		n.checked = checked ;
     	});
     });
    
     
 	//传递多个对象的方式
     $("#batchDelete").click(function(){
     	var checkedList = $("table tbody input:checked");
     	if(checkedList.length>0){
     		layer.confirm("确定要删除吗?",  {icon: 3, title:'提示'}, function(cindex){
     			
     			var datas = {};
     			
     			$.each(checkedList,function(i,n){
     				
     				datas["datas["+i+"].id"]=n.value;
     				datas["datas["+i+"].name"]="n.name";
     			});
     			
     			$.ajax({
     				url : "${APP_PATH}/advert/batchDelete.do",
     				type : "POST",
     				data : datas ,
     				success : function(result){
     					if(result.success){
         					layer.msg("删除广告成功!", {time:1000, icon:6}, function(){
 								queryPage(0);
 							});
     					}else{
     						layer.msg("删除广告失败!", {time:1000, icon:5});
     					}
     				}
     			});
 			    layer.close(cindex);
 			}, function(cindex){
 			    layer.close(cindex);
 			});
     	}
     });

（2）出现死循环：
在这里插入图片描述