12-代码实战——服务器版表白墙

这篇具有很好参考价值的文章主要介绍了12-代码实战——服务器版表白墙。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.版本一:将数据存到内存中

①约定前后端交互接口

a.添加表白信息:

b.查询表白列表:

②在webapp包下创建message-wall.html前端文件

③在java包下创建AddMessageServlet后端类

④在java包下创建MessageListServlet后端类

2.版本二:将数据存到数据库中

①创建数据库, 创建 messages 表

②在pom.xml中添加MySQL JDBC依赖

③在utils包下创建 DBUtils 类

④在java包下创建AddMessageServletV2后端类

⑤在webapp包下创建message-wallv2.html前端页面

⑥在java包下创建MessageListServletV2后端类


1.版本一:将数据存到内存中

①约定前后端交互接口

所谓 "前后端交互接⼝" 是进⾏ Web 开发中的关键环节。

具体来说,就是允许⻚⾯给服务器发送哪些 HTTP 请求,并且每种请求预期获取什么样的 HTTP 响应。

  • Java里不会直接去操作内存,但后端所有的Servlet类是运行在内存中,这里所说的将数据存到内存中,就是在后端程序中创建一个集合List,List里有一个对象,将数据存到List中,就相当于是存到内存中了。
  • 当不重启Tomcat时,换浏览器都会展示提交的数据;但若重启Tomcat,会释放内存,不会展示提交的数据了。
  • 后端拿到前端传递的3个数据后,将数据放到List里,并且提供一个查询接口。
  • 总共2个接口:①添加表白信息的接口;②查询表白列表的接口。

a.添加表白信息:

  1. url:/message/add
  2. type:POST
  3. 参数:from=xxx&to=yyy&msg=zzz
  4. 返回值:int类型数字

b.查询表白列表:

  1. url:/message/list
  2. type:GET
  3. 参数:无
  4. 返回值:[{"from":"", "to":"", "msg":""}, ...](json对象)

注:不建议写成一个url,不同的type,触达不同的业务。因为ajax使用哪个类型不能决定执行哪个业务方法。

②在webapp包下创建message-wall.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, initialscale=1.0">
    <title>表白墙</title>
    <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="js/jquery-1.9.1.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="mySubmit()">
    </div>
    <div id="allMsg">
    </div>
</div>
<script>
    //添加表白信息
    function mySubmit() {
        var from = jQuery("#from");
        var to = jQuery("#to");
        var msg = jQuery("#message");

        //1.非空效验
        if(from.val().trim() == "") {
            alert("请先输入from!");
            from.focus(); //聚焦光标
            return false; //不走下面的代码了
        }
        if(to.val().trim() == "") {
            alert("请先输入to!");
            to.focus();
            return false;
        }
        if(msg.val().trim() == "") {
            alert("请先输入msg!");
            msg.focus();
            return false;
        }

        //2.ajax提交数据给后端
        jQuery.ajax({
            url:"message/add", //提交到后端的地址
            type:"POST", //提交类型
            data:{
                from:from.val(),
                to:to.val(),
                msg:msg.val()
            }, //data是前端给后端提交的key值/参数
            success:function(result) { //回调函数,匿名函数,result是后端给前端返回的数据,result是一个int类型的值
                if(result != null && result > 0) {
                    alert("恭喜:添加成功!");
                    //刷新表白列表
                    getAllMsg();
                } else {
                    alert("抱歉:添加失败,请重试!");
                }
            }
        });
    }

    //查询表白列表
    function getAllMsg() {
        jQuery.ajax({
            url:"message/list", //最前面没有'/'
            type:"GET",
            data:{},
            success:function(result) { //result是一个json对象
                if(result != null && result.length > 0) {
                    //有表白数据
                    var msgHtml = "";
                    for(var i = 0; i < result.length; i++) {
                        msgHtml += 
                        '<div class = "row">'
                            + result[i].from +'对'
                            + result[i].to +'说'
                            + result[i].message 
                            + '</div>';
                    }
                    jQuery("#allMsg").html(msgHtml);
                } else if(result != null && result.length == 0) {
                    //没有表白数据
                    console.log("没有表白信息");
                } else {
                    alert("访问出错!");
                }
            }
        });
    }
    //要在页面加载时就执行,那么直接在下面调用即可
    getAllMsg();
</script>
</body>
</html>

③在java包下创建AddMessageServlet后端类

public class StringUtils {
    /**
     * 用来判null和判空的,如果为null或空,返回false
     * @param str
     * @return
     */
    public static boolean hasLength(String str) {
        return !(str == null || str.length() == 0);
    }
}
import lombok.Getter;
import lombok.Setter;
import utils.StringUtils;
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.ArrayList;
import java.util.List;

