⭐相关阅读推荐⭐
🌙 前端项目—待办事项（HTML+CSS+JavaScript实现）🌙
Servlet ：Servlet API（HttpServlet Request Response）
Tomcat ：Tomcat使用教程
前端网络：Fiddler使用教程（HTTP抓包 前端debug）
WebAPI—DOM （HTTL、CSS、Java Script应用及案例）
目录
① 环境搭建
- 创建 Maven 项目
- pom.xml 中引入 servlet 依赖，刷新Maven
servlet (3.1.0)
jackson (2.13.1) - 创建目录结构（src -> main -> webapp -> WEB-INF -> web.xml）
<!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> - 在 webapp 目录下编写 html 文件 xxx.html
- 新建 Java 文件编写代码（extends HttpServlet，重写方法，@WebServlet("/Path")）
-
打包部署（Smart Tomcat插件使用教程（IDEA））
② 约定接口
约定好浏览器都发啥请求，对应的服务器都返回啥响应
MessageServlet.java 文件
1. 从服务器获取全部留言（writeValueAsString 把Java对象转成字符串）
请求：GET/message
响应：HTTP/1.1 200 OK
body (json形式，{ }是一个json对象，[ ]多个数组)
// 这个类表示一条消息的详细情况
class Message {
public String from;
public String to;
public String message;
}
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
// 通过这个数组，来表示所有的消息
private List<Message> messages = new ArrayList<>();
// 把这个服务器存储的消息列表返回到浏览器
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/html;charset=utf-8");
// 获取到消息列表
// 此处要做的是：把当前 messages 这个数组，转成 JSON 格式，返回给浏览器
ObjectMapper objectMapper = new ObjectMapper();
// 把 Java 代码中的对象，转成 JSON 字符串
String jsonString = objectMapper.writeValueAsString(messages);
resp.getWriter().write(jsonString);
}
}2. 实现新增消息（readValue 把字符串转成 Java 对象）
// 实现新增消息
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
// 读取请求中的 JSON 字符串，转成 Message 对象，然后往 messages 进行添加即可
ObjectMapper objectMapper = new ObjectMapper();
Message message = objectMapper.readValue(req.getInputStream(), Message.class);
messages.add(message);
resp.getWriter().write("insert ok");
}3. html修改
引入 jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>// onclick中的代码：
// 4. 把当前拿到的消息给发到服务器这边
let body = {
from: from,
to: to,
message: message
};
$.ajax({
url:"message",
method:"post",
contentType:"application/json;charset=utf-8",
// 此处的 JSON.stringify 相当于 Java objectMapper.writeValue
data: JSON.stringify(body),
success: function(data, status) {
console.log(data);
}
})
// 单独代码：
// 1. 在页面加载的时候，去从服务器获取消息列表，并显示在网页上
function load () {
$.ajax({
method: "get",
url: "message",
success: function(data, status) {
// 此处得到的响应 data 其实已经被 jquery 给转成一个对象数组了，就可以直接进行操作
// 但是这里的自动转换有一个前提，服务器响应的 header 中的 Content-Type 是 application/json
let container = document.querySelector('.container');
for (let message of data) {
// 遍历每个元素，针对每个元素创建一个 div 标签，并给这个标签加载到页面中
let row = document.createElement('div');
row.className = 'row';
row.innerHTML = message.from + '对' + message.to + '说：' + message.message;
container.append(row);
}
}
})
}
load();4. 创建并连接数据库（DBUtil.java 文件 ：JDBC编程 连接数据库【精华】）
引入数据库第三方库，MySQL Connector（5.1.47）
在 main 文件夹下新建 db.sql 文件，准备好sql语句，在MySQL中运行，完成数据库创建
drop database if exists java101_messagewall;
create database java101_messagewall;
use java101_messagewall;
create table message (
`from` varchar(50),
`to` varchar(50),
`message` varchar(1024)
);改写 MessageServlet.java文件 中的两个方法
// 这个方法从数据库获取到消息列表
private List<Message> getMessages() {
Connection connection = null;
PreparedStatement statement = null;
ResultSet resultSet = null;
List<Message> messages = new ArrayList<>();
try {
// 1. 和数据库建立连接
connection = DBUtil.getConnection();
// 2. 构造 SQL
String sql = "select * from message";
statement = connection.prepareStatement(sql);
// 3. 执行 SQL
resultSet = statement.executeQuery();
// 4. 遍历结果集合
while (resultSet.next()) {
Message message = new Message();
message.from = resultSet.getString("from");
message.to = resultSet.getString("to");
message.message = resultSet.getString("message");
messages.add(message);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(connection, statement, resultSet);
}
return messages;
}
// 这个方法往数据库里写一个消息
private void addMessage(Message message) {
Connection connection = null;
PreparedStatement statement = null;
try {
connection = DBUtil.getConnection();
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);
statement.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(connection, statement, null);
}
}③ HTML文件源码
<!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>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: 0 auto;
}
h1 {
text-align: center;
padding: 20px 0;
}
p {
font-size: 12px;
color: #666;
padding: 10px 0;
text-align: center;
}
.row {
display: flex;
height: 40px;
align-items: center;
justify-content: center;
}
.row span {
width: 100px;
}
.row .edit {
width: 200px;
height: 36px;
}
.row .submit {
width: 300px;
height: 40px;
color: #fff;
background-color: orange;
/* 去掉边框 */
border: none;
}
.row .submit:active {
background-color: green;
}
</style>
<div class="container">
<h1>表白墙</h1>
<p>输入后点击提交，将会把消息显示在墙上</p>
<div class="row">
<span>谁：</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>对谁：</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>说什么：</span>
<input type="text" class="edit">
</div>
<div class="row">
<input type="button" value="提交" class="submit">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
let submitButton = document.querySelector('.submit');
submitButton.onclick = function() {
// 1. 获取到输入框里面的内容
let edits = document.querySelectorAll('.edit');
let from = edits[0].value;
let to = edits[1].value;
let message = edits[2].value;
console.log(from + ", " + to + ", " + message);
if (from == '' || to == '' || message == '') {
return;
}
// 2. 根据输入框的内容，构造 HTML 元素，添加到页面中
// 接下来的每个消息，都使用 div.row 来去表示
let row = document.createElement('div');
row.className = 'row';
row.innerHTML = from + '对' + to + '说：' + message;
let container = document.querySelector('.container');
container.appendChild(row);
// 3. 把上次输入的内容清空
for (i = 0; i < 3; i++) {
edits[i].value = '';
}
// 4. 把当前拿到的消息给发到服务器这边
let body = {
from: from,
to: to,
message: message
};
$.ajax({
url:"message",
method:"post",
contentType:"application/json;charset=utf-8",
// 此处的 JSON.stringify 相当于 Java objectMapper.writeValue
data: JSON.stringify(body),
success: function(data, status) {
console.log(data);
}
})
}
// 原有的逻辑不变，下面重写来写
// 1. 在页面加载的时候，去从服务器获取消息列表，并显示在网页上
function load () {
$.ajax({
method: "get",
url: "message",
success: function(data, status) {
// 此处得到的响应 data 其实已经被 jquery 给转成一个对象数组了，就可以直接进行操作
// 但是这里的自动转换有一个前提，服务器响应的 header 中的 Content-Type 是 application/json
let container = document.querySelector('.container');
for (let message of data) {
// 遍历每个元素，针对每个元素创建一个 div 标签，并给这个标签加载到页面中
let row = document.createElement('div');
row.className = 'row';
row.innerHTML = message.from + '对' + message.to + '说：' + message.message;
container.append(row);
}
}
})
}
load();
// 2. 用户点击提交的时候，把当前的消息发给服务器
</script>
</body>
</html>
1625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
