关键词：
目录
1.配置 Maven 项目
1.1 创建 Maven 项目
之后就是选择存放路径和命名，比较简单，就不做过多赘述啦！
1.2 引入相关依赖
在 pom.xml 中引入引⼊ servlet ， jackson ，mysql-connector 和 lombok 依赖：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>message_wall</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>message_wall Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
</properties>
<dependencies>
<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.22</version>
<scope>provided</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.2.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.49</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>message_wall</finalName>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
1.3 项目总结构
2. 约定前后端交互接口
所谓 “前后端交互接口” 是进行 Web 开发中的关键环节，具体来说：就是允许页面给服务器发送哪些 HTTP 请求，并且每种请求预期获取什么样的 HTTP 响应。
- 从服务器上获取全部信息
请求：GET
响应：JSON 格式 - 向服务器提交信息
请求：JSON 格式
响应：JSON 格式
3.服务端代码
3.1 创建Message类
@Setter
@Getter
public class Message
private String from;
private String to;
private String message;
public Message(String from, String to, String message)
this.from = from;
this.to = to;
this.message = message;
注意： @Setter 和 @Getter 会自动生成所有的get和set方法。
3.2 创建工具类
创建 DBUtils 类，用于连接数据库。
DBUtil 类主要实现以下功能:
- 创建 MysqlDataSource 实例,设置 URL , username , password 等属性.
- 提供 getConnection 方法,和MySQL服务器建立连接.
- 提供 close 方法,用来释放必要的资源.
public class DBUtils
private DBUtils()
private static volatile MysqlDataSource mysqlDataSource;
private static volatile Connection connection;
private static MysqlDataSource getMysqlDataSource()
if (mysqlDataSource == null)
synchronized (DBUtils.class)
if (mysqlDataSource == null)
mysqlDataSource = new MysqlDataSource();
mysqlDataSource.setURL("jdbc:mysql://127.0.0.1:3306/messagewall?character=utf8&useSSL=true");
mysqlDataSource.setUser("root");
mysqlDataSource.setPassword("12345678");
return mysqlDataSource;
// 1.get connect
public static Connection getConnection()
if (connection == null) // 首次访问
synchronized (DBUtils.class)
if (connection == null)
try
MysqlDataSource dataSource = getMysqlDataSource();
connection = (Connection) dataSource.getConnection();
catch (SQLException throwables)
throwables.printStackTrace();
return connection;
// 2.提供关闭资源的方法
public static void close(ResultSet resultSet, PreparedStatement statement) throws SQLException
if (resultSet != null)
resultSet.close();
if (statement != null)
statement.close();
创建 StringUtils 类，用于判空：
public class StringUtils
public static boolean hasLength(String str)
return !(str == null || str.length() == 0);
3.3 添加信息类（AddMessage）
用于向服务器提交信息。
@WebServlet("/message/add")
public class AddMessage extends HttpServlet
@SneakyThrows
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
int result = -1;
// 1.得到前端参数并效验
String from = req.getParameter("from");
String to = req.getParameter("to");
String msg = req.getParameter("msg");
if (StringUtils.hasLength(from) && StringUtils.hasLength(to)
&& StringUtils.hasLength(msg))
// 2.将表白对象加入到集合
// 2.1 得到 Connection
Connection connection = DBUtils.getConnection();
// 2.2 拼接 sql，创建执行器
String sql = "insert into messages(`from`,`to`,`message`) values(?,?,?)";
PreparedStatement statement = connection.prepareStatement(sql);
statement.setString(1, from);
statement.setString(2, to);
statement.setString(3, msg);
// 2.3 执行执行器，并返回结果
result = statement.executeUpdate();
// 2.4 关闭资源
DBUtils.close(null, statement);
resp.setContentType("text/html; charset=utf-8");
resp.getWriter().println(result);
3.4 查询信息类（MessageList）
用于获取服务器上所有信息。
@WebServlet("/message/list")
public class MessageList extends HttpServlet
@SneakyThrows
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
// 查询数据库中的表白列表
List<Message> list = new ArrayList<>();
// 1.得到 connection
Connection connection = DBUtils.getConnection();
// 2.拼接SQL，创建执行器
String sql = "select * from messages";
PreparedStatement statement = connection.prepareStatement(sql);
// 3.执行SQL，返回 resultSet 并循环将数据添加到 list 中
ResultSet resultSet = statement.executeQuery();
while (resultSet.next())
String from = resultSet.getString("from");
String to = resultSet.getString("to");
String message = resultSet.getString("message");
list.add(new Message(from, to, message));
// 4.关闭资源
DBUtils.close(resultSet, statement);
resp.setContentType("application/json; charset=utf-8");
ObjectMapper objectMapper = new ObjectMapper();
resp.getWriter().println(objectMapper.writeValueAsString(list));
4. 前端代码
<!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>
<style>
body
background-image: url(image/wall.jpeg);
background-repeat: no-repeat;
background-size: cover;
*
margin: 0;
padding: 0;
.container
width: 400px;
margin: 0 auto;
h1
text-align: center;
padding: 20px 0;
color: rgb(11, 213, 248);
p
color: rgb(226, 87, 129);
text-align: center;
font-size: 14px;
padding: 10px 0;
.row
height: 40px;
width: 350px;
display: flex;
justify-content: center;
align-items: center;
.row1
height: 40px;
display: flex;
justify-content: center;
align-items: center;
padding-left: 20px;
span
width: 70px;
line-height: 40px;
.edit
color: rgb(41, 227, 134);
text-align: center;
width: 261px;
height: 30px;
padding-right: 15px;
.submit
width: 280px;
height: 40px;
color: white;
background-color: orange;
border: none;
.submit:active
background-color: #666;
.msg
width: 100%;
height: 25px;
color: rgb(48, 66, 227);
justify-content: center;
align-items: center;
text-align: center;
padding-top: 10px;
</style>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<p> 给他/她留下一句话吧！</p>
<div class="row">
<span style="color: rgb(236, 10, 244)">谁: </span>
<input id="from" class="edit" type="text">
</div>
<div class="row">
<span style="color: rgb(236, 10, 244)">对谁: </span>
<input id="to" class="edit" type="text">
</div>
<div class="row">
<span style="color: rgb(236, 10, 244)">说: </span>
<input id="message" class="edit" type="text">
</div>
<div class="row1">
<input type="button" value="表白" class="submit" onclick="mySubmit()">
</div>
</div>
<div id="allMsg"></div>
<script>
// 添加表白信息
function mySubmit()
var from = jQuery("#from");
var to = jQuery("#to");
var msg = jQuery("#message");
// 1.非空效验
if (from.val() == "" || to.val() == "" || msg.val() == "")
alert("请输入表白信息！")
if (from.val() == "")
from.focus();
if (to.val() == "")
to.focus();
if (msg.val() == "")
msg.focus();
return;
// 2.ajax 提交数据给后端
jQuery.ajax(
url: "message/add", // 提交到后端的地址
type: "POST", // 提交类型
data:
from: from.val(),
to: to.val(),
msg: msg.val()
, // 参数
success: function (result) // 后端返回给前端的数据
if (result != null && result > 0)
alert("表白成功！");
from.val('');
to.val('');
msg.val('');
// 刷新表白列表
getAllMsg();
else
alert("表白失败！");
);
// 查询所有的表白信息
function getAllMsg()
jQuery.ajax(
url: "message/list",
type: "GET",
data: ,
success: function (result)
if (result != null && result.length > 0)
// 表示有表白数据
var msgHtml = "";
for (var i = 0; i < result.length; i++)
msgHtml += '<div class="msg">' +
result[i].from + '对' +
result[i].to + '说: ' +
result[i].message + '</div>';
jQuery("#allMsg").html(msgHtml);
else if (result != null && result.length == 0)
// 没有表白数据
console.log("没有表白信息");
else
alert("访问出错！");
);
getAllMsg(); // 执行方法
</script>
</body>
</html>5.创建数据库
创建数据库，并添加 messages 表.
-- 设置编码格式
set character_set_database=utf8;
set character_set_server=utf8;
-- 创建数据库
create database if not exists messagewall;
-- 使用数据库
use messagewall;
-- 创建messages表
drop table if exists messages;
create table messages (`from` varchar(255), `to` varchar(255), `message`
varchar(2048));6.部署项目
（1）在IDEA中配置Tomcat，需要先下载一个插件：
（2）然后点击 Add Configuration
（3）选择Tomcat
（4）可以改个名字，然后点击ok
（5）启动Tomcat
这样就说明启动成功啦！
（6）在浏览器输入项目对应URL
成功访问！
7.效果展示
初始界面：
查询数据库：
数据库为空！
输入信息并点击表白：
提示表白成功！并从服务器获取信息展示在下方：
查询数据库中信息：
可以看到成功将数据写入数据库中！
结束啦！祝大家度过一个快乐的520 ！
java小项目之：教你做个聊天系统！(代码片段)
Java小项目之：聊天系统今天给大家带来的java练手小项目是一个简单的聊天室，界面简单，操作不难。分为注册系统，登录系统和聊天系统三部分，很适合java小白练手。完整的源码和素材请关注并私信我获取！界面展示：代码展... 查看详情
手把手教你做javaweb项目：登录模块
现如今，无论是客户端还是移动端，无论是电动登陆还是社交平台登陆，无处不在的“登陆”。那么你知道怎么制作吗？今天就为你娓娓道来：用户登录在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用户的身... 查看详情
几分钟教你做个原创视频，赚钱引流两不误
...代理真的把人请过来做广告。650)this.width=650;"alt="几分钟教你做个原创视频，赚钱引流 查看详情
计算机毕业设计springboot校园表白墙小程序管理系统最新版
...34a;作者：计算机编程-吉哥🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。🍊心愿：点赞👍收藏⭐... 查看详情
程序员-这有一份520表白秘笈送给你
转眼又到了520表白节了，咱们程序员应该如何表白呢，接下来笔者就以亲自动笔给你们一份独家的表白秘笈。一、比心这个我之前介绍过母亲节的祝福方式https://blog.csdn.net/BEYONDMA/article/details/90137479，就是利用python的print函数去输... 查看详情
java小项目之：教你做电子日历！
Java小项目之：教你做电子日历！<!doctypehtml><html><head><metacharset="utf-8"><title>日历控件</title><scriptsrc="js/new_file.js"defer></script></he 查看详情
圣诞要到了~教你用python制作一个表白神器——照片墙，祝你成功(代码片段)
马上圣诞节，快到了！~又到了一年一度表白的时候了今天教你一个程序员方式的表白！看一下效果图：要什么样的，图案都可以自定义的首先，准备阶段收集你喜欢人（或者你）的照片，多多... 查看详情
手把手教你做项目多线程篇——基础知识详解(代码片段)
...互斥锁信号量送点资源导读随着暑假的推进，手把手教你做项目前边的准备也差不多了后续的项目也渐渐要开始了但是正式发出来可能要等一段时间前后端都是我一个人确实有点费力（毕竟我也是菜鸡），后面我... 查看详情
怎么表白女生会答应？pua浪迹教你四招！
又到了PUA浪迹分享经验的时候了，经常有一些男生问我如何跟女生表白，下面我就给大家分享几个经验 首先，我要强调的是，表白是快要胜利冲锋的号角，不是战斗开始的钟声。如果没有把握，最好不要把话的说的太死，因... 查看详情
[教你做小游戏]《五子棋》怎么存棋局信息？(代码片段)
1.问题描述如果让你做个联机《五子棋》游戏，你会怎么存储棋盘上的棋子信息呢？我的意思是，根据你存储的这些信息，就可以知道：谁是黑棋？谁是白棋？现在游戏结束了吗？若游戏结束，谁赢了？若没结束，现在该谁下棋... 查看详情
手把手教你做产品经理
课程目录：001说在前面的话002我的互联网观003与你息息相关的未来004我们应该如何让学习更有效率005我们应该如何让学习更有效率006真实产品案例-案例学习重点与项目背景007真实产品案例-大讨论与项目定调008真实产品案例-用户... 查看详情
手把手教你做项目web框架flask篇——基础用法详解(代码片段)
目录导读为什么用flask安装flask启动flaskflask里name的用处转换器和变量规则重定向设置错误页面json数据读取cookie和session对cookie的获取和删除session操作request的使用蓝图开发必备视图资源分享导读今天接着为暑假的项目做准备，... 查看详情
python编写关不掉的流氓表白软件——快去找你爱的他表白吧(代码片段)
...吧部分结果演示：源代码cc.png部分结果演示：520到了，柚子学姐教你用python表白啊.mp4源代码fromtkinterimport*fromtkinterimportmessageboxdefcloseallwindow():window.destroy()defcloseWindow() 查看详情
520了，用32做个简单的小程序(代码片段)
此文转载自：https://blog.csdn.net/k_ksy/article/details/106233645520到了，看着朋友圈里的花式秀恩爱，平常午餐最爱吃的泡面都变得不那么香了。于是！突发奇想，突然就来了更新的想法，今天用32来做一个非常简单的小程序：简单放个... 查看详情
程序员520表白方式(代码片段)
按ctrl+f然后输入99966999999666999999669966669966699996669966669999699999999699999999699666699669966996699666699996699999999999999966996666996996666996996666999966669999999999996666699996669966669969966 查看详情
手把手教你做一个缓存工具(代码片段)
日常开发中，某些数据接口即使优化到极致，都难免还会存在计算量巨大导致响应过慢，多数情况单独做一个统计表用于存放这些处理后的数据用于读取，或者接入redis/memcache存数据，就是说单次响应本身是可以接受较慢一些的... 查看详情
手把手教你做蓝牙小车
第1节选择Arduino开发板1.1Arduino是什么对Arduino，官方有一堆解释。作为一个软件程序猿，在我眼里，Arduino是学习“可怕硬件”的一个便捷通道。它把复杂的硬件名称，属性给我们隐藏起来，只需要一些简单的软件知识，就可以学... 查看详情
精高手教你做banner！如何把banner做得传情达意
编者按：初入职场的设计师，可能每天都要做大量banner，工作多了，创意跟不上怎么办？其实创作banner也有规律可循，网易的同学就用大量案例+多个角度分享了他的经验，是一篇不可多得的经典文... 查看详情