5.30打卡
第一阶段冲刺
• 所花时间：1
• 代码行数：488
• 博客容量：1
• 代码如下
<%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/5/7
Time: 12:32
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
background-image: url('background.jpg');
}
.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #333;
}
form {
text-align: center;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
padding: 12px 24px; /* 调整登录按钮的内边距 */
font-size: 16px; /* 调整登录按钮的字体大小 */
/* 其他样式保持不变 */
}
input[type="submit"], .register-btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.register-btn {
padding: 8px 16px; /* 调整注册按钮的内边距 */
font-size: 14px; /* 调整注册按钮的字体大小 */
margin-top: 10px;
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>登录</h1>
<form action="LoginServlet" method="post">
<input type="text" name="userId" placeholder="请输入用户ID" required>
<br>
<input type="password" name="password" placeholder="请输入密码" required>
<br>
<input type="submit" value="登录">
</form>
<a href="register.jsp" class="register-btn">注册</a>
</div>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.*, java.util.*, java.io.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动物识别</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
background-image: url('background.jpg');
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #333;
}
form {
text-align: center;
}
input[type="file"] {
margin-bottom: 20px;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.post {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
background-color: #f9f9f9;
}
.post img {
max-width: 100%;
margin-bottom: 10px;
}
.post a {
color: black; /* 设置链接字体颜色为黑色 */
text-decoration: none; /* 去掉下划线 */
}
</style>
</head>
<body>
<div class="container">
<h1>动物识别</h1>
<form action="UploadServlet" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<br>
<input type="submit" value="上传">
</form>
<br>
<br>
<form action="post.jsp" method="post">
<input type="submit" value="发布帖子">
</form>
<br>
<br>
<form action="mapRemark.jsp" method="post">
<input type="submit" value="标记动物">
</form>
<h2>最新帖子</h2>
<%
// 从数据库中获取最新的20条帖子（related_post_id为-1）
Connection connection = null;
PreparedStatement statement = null;
ResultSet resultSet = null;
try {
Class.forName("com.mysql.jdbc.Driver");
connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/party", "root", "1234");
String query = "SELECT post_id, user_id, title, image FROM Post WHERE related_post_id = -1 ORDER BY post_id DESC LIMIT 20";
statement = connection.prepareStatement(query);
resultSet = statement.executeQuery();
while (resultSet.next()) {
String postId = resultSet.getString("post_id");
String userId = resultSet.getString("user_id");
String title = resultSet.getString("title");
// 从数据库中读取图片数据
Blob imageBlob = resultSet.getBlob("image");
byte[] imageBytes = imageBlob.getBytes(1, (int) imageBlob.length());
String imageBase64 = Base64.getEncoder().encodeToString(imageBytes);
// 根据用户id获取用户名，假设有一个名为 getUserById 的方法可以实现此功能
String username = "用户" + userId;
out.println("<div class='post'>");
out.println("<p><strong>用户名: </strong>" + username + "</p>");
// 将标题包装在 <a> 标签中，使其可点击
out.println("<p><strong>标题: </strong><a href='post_detail.jsp?postId=" + postId + "'>" + title + "</a></p>");
// 显示图片
out.println("<img src='data:image/jpeg;base64," + imageBase64 + "' alt=''>");
out.println("</div>");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (resultSet != null) resultSet.close();
if (statement != null) statement.close();
if (connection != null) connection.close();
} catch (SQLException ex) {
ex.printStackTrace();
}
}
%>
</div>
</body>
</html>
浙公网安备 33010602011771号