目录

一、创建项目

1、创建maven项目，引入依赖

2、创建目录结构

二、前端代码

1、页面内容和样式

2、提交按钮的点击事件

3、发送GET请求

三、数据库

四、后端代码

1、重写doPost方法

1.1 创建Message类

1.2 重写doPost方法

1.3 实现save方法

2、重写doGet方法

1、重写doGet方法

2、实现load方法

五、查看结果

1、查看POST请求

2、查看GET请求

一、创建项目

1、创建maven项目，引入依赖

2、创建目录结构

二、前端代码

前端代码中主要实现页面的内容和样式，以及通过ajax向服务器发送请求：

(1) 点击提交按钮，向服务器发送一个提交数据的POST请求，服务器收到请求后，把数据保存到数据库中；

(2) 重新加载页面时，向服务器发送一个获取数据的GET请求，服务器收到请求后，返回数据库中的数据，再由浏览器把这些数据显示在页面上。

1、页面内容和样式

    
表白墙
输入后点击提交，会将信息显示在表格中
谁：
对谁：
说什么：
提交

上述代码实现的页面效果：

2、提交按钮的点击事件

3、发送GET请求

三、数据库

(1) 创建一个数据库messageWall：

mysql> create table message(`from` varchar(50), `to` varchar(50), message varchar(1024));

注意：from和to是MySQL中的关键字，需要加上反引号。

(2) 在messageWall中创建一张message表，表中包含from、to、message三列：

 create table message(`from` varchar(50), `to` varchar(50), message varchar(1024));desc message；

四、后端代码

首先创建一个MessageWallServlet类来处理客户端发来的请求，然后重写里面的doGet和doPost方法：

@WebServlet("/message")
public class MessageWallServlet extends HttpServlet { //由于mapper对象在多个请求中都会被用到，所以创建为成员对象private ObjectMapper mapper = new ObjectMapper();
}

1、重写doPost方法

1.1 创建Message类

当服务器收到一个POST请求时，服务器需要读取请求中的数据并存放到数据库中，所以需要先创建一个Message类用来读取并解析请求中的json数据：

public class Message {private String from;private String to;private String message;public String getFrom() {return from;}public void setFrom(String from) {this.from = from;}public String getTo() {return to;}public void setTo(String to) {this.to = to;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}
}

1.2 重写doPost方法

    @Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//读取请求中的json数据并解析成Message对象Message message = mapper.readValue(req.getInputStream(),Message.class);//通过调用save方法把message中的数据存到数据库中try {save(message);} catch (SQLException e) {e.printStackTrace();}//设置状态码resp.setStatus(200);//在服务器控制台打印日志System.out.println("提交数据成功："+"from = "+message.getFrom()+" to = "+message.getTo()+" message = "+message.getMessage());}

1.3 实现save方法

    private void save(Message message) throws SQLException {//把数据保存到数据库//1.创建数据源DataSource dataSource = new MysqlDataSource();((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/messageWall?characterEncoding=utf8&useSSL=false");((MysqlDataSource)dataSource).setUser("root");((MysqlDataSource)dataSource).setPassword("");//2.建立连接Connection connection = dataSource.getConnection();//3.构造SQL语句String sql = "insert into message values(?,?,?)";PreparedStatement statement = connection.prepareStatement(sql);statement.setString(1,message.getFrom());statement.setString(2,message.getTo());statement.setString(3,message.getMessage());//4.执行SQL语句int ret = statement.executeUpdate();System.out.println(ret);//5.关闭连接connection.close();statement.close();}

2、重写doGet方法

doGet方法不需要对请求中的内容进行解析处理，只需要查询数据库的数据并返回给客户端即可：

1、重写doGet方法

    @Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//加载数据库中的数据List messageList = null;try {messageList = load();} catch (SQLException e) {e.printStackTrace();}//设置状态码resp.setStatus(200);//设置响应的数据格式和字符集resp.setContentType("application/json; charset=utf8");//把加载的数据返回给客户端resp.getWriter().write(mapper.writeValueAsString(messageList));}

2、实现load方法

    private List load() throws SQLException {//从数据库查询数据//1.创建数据源DataSource dataSource = new MysqlDataSource();((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/messageWall?characterEncoding=utf8&useSSL=false");((MysqlDataSource)dataSource).setUser("root");((MysqlDataSource)dataSource).setPassword("524169");//2.建立连接Connection connection = dataSource.getConnection();//3.构造SQL语句String sql = "select * from message";PreparedStatement statement = connection.prepareStatement(sql);//4.执行SQL语句ResultSet resultSet = statement.executeQuery();//5.遍历结果集合List messageList = new ArrayList<>();while (resultSet.next()){Message message = new Message();message.setFrom(resultSet.getString("from"));message.setTo(resultSet.getString("to"));message.setMessage(resultSet.getString("message"));messageList.add(message);}//6.关闭连接connection.close();statement.close();return messageList;}

五、查看结果

1、查看POST请求

浏览器：

POST请求内容：

服务器：

数据库：

2、查看GET请求

请求内容：

响应内容：