内存版本的表白墙

（1）创建一个空项目

（2）配置pom.xml文件，reload一下

<dependencies>
  <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
  <dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
  </dependency>

  <!-- 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>

  <dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>3.8.1</version>
    <scope>test</scope>
  </dependency>
</dependencies>
<!--    打包为war包-->
<packaging>war</packaging>

（3）准备以下文件

index.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;
      }

      .container {
      
      
      width: 400px;
      margin: 0 auto;
      }

      h1 {
      
      
      text-align: center;
      padding: 20px 0;
      }

      p {
      
      
      color: #666;
      text-align: center;
      font-size: 14px;
      padding: 10px 0;
      }

      .row {
      
      
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      }

      span {
      
      
      width: 100px;
      line-height: 40px;
      }

      .edit {
      
      
      width: 200px;
      height: 30px;
      }

      .submit {
      
      
      width: 304px;
      height: 40px;
      color: white;
      background-color: orange;
      border: none;
      }

      .submit:active {
      
      
      background-color: #666;
      }
    </style>
    <script src="jquery.min.js"></script>
  </head>

  <body>
    <div id="container" class="container">
      <h1>表白墙</h1>
      <p>输入后点击提交, 会将信息显示在表格中</p>
      <div class="row">
        <span>谁: </span>
        <input id="from" class="edit" type="text">
      </div>
      <div class="row">
        <span>对谁: </span>
        <input id="to" class="edit" type="text">
      </div>
      <div class="row">
        <span>说什么: </span>
        <input id="message" class="edit" type="text">
      </div>
      <div class="row">
        <input type="button" value="提交" class="submit"
          onclick="addmsg()">
      </div>
      <div id="allMsg">

      </div>
    </div>
    <script>
      function addmsg(){
      
      
      // 1.得到输入控件
      var from = jQuery("#from");
      var to = jQuery("#to");
      var message = jQuery("#message");
      // 2.非空效验
      if(from.val().trim()==""){
      
      
      // 未输入任何信息
      alert("抱歉：请先输入姓名！");
      from.focus();
      return false;
      }
      if(to.val().trim()==""){
      
      
      // 未输入任何信息
      alert("抱歉：请先输入表白人姓名！");
      to.focus();
      return false;
      }
      if(message.val().trim()==""){
      
      
      // 未输入任何信息
      alert("抱歉：请先输入表白内容！");
      message.focus();
      return false;
      }
  // 3.将结果提交给后端
  jQuery.ajax({
      
      
  url:"addmsg",
  type:"POST",
  data:{
      
      
  "username":from.val(),
  "touser":to.val(),
  "msg":message.val()
  },
  success:function(res){
      
      
  if(res.code==200 && res.data==1){
      
      
  alert("恭喜：表白成功！");
  // 4.将新加入的表白信息加入到页面中
  location.href = location.href; // 刷新当前页面
  }else{
      
      
  alert("抱歉：表白失败！"+res.msg);
  }
  }
  });
  }
  // 查询所有表白信息
  function initList(){
      
      
  jQuery.ajax({
      
      
  url:"getlist",
  type:"GET",
  data:{
      
      },
  success:function(res){
      
      
  var showHtml = "";
  if(res.code==200 && res.data.length>0){
      
      
  // 有数据
  for(var i =0;i<res.data.length;i++){
      
      
  var item = res.data[i];
  showHtml += '<div class="row">';
  showHtml += item.username+'对'+item.toUser+
  "说"+item.msg;
  showHtml += '</div>';
  }
  }else{
      
      
  showHtml = '<div class="row"><h3>暂无表白数据！</h3></div>';
  }
  jQuery("#allMsg").html(showHtml);
  }
  });
  }
  initList();
  </script>
  </body>

  </html>

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>

jquery.min.js这个在网上搜一下，

（4）Message实体类，

public class Message {
    
    
    private String username;//谁
    private String toUser;//对谁
    private String msg;//说什么

    public String getUsername() {
    
    
        return username;
    }

    public void setUsername(String userName) {
    
    
        this.username = username;
    }

    public String getToUser() {
    
    
        return toUser;
    }

    public void setToUser(String toUser) {
    
    
        this.toUser = toUser;
    }

    public String getMsg() {
    
    
        return msg;
    }

    public void setMsg(String msg) {
    
    
        this.msg = msg;
    }
}

（5）AppVar全局类

public class AppVar {
    
    
    // 存储所有的表白数据
    public static List<Message> MESSAGE_LIST = new ArrayList<Message>();
    public static ObjectMapper OBJECTMAPPER = new ObjectMapper();

}

