实现表白墙

在这里插入图片描述
我们已经学习了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>
   <!-- 引入jquery -->
   <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 class="row">
           xxx 对 xx 说 xxxx
       </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>

在这里插入图片描述
在这里插入图片描述
注意代码里的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<Message> 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.实现客户端代码(通常使用ajax构造请求,并使用一些js的webapi操作页面内容)
这就是写网站的套路

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/27550.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(七)CSharp-CSharp图解教程版-事件

一、发布者和订阅者 发布者/订阅者模式&#xff08;publish/subscriber pattern&#xff09;&#xff1a; 很多程序都有一个共同的需求&#xff0c;即当一个特定的程序事件发生时&#xff0c;程序的其他部分可以得到该事件已经发生的通知。 发布者&#xff1a; 发布者类定义…

Excel函数VLOOKUP常用方法

一、基础用法 1、精确匹配 公式&#xff1a;VLOOKUP(待匹配值&#xff0c;查找范围&#xff0c;范围列数&#xff0c;查找方式) 定义好要输出表的表头和第一列&#xff0c;第一列即为要查找和匹配的父内容&#xff0c;在第二列输入公式&#xff0c;被查找表中一定也要将待查…

基于SPAD / SiPM技术的激光雷达方案

激光雷达(LiDAR)是一种测距技术&#xff0c;近年来越来越多地用于汽车先进驾驶辅助系统(ADAS)、手势识别和3D映射等应用。尤其在汽车领域&#xff0c;随着传感器融合的趋势&#xff0c;LiDAR结合成像、超声波、毫米波雷达&#xff0c;互为补足&#xff0c;为汽车提供全方位感知…

【力扣刷题 | 第六天】

目录 前言&#xff1a; 344. 反转字符串 - 力扣&#xff08;LeetCode&#xff09; 541. 反转字符串 II - 力扣&#xff08;LeetCode&#xff09; 今天我们进入字符串章节的刷题旅程&#xff0c;希望各位小伙伴可以和我一起坚持下去&#xff0c;一起征服力扣&#xff01; 前言…

前端前端学习不断

卷吧卷吧...&#xff0c;这东西什么时候是个头啊……

半导体器件基础(期末模电速成)

目录 1、半导体分类 2、PN结 3、二极管 4、稳压二极管 5、三极管 6、场效应管 1、半导体分类 2、PN结 3、二极管 伏安特性&#xff1a; 我们第七版模电书上给的正向导通压降分别约为0.7和0.2V&#xff0c;且硅的单向导电性更好 如何确定二极管状态&#xff1f; 阳极电压…

怎么快速掌握Python爬虫技术?

Python总的来说是一门比较容易入门的编程语言&#xff0c;因为它的语法简洁易懂&#xff0c;而且有很多优秀的教程和资源可供学习。相比其他编程语言&#xff0c;Python 的学习曲线较为平缓&#xff0c;初学者可以很快上手&#xff0c;但要想深入掌握 Python&#xff0c;还需要…

6款AI绘画生成器,让你的创作更有灵感

人工智能绘画听起来很高深&#xff0c;其原理是通过集成文本、图片和其他大数据数据来生成信息库&#xff0c;在输入文本描述的要求后&#xff0c;可以找到相应的视觉元素&#xff0c;然后拼凑起来生成符合文本描述的图片。 本文介绍非常好用的6款AI绘画生成工具 1.即时 AI 绘…

location.href 和 document.URL 与 document.documentURI

location.href 和 document.URL 与 document.documentURI 相同点 获取到的值相同 不同点 location.hrefurl可以赋值, 效果类似location.assign(url) , 可以后退 document.URL 与 document.documentURI 是只读的, 赋值无效 location.href locationwindow.location true lo…

HTTP编码杂谈

一 HTTP编码杂谈 ① 知识铺垫 1) 编码的英文叫encode --> 常见HTTP URL编码、Base64编码等目的&#xff1a; 转变为二进制的stream(字节流),便于网络传输备注&#xff1a; 一般都是基于utf-8编码2) 解码叫decode3) 乱码的根源&#xff1a; 编码和解码的方式不一致4) url…

