基于servlet编写的表白墙项目(后端代码 含数据库操作)

最新推荐文章于 2024-06-13 21:12:59 发布
最新推荐文章于 2024-06-13 21:12:59 发布
阅读量882 收藏 9
点赞数 29
文章标签： servlet 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ningbaidexia/article/details/136025957
版权

前提准备
项目前端代码和效果
在这里插入图片描述

<!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>
    <style>
        /* * 通配符选择器, 是选中页面所有元素 */
        * {
            /* 消除浏览器的默认样式. */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 600px;
            margin: 20px auto;
        }

        h1 {
            text-align: center;
        }

        p {
            text-align: center;
            color: #666;
            margin: 20px 0;
        }

        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
        }

        .row span {
            width: 80px;
        }

        .row input {
            width: 200px;
            height: 30px;
        }

        .row button {
            width: 280px;
            height: 30px;
            color: white;
            background-color: orange;
            /* 去掉边框 */
            border: none;
            border-radius: 5px;
        }

        /* 点击的时候有个反馈 */
        .row button:active {
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点击提交, 信息会显示到下方表格中</p>
        <div class="row">
            <span>谁: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>说: </span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
        <!-- <div class="row">
            xxx 对 xx 说 xxxx
        </div> -->
    </div>

    <script>
        // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. 
        // 点击的时候, 获取到三个输入框中的文本内容
        // 创建一个新的 div.row 把内容构造到这个 div 中即可. 
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#submit');
        button.onclick = function() {
            // 1. 获取到三个输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if (from == '' || to == '' || msg == '') {
                return;
            }
            // 2. 构造新 div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row message';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
            containerDiv.appendChild(rowDiv);
            // 3. 清空之前的输入框内容
            for (let input of inputs) {
                input.value = '';
            }
        }
        
    </script>
</body>
</html>

创建项目和引入依赖
去maven库下载servlet和json需要的依赖

<dependencies>
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.14.2</version>
        </dependency>

    </dependencies>

我们再将项目部署到tomcat上
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

当前 这个表白墙页面 已经可以输入内容 点击提交也能显示内容 我们要做的后端代码工作就是

  1. 用户点击提交的时候 把刚才输入的内容通过网络传输给服务器 由服务器保存这个数据(存档)
  2. 后续由页面加载 就通过网络获取之前保存的内容(读档)

需要进行前后端交互接口的约定 约定好 前端会给后端发一个什么样的http请求 后端又会返回一个什么样的http响应

第一步
针对存档操作来说前端发起一个HTTP请求
POST /messageWall(路径)

{
	from : "小红"
	to : "小明"
	message : "你好" 
}

(此处约定使用的json格式 把数据传到后端)
然后服务器返回了一个HTTP响应
HTTP/1.1 200OK

第二步
针对读档操作(前端页面加载的时候 需要从服务器拿到之前已经提交的数据)
GET /messageWall
响应:
HTTP/1.1 200 OK

{
	{
		from : "小红"
		to : "小明"
		message : "你好"
	}	 
	{
		from : "小明"
		to : "小红"
		message : "你好"
	}
}

此处响应的就是json数组 里面的数据会有多条

我们创建一个MessageServlet类 来编写后端代码


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.ArrayList;
import java.util.List;

//定义要将json对象转化成的java类
class Message{
    public String from;
    public String to;
    public String message;
    public String toString() {
        return "Message{" +
                "from='" + from + '\'' +
                ", to='" + to + '\'' +
                ", message='" + message + '\'' +
                '}';
    }
}
@WebServlet("/message")
public class MessageWall extends HttpServlet {
    //定义一个Object类来接受我们的json对象
    private ObjectMapper objectMapper = new ObjectMapper();
    //将消息保存到一个数组(服务器中 一旦服务器重启内存数据就没了)
    private List<Message> messageList = new ArrayList<>();
    //实现存档功能
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 读取请求body 转换从java对象
        Message message = objectMapper.readValue(req.getInputStream(),Message.class);
        //2. 得到message之后把message保存到服务器中
        messageList.add(message);
        //3.返回响应
        resp.setStatus(200);
    }
    //实现读档功能
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //把内存中的Message 组成json返回到响应中
        //针对List这种jackson会自动整理成json数组
        //里面的每个元素又会被jackson转换成{}json对象
        String respJson = objectMapper.writeValueAsString(messageList);
        //告诉浏览器返回的响应body是一个json格式utf8编码
        resp.setContentType("application/json; charset=utf8");
        resp.getWriter().write(respJson);
    }
}

通过这个代码就实现了后端的逻辑 通过进一步编写前端代码把HTTP请求发出来 并处理HTTP响应
我们通过vs打开并编写前端代码

先让js代码发起"存档"请求 需要前端后端通过http交互 要使用ajax
我们可以在网络上找一个jquery地址
在这里插入图片描述

将其粘贴到前端代码上 接下来我们就可以使用相关的方法了
在这里插入图片描述
我们在后面加上
在这里插入图片描述
这一步代码 前面代表的是key 后面的是value
key只能是字符串类型 而value则可以是其他各种类型(数字 字符串 其他对象 数组)在这里的value相当于是三个变量里三个输入框的内容

