实现数据库版本的留言墙（表白墙）练习

已于 2023-06-30 09:28:09 修改
阅读量297 收藏 5
点赞数 6
文章标签： 数据库 Servlet
于 2023-06-30 09:19:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53332052/article/details/131468912
版权
本文介绍了创建一个工程，构建目录结构，设置编码格式，管理Maven依赖，以及导入HTML和JS文件。通过Ajax实现前端向后端提交数据，后端使用Servlet接收数据并校验，然后通过Java代码操作MySQL数据库。文章还展示了如何返回处理结果的响应，并提供了数据库连接和DAO层的实现示例。
摘要由CSDN通过智能技术生成

目录

目标

1.创建工程

2.构建目录工程结构

 3.设置编码格式

 4.查看Maven的配置

 6.导入HTML和JS，配置tomcat

7.测试网站是否可以正常访问

 8.编写业务代码

目标：

  • 1.熟练掌握前端向后端提交数据
  • 2.后端接收数据并校验
  • 3.通过JAVA代码进行数据库操作
  • 4.返回处理结果的响应

1.创建工程

2.构建目录工程结构

 3.设置编码格式

 4.查看Maven的配置

 5.在pom.xml中导入依赖


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


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

 6.导入HTML和JS，配置tomcat

messagewall.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, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            width: 400px;
            margin: 0 auto;
        }

        .container h1 {
            margin: 20px 0;
            text-align: center;
        }

        .container .sub-title {
            color: #666;
            text-align: center;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .container .row {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container span {
            width: 80px;
        }

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

        .container .row>button {
            width: 280px;
            height: 30px;
            background-color: orange;
            border: none;
            color: white
        }

        .container .row>button:active {
            background-color: #666;
        }

        .container .message {
            padding: 20px;
            text-align: center;
        }

        .message p {
            height: 30px;
            line-height: 30px;
        }
    </style>
    <!-- 引入jQuery -->
    <script src="./js/jquery-3.6.3.min.js"></script>
</head>

<body>
    <div class="container">
        <h1>表白墙</h1>
        <p class="sub-title">输入后点击提交，会将内容显示在表格中</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="message">
            <!-- <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
            <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
            <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
            <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p> -->

        </div>
    </div>
</body>
<script>
    // 1. 获取相关的元素
    let submitBtnEl = document.querySelector('#submit');
    let inputEls = document.querySelectorAll('input');
    let messageEl = document.querySelector('.message');

    // 绑定事件
    submitBtnEl.onclick = function () {
        // 2. 处理用户输入的内容
        let sender = inputEls[0].value;
        let receiver = inputEls[1].value;
        let content = inputEls[2].value;
        // 非空校验
        if (sender == '' || receiver == "" || content == "") {
            alert('请正确输入内容');
            return;
        }
        // 3. 构造表白结果
        let str = '<b>' + sender + '</b> 对 <b>' + receiver + '</b>说：<b>' + content + '.</b>'
        // 4. 构建一个p标签 
        let messageRow = document.createElement('p');
        messageRow.innerHTML = str;
        // 4. 把结果加入到表白墙上
        messageEl.appendChild(messageRow)
        // 5. 清空输入框中的内容
        inputEls.forEach(element => {
            element.value = '';
        });

        // 处提交逻辑
        // 1. 封装JSON对象
        let postJson = {
            "sender" : sender,
            "receiver": receiver,
            "content" : content
        };
        let jsonStr = JSON.stringify(postJson);
        console.log(jsonStr);
        // 2. 提交AJVA请求
        $.ajax({
            // 请求使用的方法
            type: 'post',
            // 请求的URL，注意不要加斜杠
            url: 'message',
            // 格式
            contentType: 'application/json',
            // 发送的数据
            data: jsonStr,
            // 成功时的回调
            success : function(data) {
                console.log(data);
            }
        })
    };

    // 发送请求获取已有留言
    $.ajax({
         // 请求使用的方法
         type: 'get',
        // 请求的URL，注意不要加斜杠
        url: 'message',
        // 回调
        success: function (data) {
            data.forEach(element => {
                console.log(element);
                // <p><b>唐僧</b> 对 <b>悟空</b>说：<b>为师有点饿了.</b></p>
                // 1. 创建一个P标签
                let pEl = document.createElement('p');
                // 2. 构造内容
                pEl.innerHTML = '<b>'+element.sender+'</b> 对 <b>'+element.receiver+'</b>说：<b>'+element.content+'.</b>'
                // 3. 加入到父标签下
                messageEl.appendChild(pEl);

            });
            // 结果是一个数组，遍历结果
            // for (let index = 0; index < data.length; index++) {
            //     element = data[index];
            //     console.log(element);
            // }
            
        }
    });




</script>

</html>

7.测试网站是否可以正常访问

 8.编写业务代码

分析：

  • 用户从前端提交数据                    AJAX技术
  • 服务器要接受用户的数据            通过Servlet实现
  • 业务逻辑的处理                    
  • 操作数据库                                  JDBC 
  • 获取数据库的结果，并为用户构造响应    JSON

 在java目录下创建model包，包下创建类Message

public class Message {
    private Long id;  // 对应到数据中的主键
    private String sender; // 发送者
    private String receiver; // 接收者
    private String content; // 留言内容

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getSender() {
        return sender;
    }

    public void setSender(String sender) {
        this.sender = sender;
    }

    public String getReceiver() {
        return receiver;
    }

    public void setReceiver(String receiver) {
        this.receiver = receiver;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

在数据库中建表

  在java目录下创建utils包，包下创建类DBUtil

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

/**
 * 单例模式的数据库连接类
 * 作用是为了获取一个数据库连接
 *
 * @Author 比特就业课
 */

public class DBUtil {
    // 声明一个数据源对象
    private static DataSource dataSource = null;
    // 定义数据库连接的参数
    private static final String URL = "jdbc:mysql://localhost:3306/java78?characterEncoding=utf8&useSSL=false";
    private static final String USER = "root";
    private static final String PASSWORD = "123456";

    // 在静态方法中初始化数据源对象
    static {
        MysqlDataSource mysqlDataSource = new MysqlDataSource();
        mysqlDataSource.setURL(URL);
        mysqlDataSource.setUser(USER);
        mysqlDataSource.setPassword(PASSWORD);
        dataSource = mysqlDataSource;
    }

    // 私有化构造方法
    private DBUtil () {}

    /**
     * 获取数据库连接
     * @return
     * @throws SQLException
     */
    public static Connection getConnection () throws SQLException {
        // 通过数据源对象，获取数据库连接对象
        return dataSource.getConnection();
    }

    public static void close (ResultSet resultSet, PreparedStatement statement, Connection connection) {
        // 依次关闭并释放资源
        if (resultSet != null) {
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (statement != null) {
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (connection != null) {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

在src下 创建文件db.sql

   在java目录下创建dao包，包下创建类MessageDao


import com.bitejiuyeke.model.Message;
import com.bitejiuyeke.utils.DBUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

/**
 * @Author 比特就业课
 */

public class MessageDao {
    /**
     * 获取所有留言数据
     *
     * @return 留言集合
     */
    public List<Message> selectAll () {
        // 定义访问数据库的相关对象
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;

        try {
            // 1. 获取数据库连接
            connection = DBUtil.getConnection();
            // 2. 定义SQL语句
            String sql = "select id, sender, receiver, content from message_wall order by id desc";
            // 3. 预处理SQL
            statement = connection.prepareStatement(sql);
            // 4. 执行SQL并获取结果集
            resultSet = statement.executeQuery();
            // 5. 遍历结果集
            List<Message> messageList = null;
            while (resultSet.next()) {
                // 如果List为空，则初始化
                if (messageList == null) {
                    messageList = new ArrayList<>();
                }
                // 创建一个Message对象
                Message message = new Message();
                message.setId(resultSet.getLong(1));
                message.setSender(resultSet.getString(2));
                message.setReceiver(resultSet.getString(3));
                message.setContent(resultSet.getString(4));
                // 把对象加入List
                messageList.add(message);
            }
            // 返回结果
            return messageList;
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 关闭连接并释放资源
            DBUtil.close(resultSet, statement, connection);
        }

        return null;
    }

    /**
     * 新增一条留言记录
     * @param message 留言记录
     * @return 受影响的行数
     */
    public int insert(Message message) {
        Connection connection = null;
        PreparedStatement statement = null;

        try {
            connection = DBUtil.getConnection();
            String sql = "insert into message_wall values (null, ?, ?, ?)";
            statement = connection.prepareStatement(sql);
            // 处理占位符
            statement.setString(1, message.getSender());
            statement.setString(2, message.getReceiver());
            statement.setString(3, message.getContent());
            // 执行SQL
            int row = statement.executeUpdate();
            return row;
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(null, statement, connection);
        }

        return -1;
    }
}

在根目录下创建类MessageServlet


import com.bitejiuyeke.dao.MessageDao;
import com.bitejiuyeke.model.Message;
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;

/**
 * @Author 比特就业课
 */
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    // 定义数据库访问类
    private MessageDao messageDao = new MessageDao();
    // json转换
    private ObjectMapper objectMapper = new ObjectMapper();


    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 定义编码格式
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json; charset=utf-8");
        // 查询数据库中的留言列表
        List<Message> messages = messageDao.selectAll();
        // 判断结果是否为空
        if (messages == null) {
            // 避免返回的是一个"null"
            messages = new ArrayList<>();
        }
        // 返结果转为json并返回
        String jsonString = objectMapper.writeValueAsString(messages);
        // 返回结果
        resp.getWriter().write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 定义编码格式
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json; charset=utf-8");
        // 接收用户请求中的数据
        Message message = objectMapper.readValue(req.getInputStream(), Message.class);
        // 非空校验
        if (message == null || message.getSender() == null || message.getSender().equals("")
        || message.getReceiver() == null || message.getReceiver().equals("")
        || message.getContent() == null || message.getContent().equals("")) {
            // 返回一个错误的自定义状态码
            resp.getWriter().write("{\"code\": -1}");
            return;
        }
        // 调用DAO写入数据库
        int row = messageDao.insert(message);
        if (row <= 0) {
            // 返回一个错误的自定义状态码
            resp.getWriter().write("{\"code\": -1}");
            return;
        }
        // 返回成功
        resp.getWriter().write("{\"code\": 0}");


    }
}

打开浏览器输入网址填入数据测试

 在数据库中查看刚才的记录，完成

点子李
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Servlet 项目——连接数据库的表白墙（全部代码）
xhhhx_的博客
05-13 432
Servlet 连接数据库 表白墙项目 Tomcat maven java
一个表白墙项目
10-11
本人是在读研究生，最近需要找工作所以写了这个APP,虽然没什么卵用，但是觉得还是有很大收获，了解了MVP设计模式的nice以及一些第三方sdk的使用，为了以后开发打下一些基础.
【JavaWeb】简易表白墙的设计
X_H学Java的博客
09-19 2766
简易表白墙设计
表白墙(前端+后端+数据库)
m0_67683346的博客
11-22 6171
实现一个简单的表白墙案例
php操作mysql实现表白墙
zuoyanyan123456的博客
02-10 716
数据库驱动类型：host=主机名 dbname=数据库名 数据表名，账号和密码 在数据库表里面创建字符段，输入自己想要 ...
留言墙微信小程序，初学云开发实现数据库增删查改功能
07-28
【标题】：“留言墙微信小程序，初学云开发实现数据库增删查改功能”这个项目是为初学者设计的一个实践教程，旨在通过构建一个实际的微信小程序应用来教授云开发和数据库管理的基础知识。微信小程序是一种轻量级的...
留言墙系统源码PHP版本5.6
03-02
"留言墙系统源码PHP版本5.6"这个标题表明这是一个基于PHP编程语言开发的留言墙系统，特别强调了它使用的PHP版本是5.6。这意味着该系统的代码兼容性和运行环境需要满足PHP 5.6的要求。留言墙系统通常用于网站上收集...
匿名留言板表白墙 小程序校园树洞带后台
07-10
匿名留言板表白墙小程序校园树洞带后台，此源码为某站购买分享给大家，没后门没广告，源码内有搭建视贫和配置微信小程序公众号的办法 搭建环境： windows2008 Apache2.4 php5.6(必须！) MySQL5.61. 操作（用手...
H5自适应留言表白墙php源码
08-13
它的主要功能是实现一个自适应不同设备屏幕大小的留言表白墙。这里的“自适应”意味着该源码能够自动调整布局，以在手机、平板电脑或桌面电脑等不同设备上提供良好的用户体验。 【描述详解】：“php源码 一款H5...
基于PHP开发的表白墙，用于微信表白墙+双11表白墙+光棍节表白墙+单身节表白墙+情人节表白墙+源码+项目文档+数据库
最新发布
07-29
基于PHP开发的表白墙，用于微信表白墙+双11表白墙+光棍节表白墙+单身节表白墙+情人节表白墙+源码+项目文档+数据库，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ ...
网页表白墙
07-23
表白墙（最新修复版） 表白墙源码。
Java项目——表白墙（前后端连接+数据库存储）
m0_60867520的博客
11-20 893
调用servlet一系列方法，将数据库，前端，服务器三者连接起来，实现永久化存储的表白墙网站
【附源码】计算机毕业设计SSM校园表白墙服务平台
计算机程序_设计
10-25 1050
项目运行环境配置：（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可4.
Java项目-表白墙（前后端分离+数据库）已开源
Zincy星辰
04-20 1474
⭐相关阅读推荐⭐ 🌙前端项目—待办事项（HTML+CSS+JavaScript实现）🌙 Servlet ：Servlet API（HttpServlet Request Response） Servlet部署教程（基于Tomcat） Tomcat ：Tomcat使用教程 Smart Tomcat插件使用教程（IDEA） 前端网络：Fiddler使用教程（HTTP抓包 前端de...
【JavaEE】表白墙网站练习【前端+后端+数据库】
孙宇航的博客
11-19 1118
Model（操作数据存取的逻辑） View（给用户展示的界面） Controller（控制器，处理请求之后的关键逻辑）
PHP+MySql许愿墙
qq_24195981的博客
12-27 540
基于PHP和Mysql的许愿墙,可以进行增删改查操作,用户的登录与注册功能。
利用PHP开发的一款万能、表白墙系统
FJSAY
05-11 2548
万能墙系统
表白墙案例（前端，Java，Mysql）
q322359的博客
09-27 657
表白墙案例（前端，Java，Mysql）
【附源码】基于flask框架基于微信小程序的校园表白墙 (python+mysql+论文)
node-php毕设程序源码
03-30 877
同时，通过这个系统的开发，学生们可以锻炼自己的编程能力，提高实际项目开发的经验，为将来的职业生涯打下坚实的基础。在现代社会中，校园生活是年轻人成长的重要阶段。基于微信小程序的校园表白墙系统，可以为学生们提供一个匿名表达情感、交流心情的平台，让他们在校园生活中更加自信地表达自己的情感，同时也为校园文化建设增添一份活力。在数据库管理工具的选择上，使用了Navicat 11，这是一个用户友好且功能强大的数据库管理软件，它支持多种数据库系统，包括MySQL，并提供了图形化界面，使得数据库的管理和维护工作更加便捷。
ssm表白墙(开题+源码)
sryue08的博客
01-04 900
其中，表白墙作为一种特殊的社交媒体形式，因其能够为人们提供一个公开、私密的平台来表达情感，受到了广大用户的喜爱。首先，该系统能够为用户提供一个安全、私密的平台，让用户能够自由地表达情感，满足其情感交流的需求。此外，该系统的开发能够丰富社交媒体的形式和功能，推动社交媒体行业的发展和创新。[6]赵子昂, 黄钧露. JAVA编程在计算机应用软件中的应用特征与技术研究[J]. 电子测试, 2021, (18): 83-84.第 3 阶段：2022年8月-12月系统设计及实现，根据完成情况着手论文撰写。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值