Flask开发简易网站疑难点梳理

文章目录 整体总结创建项目独立的python环境windows下python独立环境目录结构linux下python独立环境目录结构 大概需要安装的第三方库使用websockt实现python代码与html界面的通讯界面F12中看到提示连接成功后立马连接关闭。 linux下数据库查询异常初次登录web的时候背景图片和…

智能指针(2)

智能指针&#xff08;2&#xff09; shared_ptr(共享型智能指针)基础知识特点引用计数器共享型智能指针结构理解 shared_ptr仿写删除器类计数器类shared_ptr类使用以及仿写代码的理解 循环引用_Weaks 初始化智能指针的方法 shared_ptr(共享型智能指针) 基础知识 在java中有一…

Hive | 报错锦集

知识目录 一、写在前面✨二、Hive启动hiveserver2报错&#x1f525;三、HiveServer2启动方式✨四、Hive执行SQL语句报一大堆日志&#x1f349;五、Hive使用Load加载数据报错&#x1f36d;六、Hive执行含Count的SQL语句报错&#x1f349;七、Hive执行SQL语句报/bin/java&#x1…

openGauss5.0之学习环境 Docker安装

文章目录 0.前言1. 准备软硬件安装环境1.1 软硬件环境要求1.2 修改操作系统配置1.2.1 关闭操作系统防火墙 1.3 设置字符集参数1.4 设置时区和时间&#xff08;可选&#xff09;关闭swap交换内存1.5 关闭RemoveIPC1.6 关闭HISTORY记录 2. 容器安装2. 1支持的架构和操作系统版本2…

ChatGPT+小红书的8种高级玩法

掌握了这套万能命令&#xff0c;让你快速做出小红书爆款文案! 一、用ChatGPT做定位 我是一个大龄的普通人&#xff0c;没有什么特殊的技能&#xff0c;接下来&#xff0c;请你作为一位小红书的账号定位专家&#xff0c;通过与我对话的方式&#xff0c;为我找到我的小红书账号定…

记录一个Invalid bound statement (not found)问题

SpringBootMyBatisPlus项目&#xff0c;非常简单&#xff0c;没有任何业务逻辑&#xff1a; 1. pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.…

Java8 Stream详解及结束操作方法使用示例(三)

结束操作是指结束 Stream 该如何处理的操作&#xff0c;并且会触发 Stream 的执行。下面是一些常用的结束操作方法。结束操作会对数据源进行遍历&#xff0c;因此是及早求值的。 Java8 Stream详解及中间操作方法使用示例&#xff08;一&#xff09; ​​​​​​​Java8 Strea…

java生成、识别条形码和二维码

一、概述 使用 zxing 开源库 Zxing主要是Google出品的&#xff0c;用于识别一维码和二维码的第三方库主要类:BitMatrix 位图矩阵MultiFormatWriter 位图编写器MatrixToImageWriter 写入图片 可以生成、识别条形码和二维码 内置三种尺寸&#xff1a;enum Size {SMALL, MIDDLE, …

华为OD机试真题 JavaScript 实现【求符合要求的结对方式】【2023Q1 100分】,附详细解题思路

一、题目描述 用一个数组A代表程序员的工作能力&#xff0c;公司想通过结对编程的方式提高员工的能力&#xff0c;假设结对后的能力为两个员工的能力之和&#xff0c;求一共有多少种结对方式使结对后能力为N。 二、输入描述 6 2 3 3 4 5 1 6 第一行为员工的总人数&#xff…

计算机视觉-目标检测(一):从 R-CNN 到 Faster R-CNN

文章目录 1. 概要2. 区域卷积卷积神经网络R-CNN2.1 模型结构2.2 Selective Search2.3 warp2.4 R-CNN训练2.5 R-CNN推理2.6 R-CNN性能评价2.7 R-CNN的缺点 3. SPP-Net3.1 SPP-Net对RCNN的改进3.2 SPP-Net网络结构3.3 SPP-Net训练过程3.4 SPP-Net的问题 4. Fast R-CNN4.1 Fast R-…