在这里插入图片描述
这里的url相对路径带 / 开头
如果是绝对路径则 不带 / 开头
在js里 js对象虽然格式上和json相似 但是仍然是不同的所以我们通过js标准库 里面有JSON.stringify方法 把js对象转换成json字符串 还有JSON.parse方法 把json字符串转换成js对象
用户点击提交按钮 触发js提交数据的代码

在这里插入图片描述
执行流程
在这里插入图片描述
在页面加载的时候 发起一个GET请求给服务器 从服务器拿到提交过的数据
在这里插入图片描述

$.ajax({
            type:'get',
            url:'message',
            success: function(body){
                //但是由于jquery自动帮助做好了json字符串转换成js对象数组所以此时的body已经是js数组了不需要使用JSON.parse进行解析
                //1.遍历数组 取出每个js对象
                //2.根据这里的js对象构造出页面元素显示到页面上
                let container =document.querySelector('.container');
                for(let i = 0; i < body.length; i++){
                    let message = body[i];
                    let div = document.createElement('div');
                    div.className = 'row';
                    div.innerHTML = message.from + "对" + message.to + "说:" + message.message;
                    container.appendChild(div);
                } 
            }
        })

效果
在这里插入图片描述
这时我们就将服务器提交过的数据显示到了页面上
即使我们将页面关闭再打开还是能拿到之前的数据

输入的内容通过网络传输给服务器 由服务器保存这个数据 但是我们重启的服务器的时候内存刷新之前的数据就没有了 所以我们可以使用数据库将数据存起来

数据库版本

1.引入数据库的依赖(驱动包)
同样使用maven 把数据库驱动包下载
在这里插入图片描述
选择合适自己数据库的版本
在这里插入图片描述
在之前的代码加上
在这里插入图片描述

2.创建数据库数据表
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.编写代码
JDBC操作数据库 完成这里的数据存和取出

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

//定义要将json对象转化成的java类
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 MessageWall extends HttpServlet {
    //定义一个Object类来接受我们的json对象
    private ObjectMapper objectMapper = new ObjectMapper();
    //将消息保存到一个数组(服务器中 一旦服务器重启内存数据就没了)
    //此处不打算使用内存存储
    //private List<Message> messageList = new ArrayList<>();
    //实现存档功能
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 读取请求body 转换从java对象
        Message message = objectMapper.readValue(req.getInputStream(),Message.class);
        //2. 得到message之后把message保存到服务器中
        //messageList.add(message);
        try {
            save(message);
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
        System.out.println("服务器收到message:"+ message);

        //3.返回响应
        resp.setStatus(200);
    }




    //实现读档功能
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //把内存中的Message 组成json返回到响应中
        //针对List这种jackson会自动整理成json数组
        //里面的每个元素又会被jackson转换成{}json对象
        List<Message> messageList = null;
        try {
            messageList = load();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
        String respJson = objectMapper.writeValueAsString(messageList);
        //告诉浏览器返回的响应body是一个json格式utf8编码
        resp.setContentType("application/json; charset=utf8");
        resp.getWriter().write(respJson);
    }



    private void save(Message message) throws SQLException {
        //通过jdbc 往数据库中存一个数据
        //1.创建数据源
        DataSource dataSource= new MysqlDataSource();
        ((MysqlDataSource) dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/message_test?characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource) dataSource).setUser("root");
        ((MysqlDataSource) dataSource).setPassword("123456");
        //2.建立连接
        Connection 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 {
        //1.创建数据源
        DataSource dataSource= new MysqlDataSource();
        ((MysqlDataSource) dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/message_test?characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource) dataSource).setUser("root");
        ((MysqlDataSource) dataSource).setPassword("123456");
        //2.建立连接
        Connection connection = (Connection) dataSource.getConnection();
        //3.构造SQL
        String sql = "select * from message";
        PreparedStatement statement = connection.prepareStatement(sql);
        //4.执行SQL
        ResultSet resultSet = statement.executeQuery();
        //5.遍历结果集合
        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);
        }
        //6.关闭连接释放资源
        resultSet.close();
        statement.close();
        connection.close();
        return messageList;
    }
}

这样我们可以直接从数据库加入数据
在这里插入图片描述
然后就可以服务器重新加载时读取之前的数据
在这里插入图片描述
也可以在客户端写入数据 保存到数据库
在这里插入图片描述
数据库就会保存
在这里插入图片描述

