Servlet实现一个简单的表白墙网站

分手后的思念是犯贱 2024-02-18 10:43 98阅读 0赞

在这里插入图片描述

文章目录

  • 前言
  • 效果展示
  • 事前准备
  • HTML、CSS、JavaScript分别负责哪些
  • HTML和CSS构架出页面的基本结构和样式
  • JavaScript 实现行为和交互
  • 实现服务器端的业务
  • 代码整理
    • pom.xml
    • web.xml
    • messageWall.html
    • MessageServlet.java

前言

前面我们学习了 Java 中知名的 HTTP 服务器 tomcat 的安装和使用，还学习了 servlet 相关 API 的学习，今天，这篇文章我们将运用前面学习的 HTTP 知识、tomcat和servlet来实现一个简单的表白墙网站。

效果展示

我先为大家展示一下这个表白墙网站完成之后的最终效果。

首先当我们访问表白墙网站的 HTML 页面的时候，得到的是这个结果。

在这里插入图片描述
当我们输入信息并且提交的时候，会将输入的信息进行处理，然后显示在这个页面的下面。

在这里插入图片描述

在这里插入图片描述

然后我们就可以根据上面的效果来逐步实现代码。

事前准备

在这里我给大家说明一下：要想实现网站，不仅需要后端的知识，还需要一些像什么 HTML、CSS、JavaScript这样的前端知识，而很多人可能还没接触过前端，大家不用慌，我也是刚接触前端，本篇文章我将为大家简单的介绍一下关于前端的时候，让大家大概知道我前段的每一段代码都是干啥的就行了。并且，我也是一个前端小白，如果我的分享有错误的话，欢迎大家在评论区或者私信我指出来，我在这里谢谢大家了。

首先我们需要创建出一个 Maven 项目，然后根据 tomcat 的要求创建出符合要求的目录结构，以及配置一些文件中的内容。

在这里插入图片描述

创建出符合 tomcat 标准的目录结构。

在这里插入图片描述
在 web.xml 文件中填写内容。这个文件中的内容，大家可以直接复制粘贴。

  1. <!DOCTYPE web-app PUBLIC
  2.         "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
  3.         "http://java.sun.com/dtd/web-app_2_3.dtd" >
  4. <web-app>
  5.     <display-name>Archetype Created Web Application</display-name>
  6. </web-app>

创建出一个 MessageServlet.java 文件用来写我们的后端主要的代码。

HTML、CSS、JavaScript分别负责哪些

HTML、CSS 和 JavaScript 是构建网页的三种主要技术，它们分别负责网页的结构、样式和行为。

HTML (HyperText Markup Language)：HTML 是网页的基础，它负责创建和组织网页的内容。HTML 是一种标记语言，它使用各种标签来定义网页中的不同元素，例如标题、段落、链接、图片等。

CSS (Cascading Style Sheets)：CSS 负责网页的样式和布局。它可以改变文本的颜色、字体和大小，也可以调整元素的位置、大小和边距等。

JavaScript：JavaScript 负责网页的行为和交互。它可以动态地更改网页的内容、响应用户的点击和输入，甚至加载新的内容。

简单的讲，HTML的作用就是决定你这个网页有哪些基本的结构，就是一个人有一个嘴巴、两个眼睛、一个鼻子；CSS则是决定你某一结构的具体样式和布局，就是一个人是双眼皮、高鼻梁、小嘴巴；而JavaScript则决定你网页的行为和交互，你怎么吃饭的、怎么呼吸的。

HTML和CSS构架出页面的基本结构和样式

当做好前面的准备之后，我们就需要实现表白墙网站的第一步：显示出基本页面。这个显示出页面主要用到了 HTML和CSS的知识。我们的这个 html 文件需要放在 webapp 目录下。

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表白墙</title>
  8.     <style>
  9.         /* * 通配符选择器, 是选中页面所有元素 */
  10.         * {
  12.             /* 消除浏览器的默认样式. */
  13.             margin: 0;
  14.             padding: 0;
  15.             box-sizing: border-box;
  16.         }
  18.         .container {
  20.             width: 600px;
  21.             margin: 20px auto;
  22.         }
  24.         h1 {
  26.             text-align: center;
  27.         }
  29.         p {
  31.             text-align: center;
  32.             color: #666;
  33.             margin: 20px 0;
  34.         }
  36.         .row {
  38.             /* 开启弹性布局 */
  39.             display: flex;
  40.             height: 40px;
  41.             /* 水平方向居中 */
  42.             justify-content: center;
  43.             /* 垂直方向居中 */
  44.             align-items: center;
  45.         }
  47.         .row span {
  49.             width: 80px;
  50.         }
  52.         .row input {
  54.             width: 200px;
  55.             height: 30px;
  56.         }
  58.         .row button {
  60.             width: 280px;
  61.             height: 30px;
  62.             color: white;
  63.             background-color: orange;
  64.             /* 去掉边框 */
  65.             border: none;
  66.             border-radius: 5px;
  67.         }
  69.         /* 点击的时候有个反馈 */
  70.         .row button:active {
  72.             background-color: grey;
  73.         }
  74.     </style>
  76.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  77. </head>
  78. <body>
  80. </body>
  81. </html>

