• Java项目——表白墙（前后端连接+数据库存储）

    前端的表白墙实现代码在之前的博客中有

    Message类

    表白墙中的每一个表白信息都由Message对象呈现，其包含form——表白者，to——被表白者，message——表白信息，以及一系列get和set方法

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

    public String getFrom() {
        return from;
    }

    public void setFrom(String from) {
        this.from = from;
    }

    public String getTo() {
        return to;
    }

    public void setTo(String to) {
        this.to = to;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    messageWall.html

    相对于前端实现的版本，这次的messageWall中添加了使用ajax实现用post向服务器提交数据，从后端加载表白信息的方法，使用ajax实现用get向服务器获取数据，并将数据添加到dom树上，让前端可以展现新的数据

    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>Documenttitle>
head>
<body>
    <div class="container">
        <h1>表白墙h1>
        <p>输入后点击提交，会将信息显示在表格中p>
        <div class="row">
            <span>表白者span>
            <input type="text" class="edit">
        div>
        <div class="row">
            <span>被表白者span>
            <input type="text" class="edit">
        div>
        <div class="row">
            <span>表白信息span>
            <input type="text" class="edit">
        div>
        <div class="row">
            <input type="button" value="提交" class="submit">
        div>
    div>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

        h1 {
            text-align: center;
            padding: 20px 0;
        }

        p {
            color: grey;
            text-align: center;
            font-size: 15px;
            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: 300px;
            height: 40px;
            color: black;
            background-color: orange;
            border: none;
        }
    style>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js">script>

    <script>
        let button = document.querySelector('.submit');
        button.onclick = function() {
            let edits = document.querySelectorAll('.edit');
            let from = edits[0].value;
            let to = edits[1].value;
            let message = edits[2].value;
            if(from == '' || to == '' || message == ''){
                alert("不能提交空的内容！！！")
                return;
            }
            let row = document.createElement('div');
            row.className = 'row';
            row.innerHTML = from + '向' + to + '表白说：' + message;
            let container = document.querySelector('.container');
            container.appendChild(row);
            for(let i = 0; i < 3; i++){
                edits[i] = '';
            }

            let data = {
                "from": from,
                "to": to,
                "message": message
            }

            $.ajax({
                type: 'post',
                url: 'message',
                data: JSON.stringify(data), //js中将对象转换为字符串
                contentType: "application/json; charset=utf8",
                success: function(body){
                    console.log("提交数据成功");
                }
            })
        }

        function getMessage(){
            $.ajax({
                type: 'get',
                url: 'message',
                success: function(body){
                    let container = document.querySelector('.container')
                    for(let i = 0; i < body.length; i++){
                        // 此处得到的 body 已经是一个 js 对象的数组了,ajax 自动帮我们进行类型转换了,本来服务器返回的是 JSON 格式的字符串, 
                        // ajax 会自动的根据 Content-Type 为 application/json.对响应的 body 进行解析, 解析成 js 对象,遍历数组的元素, 把内容构造到页面上.
                        let message = body[i];
                        let row = document.createElement('div');
                        row.className = 'row';
                        row.innerHTML = message.from + '对' + message.to + '说' + message.message;
                        container.appendChild(row);
                    }
                }
            })
        }
        getMessage();
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139

    mysql中的message表

    和Message类采用相同的属性命名，类型都是varchar(1024)
    在这里插入图片描述

    MessageServlet

    load方法

    和数据库进行连接，将查询到一行表白信息转换成message对象，存储在messageList中并返回

    save方法

    和数据库进行连接，将参数中的message对象中的三个属性转换为message表中的一行数据，插入到数据库中

    doGet方法

    调用load方法，获得数据库中的数据，转为messageList，使用上一篇博客中的Jackson的方法将messageList转为json格式发送到前端

    doPost方法

    得到前端传递过来的json数据，将其转为message对象，调用save方法，将其存储在数据库中，设置状态码为200，打印数据

    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;

@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    private ObjectMapper objectMapper = new ObjectMapper();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Message> messageList = null;
        try {
            messageList = load();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        resp.setContentType("application/json; charset=utf-8");
        resp.getWriter().write(objectMapper.writeValueAsString(messageList));
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Message message = objectMapper.readValue(req.getInputStream(),Message.class);
        try {
            save(message);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        resp.setStatus(200);
        System.out.println("提交数据成功！" + "form:" + message.getFrom() + " to:" + message.getTo() + " message:" + message.getMessage());
    }

    private void save(Message message) throws SQLException {
        //数据源
        DataSource dataSource = new MysqlDataSource();
        ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource)dataSource).setUser("root");
        ((MysqlDataSource)dataSource).setPassword("********");

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

        //构造sql语句
        String sql = "insert into message values(?, ?, ?)";
        PreparedStatement statement = connection.prepareStatement(sql);
        statement.setString(1,message.getFrom());
        statement.setString(2,message.getTo());
        statement.setString(3, message.getMessage());

        //执行插入操作
        int ret = statement.executeUpdate();
        System.out.println("ret: " + ret);

        //关闭连接
        statement.close();
        connection.close();
    }

    private List<Message> load() throws SQLException {
        //数据源
        DataSource dataSource = new MysqlDataSource();
        ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource)dataSource).setUser("root");
        ((MysqlDataSource)dataSource).setPassword("********");

        //建立连接
        Connection connection = (Connection) dataSource.getConnection();
        String sql = "select * from message";
        PreparedStatement statement = connection.prepareStatement(sql);

        //执行查询操作
        ResultSet resultSet = statement.executeQuery();

        //将查询到的信息保存在messageList中
        List<Message> messageList = new ArrayList<>();
        while(resultSet.next()){
            Message message = new Message();
            message.setFrom(resultSet.getString("from"));
            message.setTo(resultSet.getString("to"));
            message.setMessage(resultSet.getString("message"));
            messageList.add(message);
        }

        statement.close();
        connection.close();
        return messageList;
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101

    项目展示

    在这里插入图片描述
    当点击提交按钮是，数据发送给服务器，服务器处理数据存储在数据库中
    在这里插入图片描述
    然后，服务器获取数据库中的数据，以json格式发送给前端，前端将其展示在页面上
    并且，不论是刷新页面还是重启服务器，数据都不会消失了

  • 相关阅读:
    Kubernetes-in-action (二)
    318. 最大单词长度乘积
    MySQL关于查询条件中：字符串类型的值忽略英文字母的大小写以及字符串尾部包含空格的问题
    ElasticSearch - 映射(mapping)
    Java中的枚举是什么？
    ARM交叉编译
    Golang 开源库分享：anko - 给 Go 加点“脚本魔法”
    红帽注册账号，官网下载Redhat Enterprise Linux 9.0 ISO镜像文件
    Jenkins 安装全攻略：从入门到精通
    grid布局之项目属性grid-column&grid-row
  • 原文地址：https://blog.csdn.net/m0_60867520/article/details/127952379