【Java EE初阶二十六】简单的表白墙（二）

news2025/1/23 3:22:17

2. 后端服务器部分

2.1 服务器分析

2.2 代码编写

2.2.2 前端发起一个ajax请求

2.2.3 服务器读取上述请求,并计算出响应

         服务器需要使用 jackson 读取到前端这里的数据,并且进行解析：

代码运行图：

2.2.4 回到前端代码，处理服务器返回的响应

1、对服务器的响应做出反应

        此处 success 回调函数,不是立即执行的，而是在浏览器收到服务器返回的成功这样的响应的时候，才会执行到 function，这个函数的第一个参数,就是响应数据的 body 中的内容，如下所示：

        为了和请求对应上，一般服务器返回的数据，也会按照 json 格式来组织，代码如下所示：

        当前浏览器和服务器所实现的效果如下：

服务器收到的请求：

浏览器收到的响应：

 

        当前数据已经被提交到服务器保存了，目前还需要能够把服务器的数据拿回到客户端页面上并显示；

2、把服务器的数据拿回到客户端页面上,并显示；

       至于为啥还要从服务器拿消息？
（1、当前页面上显示的数据，也是在浏览器内存中保存的，刷新页面/关闭了重新打开,之前的数据就没了
（2、其他的客户端打开页面也是有数据的.

编写代码步骤如下：

1)客户端在页面加载的时候,发起一个 http 请求

  $.ajax({
            type: 'get', 
            url: 'message',
            success: function(body) {
//处理服务器返回来的数据，使用json格式的数组
          });

2)服务器收到这个请求,要处理这个请求并生成响应,

        服务器收到的每条消息,都转成了 Message 对象,放到上述 List 中了，返回的结果, 也就是这个 List 的数据.，需要把 List 里的每个 Message 取出来, 转成json 字符串,最终拼到一起,得到了响应结果；

注意：jackson 本身就支持把 List 类型的数据转成json 数组

        jackson 看到了 messagelist 是一个 List 类型，转成的json 字符串就是一个json 数组，
jackson 自动遍历 List 里的每个元素，把每个元素,分别都转成 json 字符串；

        这一部分代码如下：

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 通过这个方法来处理当前获取消息列表的 get 请求. 不需要解析参数, 直接返回数据即可.
        resp.setStatus(200);
        resp.setContentType("application/json; charset=utf8");
        // 从数据库查询
        List<Message> messageList = null;
        try {
            messageList = load();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
        String respJson = objectMapper.writeValueAsString(messageList);
        resp.getWriter().write(respJson);
    }

        确保这几个代码的执行顺序：
        setStatus 和 setContentType 必须在 getWriter 前面，否则可能不会生效(构造出一个非法的 http 响应报文)
3)、客户端收到响应,就需要针对响应数据进行解析处理，把响应中的信息,构造成页面元素,并显示出来.

        上图中body 就是服务器返回的响应，即数据中 json 格式的数组；当响应中, header 带有 Content-Type: application/ison，jquery 就会自动的把 json字符串, 解析成js 对象了。

        如果没有带 Content-Type: application/json，就需要通过js 代码 JSON.parse 方法来手动把 json 字符申转成js 对象；

        我们要构造的内容如下图所示：

        将构造出来的上面的这个 div,添加到下面这个 div 的末尾：

        html页面上的任何一个元素,都可以用一个js 对象来表示；反之,js 的对象也可以设置到页面中，

3. 把数据存储到数据库中

        数据库引入到代码中，主要有一下几个步骤：

1)、引入数据库的依赖

<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

2)、建库建表.建库建表需要用到 sql;
3)、编写数据库代码--->JDBC

后端代码如下所示：

import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;

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 javax.sql.DataSource;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

class Message {
    public String from;
    public String to;
    public String message;

    @Override
    public String toString() {
        return "Message{" +
                "from='" + from + '\'' +
                ", to='" + to + '\'' +
                ", message='" + message + '\'' +
                '}';
    }
}