在这里插入图片描述
在这里插入图片描述
CSS中的通配符选择器（*），它选中了页面上的所有元素，然后将所有元素的margin（外边距）、padding（内边距）设置为0，并将box-sizing属性设置为border-box。

这段代码的目的主要是重置网页上所有元素的默认样式。在很多情况下，浏览器会对HTML元素应用默认样式，这些默认样式可能会影响到网页的布局和元素的尺寸。通过将margin和padding设置为0，可以消除元素之间的间距（margin）和内部填充（padding），而将box-sizing设置为border-box可以使元素的宽度和高度包括其边框和内边距。

在这里插入图片描述
它定义了一个名为”.container”的类。这个类设置了一个元素的宽度为600像素，并将外边距（margin）设置为20像素，且上下外边距为自动（auto），使得这个元素在页面上居中。

在这里插入图片描述

用于设置HTML文档中的h1和p元素的样式。也就是h1标签和p标签。

  • h1元素内的文本应该居中显示（text-align: center;）。
  • p元素内的文本也应该居中显示，颜色为#666（一个深灰色），并且上下边距为20px。

在这里插入图片描述
用于设置一个名为”.row”的类的样式。这段代码使用Flexbox模型来定义行内元素的布局和对齐方式。

  • display: flex;：这会使得元素变为弹性容器，其子元素会按Flexbox模型布局。
  • height: 40px;：这会设置元素的高度为40像素。
  • justify-content: center;：这会使得行内元素在主轴（水平方向）上居中对齐。
  • align-items: center;：这会使得行内元素在交叉轴（垂直方向）上居中对齐。

在这里插入图片描述

所有属于.row类的元素的span子元素，其宽度将被设置为80px。

在这里插入图片描述
所有属于.row类的元素的input子元素，其宽度将被设置为200px，高度将被设置为30px。这个就是我们输入框的相关属性。

在这里插入图片描述

在这里插入图片描述
所有属于.row类的元素的button子元素，其宽度将被设置为280px，高度将被设置为30px，文本颜色将被设置为白色，背景颜色将被设置为橙色，边框将被移除，并且边框半径（用于创建圆角）将被设置为5px。这个就是点击按钮的相关属性。

在这里插入图片描述

JavaScript 实现行为和交互

上面主要用到了我们的 HTML 和 CSS 相关的知识，基本构建出了页面的基本结构和样式，而接下来，我们将使用 JavaScript 来完成提交信息这个动作。

首先需要构建出container类中的各个输入框的行为。

  1. <div class="container">
  2.         <h1>表白墙</h1>
  3.         <p>输入内容后点击提交, 信息会显示到下方表格中</p>
  4.         <div class="row">
  5.             <span>谁: </span>
  6.             <input type="text">
  7.         </div>
  8.         <div class="row">
  9.             <span>对谁: </span>
  10.             <input type="text">
  11.         </div>
  12.         <div class="row">
  13.             <span>说: </span>
  14.             <input type="text">
  15.         </div>
  16.         <div class="row">
  17.             <button id="submit">提交</button>
  18.         </div>
  19.         <!-- <div class="row">
  20.             xxx 对 xx 说 xxxx
  21.         </div> -->
  22.     </div>
  • ：开始一个容器div，用于包装整个页面的内容。创建出container这个类。

  • 表白墙：创建一个主标题，显示“表白墙”字样。

  • 输入内容后点击提交, 信息会显示到下方表格中：创建一个段落，用于向用户说明他们可以输入表白信息，然后点击提交按钮，信息会显示在下方的表格中。

  • ：开始一个行div，用于包装每一条表白信息。
  • 谁: ：创建一个标签span，显示“谁：”字样，用于提示用户输入表白者的名字。
  • ：创建一个文本输入框，用户可以在这里输入他们的名字。test表示输入的是文本。
  • ：开始最后一个行div。

