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

吃点橘子

已于 2023-06-14 19:53:22 修改

阅读量6.1k

点赞数 6

分类专栏：其他文章标签：前端服务器数据库

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

本文链接：https://blog.csdn.net/m0_67683346/article/details/127981859

版权

其他专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、创建项目

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 = messages[0].value;
            let to = messages[1].value;
            let message = messages[2].value;
            if(from == "" || to == "" || message == ""){
                return;
            }
            //2.构造html元素
            let element = document.createElement('div');
            element.innerHTML = from+'对'+to+'说：'+message;
            element.className = 'row';
            //3.把构造好的元素添加到后面
            let div = document.querySelector('.container');
            div.appendChild(element);
            //4.清空输入框的内容
            for(let i = 0;i < messages.length;i++){
                messages[i].value = "";
            }

            //创建一个data对象用来存放向服务器提交的数据
            let data = {
                to: to,
                from: from,
                message: message
            };
            //5.点击提交按钮，给服务器发送提交数据请求
            $.ajax({
                type: 'post',
                url: 'message',
                //通过JSON.stringify把data对象转成json格式的字符串
                data: JSON.stringify(data),
                contentType: "application/json;charset=utf8",
                success: function(body){
                    console.log("提交数据成功");
                }
            })
        }
    </script>

3、发送GET请求

    <script>
        let button = document.querySelector('button');
        button.onclick = function() {
            ……
        }
        
        //向服务器发送获取数据请求
        //由于这个请求是在页面加载时就发送的，所以要写在button的点击事件外面
        function getMessages() {
            $.ajax({
                type: 'get',
                url: 'message',
                //jquery会自动把body中的内容(json格式的数组)解析成JS对象数组
                //前提条件是响应的ContentType要设置成"application/json"
                success: function(body){
                    let container = document.querySelector('.container');
                    for(let i = 0;i < body.length;i++){
                        //根据一个数组元素构造一个row
                        let message = body[i];
                        let element = document.createElement('div');
                        //设置构造好的row里的内容
                        element.innerHTML = message.from+'对'+message.to+'说：'+message.message;
                        element.className = 'row';
                        //再把构造好的row放在container后面
                        container.appendChild(element);
                    }
                }
            })
        }
        getMessages();
    </script>

三、数据库

(1) 创建一个数据库messageWall：

mysql> create table message(`from` varchar(50), `to` varchar(50), message varchar(1024));

(2) 在messageWall中创建一张message表，表中包含from、to、message三列：

 create table message(`from` varchar(50), `to` varchar(50), message varchar(1024));
 desc message；

注意：from和to是MySQL中的关键字，需要加上反引号。