You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

164 lines
6.4 KiB

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.dao.ArticleDao,com.bean.ArticleBean,com.dao.TypeDao,com.bean.TypeBean,java.util.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>分类</title>
<link rel="stylesheet" type="text/css" href="./static/css/semantic.min.css">
<link rel="stylesheet" href="./static/css/index.css">
</head>
<body>
<!--导航-->
<nav class="ui inverted segment m-padded-tb-mini m-shadow-small">
<div class="ui container">
<form action="SearchMyBlogServlet" method="post">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">Blog</h2>
<a href="index.jsp" class="m-item item m-mobile-hide">首页</a>
<a href="Blog.jsp" class="m-item item m-mobile-hide">博客</a>
<a href="types.jsp" class="active m-item item m-mobile-hide">分类</a>
<a href="tags.jsp" class="m-item item m-mobile-hide">标签</a>
<!-- <a href="PersonalCenter.jsp" class="m-item item m-mobile-hide">归档</a> -->
<a href="MessageBoard.jsp" class="m-item item m-mobile-hide">留言板</a>
<a href="MyCenter.jsp" class="m-item item m-mobile-hide">我的</a>
<a href="PublishArticle.jsp" class="m-item item m-mobile-hide">发表博客</a>
<div class="right m-item item m-mobile-hide">
<div class="ui icon inverted transparent input">
<input type="text" placeholder="搜索" ><input type="submit" value="☜(゚ヮ゚☜)">
</div>
</div>
</div>
</form>
</div>
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<!--中间-->
<%
ArticleDao articleDao = new ArticleDao();
List<ArticleBean> list = articleDao.selectAll();
session.setAttribute("BlogResult", list);
TypeDao typeDao = new TypeDao();
List<TypeBean> lis = typeDao.selectAll();
session.setAttribute("TypeResult", lis);
%>
<div class="m-container m-padded-tb-big">
<div class="ui container">
<!--header-->
<div class="ui top attached segment">
<div class="ui middle aligned two column grid">
<div class="column">
<h3 class="ui teal header">分类</h3>
</div>
<div class="right aligned column">
共 <h3 class="ui orange header m-inline-block m-text-thin">${fn:length(TypeResult)}</h3>个
</div>
</div>
</div>
<div class="ui attached segment m-padded-tb-large">
<c:forEach items="${TypeResult}" var="Type">
<div class="ui labeled button m-margin-tb-tiny" tabindex="0">
<a href="#" class="ui basic teal button">${Type.typeName}</a>
<div class="ui basic teal left pointing label">${Type.typeID}</div>
</div>
</c:forEach>
</div>
<div class="ui top attached segment teal">
<div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
<c:forEach items="${BlogResult}" var="Blog">
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui eleven wide column">
<h3 class="ui header"><a href="BlogDetailsServlet?articleID=${Blog.articleID}"><font color="black"><b>${Blog.articleTitle}</b></font></a></h3>
<p class="m-text" >
<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
${Blog.articleContent}
</div>
</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui mini horizontal link list">
<div class="item">
<img src="./static/images/weixin.jpg" alt="" class="ui avatar image">
<div class="content">
<a href="#" class="header">${Blog.userID}</a>
</div>
</div>
<div class="item">
${Blog.articleTime}
</div>
<div class="item">
2356
</div>
</div>
</div>
<div class="row">
<div class="column">
<a href="#" class="ui basic teal left pointing label m-padded-mini m-text-thin">方法论</a>
</div>
</div>
</div>
</div>
</div>
</c:forEach>
</div>
</div>
</div>
<div class="ui bottom attached segment">
<div class="ui middle aligned two column grid">
<div class="column">
<a href="#" class="ui mini teal basic button">上一页</a>
</div>
<div class="right aligned column">
<a href="#" class="ui mini teal basic button">下一页</a>
</div>
</div>
</div>
</div>
<!--底部-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
<div class="ui center aligned container">
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © IT博客欢迎您</p>
</div>
</footer>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/semantic.min.js"></script>
<script>
$(".m-mobile-show").click(function () {
$(".m-item").toggleClass("m-mobile-hide");
})
</script>
</div>
</body>
</html>