520到了，教你做個JavaWeb表白牆小專案
目錄
1.配置 Maven 專案
1.1 建立 Maven 專案
1.2 引入相關依賴
1.3 專案總結構
2. 約定前後端互動介面
3.服務端程式碼
3.1 建立Message類
3.2 建立工具類
3.3 新增資訊類（AddMessage）
3.4 查詢資訊類（MessageList）
4. 前端程式碼
5.建立資料庫
6.部署專案
7.效果展示
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.效果展示
初始介面：
查詢資料庫：
資料庫為空！
輸入資訊並點選表白：
提示表白成功！並從伺服器獲取資訊展示在下方：
查詢資料庫中資訊：
可以看到成功將資料寫入資料庫中！
————————————————
版權宣告：本文為CSDN博主「澄白易」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/m0_59140023/article/details/124871328