【网络编程】Servlet的前后端练习 | 表白墙 | 前后端交互 | 提交消息 | 获取消息

已于 2024-05-17 16:28:47 修改
阅读量463 收藏 8
点赞数 5
分类专栏： 网络原理 文章标签： servlet 交互 网络 前后端交互 表白墙 提交消息 获取消息
于 2024-05-12 23:51:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64003319/article/details/138772476
版权

文章目录

一、Servlet的前后端练习

1.表白墙

在这里插入图片描述

服务器要实现的逻辑：

1.页面加载时，网页要从服务器这里获取到当前表白的数据。（让网页端给服务器发起http请求，服务器返回响应里就带着这些数据）

2.点击提交的时候，网页把用户输入的信息，发送到服务器这边，服务器负责保存

服务器要给页面提供两个http的接口：

1.获取消息 ：

​ 网页加载的时候，给服务器发起一个ajax请求

	请求:GET/message
	响应:HTTP/1.1 200 OK
	Content-Type:application/json
	[
		{
			from:'张三',
			to:'李四',
			message:'我喜欢你'
		},
		{
			from:'A',
			to:'B',
			message:'我不喜欢你'
		}		
	]

1.客户端先发起一个ajax请求

    //直接在script中写的代码会在页面加载时被执行
    //发起get请求，从服务器获取数据
    $.ajax({
        type : 'get',
        url:'message',
        //get请求不需要body，也就不需要contentType和data
        success:function(body){
            //处理服务器返回的响应数据（json格式的数组）
            
        }
    })

2.服务器收到这个请求，处理请求并进行响应

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setStatus(200);
        resp.setContentType("application/json;charset-utf8");
        //setStatus和setContentType必须在getWriter之前。
        //jackson本身支持把list类型的数据,转换成json数组
        String respJson = objectMapper.writeValueAsString(messageList);
        resp.getWriter().write(respJson);
    }

3.客户端收到响应，针对响应数据进行解析处理，把响应的信息构造成页面元素（html片段），并显示出来

        success:function(body){
            //处理服务器返回的响应数据（json格式的数组）
            //响应中，header带有content-Type:application/json。jquery就会自动把json字符串解析成json对象
            //如果没有带content-Type:application/json.就需要通过js代码：JSON.parse（）方法来手动把json字符串转成json对象
            let container = document.querySelector('.container')
            for(let i=0;i<body.length;i++){
                //body返回的是一个数组，此时message就是获取到的一个json对象
                let message = body[i]

                //根据message信息构造html片段
                let div = document.createElement('div');
                div.className = 'div1';
                div.innerHTML = message.from+"对"+message.to+"说"+message.message;
                container.appendChild(div);
            }
        }
2.提交消息：

​ 用户点击提交的时候，ajax给服务器发起一个请求。目的是为了把用户输入的内容，发送到服务器

	请求：POST/message
	Content-Type:application/json
		{
			from:'张三',
			to:'李四',
			message:'我喜欢你'
		}
	响应：HTTP/1.1 200 OK

1.ajax给服务器发送请求

        let body = { 
            "from":from,
            "to":to,
            "message":message 
        }
        //body是一个js对象,需要转换成json字符串
        let jsonString = JSON.stringify(body);
        //4.把用户填写的内容，发送给服务器，让服务器来保存
        $.ajax({
            type:'post',
            url:'message',
            contentType:'application/json;charset=utf8',
            data:jsonString,
            success:function(body){
                //收到响应之后要执行的代码
            }
        })
  • 前端ajax的url路径，不需要/，后端进行处理时，要带上 /

2.服务器读取请求，并计算出响应

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();
    private List<Message> messageList = new ArrayList<>();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Message message = objectMapper.readValue(req.getInputStream(), Message.class);
        //1.读取数据
        System.out.println("请求中的数据" + message);
        //2.进行保存
        messageList.add(message);
        //3.返回响应
        resp.setStatus(200);
        resp.getWriter().write("ok");
    }

3.前端代码，处理服务器的响应。

            success:function(responseBody){
                //success回调函数，不是立即执行的，而是在浏览器返回成功的响应后，才会执行
                //此处的body是响应中body的内容
                console.log("responseBody:"+responseBody)
            }
