目录
4. 在前端页面MainTemp.jsp中加入显示日志日期分类的样式;
这一节,我们将按照日志日期显示这个功能实现;
1.model层,在Diary.java里面新添两个属性;
这里面是日志的属性,新添了两个属性,日期格式化之后的releaseDateStr以及日志日期的总数diaryCount;
//日期格式化之后的str
private String releaseDateStr;
//计算日志日期的总数
private int diaryCount;
以及它们对应的get和set方法:
public String getReleaseDateStr() {
return releaseDateStr;
}
public void setReleaseDateStr(String releaseDateStr) {
this.releaseDateStr = releaseDateStr;
}
public int getDiaryCount() {
return diaryCount;
}
public void setDiaryCount(int diaryCount) {
this.diaryCount = diaryCount;
}
2. dao层,新添一个查询日志日期分类的方法;
这里面写一个查询日志日期的方法,注意这里用到了一个聚合函数date_format(date,format);
关于date_format(date,format)函数的用法,请看date_format函数的用法;
//显示日志日期分类的方法
public List<Diary> diaryCountList(Connection con) throws Exception{
List<Diary> diaryCountList=new ArrayList<Diary>();
String sql="SELECT DATE_FORMAT(releaseDate,'%Y年%m月') AS releaseDateStr ,COUNT(*) AS diaryCount FROM t_diary GROUP BY DATE_FORMAT(releaseDate,'%Y年%m月') ORDER BY DATE_FORMAT(releaseDate,'%Y年%m月') DESC;";
//String sql="select date_format(releaseDate,'%Y年%m月') as releaseDateStr ,count(*) as diarycount from t_diary group by date_format(releaseDate,'%Y年%m月') order by date_format(releaseDate,'%Y年%m月') desc;";
PreparedStatement pstmt=con.prepareStatement(sql);
ResultSet rs=pstmt.executeQuery();
while(rs.next()){
Diary diary=new Diary();
diary.setReleaseDateStr(rs.getString("releaseDateStr"));
diary.setDiaryCount(rs.getInt("diarycount"));
diaryCountList.add(diary);
}
return diaryCountList;
}
3. web层,在主界面中添加显示日志日期的方法;
这里面我们要在MainServlet中添加一下diaryCountList方法,让主界面能将日志日期分类显示出来;
并且将数据存放在session中,因为日志日期这一个模块和日志类别是一样的,都是不随主界面变化而变化的;
4. 在前端页面MainTemp.jsp中加入显示日志日期分类的样式;
这里面在MainTemp中添加一下后台传入的数据,我们通过EL表达式来获取后台传入的数据,并用css稍加修饰;
在前台的"按日志日期分类显示"这一块下面添加显示具体的数据;然后与主页面的内容一起显示出来;
<div class="data_list">
<div class="data_list_title">
<img src="${pageContext.request.contextPath}/images/byDate_icon.png"/>
按日志日期
</div>
<!-- 日志日期列表数据 -->
<div class="datas">
<ul>
<c:forEach var="diaryRiQiCount" items="${diaryCountList }">
<li><span><a href="#">${diaryRiQiCount.releaseDateStr }(${diaryRiQiCount.diaryCount })</a></span></li>
</c:forEach>
</ul>
</div>
</div>
5. 测试结果;
可以看到右方以及将日志日期显示出来了;