JavaWeb 项目 --- 表白墙和在线相册

最新推荐文章于 2022-11-23 12:01:55 发布

原创

最新推荐文章于 2022-11-23 12:01:55 发布 · 328 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #java进阶 #后端

本文详细介绍了如何使用JavaWeb和Thymeleaf实现表白墙和在线相册功能。从创建Maven项目开始，到数据库设计、模板文件创建、Servlet代码编写，再到部署后的运行截图，全程展示了数据库存储、模板引擎初始化、图片加载与提交等关键步骤。

文章目录

一. 案例: 表白墙 (使用模板引擎)
二. 案例: 在线相册 (使用模板引擎)

一. 案例: 表白墙 (使用模板引擎)

1. 首先创建 maven 项目

引入需要的依赖,创建必要的目录
在这里插入图片描述

2. 创建好模板文件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
    <form action="confession" method="post">
        <div class="parent">
            <div id="wall">表白墙</div>
            <div id="remind">输入后点击提交,会将信息显示在表格中</div>
            <div class="one"><span class="two">谁:</span><input type="text" class="text" name="from"></div>
            <div class="one"><span class="two">对谁:</span><input type="text" class="text" name="to"></div>
            <div class="one"><span class="two">说什么:</span><input type="text" class="text" name="message"></div>
            <div class="one"><input type="submit" value="提 交" class="press"></div>
            <div class="elem" th:each="message : ${messages}">
                <span th:text="${message.from}">wz</span>对<span th:text="${message.to}">zw</span>说: <span th:text="${message.message}">wzz</span>
            </div>
        </div>
    </form>
    
    <style>
        /* 去除浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 设置总宽度 */
        .parent {
            width: 400px;
            margin: 0 auto;
        }
        /* 设置表白墙样式 */
        #wall {
            font-size: 30px;
            font-weight: 700;
            text-align: center;
            margin: 5px;
        }
        /* 设置提示信息样式 */
        #remind{
            font-size:13px;
            text-align: center;
            color:gray;
            margin: 5px;
        }
        /* 设置弹性布局 */
        .one {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
        }
        /* 设置文字内容 */
        .two {
            width: 100px;
            line-height: 40px;
        }
        /* 设置输入框 */
        .one .text{
            width: 200px;
            height: 20px;
            padding-left: 3px;
        }
        /* 提交按钮的设置 */
        .one .press{
            width: 304px;
            height: 40px;
            color:white;
            background-color: orange;
            bor