完整前端代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <div class="container">
        <h1>表白墙</h1>
        <p>请输入相关信息，点击提交数据会显示在表格中</p>
        <div class="div1">
            <span>谁：</span>
            <input  type="text" class="edit">
        </div>
        <div class="div1">
            <span>对谁：</span>
            <input type="text" class="edit">
        </div>
        <div class="div1">
            <span>说：</span>
            <input type="text" class="edit">
        </div>
        <div class="div1">
            <input type="button" value="提交" class="submit" onclick="Submit()">
        </div>

    </div>
</body>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .container{
        width: 400px;
        margin:  auto;
    }
    h1{
        text-align: center;
        margin-bottom: 40px;
    }
    p{
        text-align: center;
        color: gray;
        line-height: 60px;
    }
    .div1{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .edit{
        margin-bottom: 20px;
        width: 200px;
        height: 30px;
    }
    span{
        width: 50px;
        margin-bottom: 20px;
    }
    .submit{
        background-color: goldenrod;
        color: white;
        width: 260px;
        height: 30px;
        border: none;
        border-radius: 5px;

    }
    .submit:active{
        background-color: gray;
    }

</style>
<script>
    function Submit(){
        let edits = document.querySelectorAll('.edit')
        console.dir(edits)
        let from = edits[0].value
        let to =edits[1].value
        let message = edits[2].value
        if(from==''||to==""||message==''){
            return
        }
       // 1.获取三个输入框的值
       console.log(from+""+to+''+message)
        let div = document.createElement('div')
        //2.构造div
        div.className='div1'
        div.innerHTML=from+"对"+to+"说"+message
        console.log(div)
        let container = document.querySelector('.container')
        container.appendChild(div)
        //3.清空文本框
        for(let input of edits){
            input.value=''
        }
        let requestBody = { 
            "from":from,
            "to":to,
            "message":message 
        }
        //body是一个js对象,需要转换成json字符串
        let jsonString = JSON.stringify(requestBody);//（这个body是发送请求的body）
        //4.把用户填写的内容，发送给服务器，让服务器来保存
        $.ajax({
            type:'post',
            url:'message',
            contentType:'application/json;charset=utf8',
            data:jsonString,
            success:function(responseBody){
                //success回调函数，不是立即执行的，而是在浏览器返回成功的响应后，才会执行
                //此处的body是响应中body的内容
                console.log("responseBody:"+responseBody)
            }
        })

    }
    //直接在script中写的代码会在页面加载时被执行
    //发起get请求，从服务器获取数据
    $.ajax({
        type : 'get',
        url:'message',
        //get请求不需要body，也就不需要contentType和data
        success:function(body){
            //处理服务器返回的响应数据（json格式的数组）
            //响应中，header带有content-Type:application/json。jquery就会自动把json字符串解析成json对象
            //如果没有带content-Type:application/json.就需要通过js代码：JSON.parse（）方法来手动把json字符串转成json对象
            let container = document.querySelector('.container')
            for(let i=0;i<body.length;i++){
                //body返回的是一个数组，此时message就是获取到的一个json对象
                let message = body[i]

                //根据message信息构造html片段
                let div = document.createElement('div');
                div.className = 'div1';
                div.innerHTML = message.from+"对"+message.to+"说"+message.message;
                container.appendChild(div);
            }
        }
    })
</script>


</html>

​

完整后端代码：
import com.fasterxml.jackson.databind.ObjectMapper;
import sun.net.httpserver.HttpServerImpl;

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;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: Lenovo
 * Author: Weng-Jiaming
 * Date: 2024-05-10
 * Time: 15:56
 */

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();
    private List<Message> messageList = new ArrayList<>();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Message message = objectMapper.readValue(req.getInputStream(), Message.class);
        //1.读取数据
        System.out.println("请求中的数据" + message);
        //2.进行保存
        messageList.add(message);
        //3.返回响应
        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 {
        resp.setStatus(200);
        resp.setContentType("application/json;charset=utf8");
        //setStatus和setContentType必须在getWriter之前。
        //jackson本身支持把list类型的数据,转换成json数组
        String respJson = objectMapper.writeValueAsString(messageList);
        resp.getWriter().write(respJson);
    }
}

将消息数据存储进数据库中

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,都可以写到一个文件中，后续如果需要向其他机器上面迁移，方便进行 建表操作

create database if not exists message_wall charset utf8;

