【Web】基于Servlet、Tomcat、HTTP协议、html、js、css实现的表白墙(数据可持久化保存至硬盘中)

简介: 【Web】基于Servlet、Tomcat、HTTP协议、html、js、css实现的表白墙(数据可持久化保存至硬盘中)

【Web】基于Servlet、Tomcat、HTTP协议、html、js、css实现的表白墙(数据可持久化保存至硬盘中)


网页实现效果如下

39.png


Tomcat配置

40.png


项目文件目录


41.png


MessageServlet


import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
class Message{
    public String from;
    public String to;
    public String message;
}
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    private ObjectMapper objectMapper = new ObjectMapper();
    //private List<Message> messageList = new ArrayList<Message>();
    // 这个是保存文件的路径
    private String filePath = "D:/Git/java/messagewall/messages.txt";
    //这个方法用来处理从服务器获取到消息数据
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        List<Message> messageList = load();
        objectMapper.writeValue(resp.getWriter(), messageList);
    }
    private List<Message> load() {
        // 这个方法负责读文件, 把读到的数据获取到之后, 放到 List<Message> 中
        List<Message> messageList = new ArrayList<>();
        System.out.println("从文件加载!");
        // 此处我们需要按行读取. FileReader 本身不支持. 需要套上一层 BufferedReader
        // 当然这里使用 Scanner 也行
        try (BufferedReader bufferedReader = new BufferedReader(new FileReader(filePath))) {
            while (true) {
                String line = bufferedReader.readLine();
                if (line == null) {
                    break;
                }
                // 如果读取到 line 的内容, 就把 line 解析成一个 Message 对象
                String[] tokens = line.split("\t");
                Message message = new Message();
                message.from = tokens[0];
                message.to = tokens[1];
                message.message = tokens[2];
                messageList.add(message);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        System.out.println("从数据库读取数据!");
        return messageList;
    }
    // 这个方法用来处理, 从客户端提交数据给服务器
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Message message = objectMapper.readValue(req.getInputStream(), Message.class);
        // 在这里, 要进行一个 "写文件" 操作
        save(message);
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write("{\"ok\": 1}");
    }
    private void save(Message message) {
        System.out.println("向文件中写入数据!");
        // FileWriter 的使用方法, 就和咱们前面介绍过的 PrintWriter 差不多. 里面都是有一个关键的方法叫做 write
        try (FileWriter fileWriter = new FileWriter(filePath, true)) {
            // 写入文件的格式也有很多方式. 可以直接写 json, 也可以使用行文本(每个记录占一行, 字段之间使用分隔符区分)
            fileWriter.write(message.from + "\t" + message.to + "\t" + message.message + "\n");
        } catch (IOException e) {
            e.printStackTrace();
        }
        System.out.println("向数据库中写入数据!");
    }
}


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>

表白墙.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>Document</title>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交, 会将信息显示在表格中</p>
        <div class="row">
            <span>谁: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>对谁: </span>
      <input class="edit" type="text">
     </div>
     <div class="row">
         <span>说什么: </span>
         <input class="edit" type="text">
     </div>
     <div class="row">
         <input type="button" value="提交" class="submit">
     </div>
   </div>
<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;
    }
 </style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  //1.在页面加载的时候访问服务器,从服务器这边获取到消息列表并展示出来
    function load(){
      $.ajax({
          type: 'GET',
          url: 'message',
          success: function(data,status){
              //data是响应的body,此时的响应可能只是一个字符串格式,可以手动的进行一个解析,按照json格式解析成对象
              let container = document.querySelector('.container');
              //let message = JSON.parse(data);//data已经是数组类型,不用再解析(将string转成array或者object)了
              let messages = data;
              for(let message of messages){
                  let row = document.createElement('div');
                  row.className = 'row';
                  row.innerHTML = message.from + '对' + message.to + '说:' + message.message;
                  container.appendChild(row);
              }
          }
      });
    }
    load();
    //2.点击提交按钮的时候把当前的数据构造一个HTTP请求发送给服务器
    // 给点击按钮注册点击事件
    var submit = document.querySelector('.submit');
    submit.onclick = function () {
    // 1. 获取到编辑框内容
    var edits = document.querySelectorAll('.edit');
    var from = edits[0].value;
    var to = edits[1].value;
    var message = edits[2].value;
    console.log(from + "," + to + "," + message);
    if (from == '' || to == '' || message == '') {
    return;
    }
     // 2. 构造 html 元素
     var row = document.createElement('div');
     row.className = 'row';
     row.innerHTML = from + '对' + to + '说: ' + message;
     // 3. 把构造好的元素添加进去
     var container = document.querySelector('.container');
     container.appendChild(row);
     // 4. 同时清理之前输入框的内容
     for (var i = 0; i < 3; i++) {
       edits[i].value = '';
     }
    //5.构造一个http请求,把消息发给服务器端保存
    $.ajax({
        type: "POST",
        url: "message",
        data: JSON.stringify({from: from,to: to,message: message}),
        contentType: "application/json: charset=utf-8",
        success: function(data, status){
            if(data.ok ==1){
                console.log('提交信息成功!');
            }else{
                console.log('提交信息失败!');
            }
        }
    })
}
</script>
</body>
</html>


pom.xml


引入所需依赖


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>org.example</groupId>
    <artifactId>messagewall</artifactId>
    <version>1.0-SNAPSHOT</version>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>7</source>
                    <target>7</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <dependencies>
        <!-- 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>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.13.1</version>
        </dependency>
    </dependencies>
</project>



相关文章
|
2天前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
6 0
|
3天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
10 2
|
3天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
15 3
|
8天前
|
移动开发 前端开发 JavaScript
[初学者来练]用html+css+javascript个人博客作业需求
【6月更文挑战第3天】该项目旨在通过HTML、CSS和JavaScript创建一个响应式个人博客网站,提升前端开发技术理解与实践能力。主要包括设计简洁页面布局、实现主页展示、文章列表、详情页及评论功能。技术要求使用HTML5/CSS3/JavaScript,可选前端框架,强调代码质量和可维护性。提交内容需包括完整网站、开发文档和测试过的代码。评分标准涉及设计、功能实现、技术应用和文档质量。
11 0
|
10天前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
|
15天前
|
JavaScript 前端开发
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
|
17天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
JSON 前端开发 JavaScript
JavaScript HTTP客户端库axios介绍
HTTP客户端是很多时候我们都需要用到的功能,今天就来介绍一个比较流行的JavaScript编写的HTTP客户端库axios。 安装 如果你会使用npm的话,可以使用npm来装,非常方便。
898 0
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园食堂订餐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园食堂订餐系统附带文章源码部署视频讲解等
28 10
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园失物招领网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园失物招领网站附带文章源码部署视频讲解等
20 9