1. 需求
1、输入留言信息,点击提交。后端把数据存储起来。
2、页面展示输入的表白墙信息。
3、网页刷新后,原本在网页上的内容不会消失
页面如下:
2. 准备工作
把前端页面放在项目中,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<style>
.container {
width: 350px;
height: 300px;
margin: 0 auto;
/* border: 1px black solid; */
text-align: center;
}
.grey {
color: grey;
}
.container .row {
width: 350px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .row input {
width: 260px;
height: 30px;
}
#submit {
width: 350px;
height: 40px;
background-color: orange;
color: white;
border: none;
margin: 10px;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>留言板</h1>
<p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
<div class="row">
<span>谁:</span> <input type="text" name="" id="from">
</div>
<div class="row">
<span>对谁:</span> <input type="text" name="" id="to">
</div>
<div class="row">
<span>说什么:</span> <input type="text" name="" id="say">
</div>
<input type="button" value="提交" id="submit" onclick="submit()">
<!-- <div>A 对 B 说: hello</div> -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function submit(){
//1. 获取留言的内容
var from = $('#from').val();
var to = $('#to').val();
var say = $('#say').val();
if (from== '' || to == '' || say == '') {
return;
}
//2. 构造节点
var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
//3. 把节点添加到页面上
$(".container").append(divE);
//4. 清空输入框的值
$('#from').val("");
$('#to').val("");
$('#say').val("");
}
</script>
</body>
</html>
3. 约定前后端交互接口
3.1 需求分析
后端需要提供两个服务:
(1)发布留言:用户输入完留言信息后,服务器要把留言信息保存起来。
(2)获取留言:页面展示,需要从后端获取到所有的留言信息。
3.2 接口定义
url:/message/publish
param(参数):from,to,say
return:true / false(成功或失败)
2、获取留言
url:/message/getListparam:无
返回结果:[{from1, to1, say1}, {from2, to2, say2}, {from3, to3, say3}.....]
4. 实现服务器代码
4.1 lombok介绍
我们创建一个对象,写一些属性,之后通常要写很多get和set方法来方便后期对象来设置和调用这些方法和属性,但是一个对象可能会有很多get和set方法,我们可以使用封装的手段,讲这些get和set方法封装起来,这里就可以使用到 lombok工具包,在创建项目的时候,直接勾选lombok工具包即可;
如果在创建项目的时候没有勾选Lombok,我们可以在pom.xml文件里面添加依赖;如下:
4.1.1 使用lombok
lombok是通过一些注解的方式,帮助我们消除一些冗长的代码,使代码看起来更简洁,例如上面的 MessageInfo对象,可以写成下面这种形式:
package com.example.zxslzw2014_8_11;
import lombok.Data;
@Data
public class MessageInfo {
public string say;
public String from;
public String to;
}
4.1.2 原理解释
@Data注解 会帮助我们自动生成一些方法,包含getter/setter,equals,toString等。启动项目后,生成target文件,里面会有MessageInfo对象,get和set方法都有,如图:
上面就是加了@Data注解之后,IDEA反编译的class文件。
说明:
上面代码不是真正的字节码文件,而是IDEA根据字节码进行反编译后的文件。
反编译是将可执行的程序代码转换为某种形式的高级编程语言,使其具有更易读的格式。反编译是一种逆向工程,它的作用与编译器的作用相反。
上面是我们执行了Spring项目,才生成的 MessageInfo.class文件,可以看出lombok是一款在编译期间生成代码的工具包。
java的运行原理图如下:
lombok的作用如下图所示:
4.2 更快捷的引入lombok依赖
上述引入lombok依赖,需要去找lombok的坐标,接下来介绍更简单引入依赖的方式:EditStarter。安装EditStarter,重启IDEA,在pom.xml文件里面点击右键选择generate:
当点击edit starters:
注意:不是所有依赖都可以在这里添加的,这个界面和SpringBoot创建项目界面一样;不在这里的依赖,还需要去Maven仓库查找坐标,添加依赖。
4.3 服务器代码实现
@RestController
@RequestMapping("/message")
public class MessageController {
List<MessageInfo> messageInfos = new ArrayList<>();
/**
* 发布留言
*/
@RequestMapping("/publish")
public Boolean publish(MessageInfo messageInfo) {
//参数校验
if(!StringUtils.hasLength(messageInfo.getFrom())
|| !StringUtils.hasLength(messageInfo.getTo())
|| !StringUtils.hasLength(messageInfo.getSay())) {
return false;
}
//存留言
messageInfos.add(messageInfo);
return true;
}
/**
* 获取留言
*/
@RequestMapping("/getList")
public List<MessageInfo> getList() {
return messageInfos;
}
}
5. 修改前端页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<style>
.container {
width: 350px;
height: 300px;
margin: 0 auto;
/* border: 1px black solid; */
text-align: center;
}
.grey {
color: grey;
}
.container .row {
width: 350px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .row input {
width: 260px;
height: 30px;
}
#submit {
width: 350px;
height: 40px;
background-color: orange;
color: white;
border: none;
margin: 10px;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>留言板</h1>
<p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
<div class="row">
<span>谁:</span> <input type="text" name="" id="from">
</div>
<div class="row">
<span>对谁:</span> <input type="text" name="" id="to">
</div>
<div class="row">
<span>说什么:</span> <input type="text" name="" id="say">
</div>
<input type="button" value="提交" id="submit" onclick="submit()">
<!-- <div>A 对 B 说: hello</div> -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$.ajax({
url: "/message/getList",
type: "get",
success: function (messageInfos) {
var finalHtml = "";
for (var message of messageInfos) {
finalHtml += '<div>' + message.from + ' 对 ' + message.to + ' 说: ' + message.say + '</div>';
}
$(".container").append(finalHtml);
}
});
function submit() {
//1. 获取留言的内容
var from = $('#from').val();
var to = $('#to').val();
var say = $('#say').val();
//参数校验
if (from == '' || to == '' || say == '') {
return;
}
//发送ajax请求
$.ajax({
url: "/message/publish",
type: "post",
data: {
//不好理解
// from: from,
// to: to,
// say: say
from: $('#from').val(),
to: $('#to').val(),
say:$('#say').val()
},
success: function (result) {
if (result) {
//2. 构造节点
var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";
//3. 把节点添加到页面上
$(".container").append(divE);
//4. 清空输入框的值
$('#from').val("");
$('#to').val("");
$('#say').val("");
} else{
alert("输入不合法");
}
}
});
}
</script>
</body>
</html>
添加两个ajax请求,一个点击提交按钮,获取留言板写的信息并把信息放在页面上;一个是拿到服务器所有的留言信息,放在页面上。
6.运行测试
输入内容,点击提交,如图:
点击刷新之后发现,留言信息不回消失,如下所示:
因为此时的数据存储在服务器的内存中,如果重启服务器,上面的信息就会消失了。
ps:本次的内容就到这里了,如果对你有所帮助的话,就请一键三连哦!!!
本文的封面来自:bilibili苏杉杉的pv,侵权删 url:https://www.bilibili.com/video/BV1vo4y167eh/?spm_id_from=333.999.0.0&vd_source=866da5be2ef0ddd213b053523da53138
————————————————
电子签名:上嘉路