use message_wall;
-- 删表的目的是为了，防止之前数据库里有一样的表，对代码产生干扰
drop table if exists message;
create table message(`from` varchar(1024),`to` varchar(1024),message varchar(1024));

mysql> insert into message values('黑猫','白猫','喵');
Query OK, 1 row affected (0.01 sec)

mysql> insert into message values('白猫','黑猫','喵喵');
Query OK, 1 row affected (0.01 sec)
-- 准备两行数据

3.编写数据库代码

JDBC编程

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();
  //  private List<Message> messageList = new ArrayList<>();
    //引入数据库
    private DataSource dataSource = new MysqlDataSource();

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

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Message message = objectMapper.readValue(req.getInputStream(), Message.class);
        //1.读取数据
        System.out.println("请求中的数据" + message);
        //2.进行保存
      //messageList.add(message);
        //TODO 插入数据库
        try {
            save(message);
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }

        //3.返回响应
        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 {
        resp.setStatus(200);
        resp.setContentType("application/json;charset=utf8");
        //setStatus和setContentType必须在getWriter之前。
        //jackson本身支持把list类型的数据,转换成json数组

        //TODO 从数据库查询
        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.创建数据源
       // DataSource dataSource = new MysqlDataSource();

        //2.创建连接
        Connection connection = dataSource.getConnection();
        //3.构造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);
        //4.执行sql
        statement.executeUpdate();
        //5.回收资源
        statement.close();
        connection.close();

    }
    private List<Message> load() throws SQLException {
        //通过load方法从数据库中读取到message
        //1.创建数据源
        //2.创建链接
        Connection connection = dataSource.getConnection();
        //3.构造sql
        String sql = "select * from message";
        PreparedStatement statement = connection.prepareStatement(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();

        return messageList;
    }

}

点击移步博客主页，欢迎光临~

偷cyk的图

