【Servlet学习四】实现一个内存版本的表白墙~

已于 2023-06-29 14:57:42 修改
阅读量619 收藏
点赞数 1
分类专栏： JavaEE初阶 文章标签： servlet
于 2023-06-29 14:53:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48479056/article/details/131449667
版权

目录

一、前端代码

二、后端代码实现

🌈1、全局类定义AppVar

🌈2、实体类定义Message

🌈3、获取所有信息：getMessageServlet实现前后端的交互

🌈4、添加数据：addMessageServlet，实现前后端交互

三、效果演示

目标：

        将输入内容放在内存里面存储，用List存储对象，这个对象有三个属性，表白人，被表白人，内容。这里我们除了关注后端代码的实现之外，也重点关注一下前端代码中函数的写法，后面我们在写数据库版本的表白墙时，重点就在后端部分了，前端直接使用已经写好的文件就行。

一、前端代码

<!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>
    <!--引入jquery-->
    <script src="jquery.min.js"></script>
    <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 class = "row">

        </div>
    </div>
</div>
<script>
        // --------------------查询所有表白信息---------------------------
        function initList(){
        //1、ajax的格式：要有下面4部分
            jQuery.ajax({
                url:"getAllMessage",
                type:"GET",
                data:{ },
                success:function(res){
                //2、showHtml表示下面控件中要展示的信息
                var showHtml = "";
                    //如果返回成功且数据长度不为0，就获取集合中的数据
                    if(res.code == 200 && res.data.length > 0){
                        //有数据
                        //获取res中的data数据,每一个data是一个对象，里面有三个属性，遍历将对象取出来
                        for(var i = 0;i < res.data.length;i++){
                            var messageObject = res.data[i];
                            //将三个属性拼接到下方-------------
                            showHtml += '<div class = "row">';
                            showHtml += messageObject.username +'对' + messageObject.toUser +'说了'+messageObject.msg;
                            showHtml += '</div>';
                        }
                    }else{
                        //否则直接在空间中给出提示
                        showHtml = '<div class="row"><h3>暂无表白数据！</h3></div>';
                    }
                    //3、将要展示的信息showHtml添加在控件中
                    jQuery("#allMsg").html(showHtml);
                }
            });
        }
        initList();


        // 添加数据
        function addmsg(){
            //1、得到输入控件:jQuery通过HTML元素的id属性获取指定的元素
            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("抱歉，请输入表白内容！");
                from.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);
                    }
                }
            });
        }
        </script>
</body>

</html>

二、后端代码实现

🌈1、全局类定义AppVar

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

🌈2、实体类定义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;
    }
}

🌈3、获取所有信息：getMessageServlet实现前后端的交互

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.IOException;
import java.util.HashMap;

/**
 * 获取所有的表白信息
 */
@WebServlet("/getAllMessage")
public class getMessageServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1、定义编码格式
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json;charset=utf-8");
        //2、获取所有的表白数据，转化为json格式
//        String jsonStr = AppVar.OBJECT_MAPPER.writeValueAsString(AppVar.MESSAGE_LIST);//jsonStr相当于只有下面的data
        //放在map中返回
        HashMap<String,Object> map = new HashMap<String, Object>();
        map.put("code",200);
        map.put("msg","");
        map.put("data",AppVar.MESSAGE_LIST);
        //3、将结果返回
        String jsonStr = AppVar.OBJECT_MAPPER.writeValueAsString(map);
        resp.getWriter().write(jsonStr);
    }
}

🌈4、添加数据：addMessageServlet，实现前后端交互

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.IOException;
import java.util.HashMap;

@WebServlet("/addmsg")
public class addMessageServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1、设置编码格式
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json;charset=utf-8");
        //2、获取表白数据：三个属性
        String username = req.getParameter("username");
        String touser = req.getParameter("touser");
        String msg = req.getParameter("msg");
        //3、判空
        HashMap<String,Object> map = new HashMap<String, Object>();
        //数据有问题
        if(username == null || username.equals("")||
            touser == null || touser.equals("") ||
                msg == null || msg.equals("")
        ){
            //设置返回数据类型格式：3个
            map.put("code",-1);
            map.put("msg","非法参数");
            map.put("data","");
        }else{
            //数据正常,将属性设置到message对象中
            Message message = new Message();
            message.setUsername(username);
            message.setToUser(touser);
            message.setMsg(msg);
            //将message对象存储到集合中
            AppVar.MESSAGE_LIST.add(message);
            //设置返回数据格式：3个
            map.put("code",200);
            map.put("msg","");
            map.put("data",1);
        }
        //4、返回数据
        String jsonStr = AppVar.OBJECT_MAPPER.writeValueAsString(map);
        resp.getWriter().write(jsonStr);
    }
}

三、效果演示

（1）运行代码，获取网页地链接，在谷歌浏览器打开页面如下：

 （2）输入空白内容，点击提交，给出警示信息

 （3）输入正确信息，点击提交

 坚持~

