  4.0.0  org.example  message_wall  1.0-SNAPSHOT  war  message_wall Maven WEBapp    Http://www.example.com      UTF-8    1.7    1.7                  org.projectlombok      lombok      1.18.22      provided                      com.fasterxml.jackson.core      jackson-databind      2.13.2.1                  mysql      mysql-connector-java      5.1.49                  javax.servlet      javax.servlet-api      3.1.0      provided              junit      junit      4.11      test            message_wall                            maven-clean-plugin          3.1.0                                  maven-resources-plugin          3.0.2                          maven-compiler-plugin          3.8.0                          maven-surefire-plugin          2.22.1                          maven-war-plugin          3.2.2                          maven-install-plugin          2.5.2                          maven-deploy-plugin          2.8.2

1.3 项目总结构

2. 约定前后端交互接口

所谓 “前后端交互接口” 是进行 Web 开发中的关键环节，具体来说：就是允许页面给服务器发送哪些 HTTP 请求，并且每种请求预期获取什么样的 HTTP 响应。

从服务器上获取全部信息
请求：GET
响应：JSON 格式
向服务器提交信息
请求：jsON 格式
响应：JSON 格式

3.服务端代码

3.1 创建Message类

@Setter@Getterpublic class Message {    private String from;    private String to;    private String message;    public Message(String from, String to, String message) {        this.from = from;        this.to = to;        this.message = message;    }}

注意： @Setter 和 @Getter 会自动生成所有的get和set方法。

3.2 创建工具类

创建 DBUtils 类，用于连接数据库。

DBUtil 类主要实现以下功能:

创建 MysqlDataSource 实例,设置 URL , username , passWord 等属性.
提供 getConnection 方法,和MySQL服务器建立连接.
提供 close 方法,用来释放必要的资源.

public class DBUtils {    private DBUtils() {    }    private static volatile MysqlDataSource mysqlDataSource;    private static volatile Connection connection;    private static MysqlDataSource getMysqlDataSource() {        if (mysqlDataSource == null) {            synchronized (DBUtils.class) {                if (mysqlDataSource == null) {                    mysqlDataSource = new MysqlDataSource();                    mysqlDataSource.setURL("jdbc:mysql://127.0.0.1:3306/messagewall?character=utf8&useSSL=true");                    mysqlDataSource.setUser("root");                    mysqlDataSource.setPassword("12345678");                }            }        }        return mysqlDataSource;    }    // 1.get connect    public static Connection getConnection() {        if (connection == null) { // 首次访问            synchronized (DBUtils.class) {                if (connection == null) {                    try {                        MysqlDataSource dataSource = getMysqlDataSource();                        connection = dataSource.getConnection();                    } catch (SQLException throwables) {                        throwables.printStackTrace();                    }                }            }        }        return connection;    }    // 2.提供关闭资源的方法    public static void close(ResultSet resultSet, PreparedStatement statement) throws SQLException {        if (resultSet != null) {            resultSet.close();        }        if (statement != null) {            statement.close();        }    }}

创建 StringUtils 类，用于判空：

public class StringUtils {    public static boolean hasLength(String str) {        return !(str == null || str.length() == 0);    }}

3.3 添加信息类（AddMessage）

用于向服务器提交信息。

@WebServlet("/message/add")public class AddMessage extends httpservlet {    @SneakyThrows    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        int result = -1;        // 1.得到前端参数并效验        String from = req.getParameter("from");        String to = req.getParameter("to");        String msg = req.getParameter("msg");        if (StringUtils.hasLength(from) && StringUtils.hasLength(to)                && StringUtils.hasLength(msg)) {            // 2.将表白对象加入到集合            // 2.1 得到 Connection            Connection connection = DBUtils.getConnection();            // 2.2 拼接 sql，创建执行器            String sql = "insert into messages(`from`,`to`,`message`) values(?,?,?)";            PreparedStatement statement = connection.prepareStatement(sql);            statement.setString(1, from);            statement.setString(2, to);            statement.setString(3, msg);            // 2.3 执行执行器，并返回结果            result = statement.executeUpdate();            // 2.4 关闭资源            DBUtils.close(null, statement);        }        resp.setContentType("text/html; charset=utf-8");        resp.getWriter().println(result);    }}

3.4 查询信息类（MessageList）

用于获取服务器上所有信息。

@WebServlet("/message/list")public class MessageList extends HttpServlet {    @SneakyThrows    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        // 查询数据库中的表白列表        List list = new ArrayList<>();        // 1.得到 connection        Connection connection = DBUtils.getConnection();        // 2.拼接SQL，创建执行器        String sql = "select * from messages";        PreparedStatement statement = connection.prepareStatement(sql);        // 3.执行SQL，返回 resultSet 并循环将数据添加到 list 中        ResultSet resultSet = statement.executeQuery();        while (resultSet.next()) {            String from = resultSet.getString("from");            String to = resultSet.getString("to");            String message = resultSet.getString("message");            list.add(new Message(from, to, message));        }        // 4.关闭资源        DBUtils.close(resultSet, statement);        resp.setContentType("application/json; charset=utf-8");        ObjectMapper objectMapper = new ObjectMapper();        resp.getWriter().println(objectMapper.writeValueAsString(list));    }}

4. 前端代码

                表白墙                    表白墙
           给他/她留下一句话吧！
                    谁:                     
                    对谁:                     
                    说:

5.创建数据库

创建数据库，并添加 messages 表.

-- 设置编码格式set character_set_database=utf8; set character_set_server=utf8;-- 创建数据库create database if not exists messagewall; -- 使用数据库use messagewall;-- 创建messages表drop table if exists messages;create table messages (`from` varchar(255), `to` varchar(255), `message` varchar(2048));