• 实现表白墙

    在这里插入图片描述
    我们已经学习了Http以及Servlet类的相关知识
    今天我们来实操一下,实现一个简单的既有前端又有后端的网站–表白墙

    之前在学习前端的时候已经写过了表白墙的前端代码,存在两个问题

    1.页面重启,数据丢失
    2.数据只是在本地的,别人看不见

    那么这样的问题我们要咋样解决呢?

    引入后端服务器解决即可

    涉及到两个交互:

    🐷1.当用户打开表白墙页面的时候,需要从服务器加载当前已经提交的表白墙数据
    🐷2.当用户新增一个表白的时候,也会把数据提交给服务器,让服务器持久化保存

    首先我们要把写好的前端页面放到webapp目录下
    明确前后端交互接口
    网页给服务器发啥样的请求,服务器给网页返回啥样的响应
    显而易见,是http请求了,我们就要使用ajax构造http请求
    在这里插入图片描述
    1.页面加载完毕之后,需要给服务器发请求,获取当前的留言数据都有啥
    2.用户点击提交的时候,告诉服务器.当前用户发了的消息是啥

    🧊在前后端交互的过程中涉及到的关键问题是:
    请求是啥样子的,响应时啥样子的,这些格式是由程序员来规定的,也就是约定前后端交互接口

    下面是一份典型的约定方式(也可以按照别的方式来约定,这个不是唯一的)

    接口一:页面获取当前所有的留言信息
    请求:

    GET/message

    响应:HTTP/1.1 200 OK Content-Type:applicatoin/json

    [
    {
    from:“从哪里来”,
    to:“到哪里去”,
    message:“消息是啥”
    },
    {
    from:“从哪里来”,
    to:“到哪里去”,
    message:“消息是啥”
    },
    {
    from:“从哪里来”,
    to:“到哪里去”,
    message:“消息是啥”
    },
    { from:“从哪里来”,
    to:“到哪里去”,
    message:“消息是啥”
    }
    ]

    json中使用[]表示数组,[]的每个元素,是一个{}json对象,每个人对象里,又有三个属性from,to,message

    接口二:提交一条新消息给服务器

    请求: POST/message
    Content-Type:application/json

    {
    from:“从哪来”,
    to:“到哪去”,
    message:“消息是啥”
    }

    响应:HTTP/1.1 200 OK

    接口二,服务器要将收到的请求的body转换成Message对象,然后把这个Message保存起来
    🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻
    现在我们来写代码
    第一步当然是要创建一个maven项目了

    然后把前端静态页面放到webapp目录下

    在这里插入图片描述
    然后根据我们规定的交互格式,编写前端代码

    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>
   
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
   <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">
           <button id="revert">撤销button>
       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 = '';
           }
           //4.通过ajax构造post请求,把新的消息提交给服务器
           let body={
            from: from,
            to:to,
            message: msg
           };//这是一个js对象
           $.ajax({
                type:'post',
                url: 'message',
                contentType:"application/json; charset=utf8",
                data:JSON.stringify(body),//js对象转成一个json格式字符串
                success: function(body){
                    //响应成功返回之后,调用到回调
                    console.log("消息发送给服务器成功");
                }
           });

       }
       let revertButton = document.querySelector('#revert');
       revertButton.onclick = function() {
           // 删除最后一条消息. 
           // 选中所有的 row, 找出最后一个 row, 然后进行删除
           let rows = document.querySelectorAll('.message');
           if (rows == null || rows.length == 0) {
               return;
           }
           containerDiv.removeChild(rows[rows.length - 1]);
       }
       //在页面加载的时候,希望能从服务器获取到所有的消息,并显示在网页中
       $.ajax({
        type:'get',
        url:'message',//URL都是是使用相对路径的写法,相对路径意味着工作路径就是当前文件所在的路径
                //当前文件路径是/message_wall/,所以此时请求就是/message_wall/message
        success: function(body){
                //body是收到的响应的正文部分,我们之前已经约定是json格式
                //后端代码的响应中Content-type是application/json,此时的jQuery会把body的json格式自动转化为js对象
                //就不用jQuery.parse了
                //现在的body已经是js对象数组了
                //闲杂就需要遍历这个数组,取出每个元素,构造HTML标签,添加到html页面上
                    let container=document.querySelector('.container');
                for(let message of body){
                    let rowDiv=document.createElement('div');
                    rowDiv.className="row";
                    rowDiv.innerHTML=message.from+"对"+message.to+"说"+message.message;
                    container.appendChild(rowDiv);

                }

        }
       });
   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
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173

    在这里插入图片描述
    在这里插入图片描述
    注意代码里的JSON.stringify方法,这个方法是把js对象转换成json格式的字符串
    JSON.parse是把json格式字符串转换成js对象
    上一期我们刚见过用jackson完成Java对象和json字符串的转化
    objectMapper.writeValue把Java对象转换成json格式字符串
    objectMapper.readValue把json字符串转换成Java对象

    在这里插入图片描述
    👀🍬🍬这里的URL是相对路径的写法,也就是说URL都是是使用相对路径的写法,相对路径意味着工作路径就是当前文件所在的路径,当前文件路径是/message_wall/,所以此时请求就是/message_wall/message

    💖body是收到的响应的正文部分,我们之前已经约定是json格式
    后端代码的响应中Content-type是application/json,此时的jQuery会把body的json格式自动转化为js对象,就不用jQuery.parse了,现在的body已经是js对象数组了

    现在就需要遍历这个数组,取出每个元素,构造HTML标签,添加到html页面上

    后端要用到jackson,所以要引入jackson依赖
    在这里插入图片描述

    在未添加数据库的时候,服务器保存的数据是是放在ArrayList,也就是内存中,进程重启,内存数据就没了
    所以我们把数据要存储到硬盘中
    1.写到文件里
    2.写到数据库中

    我们采用第二种方法,采用JDBC编程

    1.引入jdbc依赖
    在这里插入图片描述

    2.建库建表

    在这里插入图片描述

    然后现在编写后端代码

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

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: WHY
 * Date: 2023-06-06
 * Time: 17:56
 */