IUIUStar
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习Servlet后，用servlet实现一个简单的图书管理系统.zip
07-24
jsp，java web开发，毕业设计，课程设计作业，servlet框架，mysql数据库，源码资源
Servlet+JSP实现的一个简单博客系统.zip
07-24
java web开发，jsp，servlet框架，mysql，适合个人研究学习，用于毕业设计，课程设计等 java web开发，jsp，servlet框架，mysql，适合个人研究学习，用于毕业设计，课程设计等 java web开发，jsp，servlet框架，...
表白墙的实现【前后端交互】
m0_72161237的博客
06-03 1298
🌈上节 Servlet 我们学习了 Tomcat 提供的 API；；最后我们学习了 Servlet 中的三个核心类
【项目-前后端交互-项目】表白墙【servlet实践】
蓝天it（让亿万孩子在蓝天下共享优质教育）
05-12 583
【项目—前后端交互 案例】表白墙代码示例: 服务器版表白墙1. 准备工作2. 约定前后端交互接口3. 实现服务器端代码创建 Message 类创建 MessageServlet 类4. 调整前端页面代码5. 数据存入文件.6. 数据存入数据库1) 在 pom.xml 中引入 mysql 的依赖2) 创建数据库, 创建 messages 表3) 创建 DBUtil 类4) 修改 load 和 save 方法, 改成操作数据库代码总结1. pom.xml2. web.xml3. 表白墙.html4. DBUti
16.Servlet [一篇通]
xinhang10的博客
12-05 1955
一篇文章彻底讲解Servlet中大大小小的全部知识，通过此篇文章你可以学到如何从0创建到发布一个servlet小程序，如何使用idea自动化配置tomcat，不再需要手动一下一下的点击配置tomcat，在网页中出现各种错误是什么意思，知道了意思之后我们该怎么去解决他们呢，以及servlet中相关API的解析和讲解，最后作者附上了本文章所以代码，大家可以按需查找哦！！！
Servlet API 详解
qq_52843224的博客
03-05 511
servlet API
【Servlet】Servlet 详解（使用+原理）
热门推荐
吞吞吐吐大魔王的博客
04-21 2万+
文章目录1. Servlet 介绍1.1 什么是 Servlet1.2 Servlet 的主要工作2. Servlet 程序创建步骤2.1 创建项目2.2 引入依赖2.3 创建目录2.4 编写代码2.5 打包程序2.6 部署程序2.7 验证程序3. 使用 Smart Tomcat 进行部署3.1 安装 Smart Tomcat3.2 配置 Smart Tomcat3.3 使用 Smart Tomcat4. 访问出错解决方案4.1 出现 4044.2 出现 4054.3 出现 5004.4 出现“空白页面”4
初阶JavaEE（14）表白墙程序
m0_74343467的博客
11-05 556
初阶JavaEE（14）表白墙程序
Servlet的原理和基础使用
qq_45864756的博客
08-30 539
HttpServlet、HttpServletRequest、HttpServletResponse这三个类的学习
servlet
qq_63983125的博客
03-22 531
servlet
【JavaEE】Cookie与Session的前后端交互-表白墙登录设计
Carefree_State的博客
06-05 956
本文章重点讲解Cookie与Session的前后端交互，一些API的使用，以及其应用：表白墙登录页，讲解图文并茂！
基于Java的JavaWeb Servlet版本学习设计源码
04-10
本项目是一个基于Java的JavaWeb Servlet版本学习设计源码，共包含270个文件，其中包括62个JSP文件、58个Java文件等。系统采用了Java、JavaScript和CSS等技术，为用户提供了一个功能丰富的JavaWeb学习解决方案。系统...
利用servlet实现一个简单的聊天室
12-22
利用servlet技术实现一个简单的聊天室，实现多人同时交流。当发送聊天信息时，信息窗口刷新。信息窗口显示发言人的姓名以及发言的内容。在进入聊天室之前需要进行登录，即输入用户名。
jsp+servlet实现一个简易的员工管理系统
08-15
使用初学javaweb的小白
grpcio-1.3.0-cp35-cp35m-win_amd64.whl
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
ASP.NET多语种网络硬盘系统的设计(源码)
06-13
网络硬盘系统是计算机网络中比较流行的一种应用软件，但是一般的网络硬盘系统只适用于使用单一语种的人群。为满足不同语种人群对网络硬盘系统的需求，设计了多语种网络硬盘系统。采用ASP.NET 2.0开发语言，利用ASP.NET中的三层结构、B/S模式结构以及ASP.NET网页资源的设计思路，实现了包括文件夹的操作、文件的操作、网页的多语种化三个功能模块；通过文件夹功能模块，可以添加、删除、更改名字、移动、浏览文件夹；通过文件功能模块，可以查看文件属性、上传、下载、更改名字、移动文件；通过系统的多语种化模块，能够自动识别客户端的默认语言并反馈给客户端相应语言的网页。通过应用多语种网络硬盘系统，可以满足不同语种人群共享一个网络硬盘系统的需求，具有一定的应用价值。
pyzmq-22.0.0-cp38-cp38-win_amd64.whl
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
pyzmq-22.0.2-cp39-cp39-manylinux2010_i686.whl
最新发布
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
怎么实现一个servlet转向另一个servlet程序
10-29
要实现一个servlet转向另一个servlet程序，可以使用请求转发或者重定向两种方式。 1. 请求转发：在当前servlet中调用request.getRequestDispatcher()方法获取RequestDispatcher对象，然后使用forward()方法将请求...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值