以上的JavaScript完成了输入框和提交按钮的行为，而JavaScript还需要完成点击提交按钮之后将数据经过处理然后显示在页面上。

  1. <script>
  2.     let containerDiv = document.querySelector('.container');]
  3.     let inputs = document.querySelector('.input');
  4.     let button = document.querySelector('#submit');
  5.     button.onclick = function() {
  7.         //获取到三个输入框的内容
  8.         let from = inputs[0];
  9.         let to = inputs[1];
  10.         let message = input[2];
  11.         //判断是否未输入
  12.         if (from == '' || to == '' || message == '') {
  14.             return;
  15.         }
  16.         //创建出一个新的元素
  17.         let rowDiv = document.createElement('div');
  18.         //定义出rowDiv的类名
  19.         rowDiv.className = 'row message';
  20.         //为rowDiv中插入元素
  21.         rowDiv.innerHtml = from + ' 对 ' + to + ' 说: ' + msg;
  22.         //将这个新创建的元素添加到containerDiv类的末尾
  23.         containerDiv.appendChild(rowDiv);
  24.         //将输入框中的内容置为空
  25.         for (let input of inputs) {
  27.             input.value = '';
  28.         }
  29.         //构造出一个对象用来存储刚才输入框输入的内容，并且这个内容是以json的格式存在的
  30.         let requestBody = {
  32.             "from": from,
  33.             "to": to,
  34.             "message": message
  35.         }
  36.         //通过我们前面引入的Jackson依赖，使用JSON中的stringify方法将对象转换为json
  37.         let jsonString = JSON.stringify(requestBody);
  38.         //$是我们前面引入的jQuery依赖中的全局变量，通过这个$可以调用jQuery中的很多方法
  39.         //通过这个ajax方法构造请求，并且发送给服务器
  40.         $.ajax({
  42.             type: 'post',
  43.             url: 'message',
  44.             contentType: 'application/json; charset=utf8';
  45.             data: jsonString,
  46.             success: function(responseBody) {
  48.                 console.log(responseBody);
  49.             }
  50.         });
  51.     }
  52. </script>

Ajax属于第三方库，所以我们要想使用的话，就需要引入相关依赖。引入jQuery库。https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js

在这里插入图片描述

实现服务器端的业务

当前端构造出 post 请求发送给服务器，服务器接收到这个请求之后就需要根据这个发送来的请求做出业务处理。因为我们使用的是 Servlet 实现的，所以就需要先引入 Servlet 依赖。

在这里插入图片描述
在这里插入图片描述

因为前端构造请求的数据格式是 json 的数据格式，所以要想在 Java 中使用 json，也就需要引入 json 库，或者包装了 json 库的其他库。

引入Jackson依赖。
在这里插入图片描述
在这里插入图片描述

当引入 Servlet 和 Jackson 依赖之后，我们服务端就可以通过 Servlet 的相关 API 做出相应的业务处理了。

  1. import com.fasterxml.jackson.databind.ObjectMapper;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.annotation.WebServlet;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. import java.io.IOException;
  10. class Message {
  12.     public String from;
  13.     public String to;
  14.     public String message;
  16.     @Override
  17.     public String toString() {
  19.         return "Message{" +
  20.                 "from='" + from + '\'' +
  21.                 ", to='" + to + '\'' +
  22.                 ", message='" + message + '\'' +
  23.                 '}';
  24.     }
  25. }
  26. @WebServlet("/message")
  27. public class MessageServlet extends HttpServlet {
  29.     private ObjectMapper objectMapper = new ObjectMapper();
  30.     @Override
  31.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  33.         //设置相应的状态码
  34.         resp.setStatus(200);
  35.         //通过ObjectMapper中的readValue方法将json数据转换为Java对象
  36.         Message message = objectMapper.readValue(req.getInputStream(), Message.class);
  37.         //将客户端输入的信息进行存储
  38.         save(message);
  39.         System.out.println(message);
  40.         resp.getWriter().write("ok");
  41.     }
  42. }

