表白墙(前端+后端+数据库)

原创

已于 2023-06-14 19:53:22 修改 · 6.3k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #服务器 #数据库

于 2022-11-22 17:04:36 首次发布

一、创建项目

1、创建maven项目，引入依赖

2、创建目录结构

二、前端代码

前端代码中主要实现页面的内容和样式，以及通过ajax向服务器发送请求：

(1) 点击提交按钮，向服务器发送一个提交数据的POST请求，服务器收到请求后，把数据保存到数据库中；

(2) 重新加载页面时，向服务器发送一个获取数据的GET请求，服务器收到请求后，返回数据库中的数据，再由浏览器把这些数据显示在页面上。

1、页面内容和样式

    <style>
        .container {
            width: 400px;
            margin: 0 auto;
        }
        .title {
            text-align: center;
        }
        .ps {
            height: 20px;
            text-align: center;
            color: gray;
        }
        .row {
            height: 40px;
            display: flex;
            /*水平居中*/
            justify-content: center;
            /*垂直居中*/
            align-items: center;
        }
        .row span {
            font-size: larger;
            width: 100px;
        }
        .row input {
            height: 30px;
            width: 250px;
        }
        .row button {
            height: 40px;
            width: 360px;
            color: white;
            background-color: orange;
            border: none;
            border-radius: 5px;
        }
        .row button:active {
            background-color: rgb(152, 146, 146);
        }

    </style>
    <div class="container">
        <h1 class="title">表白墙</h1>
        <div class="ps">输入后点击提交，会将信息显示在表格中</div>
        <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>提交</button></div>
    </div>

上述代码实现的页面效果：

2、提交按钮的点击事件

    <!-- 引入jquery依赖 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        let button = document.querySelector('button');
        button.onclick = function() {
            //1.获取文本框中的内容
            let messages = document.querySelectorAll('input');
            let from = mes