<%@ 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
: #e67e
22;
}
.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>
这个首页显示不出来所有日记，必须点击搜索才有日记，怎么修改让他首页就直接显示日记，或者自动执行搜索空的操作，保证数据库中的日记显示处理
扫一扫
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
