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

这篇具有很好参考价值的文章主要介绍了【Servlet学习四】实现一个内存版本的表白墙~。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、前端代码

二、后端代码实现

🌈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)运行代码,获取网页地链接,在谷歌浏览器打开页面如下:

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

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

 (2)输入空白内容,点击提交,给出警示信息

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

 (3)输入正确信息,点击提交【Servlet学习四】实现一个内存版本的表白墙~

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


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

 坚持~文章来源地址https://www.toymoban.com/news/detail-511826.html

到了这里,关于【Servlet学习四】实现一个内存版本的表白墙~的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 实现服务器版本的表白墙

    目录 初始前端代码 网页初始效果  一、确定接口  二、编写代码 2.1 创建项目七步走 1、创建Maven项目   2、引入依赖 3、构建目录 4、编写代码 5、打包、部署  ​编辑 7、验证代码  三、具体的代码逻辑 3.1 服务器——两个服务接口  3.2 前端页面的代码 3.2.1 前端存档代码

    2023年04月18日
    浏览(37)
  • servlet内存马学习

    项目配置 注意一定要添加 否则访问路径会404,tomcat并没有对项目生效 Servlet.class: web.xml: pom.xml: 效果: 启动后,访问url,可以看到成功输出init和service 停止后,可以看到输出destroy 注解的方式: 以下全是注解形式来看 其实看似使用三种创建Servlet的方式,但是实际上也是

    2024年02月10日
    浏览(36)
  • 使用Servlet实现表白墙网站(前后端互联)小项目,Mac的M1(没有setting)在哪里找到Setting页面,下载smart tomcat及smart tomcat的配置。

    首先我认为,最清楚的就是了解了前后端进行的初步作用,前端是布置画面,制作用户的交互,后端相当于,保存你的每一步操作,每一步进行的操作,历史搜索记录,保存一些数据,以及和前端相互连接,当然这个也是针对这个小项目,要是更大的则也需要更加细化。 目录

    2024年02月08日
    浏览(46)
  • 【Servlet综合项目练习】实现一个简单的博客系统~

    目录 🌟一、数据库设计部分 1、建表分析:系统中一共要实现几张表?  2、开始建表 🌟二、大概框架与实现功能 🌟 三、代码实现部分 🌈前言1:工具类的实现(utils包下) 1、数据库连接的工具类 2 、 用户信息判空的工具类 3、判断当前用户是否已经登录的工具类 🌈前

    2024年02月15日
    浏览(40)
  • 使用JavaBean+Servlet+JSP实现一个简单的后台登陆和注册功能

    JavaBean泛指java的一些基本组件,类似domain,service,utils等 Servlet是运行在服务器端可以接收客户端 请求 并向客户端发送 响应 的一个 Java类 ,servlet的主要职责有三个,分别是(1)获取请求,接收请求参数;(2)调用业务逻辑;(3)页面导航,返回数据。 JSP是一种使用Java语言

    2024年02月04日
    浏览(49)
  • 【图书管理系统】Servlet+JSP+MySql 实现的一个前后端 javaweb项目(内附源码)

    源码分享在文末! 学习完Javaweb的知识后做了个项目练练手,我选择了经典而且比较简单的图书管理系统。 最近有时间,整理了一下,分享给大家,希望能够帮到你! 基于B/S结构 前端: HTML+CSS+JS +JQuery 后端: Servlet+JSP+MySql 操作系统: win8/win10 JDK: 8.0 开发工具: Intellij IDEA2020.1 旗舰

    2024年02月06日
    浏览(51)
  • C语言动态内存练习:【通讯录(动态内存版本)实现】

    前面我们写了一个静态数组版本的通讯录,再结合刚学习的动态内存管理的知识,我们现在来实现一个动态内存版本的通讯录。 动态内存版本的通讯录,主要还是为了解决静态数组版本的通讯录空间太大导致的内存浪费和空间太小不够存放的问题。 扩容策略: 为通讯录设置

    2023年04月13日
    浏览(72)
  • 【Servlet学习六】Cookie 与Session && 实现登录与上传文件

    目录 一、Cookie与Session(掌握) 🌈1、Cookie是什么? 🌈2、Session是什么? 二、代码功能演示 🌈1、实现登录功能(掌握) 🌈2、实现上传文件功能(掌握) 1、目标:实现程序,通过网页上传一张图片到服务器。 2、核心方法总结 问题1:为什么会有cookie?         HTTP协议

    2024年02月11日
    浏览(52)
  • Java安全之servlet内存马分析

    目录 前言  什么是中间键 了解jsp的本质 理解servlet运行机制 servlet的生命周期 Tomcat总体架构  查看Context 的源码 servlet内存马实现 参考 前言  php和jsp一句话马我想大家都知道,早先就听小伙伴说过一句话木马已经过时了,现在是内存马的天下了 ,内存马无落地文件,更隐蔽

    2024年02月04日
    浏览(38)
  • 【项目】从零实现一个高并发内存池

    目录 一、项目介绍 1、该项目的原型 2、该项目所涉及到的技术及博主往期参考文章 3、池化技术 4、内存池的内碎片和外碎片 二、先来看一个定长内存池设计 三、高并发内存池的三层框架设计 1、thread cache的实现 1.1thread cache整体框架 1.2哈希桶映射对齐规则 1.3Thread Local Stor

    2024年02月08日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包