`
knight_black_bob
  • 浏览: 829493 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

文章分页 及 动态列表 静态 详细内容 思想

    博客分类：
  • web
文章分页动态列表静态详细内容 
阅读更多

 

 

 

 为什么用动态列表加静态详细页面？

便于开发和维护……实际上是可以全部动态，文章放到fckediter中，但是网页编辑没有css基础是很难做好的，现在我们可以通过上传jsp的形式注入jsp，达到动态化。。。。。

 

 缺陷：

文章内容的分词搜索 就不可能实现，，，，

 

 

 

 


 

 



 

 

 

 

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=9" />
<link href="../css/comm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/comm/comm.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../image/bitbug_favicon.ico" />
<script type='text/javascript'>
$(function(){
	$.selfReturnTop('returnTOP','.articleMain');
	var a =  "${session_user}";
	if(a==''){
		var documentWidth = $(document).width();
		$('.header').css({
			width:documentWidth,
		});
		$('body').css('background','#FFF');
	};
});
</script>
<title>栏目详情页</title>
</head>
<body>
	<%@ include file="../common/header_long.jsp"%>
	<div style='width:1200px;margin:0 auto; background:#FFF;'>
	<div class='articleMain'>
		<!-- articleBox -->
		
		<div class='articleBody'>
			<h1>${article.articleTitle} 
				<font>发布时间：${article.insertTime}</font>
			</h1>
			<!-- 引入文章主体内容 --> 

			<jsp:include page="../article/${article.topage}" flush="true" />
			<h3>
				<span>来源：${article.source}</span>
				<span>浏览量：${article.count}次</span>
			</h3>
			<h4>
				<font class='prev'>
				<s:if test="#request.beforeArticle != null">
				<a href="<%=request.getContextPath()%>/user/getArticleDetail.action?articleId=${beforeArticle.articleId}">< 查看上一篇</a>
				</s:if>
				<s:if test="#request.beforeArticle == null">
				 已到最前  
				</s:if>
				</font>
				<font class='next'>
				<s:if test="#request.nextArticle != null">
				<a href="<%=request.getContextPath()%>/user/getArticleDetail.action?articleId=${nextArticle.articleId}">> 查看下一篇</a>
				</s:if>
				<s:if test="#request.nextArticle == null">
					 已到最后 
				</s:if> 
				</font>
			</h4>
		</div>	
		</div>
	</div>
	<%@ include file="../common/foot_long.jsp"%>
</body>
</html>

 

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=9" />
<link href="../css/comm.css" rel="stylesheet" type="text/css" />
<link href="../css/jBootsrapPage.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/comm/comm.js"></script>
<script type="text/javascript" src="../js/jBootstrapPage/jBootstrapPage.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../image/bitbug_favicon.ico" />
<style>
html { overflow-x: hidden;}
</style>
<script type='text/javascript'>
$(function(){
	$.selfReturnTop('returnTOP','.articleMain');
	var a =  "${session_user}";
	if(a==''){
		var documentWidth = $(document).width();
		$('.header').css({
			width:documentWidth,
		});
		$('body').css('background','#FFF');
	};
});

function write(pageSize,total,pageIndex){ 
   var url = "<%=request.getContextPath()%>/user/getArticleTableInfo.action?limit=" + pageSize + "&offset=" +pageIndex; 
	$.ajax({
	    cache: true,
	    type: "post",
	    url:url, 
	    dataType: "json",
	    
	    async: false,
	    error: function(data) {
	    },
	    success: function(data) {  
	    	var sum = data.total;
	    	var jsonList= data.rows ; 
	    	var htmlContent='';
			for(var i=0;i<jsonList.length;i++){
				
				if (jsonList[i].hasImage >0) {  
					htmlContent +='<div class="articleBox">'+
					'<h2>'+
						'<span>【'+ jsonList[i].category+'】</span>'+
						'<b>'+ jsonList[i].articleTitle+'</b>'+
						'<font>发布时间：'+ jsonList[i].insertTime+'</font>'+
					'</h2>'+
					'<div class="hasImg">'+
						'<div class="articleImg"> <img src="a.png"> </div>'+
						 jsonList[i].articleContent+' <a href="<%=request.getContextPath()%>/user/getArticleDetail.action?articleId='+jsonList[i].articleId +'"> 查看全文 ></a>'+
					'</div>'+
					'<h3>'+
						'<span>来源：'+ jsonList[i].source+'</span>'+
						'<span>浏览量：'+ jsonList[i].count+'次</span>'+
					'</h3>'+
				'</div>'; 
				}else{ 
					htmlContent +='<div class="articleBox">'+
					'<h2>'+
						'<span>【'+ jsonList[i].category+'】</span>'+
						'<b>'+ jsonList[i].articleTitle+'</b>'+
						'<font>发布时间：'+ jsonList[i].insertTime+'</font>'+
					'</h2>'+
					'<div>'+
					   jsonList[i].articleContent+'<a href="<%=request.getContextPath()%>/user/getArticleDetail.action?articleId='+jsonList[i].articleId +'"> 查看全文 ></a>'+
					'</div>'+
					'<h3>'+
						'<span>来源：'+ jsonList[i].source+'</span>'+
						'<span>浏览量：'+ jsonList[i].count+'次</span>'+
					'</h3>'+
				'</div> '; 
				}
			}  
		$('.articleMain').html(htmlContent); 
	    }
	});    
}


$(function(){
	var size=0; 
	
		$.ajax({
	    cache: true,
	    type: "POST",
	    url:'<%=request.getContextPath()%>/user/getArticleCount.action', 
	    dataType: "json",
	    async: false,
	    error: function(data) {
	    },
	    success: function(data) { 
	     size = data.total;  
	    }
	});  
	var bottonsize= size /5 +1;	
		
    createPage(5, bottonsize, size);
	//
	$('a[page="1"]').click();
	
    function createPage(pageSize, buttons, total) {
        $(".pagination").jBootstrapPage({
            pageSize : pageSize,
            total : total,
            maxPageButton:buttons,
            onPageClicked: function(obj, pageIndex) {
            	write(pageSize,total,pageIndex);
            }
        });
    }

    
    
    
    $('.btn1').click(function(){
    	var size=0; 
    	
		$.ajax({
	    cache: true,
	    type: "POST",
	    url:'<%=request.getContextPath()%>/user/getArticleCount.action', 
	    dataType: "json",
	    async: false,
	    error: function(data) {
	    },
	    success: function(data) { 
	     size = data.total;  
	    }
	});  
	var bottonsize= size /5 +1;	
		
    createPage(5, bottonsize, size); 
		$('a[page="1"]').click();
    });

    $('.btn2').click(function(){
var size=0; 
    	
		$.ajax({
	    cache: true,
	    type: "POST",
	    url:'<%=request.getContextPath()%>/user/getArticleCount.action', 
	    dataType: "json",
	    async: false,
	    error: function(data) {
	    },
	    success: function(data) { 
	     size = data.total;  
	    }
	});  
	var bottonsize= size /5 +1;	
		
    createPage(10, bottonsize, size); 
		$('a[page="1"]').click();
    });

    $('.btn3').click(function(){
var size=0; 
    	
		$.ajax({
	    cache: true,
	    type: "POST",
	    url:'<%=request.getContextPath()%>/user/getArticleCount.action', 
	    dataType: "json",
	    async: false,
	    error: function(data) {
	    },
	    success: function(data) { 
	     size = data.total;  
	    }
	});  
	var bottonsize= size /5 +1;	
		
    createPage(15, bottonsize, size); 
		$('a[page="1"]').click();
    });
       
});
</script>
<title>栏目列表页</title>
</head>
<body>
	<%@ include file="../common/header_long.jsp"%>
	<div style='width:1200px; background:#FFF; margin:0 auto;'>		
		<div class='articleMain'>
			<!-- 文章区 -->
			
			<!-- 图片样式 
				
			-->
			
		</div>
		<div class='articleBtn'>
			<div class='articleBtnBox'>共300条记录，每页显示<font>5<i></i></font>条
				<ol class='articleBtnOl' style='display:none;'>
					<li class='btn1'>5</li>
					<li class='btn2'>10</li>
					<li class='btn3'>15</li>
				</ol>
			</div>
			<ul class="pagination"></ul>
			<div class='clearBoth'></div>
		</div>
	</div>
	<%@ include file="../common/foot_long.jsp"%>
</body>
</html>

 

package com.fusionability.web.bean;
/**
 * @author baoyou  E-mail:curiousby@163.com
 * @version 创建时间：2015年6月30日 下午1:57:35
 * 类说明
 */
public class Article {
//	articleId,articleTitle,articleContent,insertTime,category,source,topage,count,image,hasImage,desc
	
	private String articleId;
	private String articleTitle;
	private byte[] articleContent;
	private String insertTime;
	private String category;
	private String source;
	private String topage;
	private long count;
	private String image;
	private int  hasImage;
	private String des;
	
	
	
	public String getArticleId() {
		return articleId;
	}
	public void setArticleId(String articleId) {
		this.articleId = articleId;
	}
	public String getArticleTitle() {
		return articleTitle;
	}
	public void setArticleTitle(String articleTitle) {
		this.articleTitle = articleTitle;
	}
	 
	public String getInsertTime() {
		return insertTime;
	}
	public void setInsertTime(String insertTime) {
		this.insertTime = insertTime;
	}
	public String getCategory() {
		return category;
	}
	public void setCategory(String category) {
		this.category = category;
	}
	 
	public byte[] getArticleContent() {
		return articleContent;
	}
	public void setArticleContent(byte[] articleContent) {
		this.articleContent = articleContent;
	}
	public String getSource() {
		return source;
	}
	public void setSource(String source) {
		this.source = source;
	}
	public String getTopage() {
		return topage;
	}
	public void setTopage(String topage) {
		this.topage = topage;
	}
	public long getCount() {
		return count;
	}
	public void setCount(long count) {
		this.count = count;
	}
	public String getImage() {
		return image;
	}
	public void setImage(String image) {
		this.image = image;
	}
	public int getHasImage() {
		return hasImage;
	}
	public void setHasImage(int hasImage) {
		this.hasImage = hasImage;
	}
	public String getDes() {
		return des;
	}
	public void setDes(String des) {
		this.des = des;
	}
}

 

 

 

	@SuppressWarnings("unchecked")
	public  Article  getNextArticleById(String articleId) { 
		List<Article> list = new ArrayList<Article>();
		try{
			String sql = "select articleId,articleTitle,articleContent,insertTime,category,source,topage,count,image,hasImage,des  "
				+ "from article order by insertTime desc ";
			list=  this.getJdbcTemplate().query(sql, new ArticleBlobRowMapper());
			if (list !=null) {
				return getArticle(articleId, list, 1);
			}else{
				return null;
			}
		}catch(Exception e){
			logger.error("Exception,", e);
		}
		return null;
	}
	 
	@SuppressWarnings("unchecked")
	public  Article  getBeforeArticleById(String articleId) { 
		List<Article> list = new ArrayList<Article>();
		try{
			String sql = "select articleId,articleTitle,articleContent,insertTime,category,source,topage,count,image,hasImage,des  "
				+ "from article order by insertTime desc";
			list=  this.getJdbcTemplate().query(sql, new ArticleBlobRowMapper());
			if (list !=null) {
				return getArticle(articleId, list, -1);
			}else{
				return null;
			}
		}catch(Exception e){
			logger.error("Exception,", e);
		}
		return null;
	}


	
	//flag = 0  本生  flag=-1 上一篇文章  flag=+1 下一篇文章  
	private   Article getArticle (String articleId ,List<Article> list ,int flag ){
		int index=0;
		for (int i = 0; i < list.size(); i++) {
			Article a = list.get(i);
			if (  articleId.equals(a.getArticleId())) {
				index=i;
			}
		} 
		switch (flag) {
		case -1: 
			if (index+flag<0) {
				return null;
			}
			
			break;
		case 0:
			
			break;
		case 1: 
			if (index+flag>=list.size()) {
				return null;
			}
			break;
		default:
			break;
		}
		for (int i = 0; i < list.size(); i++) {
			 if (i== (index + flag)) {
				return list.get(i);
			}
		}
		return null;
	}

 

 

public void getTable() {
		try {
			List<Article> list = articleService.getList(limit, offset*limit);
			List<ArticleVO> ArticleVOlist = new ArrayList<ArticleVO>();
			for (int i = 0; i < list.size(); i++) {
				Article a =list.get(i);
				ArticleVO avo = new ArticleVO();
				avo.setArticleId(a.getArticleId());
				avo.setArticleTitle(a.getArticleTitle());
				avo.setArticleContent(a.getArticleContent() == null ? "" : new String(a.getArticleContent(), "UTF-8"));
				avo.setInsertTime(a.getInsertTime());
				avo.setCategory(a.getCategory());
				avo.setSource(a.getSource());
				avo.setTopage(a.getTopage());
				avo.setCount(a.getCount());
				avo.setImage(a.getImage());
				avo.setHasImage(a.getHasImage());
				avo.setDes(a.getDes());
				ArticleVOlist.add(avo);
			}

			int count = articleService.getCount();

			JSONObject jsonobj = new JSONObject();
			jsonobj.put("total", count);
			JSONArray jsonarr = new JSONArray(ArticleVOlist);
			jsonobj.put("rows", jsonarr);

			System.out.println(jsonobj.toString());
			getResponse().getWriter().print(jsonobj.toString());
		} catch (IOException | JSONException e) {
		}
	}

 

 

public String toArticleDailPage() {
		Article article = articleService.getArticleById(articleId);
		article.setCount(article.getCount()+1);
		articleService.updateCount(article); 
		
		Article nextArticle = articleService.getNextArticleById(articleId);
		Article beforeArticle = articleService.getBeforeArticleById(articleId);
		
		getRequest().setAttribute("article", article);
		getRequest().setAttribute("nextArticle", nextArticle);
		getRequest().setAttribute("beforeArticle", beforeArticle);
		
		return SUCCESS;
	}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

捐助开发者

在兴趣的驱动下,写一个免费的东西，有欣喜，也还有汗水，希望你喜欢我的作品，同时也能支持一下。 当然，有钱捧个钱场（右上角的爱心标志，支持支付宝和PayPal捐助），没钱捧个人场，谢谢各位。



 
 
 谢谢您的赞助，我会做的更好！

 

 

 

  • 大小: 14 KB
  • 大小: 57.6 KB
  • 大小: 23.7 KB
分享到：
| jBootstrapPage分页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    艺帆人力资源管理咨询机构网站模板

    特色功能：产品、新闻内容图片可以批量上传（免去一张张上传的烦恼），全站伪静态（优化SEO,对搜索引擎更友好），全站关键词可自动设置（每个页面关键词都有针对性），文章内容可以分页，图片渐显载入（优化显示速度...

    关联文章升级小插件 for KesionCMS科汛 v5.5&&6.0

    KS_ItemInfoR为关联文章数据库，V6.0以前每次关联是程序自动寻找tags匹配，现在使用了数据表，对使用动态或伪静态时速度会增快不少，但是只有新文章才会自动建关联，并且在每次添加文章自己不指定关联词语时，只有...

    艺帆简洁干净家具网站源码CMS版 v1.7.5.zip

    特色功能：产品、新闻内容图片可以批量上传（免去一张张上传的烦恼），全站伪静态（优化SEO,对搜索引擎更友好），全站关键词可自动设置（每个页面关键词都有针对性），文章内容可以分页，图片渐显载入（优化显示速度...

    艺帆简洁干净家具网站源码 v1.7.6.rar

    特色功能：产品、新闻内容图片可以批量上传（免去一张张上传的烦恼），全站伪静态（优化SEO,对搜索引擎更友好），全站关键词可自动设置（每个页面关键词都有针对性），文章内容可以分页，图片渐显载入（优化显示速度...

    asp.net知识库

    分页存储过程：排序反转分页法 优化后的通用分页存储过程 sql语句 一些Select检索高级用法 SQL server 2005中新增的排序函数及应用 根据基本表结构及其数据生成 INSERT ... 的 SQL 简便的MS SQL 数据库 表内容 脚本 ...

    艺帆简洁干净家具网站源码

    特色功能：产品、新闻内容图片可以批量上传（免去一张张上传的烦恼），全站伪静态（优化SEO,对搜索引擎更友好），全站关键词可自动设置（每个页面关键词都有针对性），文章内容可以分页，图片渐显载入（优化显示速度...

    php网络开发完全手册

    11.1.6 下拉框与列表框标签select 172 11.2 表单数据的接收 173 11.2.1 GET方法 173 11.2.2 POST方法 176 11.3 常用表单数据的验证方法 177 11.3.1 姓名验证 177 11.3.2 日期验证 177 11.3.3 E-mail地址验证 178 ...

    基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文）

    因此，在具体设计实现该博客网站时，主要考虑了主流博客网站的几个主要功能:(1)博客的注册、登录验证功能(2) 网络用户通过关键字搜索博文功能(3) 最热门博客页面推荐浏览(4) 文章详细内容及相关评论显示(5) 博客...

    DTCMS网站内容管理系统 v4.0 ACCESS

    编程也一样，在前者的摸索道路上，如果大家都将自己的编程思想和经验共享出来让后人去学习和纠正，那么或许他们就不必走那么多的弯路，互联网的发展是否会更快？基于以上的追求，限于国产开源界的目前现状，DTcms...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    +TabStrip增加GetAddTabReference和GetRemoveTabReference两个函数，用来向TabStrip控件动态增加删除Tab。 -增加示例tabstrip/tabstrip_addtab.aspx。 -重构了示例网站的架构，目前只有一层IFrame结构。 -为...

    ExtAspNet_v2.3.2_dll

    +修正IE7下Grid分页速度慢(feedback:youwei, StevenGuan, hazardvn, gavindou, ttjacky)。 -实际上IE7下所以的回发都慢，原因是客户端的Base64编码速度慢，已经使用encodeURIComponent来代替Base64编码。 -俄语...

Magicbox
Global site tag (gtag.js) - Google Analytics