Diary（四）——按日志类别显示和按日志日期显示（上）

目录

 

1. model层，建立DiaryType实体层；

 2. dao层，查询日志类别的方法；

3. web层，在主界面中添加显示日志类别的方法；

4. 在前端页面MainTemp.jsp中加入显示日志类别的样式；

5. 测试结果；

---

这一节我们将按照日志类别显示这个功能实现； 

1. model层，建立DiaryType实体层；

这里面是日志类别的属性，包括Id和日志类别名称，还有额外添加的diaryCount；

package com.java.model;

public class DiaryType {

	private int diaryTypeId;
	private String typeName;
	//每个类别下有多少条数据
	private int diaryCount;
	
	public int getDiaryTypeId() {
		return diaryTypeId;
	}
	public void setDiaryTypeId(int diaryTypeId) {
		this.diaryTypeId = diaryTypeId;
	}
	public String getTypeName() {
		return typeName;
	}
	public void setTypeName(String typeName) {
		this.typeName = typeName;
	}
	public int getDiaryCount() {
		return diaryCount;
	}
	public void setDiaryCount(int diaryCount) {
		this.diaryCount = diaryCount;
	}
	
}

 

 2. dao层，查询日志类别的方法；

这里面写一个查询日志类别的方法，注意这里用到了内连接查询，即右查询；

package com.java.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.java.model.DiaryType;

public class DiaryTypeDao {

	public List<DiaryType> DiaryTypeList(Connection con)throws Exception{
		List<DiaryType> diaryTypeList=new ArrayList<DiaryType>();
		String sql="select diaryTypeId,typeName,count(diaryId) as diaryCount from t_diary right join t_diarytype on t_diary.typeId=t_diarytype.diaryTypeId group by typeName;";
		PreparedStatement pstmt=con.prepareStatement(sql);
		ResultSet rs=pstmt.executeQuery();
		while(rs.next()){
			DiaryType diaryType=new DiaryType();
			diaryType.setDiaryTypeId(rs.getInt("diaryTypeId"));
			diaryType.setTypeName(rs.getString("typeName"));
			diaryType.setDiaryCount(rs.getInt("diaryCount"));
			diaryTypeList.add(diaryType);
		}
		return diaryTypeList;
	}
}

 

3. web层，在主界面中添加显示日志类别的方法；

这里面我们要在MainServlet中添加一下DiaryTypeList方法，让主界面能将日志类别显示出来；

并且将数据存放在session中，因为日志类别这一个模块和日志日期是一样的，都是不随主界面变化而变化的

 

4. 在前端页面MainTemp.jsp中加入显示日志类别的样式；

这里面在MainTemp中添加一下后台传入的数据，我们通过EL表达式来获取后台传入的数据，并用css稍加修饰；

在前台的"按日志类别显示"这一块下面添加显示具体的数据；然后与主页面的内容一起显示出来； 

<div class="data_list">
		<div class="data_list_title">
			<img src="${pageContext.request.contextPath}/images/byType_icon.png"/>
			按日志类别
		</div>
		<!-- 日志类别列表数据 -->
		<div class="datas">
			<ul>
				<c:forEach var="diaryTypeCount" items="${diaryTypeList }">
					<li><span><a href="#">${diaryTypeCount.typeName }(${diaryTypeCount.diaryCount })</a></span></li>
				</c:forEach>
			</ul>
		</div>
</div>

样式文件diary.css： 

.data_list .datas{
	padding: 5px;
}

.data_list .datas ul {
	list-style-type: none;
}

.data_list .datas ul li {
	margin-top: 10px;
}

 

5. 测试结果；

可以看到右方以及将日志类别显示出来了；