@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    private ObjectMapper objectMapper = new ObjectMapper();

    // 引入数据库, 此时 messageList 就不再需要了.
    // private List<Message> messageList = new ArrayList<>();

    private DataSource dataSource = new MysqlDataSource();

    @Override
    public void init() throws ServletException {
        // 1. 创建数据源
        ((MysqlDataSource) dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/message_wall?characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource) dataSource).setUser("root");
        ((MysqlDataSource) dataSource).setPassword("111111");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 读取前端发来的数据, 把这个数据保存到服务器这边.
        Message message = objectMapper.readValue(req.getInputStream(), Message.class);
        System.out.println("请求中收到的 message: " + message);
        // 最简单的办法, 直接在内存中保存. 可以使用一个集合类, 把所有收到的 message 都存到内存中.
        // 很明显, 保存到内存, 并非是一个非常合理的办法. 后续一旦重启服务器, 数据丢失了.
        // 相比之下, 把这个数据持久化存储到数据库中, 更科学的.
        // messageList.add(message);
        // 插入数据库
        try {
            save(message);
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
        // 返回一个响应
        resp.setStatus(200);
        resp.getWriter().write("ok");
        // resp.setContentType("application/json");
        // resp.getWriter().write("{ ok: true }");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 通过这个方法来处理当前获取消息列表的 get 请求. 不需要解析参数, 直接返回数据即可.
        resp.setStatus(200);
        resp.setContentType("application/json; charset=utf8");
        // 从数据库查询
        List<Message> messageList = null;
        try {
            messageList = load();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
        String respJson = objectMapper.writeValueAsString(messageList);
        resp.getWriter().write(respJson);
    }

    private void save(Message message) throws SQLException {
        // 通过这个方法把 message 插入到数据库中

        // 1. 建立连接
        Connection connection = dataSource.getConnection();

        // 2. 构造 SQL
        String sql = "insert into message values(?, ?, ?)";
        PreparedStatement statement = connection.prepareStatement(sql);
        statement.setString(1, message.from);
        statement.setString(2, message.to);
        statement.setString(3, message.message);

        // 3. 执行 SQL
        statement.executeUpdate();

        // 4. 回收资源
        statement.close();
        connection.close();
    }

    private List<Message> load() throws SQLException {
        // 通过这个方法从数据库读取到 message.

        // 1. 建立连接
        Connection connection = dataSource.getConnection();

        // 2. 构造 SQL
        String sql = "select * from message";
        PreparedStatement statement = connection.prepareStatement(sql);

        // 3. 执行 sql
        ResultSet resultSet = statement.executeQuery();

        // 4. 遍历结果集合
        List<Message> messageList = new ArrayList<>();
        while (resultSet.next()) {
            Message message = new Message();
            message.from = resultSet.getString("from");
            message.to = resultSet.getString("to");
            message.message = resultSet.getString("message");
            messageList.add(message);
        }

        // 5. 回收资源
        resultSet.close();
        statement.close();
        connection.close();

        // 6. 返回 messageList
        return messageList;
    }
}

ps：关于表白墙小项目就到这里了，后续如有不足会维持更新的！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1474759.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue项目从后端下载文件显示进度条或者loading

vue项目从后端下载文件显示进度条或者loading

//API接口 export const exportDownload (params?: Object, peCallback?: Function) > {return new Promise((resolve, reject) > {axios({method: get,url: ,headers: {access_token: ${getToken()},},responseType: blob,params,onDownloadProgress: (pe) > {peC…
阅读更多...
Flutter（三）：Stack、Positioned、屏幕相关尺寸、Navigator路由跳转

Flutter（三）：Stack、Positioned、屏幕相关尺寸、Navigator路由跳转

页面尺寸 通知栏高度&#xff1a;MediaQuery.of(context).padding.top顶部导航高度&#xff1a;kToolbarHeight底部导航高度&#xff1a;kBottomNavigationBarHeight屏幕宽&#xff1a;MediaQuery.of(context).size.width屏幕高&#xff1a;MediaQuery.of(context).size.height…
阅读更多...
SpringMVC 学习（十）之异常处理

SpringMVC 学习（十）之异常处理

目录 1 异常处理介绍 2 通过 SimpleMappingExceptionResolver 实现 3 通过接口 HandlerExceptionResolver 实现 4 通过 ExceptionHandler 注解实现&#xff08;推荐&#xff09; 1 异常处理介绍 在 SpringMVC中&#xff0c;异常处理器&#xff08;Exceptio…
阅读更多...
项目解决方案：海外门店视频汇聚方案（全球性的连锁店、国外连锁店视频接入和汇聚方案）

