为什么用动态列表加静态详细页面？
便于开发和维护……实际上是可以全部动态，文章放到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捐助），没钱捧个人场，谢谢各位。
谢谢您的赞助，我会做的更好！
相关推荐
本文将详细介绍如何利用JavaScript在静态网页上实现文章列表的分页功能。 #### 一、需求分析 假设我们需要在一个静态网页上展示一篇文章列表，并且每页显示的文章数量固定为20篇。为了更好地管理和展示这些文章，...
在IT行业中，静态生成代码是一种常见的网页开发技术，它的核心思想是将动态内容预先渲染成HTML文件，然后存储在服务器上，供用户直接访问。这种方式相比动态生成的页面，具有加载速度快、SEO优化良好以及减轻服务器...
总的来说，这个PHP代码示例提供了一个基本的文本文章分页解决方案，它不依赖于数据库，适用于简单的静态内容分页。通过自定义`$perpage`和`$delimiter`，可以适应不同的分页需求。此外，这个方法也可以作为一个基础...
6. **静态和动态分页**：动态分页适用于数据频繁更新的场景，数据在服务器端实时生成；而静态分页则是在首次访问时生成所有页面并保存为HTML，后续请求直接返回已生成的页面，提高了访问速度。 在实际项目中，你...
3. 文章展示：按时间、热度、分类等维度展示文章列表，支持分页。 4. 评论功能：用户对文章进行评论，支持回复、点赞和举报。 5. 搜索功能：提供关键词搜索，匹配文章标题和内容。 6. 用户权限：区分普通用户和管理...
博客系统是互联网上个人或团队分享思想、经验、知识和个人见解的重要平台，它结合了内容管理系统（CMS）和社交网络的特性。在这个特定的案例中，我们关注的是一个基于ASP（Active Server Pages）技术构建的博客系统...
通过预览，我们可以看到项目的效果包括文章的分页展示，详细信息查看，以及后台的文章管理列表。这些功能的实现将依赖于SpringBoot框架的灵活性和便捷性。 【系统设计与开发环境】：系统采用SpringBoot作为核心开发...
5.1 文章列表：创建一个列表组件，通过调用jPress API获取文章列表，动态渲染到页面上。 5.2 文章详情：点击列表项跳转到文章详情页，加载文章内容、作者信息、评论等数据。 5.3 用户登录与注册：使用uni-app实现...
这样，我们可以将静态内容与动态内容很好地结合在一起，提高了代码的可维护性和可扩展性。 MVC设计模式是Web开发中的一种经典架构，它的核心思想是将应用程序分为三个主要部分：模型（Model）、视图（View）和控制...
从描述来看，这个博客项目尚未完成所有功能，可能还需要添加用户注册、登录、文章的发布与编辑、评论系统、搜索功能、分页以及更多的定制化设置。扩展这个项目时，开发者可以考虑以下几个方面： - 用户认证：实现...
- `blog.html` 和 `blog-post.html`: 代表博客列表页面和单个博客文章页面，通常包含文章摘要、分类、标签和评论等功能。 - `portfolio.html`、`portfolio-manual-pagination.html` 和 `portfolio-item.html`: ...
2. **metalsmith-pagination**：用于分页博客文章。 3. **metalsmith-in-place**：在原地编辑文件，例如替换模板变量。 4. **metalsmith-watch**：实时监听文件变化，自动重新构建。 总的来说，Metalsmith提供了一...
总的来说，这篇文章详细阐述了基于ARM CPU的Linux系统中物理内存的管理方法，从内存布局的历史发展到现代内核的实现技术，为读者提供了一个全面的理解。掌握这些知识对于进行Linux内核开发、系统优化或者解决内存...
在信息技术日新月异的今天，个人博客已经成为了许多人分享思想、交流经验的重要平台。而“web个人博客管理系统”正是这样一款为用户提供便捷博客创建、管理和发布的工具，尤其适合初学者进行学习和实践。本文将深入...
特色功能：产品、新闻内容图片可以批量上传（免去一张张上传的烦恼），全站伪静态（优化SEO,对搜索引擎更友好），全站关键词可自动设置（每个页面关键词都有针对性），文章内容可以分页，图片渐显载入（优化显示速度...
通过定义变量和控制结构，可以动态生成 HTML 内容，如文章列表、分页等，提供了高度的可定制性。 Bootstrap，则是著名的前端开发框架，以其响应式设计和丰富的组件库闻名。在 guntherrotsch.github.io 项目中，...
KS_ItemInfoR为关联文章数据库，V6.0以前每次关联是程序自动寻找tags匹配，现在使用了数据表，对使用动态或伪静态时速度会增快不少，但是只有新文章才会自动建关联，并且在每次添加文章自己不指定关联词语时，只有...
特色功能：产品、新闻内容图片可以批量上传（免去一张张上传的烦恼），全站伪静态（优化SEO,对搜索引擎更友好），全站关键词可自动设置（每个页面关键词都有针对性），文章内容可以分页，图片渐显载入（优化显示速度...