/**
 * 添加表白信息
 */
@WebServlet("/message/add")
public class AddMessageServlet extends HttpServlet {
    public static List<Message> msgList = new ArrayList<>();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int result = -1;
        //1.得到前端参数并效验
        String from = req.getParameter("from");
        String to = req.getParameter("to");
        String msg = req.getParameter("msg");
        if(StringUtils.hasLength(from) && StringUtils.hasLength(to) && StringUtils.hasLength(msg)) {
            //2.将表白对象加入到集合(内存)
            msgList.add(new Message(from, to, msg));
            result = 1;
        }
        //3.将结果返回给前端
        resp.setContentType("text/html; charset=utf-8");
        resp.getWriter().println(result);
    }
}

@Setter
@Getter
class Message {
    private String from;
    private String to;
    private String message;

    public Message(String from, String to, String message) {
        this.from = from;
        this.to = to;
        this.message = message;
    }
}

④在java包下创建MessageListServlet后端类

import com.fasterxml.jackson.databind.ObjectMapper;
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.List;

/**
 * 查询表白列表
 */
@WebServlet("/message/list")
public class MessageListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Message> messageList = AddMessageServlet.msgList;
        resp.setContentType("application/json; charset=utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        resp.getWriter().println(objectMapper.writeValueAsString(messageList));
    }
}

12-代码实战——服务器版表白墙

12-代码实战——服务器版表白墙

2.版本二:将数据存到数据库中

把表白墙程序修改成服务器版本JDBC+Servlet,这样即使页面关闭、服务器重启,表白墙的内容也不会丢失。

①创建数据库, 创建 messages 表

12-代码实战——服务器版表白墙

12-代码实战——服务器版表白墙

②在pom.xml中添加MySQL JDBC依赖

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.49</version>
</dependency>

③在utils包下创建 DBUtils 类

DBUtils 类主要实现以下功能:

  1. 创建 MysqlDataSource 实例,设置 URL, username, password 等属性。
  2. 提供 getConnection ⽅法,和 MySQL 服务器建⽴连接。
  3. 提供 close ⽅法,⽤来释放必要的资源。
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class DBUtils {
    //单例模式3步:
    //①声明一个私有的构造方法
    private DBUtils() {

    }

    //②提供一个私有的对象属性
    private static volatile MysqlDataSource mysqlDataSource;
    private static volatile Connection connection;

    //③提供一个公共的对外访问的方法,并且这个方法要加volatile和DCL双重效验锁
    private static MysqlDataSource getMysqlDataSource() {
        if(mysqlDataSource == null) {
            synchronized (DBUtils.class) {
                if(mysqlDataSource == null) {
                    mysqlDataSource = new MysqlDataSource();
                    mysqlDataSource.setURL("jdbc:mysql://127.0.0.1:3306/messagewall?character=utf8&useSSL=true");
                    mysqlDataSource.setUser("root");
                    mysqlDataSource.setPassword("12345678");
                }
            }
        }
        return mysqlDataSource;
    }

    //1.get connect
    public static Connection getConnection() {
        if(connection == null) { //首次访问
            synchronized (DBUtils.class) {
                if(connection == null) {
                    try {
                        MysqlDataSource dataSource = getMysqlDataSource();
                        connection = (Connection) dataSource.getConnection();
                    } catch (SQLException throwables) {
                        throwables.printStackTrace();
                    }
                }
            }
        }
        return connection;
    }

    //2.提供关闭资源的方法
    public static void close(ResultSet resultSet, PreparedStatement statement, Connection connection) throws SQLException {
        if(resultSet != null) {
            resultSet.close();
        }
        if(statement != null) {
            statement.close();
        }
    }
}

④在java包下创建AddMessageServletV2后端类

import com.mysql.jdbc.Connection;
import lombok.SneakyThrows;
import utils.DBUtils;
import utils.StringUtils;
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.sql.PreparedStatement;
import java.util.ArrayList;
import java.util.List;

/**
 * 添加表白信息
 */
@WebServlet("/message/add2")
public class AddMessageServletV2 extends HttpServlet {
    public static List<Message> msgList = new ArrayList<>();