（6）AddMessageServlet ，添加一个表白信息

@WebServlet("/addmsg")
public class AddMessageServlet extends HttpServlet {
    
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        resp.setContentType("application/json;charset=utf-8");

        //一会存放json格式的数据
        HashMap<String, Object> result = new HashMap();
        //获取前端页面信息，getParameter中的参数是
        /**
        data:{
                "username":from.val(),
                "touser":to.val(),
                "msg":message.val()
            },
        */
        String username = req.getParameter("username");
        String touser = req.getParameter("touser");
        String msg = req.getParameter("msg");
        if (username == null || username.equals("") || touser == null ||
                touser.equals("") || msg == null || msg.equals("")) {
    
    
            result.put("code", -1);
            result.put("msg", "非法参数");
            result.put("data", "");
        } else {
    
    
            //表白成功的信息放到列表里
            Message message = new Message();
            message.setUsername(username);
            message.setToUser(touser);
            message.setMsg(msg);
            AppVar.MESSAGE_LIST.add(message);
            result.put("code", 200);
            result.put("msg", "");
            result.put("data", 1);
        }
        resp.getWriter().write(AppVar.OBJECTMAPPER.writeValueAsString(result));
    }
}

（7）MassageServlet，自动获取列表中的表白信息

@WebServlet("/getlist")
public class MassageServlet extends HttpServlet {
    
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        resp.setContentType("application/json;charset=utf-8");
        Map<String,Object> map = new HashMap<String, Object>();
        map.put("code", 200);
        map.put("msg", "");
        map.put("data", AppVar.MESSAGE_LIST);
        resp.getWriter().write(AppVar.OBJECTMAPPER.writeValueAsString(map));

//        resp.getWriter().write(AppVar.OBJECTMAPPER.writeValueAsString(AppVar.MESSAGE_LIST));
    }
}

（8）配置

![K(%FTSE9]6BWI8GO $FNXU%O.png](https://img-blog.csdnimg.cn/img_convert/fc8344278faf7bd51af59d80826d4d92.png#averageHue=#6a6b56&clientId=u61a4ff9c-78d2-4&from=paste&height=738&id=u377b76f4&originHeight=922&originWidth=1361&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=136331&status=done&style=none&taskId=u85f9e06f-8b0d-4673-892f-3f3166b1193&title=&width=1088.8) ![Z5`G{~2MUZ_RLA8A3M%GRGO.png](https://img-blog.csdnimg.cn/img_convert/69eb2d947b9dd47634379549226a4edd.png#averageHue=#538b5b&clientId=u61a4ff9c-78d2-4&from=paste&height=158&id=uaf923d8a&originHeight=198&originWidth=574&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=10966&status=done&style=none&taskId=u6d03f50b-3fd7-4368-b363-38fef5709d7&title=&width=459.2) ![@}0HA$ Z@6W380EVJKMKQ$TL.png](https://img-blog.csdnimg.cn/img_convert/d929f6bd428259872e653646a5fe83f0.png#averageHue=#3e4244&clientId=u61a4ff9c-78d2-4&from=paste&height=574&id=uaa925f06&originHeight=718&originWidth=1338&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=92561&status=done&style=none&taskId=u745972ef-a954-4595-99a0-58eac29a8dc&title=&width=1070.4)

（9）点击运行

数据库版本的表白墙

在数据库中创建一个表来存储表白墙信息

CREATE TABLE `message_wall` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `sender` varchar(50) NOT NULL,
  `receiver` varchar(50) NOT NULL,
  `content` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
);

按照上面的方法创建新项目

配置pom.xml文件，reload一下，MySQL为5.0的把mysql依赖换成5.1.49的

<dependencies>
  <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
  </dependency>

  <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
<!--     <version>5.1.49</version> -->
    <version>8.0.33</version>
  </dependency>

  <dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.1</version>
  </dependency>
</dependencies>

准备以下文件

