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

简介:        为什么用动态列表加静态详细页面? 便于开发和维护……实际上是可以全部动态,文章放到fckediter中,但是网页编辑没有css基础是很难做好的,现在我们可以通过上传jsp的形式注入jsp,达到动态化。

 

 

 

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

便于开发和维护……实际上是可以全部动态,文章放到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捐助),没钱捧个人场,谢谢各位。



 
 
 谢谢您的赞助,我会做的更好!

 

 

 

目录
相关文章
分页列表数据不出来,初始化页面数据不出来的原因,Create中传一个参数1,解决bug的方法,学习敲代码的时候仔细与原项目比对,从上比到下
分页列表数据不出来,初始化页面数据不出来的原因,Create中传一个参数1,解决bug的方法,学习敲代码的时候仔细与原项目比对,从上比到下
|
6月前
|
前端开发
使用elementUI构建复杂表格,合并行或列,多级表头等
前端开发过程中常常会遇到各种开发表格的场景,有时候有的表格比较简单有的比较复杂(如下图简单示例所示,有合并项和多级表头),Elementui的el-table控件也可以支持构建复杂的表格,本文将指导你如何快速开发复杂表格~~~
642 0
|
SQL 存储 关系型数据库
索引的创建与设计原则(2)(适合创建索引情况 )
索引的创建与设计原则(2)(适合创建索引情况 )
索引的创建与设计原则(2)(适合创建索引情况 )
|
存储 关系型数据库 MySQL
索引结构与检索原理|学习笔记
快速学习索引结构与检索原理
110 0
索引结构与检索原理|学习笔记
|
索引 关系型数据库 MySQL
十六、组合索引(上)
十六、组合索引
88 0
|
算法
哈希表数据结构模板
哈希表数据结构模板
105 0
|
数据库 索引
存在逻辑删除的表字段上建立唯一索引的巧办法 (逻辑删除与唯一索引)
设计数据库唯一索引时,经常会碰到唯一删除的键值,导致很难处理,这里就简单介绍一种巧办法,帮你快速解决该问题
1988 0
存在逻辑删除的表字段上建立唯一索引的巧办法 (逻辑删除与唯一索引)
|
存储 关系型数据库 MySQL
二十五、覆盖索引
二十五、覆盖索引
124 0
|
SQL 关系型数据库 数据库
MySQL优化系列(二)--查找优化(1)(非索引设计)
MySQL优化系列(二)--查找优化(1)(非索引设计) 接下来这篇是查询优化,用户80%的操作基本都在查询,我们有什么理由不去优化他呢??所以这篇博客将会讲解大量的查询优化(索引以及库表结构优化等高级用法后面文章再讲),先讲单表查优化,再讲多表查优化。
1818 0
下一篇
无影云桌面