目录
🎓配置Maven项目
🎈引入相关依赖
servlet依赖,jackson依赖,mysql依赖
<?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>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<!--引入依赖关系-->
<dependencies>
<!-- 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>
<!--设置json语言-->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.15.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
</dependencies>
</project>
🎈项目总结构
🎓约定前后端交互接口
所谓“前后端交互接口”是进行web开发中的关键环节,具体来说:就是允许页面给服务器发送哪些HTTP请求,并且每种请求预期获得什么样的HTTP响应。
1.从服务器上获取全部信息
- 请求:GET
- 响应:JSON格式
2.向服务器提交信息
- 请求:JSON格式
- 响应:JSON格式
🎓了解需求
我们在学习生涯中,我们要从最简单的开始做起,只有一个页面。
最终是这种效果图。我们要对这个页面进行一系列的前后端交互操作。
但是这里的数据都是浏览器的内存中保存的,刷新页面/关闭页面,东西都没有了。咱们希望表白墙里的数据,能够长期存在,不同的浏览器/页面中,都可以看到同一份数据。——这就需要引入服务器和后台代码。
所以我们在实现前后端交互部分之后,我们需要引入数据库对数据进行保存,在下次访问该页面的时候,依旧存储了上述的信息。
🎓服务器代码
🎈创建Message类
class Message{
public String from;
public String to;
public String message;
@Override
public String toString() {
return "Message{" +
"from='" + from + '\'' +
", to='" + to + '\'' +
", message='" + message + '\'' +
'}';
}
}
注意:@Setter和@Getter会自动生成所有的get和set方法
此处,服务器要实现的功能,主要是两个方面:
- 1.页面加载的时候,网页要从服务器这里获取到当前表白数据(让网页端给服务器发起http请求,服务器返回响应里就带着刚才的这些数据)
- 2.点击提交的时候,网页就要把用户输入的信息,发送到服务器这边,服务器负责保存。
在一个网站中,服务器起到的最主要的效果,往往就是“存储数据”,因此服务器这边往往也就需要能够提供两种风格的接口,存数据,取数据。
🎓前端代码
大家有一定了解html和css,我这里主要带你们了解js方面的代码。
js的操作就是就是将文本框里面的内容在点击提交按钮之后,会自动创建一个div标签,在其下显示出来。
并且提交之后,会清空文本框里面的内容。
🎓前后端交互部分
使用服务器,目的是为了能够在服务器这边存储用户提交的信息,并且能够把信息获取下来。
服务器这边就需要给网页提供两个http接口。
1》获取消息 网页加载的时候,给服务器发起一个ajax请求
- 请求:GET /message
- 响应: HTTP/1.1 200 OK
- Content-Type:application/json
(注意:这里的请求和响应是自己设定的,等以后工作了,会商讨出最终的格式)
2》提交信息 用户点击 提交 按钮的时候,ajax给服务器发一个请求,目的是为了把用户在输入框输入的内容,发送给服务器。
- 请求:POST /message
- Content-Type:application/json
{
from:'张三'
to:'李四'
message:'我喜欢你很久了'
}
- 响应: HTTP/1.1 200 OK
正式编写代码之前,一定要把前后端交互的接口给确定下来。这个就是后续编写代码的依据。
- 编写前端代码:构造http请求(请求是啥样的?)解析http响应(响应是啥样的?)
- 编写后端代码:解析http请求(请求是啥样的?)构造http响应(响应式是啥样的?)
- 先写前端代码,发送请求
- 再写后端代码,解析请求,构造响应
- 再写前端代码,解析响应
将上述的网页放到webapp目录里,tomcat这样的一个项目,可以包含一些html,css,js这些内容都是在webapp目录中的。
🎈主要思路
让客户端把用户输入的数据给提交给服务器,用户点击提交按钮的时候会触发一个ajax请求。
请求格式:
POST /message
Content-Type:application/json
{
from:'张三',
to:'李四',
message:'我喜欢你很久了'
}
响应格式:
HTTP/1.1 200 OK
页面加载的时候,从服务器这边获取到之前保存的信息,页面加载的时候,发起一个ajax请求。
请求格式:
GET /message
响应格式:
HTTP/1.1 200 OK
Content-Type: application/json
[
{
from:'张三',
to:'李四',
message:'我喜欢你很久了'
}]
🚩提交信息
🍭让前端发起一个ajax请求
使用ajax,需要先引入jquery这个库
jquery网站点击进去即可。
用户填写的内容发送给服务器,服务器进行保存。
我们看到js对象转换成json字符串,我们想到ObjectMapper类,调用了writeValueAsString方法。将对象转换成json字符串。
上述代码在点击按钮的回调函数中,在点击按钮之后进行调用。
button.onclick = function () { // 1. 获取到三个输入框的内容 let from = inputs[0].value; let to = inputs[1].value; let msg = inputs[2].value; if (from == '' || to == '' || msg == '') { return; } // 2. 构造新 div let rowDiv = document.createElement('div'); rowDiv.className = 'row message'; rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg; containerDiv.appendChild(rowDiv); // 3. 清空之前的输入框内容 for (let input of inputs) { input.value = ''; } //4.用户填写的内容发送给服务器,服务器进行保存 //$是jquery提供的全局变量, ajax是&一个方法 //参数是js对象,这里面有很多属性 let requestBody = { "from": from, //from里面变量的值,就是第一个输入框的内容“张三” "to": to, //to变量的值,就是第二个输入框的内容 “李四” "message": msg //message变量的值,就是第三个输入框的内容“我喜欢你” }; //上述body是一个js对象,还需要转成字符串 let jsonString = JSON.stringify(requestBody); $.ajax({ type: 'post', url: 'message', contentType: 'application/json;charset=utf8', data: jsonString, success: function (responseBody) { //这个回调就是收到响应之后要执行的代码了 console.log("responseBody: " + responseBody); } }) }
🍭服务器读取上述请求,并计算出响应
需要使用jackson读取到前端这里的数据,并且进行解析。
class Message{
public String from;
public String to;
public String message;
@Override
public String toString() {
return "Message{" +
"from='" + from + '\'' +
", to='" + to + '\'' +
", message='" + message + '\'' +
'}';
}
}
要确保java代码中类的属性的名字和json中的属性的名字保持一致。
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//读取前端发来的数据,保存到服务器中
Message message=objectMapper.readValue(req.getInputStream(),Message.class);
System.out.println("请求中收到的message"+message);
//存储数据(服务器中存储数据)
//可以使用一个集合类,把所有收到的message都存在内存中
//保存到内存中,并非是一个非常合理的做法,一旦重启服务器,数据就丢失了
//相比之下,存储到数据库中,更科学(持久化存储)
messageList.add(message);
//返回响应
resp.setStatus(200);
resp.getWriter().write("ok");
// resp.setContentType("application/json");
// resp.getWriter().write("{ ok: true }");
}
🍭回到前端代码,处理服务器返回的响应
此处success回调函数,不是立即执行的,而是在浏览器收到服务器返回的成功这样的响应的时候才会执行到function,这个函数的第一个参数,就是响应数据的responsebody中的内容。
为了和请求对应上,一般服务器返回的数据,也会按照json数据来组织。
🍭总过程
用户在浏览器中输入数据,服务器获取到messageWall.html网页的数据,也就是服务器收到了请求(from to message三个参数),服务器收到了请求之后,浏览器就收到了响应,返回ok。
服务器收到的请求
浏览器收到的响应
我们用fidder软件进行抓包,看看我们的请求报文和响应报文是否和ajax发出的请求一样
请求报文
上述请求报文中地址是 http://127.0.0.1:8080/message_wall/message
和ajax中写的是一个相对路径,最终发送的请求,会被转换成绝对路径,就是把相对路径前面,拼上当前html所在的context path中。
响应报文:
🚩拿数据回到客户端页面并显示
当前已经把数据提交给服务器保存了,目前还需要能够把服务器的数据拿回到客户端页面上,并显示。
为什么还要从服务器拿消息呢?
- 1.当前页面上显示的数据,也是在浏览器内存中保存到饿,刷新页面/关闭了重新打开,之前的数据就没了
- 2.其他的客户端打开页面也是有数据的。
页面加载的时候,发起这个get请求
请求:
GET /message
响应:
HTTP/1.1 200 ok
Content-Type:application/json
🍭 页面加载时发起http请求
1>客户端在页面加载的时候,发起了一个http请求
🍭处理请求并生成响应
服务器收到的每条信息,都转成Message对象,放到上述List中,返回的结果,也就是这个List的数据,需要把List里的每个Message取出来,转成json字符串,最终拼到一起,得到了响应结果。
jackson本身就支持List类型转换成json数组
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//通过这个方法来处理消息列表的get请求,直接返回数据即可
resp.setStatus(200);
resp.setContentType("application/json;charset=utf8");
String respJson=objectMapper.writeValueAsString(messageList);//
resp.getWriter().write(respJson);
}
jackson看到了messageList是一个List类型,转成的json字符串就是一个json数组[],jackson自动遍历List里的每个元素,把每个元素,分别都转成json字符串。
🍭将响应信息构造成页面元素
客户端收到响应,就需要针对响应数据进行解析处理,把响应中的信息,构造成页面元素,并显示出来。
$.ajax({
type: 'get',
url: 'message',
success: function (body) {
//拿到container这个元素
let containerDiv = document.querySelector('.container');//类选择器 获取到html中 <div class="container">
//处理服务器返回的响应数据(json格式的数据了)
for (let i = 0; i < body.length; i++) {
//body时一个数组,此时对message也就是js对象
//这个message对象里,有三个属性 from to message
let message = body[i];
//根据message对象构造成html片段,把这个片段显示到网页上
//此时得到了div标签
let div = document.createElement('div');
//还需要往里面设置一些属性 class="row" <div class="row"></div>
div.className = 'row';
//给这个div里设置内容
//此时就得到了 <div class="row">张三 对 李四 说 我喜欢你</div>
div.innerHTML = message.from + " 对 " + message.to + " 说: " + message.message;
//把div添加到containerDiv的末尾
containerDiv.appendChild(div);
}
}
});
每次收到响应了之后我们都需要创建一个div标签里面保存信息,依次往后插入div。
最终构造成了这个效果。
前端主要的工作就是:
1.发送ajax请求
2.收到响应之后,构造一下页面内容
🎈全过程
用户在浏览器中输入数据,服务器获取到messageWall.html网页的数据,也就是服务器收到了请求(from to message三个参数),服务器收到了请求之后,浏览器就收到了响应,返回ok。
但是我们在刷新页面之后内容都没有了,所以我们在页面加载的时候就发出http请求,我们就需要在将数据存储到messageList中,并且将数据返回给浏览器(处理请求并生成响应),然后将响应信息构造成页面元素。
所以之后我们点击提交按钮,发送信息给服务器,这个数据保存到messageList中了之后,会给messageList中每个Message对象取出来转换成json字符串,并生成响应,将响应信息由ajax来构造成页面元素,显示在页面中。
当我们结束进程之后,再进入网页,曾经的表白墙表白的信息,都烟消云散了。
这时候我们需要引入数据库来永久保存,不管我们关闭进程之后,下一次进程再次启动访问这个网页得时候,我们依旧能看到我们曾经写过的表白信息。
🎈引入数据库
- 1.引入数据库的依赖
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.47</version> </dependency>
- 2.建库建表 建库建表,需要用到sql,都可以写到文件中,后续如果需要把表啥的往其他机器上迁移,建表操作就会比较方便。
- 3.编写数据库代码 JDBC
1.创建数据源(设置路径,用户名以及密码登录mysql服务器)
创建MysqlDataSource实例,设置URL,username,password属性
2.建立连接
提供getConnection方法和Mysql服务器建立连接
3.构造sql语句
4.执行语句
5.回收资源
提供close方法,用来释放必要的资源
我们需要对之前的代码进行改动,我们就不需要创建MessageList列表了,我们可以将数据插入到数据库中。
🚩添加信息save方法
我们将数据存储到数据库中,就是用save方法存储替代了用MessageList集合类保存。
private void save(Message message) throws SQLException {
//通过这个方法,将数据存入到数据库中
DataSource dataSource=new MysqlDataSource();//创建数据源
//设置
@Override
((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/messageWall?
characterEncoding=utf8&useSSL=false");
((MysqlDataSource)dataSource).setUser("root");
((MysqlDataSource)dataSource).setPassword("105528clzyf.");
//1.建立连接
Connection connection=dataSource.getConnection();
//2.构造sql
String sql="insert into message values (?,?,?)";
PreparedStatement preparedStatement= connection.prepareStatement(sql);
preparedStatement.setString(1,"from");
preparedStatement.setString(2,"to");
preparedStatement.setString(3,"message");
//3.执行sql
preparedStatement.executeUpdate();
//4.回收资源
preparedStatement.close();
connection.close();
}
🚩查询信息load方法
将数据库中存储的数据,进行查询操作,load方法实现查询操作。
private void save(Message message) throws SQLException {
//通过这个方法,将数据存入到数据库中
DataSource dataSource=new MysqlDataSource();//创建数据源
//设置
@Override
((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/messageWall?
characterEncoding=utf8&useSSL=false");
((MysqlDataSource)dataSource).setUser("root");
((MysqlDataSource)dataSource).setPassword("105528clzyf.");
//1.建立连接
Connection connection=dataSource.getConnection();
//2.构造sql
String sql="insert into message values (?,?,?)";
PreparedStatement preparedStatement= connection.prepareStatement(sql);
preparedStatement.setString(1,"from");
preparedStatement.setString(2,"to");
preparedStatement.setString(3,"message");
//3.执行sql
preparedStatement.executeUpdate();
//4.回收资源
preparedStatement.close();
connection.close();
}
用ResultSet对象来存储每个Message对象,然后依次遍历,并插入到messageList中。
我们 提前在数据库中新增几个元素,为了后续打开页面之后直接就出现了这几个数据。
当我们还没有任何输入数据时,此时就已经显示了该四个数据,也就是在数据库中提前增加好的。后续如果用户输入之后,就可以继续在后面创建div标签显示在页面了。
此时我们就可以看到,输入张三 李四 我也爱你 ,此时就会在上面四个数据后面添加了新元素。
🎓完整代码
💻MessageServlet类
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
import com.sun.deploy.security.JarSignature;
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 javax.sql.DataSource;
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;
import static com.sun.deploy.security.JarSignature.load;
import static com.sun.deploy.util.SessionState.save;
class Message{
public String from;
public String to;
public String message;
@Override
public String toString() {
return "Message{" +
"from='" + from + '\'' +
", to='" + to + '\'' +
", message='" + message + '\'' +
'}';
}
}
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
private ObjectMapper objectMapper=new ObjectMapper();
//private List<Message> messageList=new ArrayList<>();
DataSource dataSource=new MysqlDataSource();//创建数据源
//设置
@Override
public void init() throws ServletException {
((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/messageWall?characterEncoding=utf8&useSSL=false");
((MysqlDataSource)dataSource).setUser("root");
((MysqlDataSource)dataSource).setPassword("105528clzyf.");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException, IOException {
//读取前端发来的数据
Message message=objectMapper.readValue(req.getInputStream(),Message.class);
System.out.println("收到的请求message"+message);
//将存储的信息保存到一个链表中
// messageList.add(message);
//TODO插入数据库
try {
save(message);
} catch (SQLException e) {
throw new RuntimeException(e);
}
//返回响应
resp.setStatus(200);
resp.getWriter().write("ok");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//通过这个方法来处理消息列表的get请求,直接返回数据即可
resp.setStatus(200);
resp.setContentType("application/json;charset=utf8");
//TODO从数据库中查询
List<Message> messageList=null;
try {
messageList=load();
} catch (SQLException e) {
throw new RuntimeException(e);
}
//从messageList中取出Message对象利用ObjectMapper类的write方法进行从对象转换成字符串操作,并做出响应
String respJson=objectMapper.writeValueAsString(messageList);//
resp.getWriter().write(respJson);
}
private void save(Message message) throws SQLException {
//通过这个方法,将数据存入到数据库中
//1.建立连接
Connection connection=dataSource.getConnection();
//2.构造sql
String sql="insert into message values (?,?,?)";
PreparedStatement preparedStatement= connection.prepareStatement(sql);
preparedStatement.setString(1,"from");
preparedStatement.setString(2,"to");
preparedStatement.setString(3,"message");
//3.执行sql
preparedStatement.executeUpdate();
//4.回收资源
preparedStatement.close();
connection.close();
}
private List<Message> load() throws SQLException {
//通过这个方法 ,从数据库中读取到message
//1.建立连接
Connection connection=dataSource.getConnection();
//2.构造SQL
String sql="select * from message";
PreparedStatement statement=connection.prepareStatement(sql);
//3.执行sql
ResultSet resultSet=statement.executeQuery();
//4.遍历结果结合
List<Message> messageList=new ArrayList<>();
while (resultSet.next()){
Message message=new Message();
message.from=resultSet.getString("from");
message.to=resultSet.getString("to");
message.message=resultSet.getString("message");
messageList.add(message);
}
//5.回收资源
resultSet.close();
statement.close();
connection.close();
//6.返回messageList
return messageList;
}
}
💻message_wall.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>
<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;
}
</style>
<!--前端引入第三方库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<p>输入内容后点击提交, 信息会显示到下方表格中</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">
xxx 对 xx 说 xxxx
</div> -->
</div>
<script>
// 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示.
// 点击的时候, 获取到三个输入框中的文本内容
// 创建一个新的 div.row 把内容构造到这个 div 中即可.
let containerDiv = document.querySelector('.container');
let inputs = document.querySelectorAll('input');
let button = document.querySelector('#submit');
button.onclick = function () {
// 1. 获取到三个输入框的内容
let from = inputs[0].value;
let to = inputs[1].value;
let msg = inputs[2].value;
if (from == '' || to == '' || msg == '') {
return;
}
// 2. 构造新 div
let rowDiv = document.createElement('div');
rowDiv.className = 'row message';
rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
containerDiv.appendChild(rowDiv);
// 3. 清空之前的输入框内容
for (let input of inputs) {
input.value = '';
}
//4.用户填写的内容发送给服务器,服务器进行保存
//$是jquery提供的全局变量, ajax是&一个方法
//参数是js对象,这里面有很多属性
let requestBody = {
"from": from, //from里面变量的值,就是第一个输入框的内容“张三”
"to": to, //to变量的值,就是第二个输入框的内容 “李四”
"message": msg //message变量的值,就是第三个输入框的内容“我喜欢你”
};
//上述body是一个js对象,还需要转成字符串
let jsonString = JSON.stringify(requestBody);
$.ajax({
type: 'post',
url: 'message',
contentType: 'application/json;charset=utf8',
data: jsonString,
success: function (responseBody) {
//这个回调就是收到响应之后要执行的代码了
console.log("responseBody: " + responseBody);
}
})
}
//直接在script里面写的js代码,就是在页面加载时被执行到的
//发起了一个get请求,从服务器获取数据
//get请求不需要body,也就不需要上述data和contentType属性了
$.ajax({
type: 'get',
url: 'message',
success: function (body) {
//拿到container这个元素
let containerDiv = document.querySelector('.container');//类选择器 获取到html中 <div class="container">
//处理服务器返回的响应数据(json格式的数据了)
for (let i = 0; i < body.length; i++) {
//body时一个数组,此时对message也就是js对象
//这个message对象里,有三个属性 from to message
let message = body[i];
//根据message对象构造成html片段,把这个片段显示到网页上
//此时得到了div标签
let div = document.createElement('div');
//还需要往里面设置一些属性 class="row" <div class="row"></div>
div.className = 'row';
//给这个div里设置内容
//此时就得到了 <div class="row">张三 对 李四 说 我喜欢你</div>
div.innerHTML = message.from + " 对 " + message.to + " 说: " + message.message;
//把div添加到containerDiv的末尾
containerDiv.appendChild(div);
}
}
});
</script>
</body>
</html>
💻pom.xml
<?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>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<!--引入依赖关系-->
<dependencies>
<!-- 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>
<!--设置json语言-->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.15.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
</dependencies>
</project>
💻dp.sql
create database if not exists messageWall charset utf8;
use messageWall;
drop table if exists message;
create table if not exists message('from' varchar(1024),'to' varchar(1024),message varchar(1024));
💻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>
开心就是最大的意义。