项目解决方案：海外门店视频汇聚方案（全球性的连锁店、国外连锁店视频接入和汇聚方案）

目 录 一、概述 二、建设目标及需求 2.1 建设目标 2.2 需求描述 2.3 需求分析 三、建设方案设计 3.1 系统方案拓扑图 3.2 方案描述 3.3 服务器配置推荐 四、产品功能 4.1 资源管理平台 &#xff08;1&#xff09;用户权限管理 &#xff08;2&#xff09…
阅读更多...
AD9226 65M采样 模数转换

AD9226 65M采样 模数转换

目录 AD9220_ReadTEST AD9220_ReadModule AD9226_TEST_tb 自己再写个 260M的时钟&#xff0c;四分频来提供65M的时钟。 用 vivado 写的 AD9226_ReadTEST module AD9226_ReadTEST( input clk, input rstn,output clk_driver, //模块时钟管脚 input [12:0]IO_data, //模块数…
阅读更多...
LACP——链路聚合控制协议

LACP——链路聚合控制协议

LACP——链路聚合控制协议 什么是LACP&#xff1f; LACP&#xff08;Link Aggregation Control Protocol&#xff0c;链路聚合控制协议&#xff09;是一种基于IEEE802.3ad标准的实现链路动态聚合与解聚合的协议&#xff0c;它是链路聚合中常用的一种协议。 链路聚合组中启用了…
阅读更多...
Linux运维-Web服务器的配置与管理(Apache+tomcat)（没成功，最后有失败经验）

Linux运维-Web服务器的配置与管理(Apache+tomcat)（没成功，最后有失败经验）

Web服务器的配置与管理(Apachetomcat) 项目场景 公司业务经过长期发展&#xff0c;有了很大突破&#xff0c;已经实现盈利&#xff0c;现公司要求加强技术架构应用功能和安全性以及开始向企业应用、移动APP等领域延伸&#xff0c;此时原来开发web服务的php语言已经不适应新的…
阅读更多...
云服务器ECS价格表出炉_2024年最新价格表——阿里云

云服务器ECS价格表出炉_2024年最新价格表——阿里云

2024年最新阿里云服务器租用费用优惠价格表&#xff0c;轻量2核2G3M带宽轻量服务器一年61元&#xff0c;折合5元1个月&#xff0c;新老用户同享99元一年服务器&#xff0c;2核4G5M服务器ECS优惠价199元一年&#xff0c;2核4G4M轻量服务器165元一年&#xff0c;2核4G服务器30元3…
阅读更多...
高防IP简介

高防IP简介

高防IP可以防御的有包括但不限于以下类型&#xff1a; SYN Flood、UDP Flood、ICMP Flood、IGMP Flood、ACK Flood、Ping Sweep 等攻击。高防IP专注于解决云外业务遭受大流量DDoS攻击的防护服务。支持网站和非网站类业务的DDoS、CC防护&#xff0c;用户通过配置转发规则&#x…
阅读更多...
Nginx反向代理ip透传与负载均衡

Nginx反向代理ip透传与负载均衡

前言 上篇介绍了nginx服务器单向代理和动静分离等相关内容&#xff0c;可参考Nginx重写功能和反向代理-CSDN博客&#xff0c;这里就ip透传和负载均衡对nginx反向代理做进一步了解。 目录 一、客户端ip透传 1. 概述 2. 一级代理 2.1 图示 2.2 操作过程 3. 二级代理 3.…
阅读更多...
type may not be empty [type-empty]

type may not be empty [type-empty]

原因是使用了规范commit信息的工具&#xff0c;你的提交信息不符合规范&#xff0c;所以被拒绝了 commit规范工具 commitlinthusky 解决方式一&#xff1a; 修改提交信息&#xff0c; 使其符合规范 git commit -m "feat: 新功能"使用Git Gui的使用以下格式写提交…
阅读更多...
wu-framework-parent 项目明细

wu-framework-parent 项目明细