翁佳明
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Servlet实现前后端交互
GHL1996的博客
10-17 2036
原理：通过ajax调用HttpServlet来实现前后端数据交互 1.前端方面，通过ajax实现调用（别忘记引用jQuery） 实例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt
【Servlet】图解HTTP请求Tomcat服务器实现前后端交互
做技术人 · 产优质博客 · 找好工作
05-16 1644
图解HTTP请求Tomcat服务器实现前后端交互
AJAX学习笔记（五、AJAX+JSON与Servlet前后端交互）
三分恶的博客
07-11 2828
前后端分离实现 前后端分离的好处就不用多说了，前后端那么Java Web项目前后端分离是怎么实现的呢？ 1.浏览器发送请求 2.直接到达html页面（前端控制路由与渲染页面，整个项目开发的权重前移） 3.html页面负责调用服务端接口产生数据（通过ajax等等，后台返回json格式数据，json数据格式因为简洁高效而取代xml） 4.填充html，展现动态效果，在页面上进行解析并操作DOM。 它的...
Servlet实现简单的前后端交互
云先生呀
12-25 4748
Servlet实现简单的前后端交互 首先前后端交互是啥呢？ 在我的理解中大概是这样的 简单的讲就是数据的交换 接下来我们来看看应该要怎么实现这个简单的交互： 1、首先我们前端先不写静态页面，直接在url上将请求的参数放上去 2、后端要做的首先就是连接数据库，如果数据库不连，那么就是两个憨憨在傻笑 3、接受前端请求的参数，将请求的参数进行数据库查询 4、后端将结果返回给前端，就完成了一个交互 数据库： 数据库语句如下： 建表： DROP TABLE IF EXISTS `stus`; CREA
前后端分离技术渲染动态页面 - 表白墙(Servlet)
xaiobit_hl的博客
10-18 905
前后端分离技术渲染动态页面 - 表白墙(Servlet)
javaWeb基础二：Servlet（java前后端交互的技术）
DengShuo_shuai的博客
09-09 5901
2. Servlet 2.1 定义 Servlet是sun公司提供的一门用于开发动态web资源的技术，可以实现和客户端的交互，接收客户端请求和给客户端返回响应。 Sun公司在其API中提供了一个servlet接口，用户若想开发一个动态web资源需要完成以下2个步骤： 编写一个Java类，实现servlet接口。 把开发好的Java类部署到web服务器中。 2.2 Servlet接口 Servlet接口SUN公司定义了两个默认实现类，分别为：GenericServlet、HttpServlet。 ​ H
Javaweb基础-Servlet前后端交互
weixin_46899412的博客
01-07 3077
servlet Ajax 前后端交互
Java Web前后端交互方式
m0_37671741的博客
09-25 9006
Java web前后端的交互方式 1. 利用cookie对象 Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提，就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。 （1）后端代码 Cookie cookie=new Cookie("name", "hello"); response.addCookie(cookie);...
JAVA中前后端交互图解
北冥的博客
11-02 3301
思维（交互题），CF 1990E2 - Catch the Mole(Hard Version)
最新发布
EQUINOX1的博客
07-21 225
然后有个注意的点，如果当前儿子结点为最后一个结点，我们直接进去深搜，这既正确的同时也是为了防止被单链样例卡掉。由于剩余不超过70条路径，所以我们实际最多也就走70个分叉（再多路径就大于70条了）由于数据范围为5000，我们随便找个叶子结点询问71次，那么会剩下不超过70条路径。剩下的路径一定满足长度大于71，路径数乘长度 <= 5000，故不超过70条。我们还剩90次机会，路上二分最多十几次，我们如何70次内找到路径？考虑每次误判都会让鼹鼠上升一层，相应的，最外层的一层结点都没用了。
代码：前端与数据库交互的登陆界面
weixin_65633498的博客
07-21 687
注册
Axure中继器进阶指南：打造专业级交互
我码玄黄的博客
07-18 967
掌握中继器进阶操作，包括修改删除指定行、批量删除、排序、分页、增删改（函数方式）等。通过axure实现数据操作，提升用户体验和系统性能。
【HarmonyOS开发】弹窗交互（promptAction ）
包包熊的博客
07-16 892
实现效果点击按钮实现不同方式的弹窗showToast showDialog showActionMenu 代码
JavaEE和前端交互(细节)
2301_78085386的博客
07-21 530
1.JavaEE需配置服务器tomcat2.做好包管理和包命名 便于迅速找到和分辨出相应的类,一般包会用到。
[CP_AUTOSAR]_分层软件架构_接口之通信模块交互介绍
weixin_43722921的博客
07-19 1250
CP_AUTOSAR_分层软件架构_接口之通信模块交互。
实战篇(十一) ： 拥抱交互的三维世界：利用 Processing 和 OpenGL 实现炫彩粒子系统
帅小柏的博客
07-18 800
通过这篇文章，我们创建了一个简单但强大的三维粒子系统，利用 Processing 和 OpenGL 实现了炫彩的视觉效果，并添加了基本的鼠标交互功能。这个项目不仅展示了粒子系统的基本原理，还提供了一个平台，可以进一步扩展和优化，为更复杂的图形效果打下基础。希望你能从中获得灵感，并用这些技能创建出属于你自己的三维世界。让我们一起探索计算机图形学的无限可能吧！🌌如果你有任何问题或建议，欢迎在评论区留言。让我们一起不断学习和进步！🎉。
网络协议-SOTP 协议格式
ziyunLLL的博客
07-19 367
SOTP（Secure Overlay Transport Protocol）是一种安全的覆盖层传输协议，旨在提供增强的安全性和功能。2.密钥管理：密钥的管理和交换是协议安全的重要部分，通常使用公钥基础设施（PKI）或密钥交换协议（如 Diffie-Hellman）。1.安全性：确保加密算法和认证算法的安全性。常用的加密算法包括 AES，常用的认证算法包括 HMAC-SHA256。3.性能：加密和认证会增加计算开销，需要在安全性和性能之间找到平衡。SOTP 协议格式的一般结构。
SpringBoot整合SSE，实现后端主动推送DEMO
zjy660358的专栏
07-17 365
说起服务端主动推送，大家第一个想到的一定是WEBSOCKET。作为软件工程师，不能无脑使用一种技术，要结合实际情况，择优选取。SSE（Server-Sent Events）相比于WEBSOCKET1、轻量化、兼容性 基于传统的HTTP协议，所以浏览器兼容性比较好2、 只支持单向通讯。（服务器->客户端）
servlet和jsp前后端交互
04-17
在 Servlet 和 JSP 中，前后端交互可以通过一些方式来实现，比如通过表单提交、HttpSession、Cookie 等。其中，表单提交是常用的一种方式。当前端使用 表单提交 请求方式时，后端可以通过 Servlet 接收请求，获取...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值