ningbaidexia
关注
  • 29
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【JavaEE】表白墙网站练习【前端+后端+数据库】
孙宇航的博客
11-19 1096
Model（操作数据存取的逻辑） View（给用户展示的界面） Controller（控制器，处理请求之后的关键逻辑）
Java项目——表白墙（前后端连接+数据库存储）
m0_60867520的博客
11-20 879
调用servlet一系列方法，将数据库，前端，服务器三者连接起来，实现永久化存储的表白墙网站
使用Servlet实现表白墙网站（前后端互联）小项目，Mac的M1（没有setting）在哪里找到Setting页面，下载smart tomcat及smart tomcat的配置。
weixin_72953218的博客
10-17 964
使用Servlet实现表白墙网站（前后端互联）小项目，Mac的M1（没有setting）在哪里找到Setting页面，下载smart tomcat及smart tomcat的配置。
【JavaEE】基于mysql与servlet自制简易的表白墙程序
黄小黄的博客
03-06 1370
本文实现了一个简单的表白墙程序。使用到了 JDBC、线程安全的单例模式、Servlet核心编程、前端代码的编写以及使用 jackson 解析 json 信息。文章全部代码已上传到 gitee，文末自取
【Servlet学习五】实现一个简单的数据库版本的留言墙！
qq_48479056的博客
06-28 650
（model下的message.java文件）//要在数据库中先设置好这个表，包括这四个属性//对应到数据库中的主键//发送者//接受者//留言内容//生成相应的get和set方法return id;//1、先声明一个数据源对象//注意这个DataSource是javax.sql下的，不要选错啦//定义数据库连接的参数//在静态方法中初始化数据源:static在类加载的时候只执行一次，生命周期只有一次static {//使用的是哪个数据库，就设置哪个数据源。
实现数据库版本的留言墙（表白墙）练习
qq_53332052的博客
06-30 287
使用Servlet实现表白墙
前后端分离技术渲染动态页面 - 表白墙(Servlet)
xaiobit_hl的博客
10-18 887
前后端分离技术渲染动态页面 - 表白墙(Servlet)
代码案例—— web版表白墙及文件上传
潘潘的博客
06-07 2384
实现服务器版表白墙，内含详细步骤及代码详解
表白墙的实现【前后端交互】
m0_72161237的博客
06-03 1298
🌈上节 Servlet 我们学习了 Tomcat 提供的 API；；最后我们学习了 Servlet 中的三个核心类
JavaWeb课程设计-基于Servlet Tomcat Mysql 的全栈项目源码(含数据库sql).zip
12-15
JavaWeb课程设计-基于Servlet Tomcat Mysql 的全栈项目源码(含数据库sql).zipJavaWeb课程设计-基于Servlet Tomcat Mysql 的全栈项目源码(含数据库sql).zipJavaWeb课程设计-基于Servlet Tomcat Mysql 的全栈项目源码...
servlet+vue后端代码
05-04
servlet+vue后端代码，实现前端登录功能，根据用户名和密码登录，返回对应的响应给前端
基于servlet 和 jsp 编写新闻管理系统+数据库.zip
04-23
该系统基于 Servlet 和 Jsp 编写，拥有完整的新闻管理系统的功能，包括了三个模块：后台管理模块、PC 端用户模块、手机端用户模块，并且基于过滤器编写了登录验证功能。 后台管理 后台管理系统中，包括了以下功能：...
java web项目源码基于servlet简易手机网上商城+mysql数据库文件
11-06
这个基于Servlet的简易手机网上商城是一个完整的Java Web项目，适用于初学者或中级开发者。它包含了前端页面、后端逻辑和数据库设计。 前端页面使用JSP、HTML、CSS和JavaScript技术，具有响应式设计，适应不同尺寸...
基于Servlet的网上花店系统源码+数据库.zip
01-13
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、...基于Servlet的网上花店系统源码+数据库.zip基于Servlet的网上花店系统源码+数据库.zip
【Qt实现录频】
最新发布
m0_45463480的博客
06-13 48
请注意，这只是一个简单的示例代码，实际应用中你可能需要处理更多的细节，如捕获不同视频格式、处理录制过程中的错误等。希望这个示例对你有所帮助，另外你也可以在Qt官方文档中找到更多关于Qt Multimedia模块的详细信息。在Qt中实现录制视频可以通过使用Qt Multimedia模块来实现。在上面的示例中，VideoRecorder类提供了一个简单的界面，其中包括一个用于录制视频的按钮。当按钮被点击时，toggleRecord()槽函数将会启动或停止录制。
Spring Security实现用户认证四：使用JWT与Redis实现无状态认证
不做菜虚困的博客
06-12 658
在基本的通信流程中，我们一般采用Session去存储用户的认证状态。在Spring Security实现用户认证三中讲过，在拿到前端传输过来的用户名和密码之后，会有专门的过滤器处理这部分的需求，并且对认证成功的用户生成Token且存储在Session中。在下次发起请求时，直接从Session中取出同用户名的token进行密码哈希的比较要认证用户。对于无状态认证，则我们的认证不依赖与服务器端存储的Session的状态。所以无状态认证需要我们每次从前端传输一个包含完整认证信息的Token到服务器端进行自定义的认
jmeter性能优化之mysql监控sql慢查询语句分析
回家吃月饼的学习交流地
06-09 821
jmeter性能之sql慢查询语句分析
canal应用
qq_33816292的博客
06-12 99
canal分享模块链接。
基于servlet的系统前端与后端如何连接
06-02
基于servlet的系统前端与后端连接可以通过以下步骤实现： 1. 在前端页面中定义表单，表单的action属性指向后端servlet的URL； 2. 在后端servlet中重写doGet或doPost方法，获取前端传递过来的数据，进行数据处理； 3...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值