wu-framework-parent 介绍 springboot 版本3.2.1 wu-framework-parent 是一款由Java语言开发的框架&#xff0c;目标不写代码但是却能完成功能。 框架涵盖无赖ORM( wu-database-lazy-starter)、仿生组件 、easy框架系列【Easy-Excel、easy-listener、easy-upsert】 授权框架(…
阅读更多...
华为ipv6 over ipv4 GRE隧道配置

华为ipv6 over ipv4 GRE隧道配置

思路&#xff1a; PC1访问PC2时&#xff0c;会先构造源ipv6为2001:1::2&#xff0c;目的IPV6为2001:2::2的ipv6报文&#xff0c;然后查看PC1的路由表&#xff0c;发送到R1&#xff0c;r1接收后&#xff0c;以目的IPV6地址2001:2::2查询IPV6路由表&#xff0c;出接口为tun0/0/0…
阅读更多...
C++ 补充之常用遍历算法

C++ 补充之常用遍历算法

C遍历算法和原理 C标准库提供了丰富的遍历算法&#xff0c;涵盖了各种不同的功能。以下是一些常见的C遍历算法以及它们的概念和原理的简要讲解&#xff1a; for_each&#xff1a;对容器中的每个元素应用指定的函数。 概念&#xff1a;对于给定的容器和一个可调用对象&#xff…
阅读更多...
jenkins+kubernetes+git+dockerhub构建devops云平台

jenkins+kubernetes+git+dockerhub构建devops云平台

Devops简介 k8s助力Devops在企业落地实践 传统方式部署项目为什么发布慢&#xff0c;效率低&#xff1f; 上线一个功能&#xff0c;有多少时间被浪费了&#xff1f; 如何解决发布慢&#xff0c;效率低的问题呢&#xff1f; 什么是Devops&#xff1f; 敏捷开发 提高开发效率&…
阅读更多...
Linux中数据库sqlite3的基本命令的使用

Linux中数据库sqlite3的基本命令的使用

数据库概念介绍 数据库安装 首先将本地的三个sqlite3安装包移动到共享文件夹然后在移动到自己创建的文件夹中如下&#xff1a; 然后对安装包进行解压如下&#xff1a;sudo dpkg -i *.deb检查是否安装成功sqlite数据库命令 系统命令 &#xff0c; 都以’.开头 .exit .quit .…
阅读更多...
springboot+vue+mysql+easyexcel实现文件导出+导出的excel单元格添加下拉列表

springboot+vue+mysql+easyexcel实现文件导出+导出的excel单元格添加下拉列表

Excel导出 EasyExcel官方文档 官方文档本身写的非常详细&#xff0c;我就是根据官方文档内的写Excel里web中的写实现的导出 后端 对象 需要写一个实体类 其中涉及到一些用到的EasyExcel的注解 ColumnWidth(20) 列宽设为20&#xff0c;自定义的&#xff0c;放在实体类上面是…
阅读更多...
ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1+, currently the ‘ssl‘报错解决

ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1+, currently the ‘ssl‘报错解决

安装labelme出错了 根据爆栈的提示信息&#xff0c;我在cmd运行以下命令之后一切正常了&#xff0c;解决了问题&#xff01; pip install urllib31.26.6参考网址&#xff1a;ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1, currently the ‘ssl’ module is compile…
阅读更多...
智慧物流之道：数据可视化引领全局监控

智慧物流之道：数据可视化引领全局监控

在智慧物流的背景下&#xff0c;数据可视化催生了物流管理的全新范式。首先&#xff0c;通过数据可视化&#xff0c;物流企业可以实现对整个供应链的全景式监控。下面我就可以可视化从业者的角度&#xff0c;简单聊聊这个话题。 首先&#xff0c;图表和地图的直观展示使决策者能…
阅读更多...
Rust使用calamine读取excel文件，Rust使用rust_xlsxwriter写入excel文件

Rust使用calamine读取excel文件，Rust使用rust_xlsxwriter写入excel文件

Rust使用calamine读取已存在的test.xlsx文件全部数据&#xff0c;还读取指定单元格数据&#xff1b;Rust使用rust_xlsxwriter创建新的output.xlsx文件&#xff0c;并写入数据到指定单元格&#xff0c;然后再保存工作簿。 Cargo.toml main.rs /*rust读取excel文件*/ use cala…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023