当客户端进行提交请求之后，前端会将输入的信息传给服务器，那么当服务器接收到这个请求之后，应该将输入存储在哪个地方呢？如果只是拿一个简单的 List 容器存储数据话，那么这个数据就是存储在内存中的，当服务器重启之后，之前存储的数据就会消失，那么该如何存储才能保证数据的持久性呢？这里想到的肯定就是数据库了，数据库天然支持数据存储的持久性，所以我们这里选择使用 MySQL 数据库来实现数据的存储。

  1. -- 创建数据库
  2. create database if not exists message_wall;
  4. -- 选中数据库
  5. use message_wall;
  7. -- 为了防止这个表存在对我们的数据库造成影响，我们先删除数据库
  8. drop table if exists message;
  10. -- 创建表
  11. create table message(`from` varchar(1024), `to` varchar(1024), message varchar(1024));

在这里插入图片描述
当创建完成数据库和表之后，我们继续要引入 MySQL 依赖，然后实现 JDBC 编程了。

这里因为我的 MySQL 版本是 MySQL8，所以依赖选择的也是 MySQL8 版本，大家需要根据自己的 MySQL 版本来导入对应的依赖。
在这里插入图片描述
在这里插入图片描述

  1. import com.fasterxml.jackson.databind.ObjectMapper;
  2. import com.mysql.cj.jdbc.MysqlDataSource;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.annotation.WebServlet;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. import javax.sql.DataSource;
  10. import java.io.IOException;
  11. import java.sql.Connection;
  12. import java.sql.PreparedStatement;
  13. import java.sql.SQLException;
  15. class Message {
  17.     public String from;
  18.     public String to;
  19.     public String message;
  21.     @Override
  22.     public String toString() {
  24.         return "Message{" +
  25.                 "from='" + from + '\'' +
  26.                 ", to='" + to + '\'' +
  27.                 ", message='" + message + '\'' +
  28.                 '}';
  29.     }
  30. }
  31. @WebServlet("/message")
  32. public class MessageServlet extends HttpServlet {
  34.     private ObjectMapper objectMapper = new ObjectMapper();
  35.     private DataSource dataSource = new MysqlDataSource();
  37.     @Override
  38.     public void init() throws ServletException {
  40.         ((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/message_wall?characterEncoding=utf8&useSSl=false");
  41.         ((MysqlDataSource)dataSource).setUser("root");
  42.         ((MysqlDataSource)dataSource).setPassword("*******"); //这里是我们的MySQL密码
  43.     }
  45.     @Override
  46.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  48.         //设置相应的状态码
  49.         resp.setStatus(200);
  50.         //通过ObjectMapper中的readValue方法将json数据转换为Java对象
  51.         Message message = objectMapper.readValue(req.getInputStream(), Message.class);
  52.         //将客户端输入的信息进行存储
  53.         try {
  55.             save(message);
  56.         } catch (SQLException e) {
  58.             throw new RuntimeException(e);
  59.         }
  60.         System.out.println(message);
  61.         resp.getWriter().write("ok");
  62.     }
  64.     private void save(Message message) throws SQLException {
  66.         Connection connection = dataSource.getConnection();
  67.         String sql = "insert into message values(?, ?, ?)";
  68.         PreparedStatement statement = connection.prepareStatement(sql);
  69.         statement.setString(1, message.from);
  70.         statement.setString(2, message.to);
  71.         statement.setString(3, message.message);
  72.         statement.executeUpdate();
  73.         statement.close();
  74.         connection.close();
  75.     }
  76. }

当实现完成将客户端输入的数据存储进MySQL数据库之后，当我们进入这个网站的时候，还需要将数据库已经存在的信息给读取到页面上，所以，当我们访问这个网站的时候，浏览器会向服务器发送一个 Ajax 请求，当服务器接收到这个 Ajax 请求的时候就会将数据库中的数据给返回给客户端。

  1. $.ajax({
  3.             type: 'get',
  4.             url: 'message',
  5.             success: function(body) {
  7.                 let containerDiv = document.querySelector('.container');
  8.                 for (let i = 0; i < body.length; i++) {
  10.                     let message = body[i];
  11.                     let div = document.createElement('div');
  12.                     div.className = 'row';
  13.                     div.innerHTML = message.from + "对" + message.to + "说" + message.message;
  14.                     containerDiv.appendChild(div);
  15.                 }
  17.             }
  18.         });

我们这个标签放在

发表评论

表情：
评论列表 （有 0 条评论，98人围观）

还没有评论，来说两句吧...

相关阅读