• 10.3使用Servlet写一个表白墙网站

    一.创建项目,引入依赖和前端页面.

    1.注意,静态页面放在webapp目录下,不是WEB-INF,

    2.存档约定:前端使用post(/messageWall/message)发送http请求,使用json格式把数据传输到后端.服务器返回HTTP/1.1 200 ok.

    3.读档约定:使用get(/messageWall/message),服务器返回HTTP/1.1 200 ok,和json数组.

    4.使用maven管理数据库资源包.

    5.在mysql客户端创建数据库和表.

    二.代码

     

    1.pom.xml:

    1. "1.0" encoding="UTF-8"?>
    2. <project xmlns="http://maven.apache.org/POM/4.0.0"
    3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    5.     <modelVersion>4.0.0modelVersion>
    6.  
    7.     <groupId>org.examplegroupId>
    8.     <artifactId>hello_servlet2023-9-18artifactId>
    9.     <version>1.0-SNAPSHOTversion>
    10.  
    11.     <properties>
    12.         <maven.compiler.source>8maven.compiler.source>
    13.         <maven.compiler.target>8maven.compiler.target>
    14.     properties>
    15.     <dependencies>
    16.         
    17.         <dependency>
    18.             <groupId>javax.servletgroupId>
    19.             <artifactId>javax.servlet-apiartifactId>
    20.             <version>3.1.0version>
    21.             <scope>providedscope>
    22.         dependency>
    23.         
    24.         <dependency>
    25.             <groupId>com.fasterxml.jackson.coregroupId>
    26.             <artifactId>jackson-databindartifactId>
    27.             <version>2.14.2version>
    28.         dependency>
    29.         
    30.         <dependency>
    31.             <groupId>mysqlgroupId>
    32.             <artifactId>mysql-connector-javaartifactId>
    33.             <version>5.1.49version>
    34.         dependency>
    35.  
    36.     dependencies>
    37.     <packaging>warpackaging>
    38.     <build>
    39.         <finalName>messageWallfinalName>
    40.     build>
    41. project>

    2.web.xml:

    1. 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.  
    5. <web-app>
    6.     <display-name>Archetype Created Web Applicationdisplay-name>
    7. web-app>

     3.messageWall.html:

    1. 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.         * {
    11.             /* 消除浏览器的默认样式. */
    12.             margin: 0;
    13.             padding: 0;
    14.             box-sizing: border-box;
    15.         }
    16.  
    17.         .container {
    18.             width: 600px;
    19.             margin: 20px auto;
    20.         }
    21.  
    22.         h1 {
    23.             text-align: center;
    24.         }
    25.  
    26.         p {
    27.             text-align: center;
    28.             color: #666;
    29.             margin: 20px 0;
    30.         }
    31.  
    32.         .row {
    33.             /* 开启弹性布局 */
    34.             display: flex;
    35.             height: 40px;
    36.             /* 水平方向居中 */
    37.             justify-content: center;
    38.             /* 垂直方向居中 */
    39.             align-items: center;
    40.         }
    41.  
    42.         .row span {
    43.             width: 80px;
    44.         }
    45.  
    46.         .row input {
    47.             width: 200px;
    48.             height: 30px;
    49.         }
    50.  
    51.         .row button {
    52.             width: 280px;
    53.             height: 30px;
    54.             color: white;
    55.             background-color: orange;
    56.             /* 去掉边框 */
    57.             border: none;
    58.             border-radius: 5px;
    59.         }
    60.  
    61.         /* 点击的时候有个反馈 */
    62.         .row button:active {
    63.             background-color: grey;
    64.         }
    65.     style>
    66. head>
    67. <body>
    68. <div class="container">
    69.     <h1>表白墙h1>
    70.     <p>输入内容后点击提交, 信息会显示到下方表格中p>
    71.     <div class="row">
    72.         <span>谁: span>
    73.         <input type="text">
    74.     div>
    75.     <div class="row">
    76.         <span>对谁: span>
    77.         <input type="text">
    78.     div>
    79.     <div class="row">
    80.         <span>说: span>
    81.         <input type="text">
    82.     div>
    83.     <div class="row">
    84.         <button id="submit">提交button>
    85.     div>
    86.     
    87. div>
    88.  
    89. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
    90.  
    91. <script>
    92.         // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示.
    93.         // 点击的时候, 获取到三个输入框中的文本内容
    94.         // 创建一个新的 div.row 把内容构造到这个 div 中即可.
    95.         let containerDiv = document.querySelector('.container');
    96.         let inputs = document.querySelectorAll('input');
    97.         let button = document.querySelector('#submit');
    98.         button.onclick = function() {
    99.             // 1. 获取到三个输入框的内容
    100.             let from = inputs[0].value;
    101.             let to = inputs[1].value;
    102.             let msg = inputs[2].value;
    103.             if (from == '' || to == '' || msg == '') {
    104.                 return;
    105.             }
    106.             // 2. 构造新 div
    107.             let rowDiv = document.createElement('div');
    108.             rowDiv.className = 'row message';
    109.             rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
    110.             containerDiv.appendChild(rowDiv);
    111.             // 3. 清空之前的输入框内容
    112.             for (let input of inputs) {
    113.                 input.value = '';
    114.             }
    115.  
    116.             // 4. 把用户输入的数据, 构造出 HTTP 请求, 发送给服务器.
    117.             let body = {
    118.                 from: from,
    119.                 to: to,
    120.                 message: msg
    121.             };
    122.             $.ajax({
    123.                 type: 'post',
    124.                 // url: '/messageWall/message',
    125.                 url: 'message',
    126.                 contentType: 'application/json; charset=utf8',
    127.                 data: JSON.stringify(body),
    128.                 success: function(body) {
    129.                     // 预期 body 中返回 ok
    130.                     console.log(body);
    131.                 }
    132.             });
    133.         }
    134.  
    135.         // 在页面加载的时候, 发起一个 GET 请求给服务器, 从服务器拿到提交过的数据.
    136.         $.ajax({
    137.             type: 'get',
    138.             url: 'message',
    139.             success: function(body) {
    140.                 // 但是由于 jquery 见到响应中的 application/json , 就会自动的把响应
    141.                 // 转换成 js 对象数组. body 其实是 js 对象数组, 而不是 json 字符串了.
    142.                 // 就可以直接按照数组的方式来操作 body, 每个元素都是 js 对象
    143.  
    144.                 // 1. 遍历数组, 取出每个 js 对象.
    145.                 // 2. 根据这里的 js 对象构造出 页面元素, 显示到页面上
    146.                 let container = document.querySelector('.container');
    147.                 for (let i = 0; i < body.length; i++) {
    148.                     let message = body[i];
    149.                     // 此处 message 对象, 就形如
    150.                     // {
    151.                     //   from: '黑猫',
    152.                     //   to: '白猫',
    153.                     //   message: '喵'
    154.                     // }
    155.                     // 构造出 html 元素!!
    156.                     // 使用浏览器提供的 api (dom api) 创建 div 标签.
    157.                     let div = document.createElement('div');
    158.                     // 设置一个 CSS 的类. 应用到 CSS 样式了.
    159.                     div.className = 'row';
    160.                     // 给 div 标签里设置内容, 此处显示一行文本.
    161.                     div.innerHTML = message.from + " 对 " + message.to + " 说: " + message.message;
    162.                     container.appendChild(div);
    163.                 }
    164.             }
    165.         });
    166.  
    167.     script>
    168. body>
    169. html>

    4.MessageServlet.java:

    1. import com.fasterxml.jackson.databind.ObjectMapper;
    2. import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
    3.  
    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.ResultSet;
    14. import java.sql.SQLException;
    15. import java.util.ArrayList;
    16. import java.util.List;
    17.  
    18. class Message {
    19.     // 这里的变量名要和前端js的变量名完全匹配
    20.     public String from;
    21.     public String to;
    22.     public String message;
    23.  
    24.     @Override
    25.     public String toString() {
    26.         return "Message{" +
    27.                 "from='" + from + '\'' +
    28.                 ", to='" + to + '\'' +
    29.                 ", message='" + message + '\'' +
    30.                 '}';
    31.     }
    32. }
    33.  
    34. @WebServlet("/message")
    35. public class MessageServlet extends HttpServlet {
    36.     private ObjectMapper objectMapper = new ObjectMapper();
    37.     // private List list = new ArrayList<>();
    38.  
    39.     @Override
    40.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    41.         // 存档
    42.         // 读取body中的json格式,转化成Java格式,存入链表
    43.         Message message = objectMapper.readValue(req.getInputStream(), Message.class);
    44.         try {
    45.             save(message);
    46.         } catch (SQLException e) {
    47.             e.printStackTrace();
    48.         }
    49.         System.out.println("收到请求" + message);
    50.         resp.setStatus(200);
    51.         resp.getWriter().write("ok");
    52.     }
    53.  
    54.     // 使用jdbc,往数据库中插入数据
    55.     private void save(Message message) throws SQLException {
    56.         DataSource dataSource = new MysqlDataSource();
    57.         ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/messageWall?characterEncoding=utf8&useSSL=false");
    58.         ((MysqlDataSource)dataSource).setUser("root");
    59.         ((MysqlDataSource)dataSource).setPassword("123456");
    60.  
    61.         Connection connection = dataSource.getConnection();
    62.         String sql = "insert into message values(?, ?, ?)";
    63.         PreparedStatement statement = connection.prepareStatement(sql);
    64.         statement.setString(1, message.from);
    65.         statement.setString(2, message.to);
    66.         statement.setString(3, message.message);
    67.         statement.executeUpdate();
    68.         
    69.         statement.close();
    70.         connection.close();
    71.     }
    72.  
    73.     @Override
    74.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    75.         // 读档
    76.         resp.setContentType("application/json; charset=utf8");
    77.         String respJson = null;
    78.         try {
    79.             respJson = objectMapper.writeValueAsString(load());
    80.         } catch (SQLException e) {
    81.             e.printStackTrace();
    82.         }
    83.         resp.getWriter().write(respJson);
    84.     }
    85.  
    86.     private List load() throws SQLException {
    87.         DataSource dataSource = new MysqlDataSource();
    88.         ((MysqlDataSource) dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/messageWall?characterEncoding=utf8&useSSL=false");
    89.         ((MysqlDataSource) dataSource).setUser("root");
    90.         ((MysqlDataSource) dataSource).setPassword("123456");
    91.  
    92.         Connection connection = dataSource.getConnection();
    93.         String sql = "select * from message";
    94.         PreparedStatement statement = connection.prepareStatement(sql);
    95.         ResultSet resultSet = statement.executeQuery();
    96.         List list = new ArrayList<>();
    97.         while (resultSet.next()) {
    98.             Message message = new Message();
    99.             message.from = resultSet.getString("from");
    100.             message.to = resultSet.getString("to");
    101.             message.message = resultSet.getString("message");
    102.             list.add(message);
    103.         }
    104.         resultSet.close();
    105.         statement.close();
    106.         connection.close();
    107.         return list;
    108.     }
    109. }

    三.出错处理

    1.首先使用Fiddler抓包,判断是前端问题还是后端问题.

    2.如果是前端问题,去浏览器的开发者工具(F12)找错.

  • 相关阅读:
    web前端-html自定义列表
    《Beginning C++20 From Novice to Professional》第六章 Pointers and References
    【ESP32_8266_WiFi (五)】通过Arduino IDE向闪存文件系统上传文件
    OceanBase本周活动｜从0到1数据库内核实战教程；对话ACE第五期；Meetup广州站
    R语言回归及混合效应模型及贝叶斯实现
    代码随想录训练营二刷第四十八天 | 139.单词拆分 背包问题总结
    分布式事务Seata详细使用教程
    【C#】C# 开发环境配置（Rider 一个.NET 跨平台集成开发环境）
    Stanford CS143 速通PA2教程
    使用open as方法对文件进行操作
  • 原文地址：https://blog.csdn.net/m0_73345579/article/details/133209655