class Message{
    //属性必须设置public
    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 MessageServlet extends HttpServlet {
    //解析要使用json的这个类
    private ObjectMapper objectMapper=new ObjectMapper();
    //消息存起来
    //private List messageList=new ArrayList<>();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //通过这个方法来处理"获取所有留言信息"
        //需要返回json 字符串数组,jackson直接帮我们处理好了格式
        List<Message> messageList=load();
        String respString =objectMapper.writeValueAsString(messageList);
        //通过这一步就把message对象变成了json数组
        resp.setContentType("application/json; charset=utf8");
        resp.getWriter().write(respString);
    }




    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      //通过这个方法来处理"提交的新消息"
        //解析json格式的body为Message对象
        //第一个参数是获取请求的body ,第二个参数写的是要转成啥样的对象
       Message message=    objectMapper.readValue(req.getInputStream(),Message.class);
       save(message);
        System.out.println("消息提交成功 message="+ message);
        //响应body为空,不需要额外处理,默认为200

    }

    //这个方法用来往数据库存一条记录
    private void save(Message message) {
        DataSource dataSource=new MysqlDataSource();
        ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/why?characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource)dataSource).setUser("root");
        ((MysqlDataSource)dataSource).setPassword("1111");
        try{
            Connection connection=dataSource.getConnection();
            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);
            //执行sql
            statement.executeUpdate();
            statement.close();
            connection.close();
        }catch(SQLException  e){
            e.printStackTrace();
        }


    }
    //这个方法用来从数据库查询所有记录
    private List<Message> load() {
        List<Message> messageList=new ArrayList<>();
        DataSource dataSource=new MysqlDataSource();
        ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/why?characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource)dataSource).setUser("root");
        ((MysqlDataSource)dataSource).setPassword("1111");
        try{
            Connection connection=dataSource.getConnection();
            String sql="select *from message";//占位符
            //设置占位符内容
            PreparedStatement statement=connection.prepareStatement(sql);
            //执行sql
            ResultSet resultSet= statement.executeQuery();
            //遍历结果集
            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);
            }

            resultSet.close();
            statement.close();
            connection.close();
        }catch(SQLException  e){
            e.printStackTrace();
        }
        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
    • 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

    编写完成,我们运行代码,看结果
    在这里插入图片描述

    此时重启服务器,依旧存在

    总结:一个网站的实现步骤
    1.约定前后端交互接口
    2.实现服务器代码(通常会操作数据库)
    3.实现客户端代码(通常使用ajax构造请求,并使用一些js的webapi操作页面内容)
    这就是写网站的套路

    这里为什么没有出现跨域问题呢?
    因为是自己访问自己,我们来抓包看看
    在这里插入图片描述
    这个是ajax的域名
    在这里插入图片描述

    这个是页面的域名
    🌼两个域名一致,当然不会出现跨域问题了~~~

    今天的内容就分享到这里,我们下期再见咯,886~~~
    在这里插入图片描述

  • 相关阅读:
    heic文件怎么转换成jpg？实用图片格式转换方法分享
    单元测试实战（二）Service 的测试
    PostgreSQL设置中文语言界面和局域网访问
    前端 js面试题（二）
    PS 绘画临摹简单记录
    【Rust 入门学习】1.1 Rust 的安装、升级、卸载
    编程每日一练（多语言实现）基础篇：求100~200之间的素数
    docker compose的安装和使用
    阿里云物联网平台搭建
    图解哈希表及其原理
  • 原文地址：https://blog.csdn.net/weixin_61436104/article/details/131139388