⭐相关阅读推荐⭐

                 前端项目—待办事项（HTML+CSS+JavaScript实现）         

Servlet ：Servlet API（HttpServlet Request Response）

                Servlet部署教程（基于Tomcat） 

Tomcat ：Tomcat使用教程

                 Smart Tomcat插件使用教程（IDEA）

前端网络：Fiddler使用教程（HTTP抓包 前端debug）

                  HTTP、HTTPS协议详解

                  HTML常用语法总结【精华】

                  CSS常用语法总结【精华篇】

                  Java Script 语法总结

                  WebAPI—DOM （HTTL、CSS、Java Script应用及案例）

---

目录

① 环境搭建

② 约定接口

③ HTML文件源码

---

① 环境搭建

1. 创建 Maven 项目
2. pom.xml 中引入 servlet 依赖，刷新Maven
   servlet (3.1.0)
   jackson (2.13.1)
3. 创建目录结构（src -> main -> webapp -> WEB-INF -> web.xml）

   
   
       Archetype Created Web Application
   

4. 在 webapp 目录下编写 html 文件 xxx.html
5. 新建 Java 文件编写代码（extends HttpServlet，重写方法，@WebServlet("/Path")）

6. 打包部署（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 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

// 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 getMessages() {
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        List 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文件源码

    
    
    
    


    
    
        表白墙
        
输入后点击提交，将会把消息显示在墙上
        
            谁：
            
        
        
            对谁：
            
        
        
            说什么：