![]JT3XIR5{EN4)8A%@})`{R.png

messagewall.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>
      * {
      
      
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .container {
      
      
        width: 400px;
        margin: 0 auto;
      }

      .container h1 {
      
      
        margin: 20px 0;
        text-align: center;
      }

      .container .sub-title {
      
      
        color: #666;
        text-align: center;
        font-size: 14px;
        margin-bottom: 10px;
      }

      .container .row {
      
      
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .container span {
      
      
        width: 80px;
      }

      .container input {
      
      
        width: 200px;
        height: 30px;
      }

      .container .row>button {
      
      
        width: 280px;
        height: 30px;
        background-color: orange;
        border: none;
        color: white
      }

      .container .row>button:active {
      
      
        background-color: #666;
      }

      .container .message {
      
      
        padding: 20px;
        text-align: center;
      }

      .message p {
      
      
        height: 30px;
        line-height: 30px;
      }
    </style>
    <!-- 引入jQuery -->
    <script src="jquery-3.6.3.min.js"></script>
  </head>

  <body>
    <div class="container">
      <h1>表白墙</h1>
      <p class="sub-title">输入后点击提交，会将内容显示在表格中</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="message">
        <!-- <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
        <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
        <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
        <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p> -->

      </div>
    </div>
  </body>
  <script>
    // 1. 获取相关的元素
    let submitBtnEl = document.querySelector('#submit');
    let inputEls = document.querySelectorAll('input');
    let messageEl = document.querySelector('.message');

    // 绑定事件
    submitBtnEl.onclick = function () {
      
      
      // 2. 处理用户输入的内容
      let sender = inputEls[0].value;
      let receiver = inputEls[1].value;
      let content = inputEls[2].value;
      // 非空校验
      if (sender == '' || receiver == "" || content == "") {
      
      
        alert('请正确输入内容');
        return;
      }
      // 3. 构造表白结果
      let str = '<b>' + sender + '</b> 对 <b>' + receiver + '</b>说：<b>' + content + '.</b>'
      // 4. 构建一个p标签
      let messageRow = document.createElement('p');
      messageRow.innerHTML = str;
      // 4. 把结果加入到表白墙上
      messageEl.appendChild(messageRow)
      // 5. 清空输入框中的内容
      inputEls.forEach(element => {
      
      
        element.value = '';
      });

      // 处提交逻辑
      // 1. 封装JSON对象
      let postJson = {
      
      
        "sender" : sender,
        "receiver": receiver,
        "content" : content
      };
      let jsonStr = JSON.stringify(postJson);
      console.log(jsonStr);
      // 2. 提交AJVA请求
      $.ajax({
      
      
      // 请求使用的方法
      type: 'post',
      // 请求的URL，注意不要加斜杠
      url: 'message',
      // 格式
      contentType: 'application/json',
      // 发送的数据
      data: jsonStr,
      // 成功时的回调
      success : function(data) {
      
      
      console.log(data);
      }
      })
      };

      // 发送请求获取已有留言
      $.ajax({
      
      
      // 请求使用的方法
      type: 'get',
      // 请求的URL，注意不要加斜杠
      url: 'message',
      // 回调
      success: function (data) {
      
      
      data.forEach(element => {
      
      
      console.log(element);
      // <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
      // 1. 创建一个P标签
      let pEl = document.createElement('p');
      // 2. 构造内容
      pEl.innerHTML = '<b>'+element.sender+'</b> 对 <b>'+element.receiver+'</b>说：<b>'+element.content+'.</b>'
      // 3. 加入到父标签下
      messageEl.appendChild(pEl);

      });
      // 结果是一个数组，遍历结果
      // for (let index = 0; index < data.length; index++) {
      
      
      //     element = data[index];
      //     console.log(element);
      // }

      }
      });

      </script>

      </html>

编写DBUtil类，关于数据库的连接和资源关闭

public class DBUtil {
    
    

    private static final String URL = "jdbc:mysql://127.0.0.1:3306/myjava?characterEncoding=utf-8";
    private static final String USER = "root";
    private static final String PASSWORD = "123456";
    private static DataSource dataSource = null;

    // static方法，在类加载时执行一次
    static {
    
    
        MysqlDataSource mysqlDataSource = new MysqlDataSource();
        mysqlDataSource.setURL(URL);
        mysqlDataSource.setUser(USER);
        mysqlDataSource.setPassword(PASSWORD);
        dataSource = mysqlDataSource;
    }


    private DBUtil(){
    
    }

    /**
* @Description: 连接数据库
* @author: longyushuang
* @date: 2023/6/28 18:43
* @Param:
* @Return:
*/

    public static Connection getConnection () throws SQLException {
    
    
        // 通过数据源对象，获取数据库连接对象
        return dataSource.getConnection();
    }

   // 关闭数据库资源
    public static void close(ResultSet resultSet, PreparedStatement statement, Connection connection) throws SQLException {
    
    
        if (resultSet != null){
    
    
            resultSet.close();
        }
        if (statement != null){
    
    
            statement.close();
        }
        if (connection != null){
    
    
            connection.close();
        }
    }
}

Message实体类

public class Message {
    
    
    private Long id;  // 对应到数据中的主键
    private String sender; // 发送者
    private String receiver; // 接收者
    private String content; // 留言内容

    public void setId(Long id) {
    
    
        this.id = id;
    }

    public void setSender(String sender) {
    
    
        this.sender = sender;
    }

    public void setReceiver(String receiver) {
    
    
        this.receiver = receiver;
    }

    public void setContent(String content) {
    
    
        this.content = content;
    }

    public Long getId() {
    
    
        return id;
    }

    public String getSender() {
    
    
        return sender;
    }

    public String getReceiver() {
    
    
        return receiver;
    }

    public String getContent() {
    
    
        return content;
    }
}

MessageDao操作数据库，包括查看所有留言信息和插入一条信息

public class MessageDao {
    
    

    /**
     * @Description: 查看所有留言
     * @author: longyushuang
     * @date: 2023/6/28 18:56
     * @Param:
     * @Return:
     */

    public List<Message> selectAll() throws SQLException {
    
    
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;

        try {
    
    
            // 1. 获取数据库连接
            connection = DBUtil.getConnection();
            // 2. 定义SQL语句
            String sql = "select id, sender, receiver, content from message_wall order by id desc";
            // 3. 预处理SQL
            statement = connection.prepareStatement(sql);
            // 4. 执行SQL并获取结果集
            resultSet = statement.executeQuery();
            List<Message> messages = null;
            // 5. 遍历结果集
            while (resultSet.next()) {
    
    
                // 如果List为空，则初始化
                if (messages == null) {
    
    
                    messages = new ArrayList<Message>();
                }
                // 创建一个Message对象
                Message message = new Message();
                message.setId(resultSet.getLong(1));
                message.setSender(resultSet.getString(2));
                message.setReceiver(resultSet.getString(3));
                message.setContent(resultSet.getString(4));
                // 把对象加入List
                messages.add(message);
            }
            // 返回结果
            return messages;
        } catch (SQLException e) {
    
    
            throw new RuntimeException(e);
        } finally {
    
    
            // 关闭连接并释放资源
            DBUtil.close(resultSet, statement, connection);
        }
    }

    public int insert(Message message) throws SQLException {
    
    

        Connection connection = null;
        PreparedStatement statement = null;
        try {
    
    
            connection = DBUtil.getConnection();
            String sql = "insert into message_wall values (null, ?, ?, ?)";
            statement = connection.prepareStatement(sql);
            statement.setString(1,message.getSender());
            statement.setString(2,message.getReceiver());
            statement.setString(3,message.getContent());
            int row = statement.executeUpdate();
            return row;
        } catch (SQLException e) {
    
    
            throw new RuntimeException(e);
        }finally {
    
    
            DBUtil.close(null,statement,connection);
        }
    }

}

MessageServlet

@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    
    
    // 定义数据库访问类
    private MessageDao messageDao = new MessageDao();
    // json转换
    private ObjectMapper objectMapper = new ObjectMapper();

    //获取所有留言列表
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        // 定义编码格式
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json; charset=utf-8");
        // 查询数据库中的留言列表
        try {
    
    
            List<Message> messages = messageDao.selectAll();
            // 判断结果是否为空
            if (messages == null){
    
    
                // 避免返回的是一个"null"
                messages = new ArrayList<Message>();
            }
            // 返结果转为json并返回
            String jsonString = objectMapper.writeValueAsString(messages);
            // 返回结果
            resp.getWriter().write(jsonString);
        } catch (SQLException e) {
    
    
            throw new RuntimeException(e);
        }
    }

    // 插入一条信息
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
// 定义编码格式
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json; charset=utf-8");
        // 接收用户请求中的数据
        Message message = objectMapper.readValue(req.getInputStream(),Message.class);
        // 非空校验
        if (message == null || message.getSender() == null || message.getSender() == null
                || message.getReceiver() == null || message.getSender().equals("") ||
        message.getReceiver().equals("") || message.getContent().equals("")){
    
    
            // 返回一个错误的自定义状态码
            resp.getWriter().write("{\"code\": -1}");
        }
        int row;
        // 调用DAO写入数据库
        try {
    
    
            row = messageDao.insert(message);
        } catch (SQLException e) {
    
    
            throw new RuntimeException(e);
        }
        if (row <= 0){
    
    
            // 返回一个错误的自定义状态码
            resp.getWriter().write("{\"code\": -1}");
        }
        // 返回成功
        resp.getWriter().write("{\"code\": 0}");
    }
}

按照上面的配置一下

运行

7919DHG9~)}2Q37RS5KASGT.png

servlet简单实现表白墙