表白墻
前言
基于MySQL數(shù)據(jù)庫和servlet實現(xiàn)的前后端交互的服務(wù)器版本表白墻。在頁面輸入表白內(nèi)容，在本地通過數(shù)據(jù)庫存儲歷次表白內(nèi)容，保證網(wǎng)頁刷新重進時數(shù)據(jù)仍存在。以下為打開表白墻效果展示：
我們可以在輸入框輸入表白對象，表白內(nèi)容然后提交就能顯示到新動態(tài)中，提交之后輸入框自動清空內(nèi)容。
完整項目代碼可以通過我的gitee獲取MessageWall
1. 環(huán)境部署
1.1 創(chuàng)建maven項目
我們在idea里面點擊new project創(chuàng)建一個maven項目，然后一路next選擇好項目位置以及命名即可。
1.2 引入依賴
在創(chuàng)建完maven項目之后我們需要加載依賴，部分同學(xué)可能由于網(wǎng)絡(luò)問題難以加載，可以多試幾遍，實在不行可以更換國內(nèi)的鏡像下載此處不作多介紹。以下需要引入的依賴主要有：java.servlet-api、mysql-connector-java，以及后續(xù)發(fā)送json格式的數(shù)據(jù)需要的jackson依賴（jackson-databind）
我們通過maven倉庫官網(wǎng)https://mvnrepository.com/ 即可獲取。
如圖：復(fù)制鏈接黏貼到我們項目的pom.xml文件
代碼 ： 以下是我部署的依賴可以直接復(fù)制黏貼
<dependencies>
<!-- servlet依賴-->
<!-- 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>
<!-- jackson依賴-->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.14.2</version>
</dependency>
<!-- 數(shù)據(jù)庫依賴-->
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
</dependencies>
1.3 創(chuàng)建目錄結(jié)構(gòu)
在我們的webapp目錄下面創(chuàng)建一個WEB-INF包并創(chuàng)建一個web.xml，此處結(jié)構(gòu)以及名字不能改動。
web.xml內(nèi)容：
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
</web-app>
1.4 部署程序
我們在插件市場搜索 Smart Tomcat 插件，將Tomcat集成到idea就不用我們手動打包，之后點擊即可運行。
然后點擊新增運行配置，將Smart Tomcat加入，此處選擇Tomcat路徑，如果還沒有下載Tomcat，可以通過官網(wǎng)下載。博主使用的是 3.1版本的servlet＋tomcat 8 。
然后就可以點擊運行：出現(xiàn)以下結(jié)果就是部署成功了。之后我們就可以通過127.0.0.1:8080/MessageWall/xx.html(html頁面)訪問，其中MessageWall是Context path，一般默認是項目名。
2. 前端頁面
由于該程序只是作為我們學(xué)習(xí)使用servlet實現(xiàn)前后端交互的一個開端，我們我們前端頁面只包括：輸入框 input 、提交按鈕 button 、無語義標簽 div 用來劃分頁面。
頁面展示：
HTML代碼： 除了html本身代碼還包含通過 style 標簽引入的css代碼，通過 script 標簽引入的js代碼。
通過css實現(xiàn)頁面樣式以及布局，通過js實現(xiàn)提交按鈕的點擊效果（點擊變灰）以及向服務(wù)器發(fā)送GET請求并獲取數(shù)據(jù)加載到頁面。
注意： 本次我們采用的是通過 form表單構(gòu)造json格式的get請求發(fā)送到服務(wù)器 ，需要通過 jquery的ajax 實現(xiàn)：
- 導(dǎo)入jquery cdn，在瀏覽器搜索即可，也可以直接下載我的
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
- 通過ajax構(gòu)造請求
$.ajax({
type: 'get',
url: 'message',
success: function(body) {
// 此處拿到的 body 就是一個 js 的對象數(shù)組了.
// 本來服務(wù)器返回的是一個 json 格式的字符串, 但是 jquery 的 ajax 能夠自動識別
// 自動幫我們把 json 字符串轉(zhuǎn)成 js 對象數(shù)組
// 接下來遍歷這個數(shù)組, 把元素取出來, 構(gòu)造到頁面中即可
let containerDiv = document.querySelector('.qian')
for (let message of body) {
// 針對每個元素構(gòu)造一個 div
let rowDiv = document.createElement('div');
rowDiv.className = 'row message';
rowDiv.innerHTML = message.from + ' 對 ' + message.to + ' 說: ' + message.message;
containerDiv.appendChild(rowDiv);
}
}
});
完整代碼：
<!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>
/* * 通配符選擇器, 是選中頁面所有元素 */
* {
/* 消除瀏覽器的默認樣式. */
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 600px;
margin: 20px auto;
}
h1 {
text-align: center;
}
p {
text-align: center;
color: #666;
margin: 20px 0;
}
.row {
/* 開啟彈性布局 */
display: flex;
height: 40px;
/* 水平方向居中 */
justify-content: center;
/* 垂直方向居中 */
align-items: center;
}
.row span {
width: 80px;
}
.row input {
width: 200px;
height: 30px;
}
.row button {
width: 280px;
height: 30px;
color: white;
background-color: orange;
/* 去掉邊框 */
border: none;
border-radius: 5px;
}
/* 點擊的時候有個反饋 */
.row button:active {
background-color: grey;
}
.qian{
width: 300px;
height: 500px;
margin: 20px auto;
background-color: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>表白墻</h1>
<p>輸入內(nèi)容后點擊提交, 信息會顯示到下方表格中</p>
<div class="row">
<span>誰: </span>
<input type="text">
</div>
<div class="row">
<span>對誰: </span>
<input type="text">
</div>
<div class="row">
<span>說: </span>
<input type="text">
</div>
<div class="row">
<button id="submit">提交</button>
</div>
<div class="row">
<button id="revert">撤銷</button>
</div>
<!-- 公示欄-->
<div class="qian">
<h2>新動態(tài)</h2>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
// 實現(xiàn)提交操作. 點擊提交按鈕, 就能夠把用戶輸入的內(nèi)容提交到頁面上顯示.
// 點擊的時候, 獲取到三個輸入框中的文本內(nèi)容
// 創(chuàng)建一個新的 div.row 把內(nèi)容構(gòu)造到這個 div 中即可.
let containerDiv = document.querySelector('.qian');
let inputs = document.querySelectorAll('input');
let button = document.querySelector('#submit');
button.onclick = function() {
// 1. 獲取到三個輸入框的內(nèi)容
let from = inputs[0].value;
let to = inputs[1].value;
let msg = inputs[2].value;
if (from == '' || to == '' || msg == '') {
return;
}
// 2. 構(gòu)造新 div
let rowDiv = document.createElement('div');
rowDiv.className = 'row message';
rowDiv.innerHTML = from + ' 對 ' + to + ' 說: ' + msg;
containerDiv.appendChild(rowDiv);
// 3. 清空之前的輸入框內(nèi)容
for (let input of inputs) {
input.value = '';
}
// 4. [新增] 給服務(wù)器發(fā)起 post 請求, 把上述數(shù)據(jù)提交到服務(wù)器這邊
let body = {
"from": from,
"to": to,
"message": msg
};
let strBody = JSON.stringify(body);
console.log("strBody: " + strBody);
$.ajax({
type: 'post',
url: 'message',
data: strBody,
contentType: "application/json; charset=utf8",
success: function(body) {
console.log("數(shù)據(jù)發(fā)布成功");
}
});
}
let revertButton = document.querySelector('#revert');
revertButton.onclick = function() {
// 刪除最后一條消息.
// 選中所有的 row, 找出最后一個 row, 然后進行刪除
let rows = document.querySelectorAll('.message');
if (rows == null || rows.length == 0) {
return;
}
containerDiv.removeChild(rows[rows.length - 1]);
}
// [新增] 在頁面加載的時候, 發(fā)送 GET 請求, 從服務(wù)器獲取到數(shù)據(jù)并添加到頁面中
$.ajax({
type: 'get',
url: 'message',
success: function(body) {
// 此處拿到的 body 就是一個 js 的對象數(shù)組了.
// 本來服務(wù)器返回的是一個 json 格式的字符串, 但是 jquery 的 ajax 能夠自動識別
// 自動幫我們把 json 字符串轉(zhuǎn)成 js 對象數(shù)組
// 接下來遍歷這個數(shù)組, 把元素取出來, 構(gòu)造到頁面中即可
let containerDiv = document.querySelector('.qian')
for (let message of body) {
// 針對每個元素構(gòu)造一個 div
let rowDiv = document.createElement('div');
rowDiv.className = 'row message';
rowDiv.innerHTML = message.from + ' 對 ' + message.to + ' 說: ' + message.message;
containerDiv.appendChild(rowDiv);
}
}
});
</script>
</body>
</html>
3. 后端實現(xiàn)
在后端實現(xiàn)中創(chuàng)建兩個類即可，MessageServlet類由于實現(xiàn)前后端交互，DBUtils類用于操作數(shù)據(jù)庫的工具類。
3.1 后端邏輯
- 前后端交互的數(shù)據(jù)約定為 json格式，在后端實現(xiàn)中也是通過導(dǎo)入的jackson庫 解析該數(shù)據(jù)。
- 點擊提交：瀏覽器將表白信息發(fā)送到服務(wù)器，對應(yīng)著一對請求（Post）和響應(yīng)
- 頁面加載：瀏覽器從服務(wù)器哪獲取到我們之前輸入過的表白信息顯示在頁面，也對應(yīng)一組請求（Get）與響應(yīng)，該響應(yīng)的body部分 通過json數(shù)組存儲json格式的每條數(shù)據(jù)（json對象）。
由此我們在MassageServlet代碼中只用實現(xiàn) doPost（）方法向服務(wù)器發(fā)送數(shù)據(jù)，doGet（）方法從服務(wù)器獲取數(shù)據(jù)，save（）方法調(diào)用DBUtils類向數(shù)據(jù)庫存儲信息，load（）方法從數(shù)據(jù)庫取所有信息；
3.2 后端代碼
MassageServlet.class:文章來源：http://www.zghlxwxcb.cn/news/detail-448630.html
- 在該類中 @WebServlet(“/message”) 對應(yīng)著我們前端頁面通過ajax構(gòu)造請求發(fā)送的url路徑一致，此處我們寫的是相對路徑。
- 導(dǎo)入jackson庫之后我們就可以通過ObjectMapper類的readValue（）讀取請求中body的數(shù)據(jù)并規(guī)定以Massage.class格式讀取，然后賦值給massage；
Message message = objectMapper.readValue(req.getInputStream(),Message.class);
- massage.class，該類是為了存儲讀取到的json格式的鍵值對數(shù)據(jù)而創(chuàng)建。
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
/**
* @author zq
*/
class Message{
public String from;
public String to;
public String message;
}
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
//private List<Message> messageList = new ArrayList<>();
//向服務(wù)器發(fā)送數(shù)據(jù)
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
ObjectMapper objectMapper = new ObjectMapper();
//讀取body中的內(nèi)容賦值給massage對象
Message message = objectMapper.readValue(req.getInputStream(),Message.class);
//通過簡單粗暴的方法保存,list
//messageList.add(message);
save(message);
//設(shè)置響應(yīng)狀態(tài)碼(可以不設(shè)置)
resp.setStatus(200);
}
//從服務(wù)器獲取數(shù)據(jù)
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json;charset=utf8");
ObjectMapper objectMapper = new ObjectMapper();
List<Message> messageList = load();
// objectMapper.writeValue(resp.getWriter(),messageList);
objectMapper.writeValue(resp.getWriter(),messageList);
}
//提供一對方法
//王數(shù)據(jù)庫存一條消息
private void save(Message message) {
//這是基本的jdbc操作
//1.建立連接
Connection connection = null;
PreparedStatement statement =null;
try {
connection = DBUtil.getConnection();
//2.構(gòu)造sql語句
String sql = "insert into message value(?,?,?)";
statement = connection.prepareStatement(sql);
statement.setString(1,message.from);
statement.setString(2,message.to);
statement.setString(3,message.message);
//3.執(zhí)行sql
statement.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally {
//4.關(guān)閉連接
DBUtil.close(connection,statement,null);
}
}
//從數(shù)據(jù)庫取所以消息
private List<Message> load(){
List<Message> messageList = new ArrayList<>();
//1.建立連接
Connection connection = null;
PreparedStatement statement =null;
ResultSet resultSet = null;
try {
connection = DBUtil.getConnection();
//2.構(gòu)造sql語句
String sql = "select * from message ";
statement = connection.prepareStatement(sql);
//3.執(zhí)行sql
resultSet = statement.executeQuery();
//4.遍歷結(jié)果集合
while (resultSet.next()){
Message message = new Message();
//根據(jù)列名取出sql語句
message.from = resultSet.getString("from");
message.to = resultSet.getString("to");
message.message = resultSet.getString("message");
messageList.add(message);
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
//4.關(guān)閉連接
DBUtil.close(connection,statement,resultSet);
}
return messageList;
}
}
DBUtils.class:文章來源地址http://www.zghlxwxcb.cn/news/detail-448630.html
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* @author zq
*/
/*通過這個類將數(shù)據(jù)庫連接封裝起來
* 此處將DBUtil作為一個工具類，提供static方法共其他代碼使用
* */
public class DBUtil {
//靜態(tài)成員跟隨類對象，類對象在整個進程中只有唯一一份
//靜態(tài)成員相對于也是唯一實例，（單例模式，餓漢模式）
private static DataSource dataSource = new MysqlDataSource();
static{
//使用靜態(tài)代碼塊，針對dataSource進行初始化操作
((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/javaee?characterEncoding=utf8&useSSL=false");
((MysqlDataSource)dataSource).setUser("root");
((MysqlDataSource)dataSource).setPassword("123456");
}
//通過該方法進行建立連接
public static Connection getConnection() throws SQLException {
return dataSource.getConnection();
}
//通過這個方法進行釋放資源
public static void close(Connection connection, PreparedStatement preparedStatement, ResultSet resultSet){
//此處三個try-catch分開寫更好
// 避免前面的出問題后面的執(zhí)行不了
if (resultSet !=null){
try {
resultSet.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (preparedStatement != null){
try {
preparedStatement.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (connection != null){
try {
connection.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
到了這里，關(guān)于實現(xiàn)第一個服務(wù)器版本的表白墻程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
