<%@ page contentType="text/html;charset=UTF
-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF
-8">
<title>我的日记本</title>
<style>
/* 基础样式 */
body {
font
-family: 'PingFang SC', 'Microsoft YaHei', sans
-serif;
line
-height: 1.6;
color: #333;
background
-color: #f5f7fa;
margin: 0;
padding: 0;
}
/* 主容器 */
.container {
max
-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 头部样式 */
.header {
display: flex;
justify
-content: space
-between;
align
-items: center;
margin
-bottom: 30px;
padding
-bottom: 15px;
border
-bottom: 1px solid #e1e4e
8;
}
.header h1 {
color: #2c3e50;
margin: 0;
font
-size: 2
8px;
font
-weight: 600;
}
/* 搜索框 */
.search
-box {
display: flex;
margin
-bottom: 20px;
}
.search
-box input {
flex: 1;
padding: 10px 15px;
border: 1px solid #ddd;
border
-radius: 4px 0 0 4px;
font
-size: 16px;
outline: none;
}
.search
-box button {
padding: 10px 20px;
background
-color: #349
8db;
color: white;
border: none;
border
-radius: 0 4px 4px 0;
cursor: pointer;
transition: background
-color 0.3s;
}
.search
-box button:hover {
background
-color: #29
80b9;
}
/* 添加按钮 */
.add
-btn {
display: inline
-block;
padding: 10px 20px;
background
-color: #2ecc71;
color: white;
text
-decoration: none;
border
-radius: 4px;
font
-weight: 500;
transition: background
-color 0.3s;
}
.add
-btn:hover {
background
-color: #27ae60;
}
/* 日记卡片列表 */
.diary
-list {
display: grid;
grid
-template
-columns: repeat(auto
-fill, minmax(300px, 1fr));
gap: 20px;
}
/* 日记卡片 */
.diary
-card {
background: white;
border
-radius:
8px;
box
-shadow: 0 2px 10px rgba(0, 0, 0, 0.0
8);
padding: 20px;
transition: transform 0.3s, box
-shadow 0.3s;
}
.diary
-card:hover {
transform: translateY(
-5px);
box
-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.diary
-title {
font
-size: 1
8px;
font
-weight: 600;
color: #2c3e50;
margin: 0 0 10px 0;
white
-space: nowrap;
overflow: hidden;
text
-overflow: ellipsis;
}
.diary
-content {
color: #555;
margin: 0 0 15px 0;
display:
-webkit
-box;
-webkit
-line
-clamp: 3;
-webkit
-box
-orient: vertical;
overflow: hidden;
height: 60px;
}
.diary
-meta {
display: flex;
justify
-content: space
-between;
color: #7f
8c
8d;
font
-size:
14px;
}
.diary
-actions {
display: flex;
gap: 10px;
margin
-top: 15px;
}
.action
-btn {
flex: 1;
padding:
8px 0;
text
-align: center;
border
-radius: 4px;
font
-size:
14px;
cursor: pointer;
transition: background
-color 0.3s;
}
.edit
-btn {
background
-color: #f39c12;
color: white;
text
-decoration: none;
}
.edit
-btn:hover {
background
-color: #e67e22;
}
.delete
-btn {
background
-color: #e74c3c;
color: white;
border: none;
}
.delete
-btn:hover {
background
-color: #c0392b;
}
/* 空状态 */
.empty
-state {
text
-align: center;
padding: 60px 20px;
grid
-column: 1 /
-1;
}
.empty
-state img {
width: 150px;
opacity: 0.6;
margin
-bottom: 20px;
}
.empty
-state h3 {
color: #7f
8c
8d;
margin
-bottom: 10px;
}
/* 响应式设计 */
@media (max
-width: 76
8px) {
.header {
flex
-direction: column;
align
-items: flex
-start;
gap: 15px;
}
.diary
-list {
grid
-template
-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>我的日记本</h1>
<a href="${pageContext.request.contextPath}/add" class="add
-btn">写新日记</a>
</div>
<div class="search
-box">
<form action="${pageContext.request.contextPath}/search" method="get">
<input type="text" name="keyword" placeholder="搜索日记..." value="${param.keyword}">
<button type="submit">搜索</button>
</form>
</div>
<div class="diary
-list">
<c:choose>
<c:when test="${not empty diaries}">
<c:forEach var="diary" items="${diaries}">
<div class="diary
-card" >
<h3 class="diary
-title">${diary.title}</h3>
<p class="diary
-content">${diary.content}</p>
<div class="diary
-meta">
<span>创建: <fmt:formatDate value="${diary.createdAtAsDate}" pattern="yyyy
-MM
-dd HH:mm" /></span>
<span>更新: <fmt:formatDate value="${diary.updatedAtAsDate}" pattern="yyyy
-MM
-dd HH:mm" /></span>
</div>
<div class="diary
-actions">
<a href="${pageContext.request.contextPath}/edit?id=${diary.id}" class="action
-btn edit
-btn">编辑</a>
<form action="${pageContext.request.contextPath}/delete" method="post" style="flex:1;">
<input type="hidden" name="id" value="${diary.id}">
<button type="submit" class="action
-btn delete
-btn">删除</button>
</form>
</div>
</div>
</c:forEach>
</c:when>
<c:otherwise>
<div class="empty
-state">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTE5IDEzaC0ydjJoMnYtMk0xOSAzLjVjMCAuODMtLjY3IDEuNS0xLjUgMS41SDE4djJoMS41YTIuNSAyLjUgMCAwIDAgMC01aC0uOTJjLS4wNS0uMTYtLjEyLS4zMS0uMTktLjQ1Yy0uMzktLjczLTEuMDUtMS4yMy0xLjg5LTEuMjNjLS43OCAwLTEuNDEuMzYtMS44My45M0MxNC4zNCAyLjM2IDEzLjcgMiAxMyAySDExVjEuNWEuNS41IDAgMCAwLS41LS41aC0xYS41LjUgMCAwIDAtLjUuNVYyaC0yVjEuNUEuNS41IDAgMCAwIDYuNSAxaC0xYS41LjUgMCAwIDAtLjUuNVYySDNjLTEuMTEgMC0yIC44OS0yIDJ2MTNjMCAxLjExLjg5IDIgMiAyaDcuMDZjLjA0LjI0LjExLjQ3LjIxLjY5QzguMzc3IDIxLjA0IDYuODUgMjIgNSAyMmMtMi4yMSAwLTQtMS43OS00LTRzMS43OS00IDQtNGMxLjg1IDAgMy4zOCAxLjA0IDQuMjggMi4zMUMyLjQ0IDE4LjU1IDEgMTUuODkgMSAxM1Y1aDJ2MkgxVjNoMnYySDhWNGgydjFoM1Y0aDJ2MmgydjJoMlY1aDJ2MTEuNWMwIC4yOC0uMjIuNS0uNS41aC0xYS41LjUgMCAwIDAtLjUuNXYxYzAgLjI4LjIyLjUuNS41aDFjLjgzIDAgMS41LS42NyAxLjUtMS41VjMuNXoiLz4
8L3N2Zz4=" alt="空状态">
<h3>还没有日记哦</h3>
<p>点击上方"写新日记"按钮开始记录吧</p>
</div>
</c:otherwise>
</c:choose>
</div>
</div>
</body>
</html>
这个首页显示不出来所有日记，必须点击搜索才有日记，怎么修改让他首页就直接显示日记，或者自动执行搜索空的操作，保证数据库中的日记显示处理
扫一扫
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