    @SneakyThrows
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int result = -1;
        //1.得到前端参数并效验
        String from = req.getParameter("from");
        String to = req.getParameter("to");
        String msg = req.getParameter("msg");
        if(StringUtils.hasLength(from) && StringUtils.hasLength(to) && StringUtils.hasLength(msg)) {
            //2.将表白对象加入到数据库
            //2.1.得到Connect
            Connection connection = DBUtils.getConnection();
            //2.2.拼接sql,创建执行器
            String sql = "insert into messages(`from`,`to`,`message`) values(?,?,?)";
            PreparedStatement statement = connection.prepareStatement(sql);
            statement.setString(1,from);
            statement.setString(2,to);
            statement.setString(3,msg);
            //2.3.执行执行器,并返回结果
            result = statement.executeUpdate();
            //2.4.关闭资源
            DBUtils.close(null, statement, connection);
        }
        //3.将结果返回给前端
        resp.setContentType("text/html; charset=utf-8");
        resp.getWriter().println(result);
    }
}

⑤在webapp包下创建message-wallv2.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, initialscale=1.0">
    <title>表白墙——连接数据库版本</title>
    <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="js/jquery-1.9.1.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="mySubmit()">
    </div>
    <div id="allMsg">
    </div>
</div>
<script>
    //添加表白信息
    function mySubmit() {
        var from = jQuery("#from");
        var to = jQuery("#to");
        var msg = jQuery("#message");

        //1.非空效验
        if(from.val().trim() == "") {
            alert("请先输入from!");
            from.focus(); //聚焦光标
            return false; //不走下面的代码了
        }
        if(to.val().trim() == "") {
            alert("请先输入to!");
            to.focus();
            return false;
        }
        if(msg.val().trim() == "") {
            alert("请先输入msg!");
            msg.focus();
            return false;
        }

        //2.ajax提交数据给后端
        jQuery.ajax({
            url:"message/add2", //提交到后端的地址
            type:"POST", //提交类型
            data:{
                from:from.val(),
                to:to.val(),
                msg:msg.val()
            }, //data是前端给后端提交的key值/参数
            success:function(result) { //回调函数,匿名函数,result是后端给前端返回的数据,result是一个int类型的值
                if(result != null && result > 0) {
                    alert("恭喜:添加成功!");
                    //刷新表白列表
                    getAllMsg();
                } else {
                    alert("抱歉:添加失败,请重试!");
                }
            }
        });
    }

    //查询表白列表
    function getAllMsg() {
        jQuery.ajax({
            url:"message/list2", //最前面没有'/',若最前面要有'/',则还需要在'/'后面加上网站的名字,再加上message/list2
            type:"GET",
            data:{},
            //如果要设置传递的ContentType,还要传一个dataType属性
            success:function(result) { //result是一个json对象
                if(result != null && result.length > 0) {
                    //有表白数据
                    var msgHtml = "";
                    for(var i = 0; i < result.length; i++) {
                        msgHtml += 
                        '<div class = "row">'
                            + result[i].from +'对'
                            + result[i].to +'说'
                            + result[i].message 
                            + '</div>';
                    }
                    jQuery("#allMsg").html(msgHtml);
                } else if(result != null && result.length == 0) {
                    //没有表白数据
                    console.log("没有表白信息");
                } else {
                    alert("访问出错!");
                }
            }
        });
    }
    //要在页面加载时就执行,那么直接在下面调用即可
    getAllMsg();
</script>
</body>
</html>

⑥在java包下创建MessageListServletV2后端类

import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.jdbc.Connection;
import lombok.SneakyThrows;
import utils.DBUtils;
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.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

/**
 * 查询表白列表
 */
@WebServlet("/message/list2")
public class MessageListServletV2 extends HttpServlet {
    @SneakyThrows
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //查询数据库中的表白列表
        List<Message> list = new ArrayList<>();
        //1.得到connection
        Connection connection = DBUtils.getConnection();
        //2.拼接sql,创建执行器
        String sql = "select * from messages";
        PreparedStatement statement = connection.prepareStatement(sql);
        //3.执行sql,返回resultSet,并循环将数据添加到list中
        ResultSet resultSet = statement.executeQuery();
        while(resultSet.next()) {
            String from = resultSet.getString("from");
            String to = resultSet.getString("to");
            String message = resultSet.getString("message");
            list.add(new Message(from,to,message));
        }
        //4.关闭资源
        DBUtils.close(resultSet, statement, connection);

        resp.setContentType("application/json; charset=utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        resp.getWriter().println(objectMapper.writeValueAsString(list));
    }
}

12-代码实战——服务器版表白墙

12-代码实战——服务器版表白墙

PS:HashMap的遍历写法:

12-代码实战——服务器版表白墙文章来源地址https://www.toymoban.com/news/detail-494966.html

