文章分页 及 动态列表 静态 详细内容 思想
2018-02-07 00:00
417 查看
为什么用动态列表加静态详细页面？
便于开发和维护……实际上是可以全部动态，文章放到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捐助），没钱捧个人场，谢谢各位。
谢谢您的赞助，我会做的更好！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 分页查询JSP页面查询列表详细内容
- php文章内容分页并生成相应的htm静态页面代码
- DEDE文章列表分页如何解决,以及分页标签详细解释
- php文章内容分页并生成相应的htm静态页面代码
- 设置dedecms为动态页面,设置dedecms为静态页面,首页动态,列表动态和文章动态
- yii 分页显示列表内容.
- QuickWAP 2.x之英文、简繁体文章内容分页
- dede调用其他栏目的文章或者缩略图列表且有分页效果的方法
- asp.net 文章内容分页显示的代码
- 【C#】文章正文显示和文章列表分页，审核功能的添加
- Scrapy框架结合Spynner采集需进行js,ajax动态加载的网页并提取网页信息（以采集微信公众号文章列表为例）
- Phpcms的pc标签实现动态展现子栏目和文章列表
- MVC 列表分页 Partial内容页
- 用webmagic抓文章列表和详细页
- WordPress 文章内容添加分页的方法
- ListView Scroll: 动态加载列表内容
- WordPress 文章内容添加分页的方法
- DEDECMS全站伪静态详细教程（首页、列表、文章页）
- 长文章内容的分页函数的修改
- java+jstl 单篇文章分页和列表页面的分页 代码