到了这里,关于12-代码实战——服务器版表白墙的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 零基础STM32+ESP12F+MQTT连接阿里云服务器完整流程(三、STM32通过代码连接阿里云服务器)

    要想实现通过代码实现STM32连入阿里云服务器,要首先实现使用AT指令通过串口连接阿里云,大家可以参考我之前的两篇文章,链接如下 链接: 零基础STM32+ESP12F+MQTT连接阿里云服务器完整流程(一、给ESP12F烧写AT/MQTT固件) 链接: 零基础STM32+ESP12F+MQTT连接阿里云服务器完整流程(

    2024年02月03日
    浏览(73)
  • 银河麒麟V10SP1高级服务器版本离线RPM方式安装nginx实战实例全网唯一

    先同步一下当前的系统时间 本次安装需要升级操作系统perl升级包以及nigx安装包2类包 1、建立2个下载包的文件夹来下载离线安装包 如果小伙伴们再生产环境安装部署没有公网可以用,可以直接去我的CSDN的下载资源直接去下载安装包上传的服务器即可 2、获取下载perl离线安装

    2024年02月05日
    浏览(96)
  • 从【抓包分析】到【代码实战】再到【上线云服务器】,实现下载某破站视频(附源码)

    目录 一、前言 二、需求分析 三、抓包分析 1、拿到视频文件真实地址 2、下载视频文件 3、下载声音文件 四、程序实现 1、拿到完整json 2、下载视频文件 3、下载音频文件 4、视频音频合并 5、文件下载 五、部署到腾讯云 1、打包 2、上传 3、启动 4、安装ffmpeg 5、验证一下 六、

    2024年02月08日
    浏览(43)
  • 银河麒麟V10SP1高级服务器版本离线RPM方式升级openssl openssh 自动化升级系统补丁实战实例全网唯一

    银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务,适应虚拟化、云计算、大数据、工业互联网时代对主机系统可靠性、安全性、性能、扩展性和实时性等需求,依据CMMI5级标准研制的提供内生本质安全、云原生支持、自主平台深入优

    2024年02月15日
    浏览(94)
  • 安可目录入围产品名单(安可目录入围产品名单 服务器)

     2022-12-15  看点  20 推广 2021信创产品名录有: 1、中孚信息(300659): 公司是专注于信息安全领域的高新技术企业,主营业务为信息安全产品研发,生产销售及信息安全服务。公司主要产品及服务包含信息安全保密产品,商用密码产品,信息安全服务。 2、中科曙光(60

    2024年02月04日
    浏览(70)
  • Python开发技能实战-通过配置的代理服务器在具有外网连接的环境中在Pycharm中运行python代码

    打开科学上网工具,使得能够在浏览器科学上网,通过科学上网工具的配置文件,可以看出本地和远程代理的映射关系,此时,远程地址=本地地址,远程端口=本地端口。 1、在程序中配置请求网页代理请求。不需要在Windows上配置代理服务器。这种一般用于爬虫request请求。

    2024年02月06日
    浏览(64)
  • 服务器获取Jar包运行目录

    System.getProperty(\\\"user.dir\\\") 可直接获取Jar包启动运行的目录 (/usr/local/test/app.jar — /usr/local/test) 与方法1不同,获取的是jar包真实运行的路径(!/BOOT-INF/classes!/) 3.总结 ProtectionDomain 和 CodeSource 类的主要作用是获取 当前运行应用程序 的 JAR 包路径。与直接使用 System.getProperty(“

    2024年02月04日
    浏览(33)
  • 服务器与网站部署知识体系目录

    服务器全套基础知识:包含基本概念,作用,服务器选择,服务器管理等 域名相关基础知识普及 域名备案流程(个人备案,腾讯云 / 阿里云) 将网站域名访问从http升级到https(腾讯云/阿里云) docsify快速部署搭建个人知识库(支持本地、服务器、虚拟机运行) halo搭建炫酷

    2024年02月08日
    浏览(43)
  • 【Liunx常用操作】配置sftp服务器(用户独立目录&用户共享目录)

    提示:为保证文章的正确性和实用性,文章内容可能会不定时优化改进,若您有建议或者文章存在错误请私信留言或评论指正💖😊💖。下面以Ubuntu22.04操作系统为例,介绍具体的操作步骤,如果本文对你有帮助,记得关注加收藏🤞。 本文以Ubuntu22.04系统为例,介绍如何在

    2024年02月04日
    浏览(56)
  • haproxy服务器对nginx服务器web服务调度负载均衡、用nfs做共享目录(脚本部署)

    目录 一、准备 二、在作为haproxy的服务器上导入以下shell执行haproxy安装 三、由于nginx服务需要用的nfs共享目录,先部署nfs 四、nginx服务器1部署 五、nginx服务器2部署同上 六、测试 一、准备 四台服务器 系统 IP 搭建服务器 centos7 192.168.1.12 haproxy centos7 192.168.1.132 nfs(rpcbind) ce

    2024年02月09日
    浏览(49)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包