1.留言条
1.1约定前后端交互接口
1.1.1需求分析
后端需要提供两个服务
- 提交留言: ⽤⼾输⼊留⾔信息之后, 后端需要把留⾔信息保存起来
- 展示留言: ⻚⾯展⽰时, 需要从后端获取到所有的留⾔信息
1.1.2接口定义
-
获取全部留⾔
全部留⾔信息, 我们⽤List来表⽰, 可以⽤JSON来描述这个List数据.
请求:GET /message/getMassageInfos
响应: JSON 格式
{ "from":"黄狗", "to":"猫咪", "say":"汪汪" }浏览器给服务器发送GET
/message/getMessageInfos这样的请求,就能返回当前一共有哪些记录。 结果以 json 的格式返回过来. -
发表新留⾔
请求:Body也为Json格式{ "from":"黄狗", "to":"猫咪", "say":"汪汪" }响应:Json格式
{ ok:1 }我们期望浏览器给服务器发送⼀个POST
/messge/publish这样的请求,就能把当前的留言交给服务器.
1.2.实现服务端代码
如果不会Lombok工具的可看下面的第2章节。
(1)MessageInfo类
import lombok.Data;
// @Data 注解:Lombok工具,默认生成成员变量的setter、getter等函数
@Data
public class MessageInfo {
private String from;
private String to;
private String say;
}
(2)MessageController
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
@RestController
@RequestMapping("/message")
public class MessageController {
private 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("/getMassageInfos")
public List<MessageInfo> getMessageInfos(){
return messageInfos;
}
}
1.3.前端代码实现
messagewall.html文件
<!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.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script> //这部分是与后端交互的代码,当刷新该页面的时候,之前的messageInfos还会保留 //提交后,向后端获取留言表 $.ajax({ url: "/message/getMassageInfos", type: "get", success: function(messages){ for(var m of messages){ //2. 构造节点 var divE = "<div>"+m.from +"对" + m.to + "说:" + m.say+"</div>"; //3. 把节点添加到页面上 $(".container").append(divE); } } }); function submit(){ //1. 获取留言的内容 var from = $('#from').val(); var to = $('#to').val(); var say = $('#say').val(); if (from== '' || to == '' || say == '') { return; } //提交message $.ajax({ url: "/message/publish", type: "post", data:{ "from": from, "to": to, "say": say }, 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>
1.4运行
运行后搜索:127.0.0.1:8080/messagewall.html
![图片[1]-【Spring】留言板简单项目-代码魔法师 Lombok:让 Java 开发告别冗余的魔法手册 - 拾光赋-拾光赋](https://i0.wp.com/i-blog.csdnimg.cn/direct/c375a62c6718445e9bc27e3d8d187e7e.png)
图解:

2.Lombok工具
2.1 Lombok介绍
Lombok 是一款能极大简化 Java 代码的工具,主要通过注解在编译时自动生成代码,其主要功能如下:
- 生成访问器方法:借助@Getter和@Setter注解,无需手动编写,就能自动为类的属性生成对应的 Getter 和 Setter 方法。
- 生成构造方法:@NoArgsConstructor可生成无参构造方法,@AllArgsConstructor生成包含所有参数的构造方法,@RequiredArgsConstructor为必要字段生成构造方法。
- 生成常用方法:@ToString、@EqualsAndHashCode注解分别自动生成toString()、equals()和hashCode()方法,减少代码量。
- 综合功能:@Data注解是@Getter、@Setter、@ToString、@EqualsAndHashCode和@RequiredArgsConstructor的组合,一次使用即可获得多种功能。
2.2 Lombok引入
法一:
可以在maven的中央厂库搜索lombok,选择版本的时候可以使用次新版本(使用人数多的)
lombok版本地址:点击进入Lombok下载地址
步骤:
(1)搜索下载地址后选择合适版本
![图片[2]-【Spring】留言板简单项目-代码魔法师 Lombok:让 Java 开发告别冗余的魔法手册 - 拾光赋-拾光赋](https://i0.wp.com/i-blog.csdnimg.cn/direct/ffcffb5f66a44c14b9864bbf5494d38b.png)
(2)找到依赖
![图片[3]-【Spring】留言板简单项目-代码魔法师 Lombok:让 Java 开发告别冗余的魔法手册 - 拾光赋-拾光赋](https://i0.wp.com/i-blog.csdnimg.cn/direct/97af39d41c2b4e73b6e8005937937430.png)
(3)把依赖复制到pom.xml文件

法二:
步骤:
(1)打开文件中的设置

(2)找到Plugins
![图片[4]-【Spring】留言板简单项目-代码魔法师 Lombok:让 Java 开发告别冗余的魔法手册 - 拾光赋-拾光赋](https://i0.wp.com/i-blog.csdnimg.cn/direct/dd979b9655a3452abdfb675f46f244a3.png)
(3)在pom.xml文件中右键
![图片[5]-【Spring】留言板简单项目-代码魔法师 Lombok:让 Java 开发告别冗余的魔法手册 - 拾光赋-拾光赋](https://i0.wp.com/i-blog.csdnimg.cn/direct/40d71df49008464d81f1ed944228034e.png)
(4)点击EditStarters
![图片[6]-【Spring】留言板简单项目-代码魔法师 Lombok:让 Java 开发告别冗余的魔法手册 - 拾光赋-拾光赋](https://i0.wp.com/i-blog.csdnimg.cn/direct/4a9a52d9fbcc4685a604936761647687.png)
(5)选择Lombok工具
![图片[7]-【Spring】留言板简单项目-代码魔法师 Lombok:让 Java 开发告别冗余的魔法手册 - 拾光赋-拾光赋](https://i0.wp.com/i-blog.csdnimg.cn/direct/73ebe26f4a854288b1934165d7409aca.png)
注意:
不是所有依赖都可以在这⾥添加的, 这个界⾯和SpringBoot创建项⽬界⾯⼀样.依赖不在这⾥的, 还需要去Maven仓库查找坐标, 添加依赖.
2.3Lombok的注解
| 注解 | 作用 |
|---|---|
| @Getter | 自动添加 getter 方法 |
| @Setter | 自动添加 setter 方法 |
| @ToString | 自动添加 toString 方法 |
| @EqualsAndHashCode | 自动添加 equals 和 hashCode 方法 |
| @NoArgsConstructor | 自动添加无参构造方法 |
| @AllArgsConstructor | 自动添加全属性构造方法,顺序按照属性的定义顺序 |
| @NonNull | 属性不能为 null |
| @RequiredArgsConstructor | 自动添加必需属性的构造方法,final + @NonNull 的属性为必需 |
只能修饰类的注解:
@Data注解是@Getter、@Setter、@ToString、@EqualsAndHashCode和@RequiredArgsConstructor的组合,一次使用即可获得多种功能
2.4 Lombok的使用
加入你需要写一个User类,在类中设置成员变量,并且设置Setter方法和Getter方法
代码示例:
public class User {
private String userName;
private String password;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
上述User中的成员变量才两个,如果再添加手机号、性别、家庭住址…,再添加Setter和Getter后会显得冗余
此时,Lombok的作用就来了
Lombok的@Data注解是@Getter、@Setter、@ToString、@EqualsAndHashCode和@RequiredArgsConstructor的组合,一次使用即可获得多种功能。
import lombok.Data;
@Data
public class User {
private String userName;
private String password;
}
可以让单独的一个成员变量有Setter和Getter功能:
import lombok.Getter;
import lombok.Setter;
// @Data 注解:默认生成成员变量的setter、getter等函数
public class MessageInfo {
@Setter
@Getter // 指定生成from的setter和getter的函数
private String from;
private String to;
private String say;
}
2.4Lombok的工作原理
可以观察加了@Data注解之后, Idea反编译的class⽂件这不是真正的字节码⽂件, ⽽是Idea根据字节码进⾏反编译后的⽂件
反编译是将可执⾏的程序代码转换为某种形式的⾼级编程语⾔, 使其具有更易读的格式. 反编译是⼀种逆向⼯程,它的作⽤与编译器的作⽤相反.
![图片[8]-【Spring】留言板简单项目-代码魔法师 Lombok:让 Java 开发告别冗余的魔法手册 - 拾光赋-拾光赋](https://i0.wp.com/i-blog.csdnimg.cn/direct/0eefa981296f4d8191efd1a5b234f3d6.png)
![图片[9]-【Spring】留言板简单项目-代码魔法师 Lombok:让 Java 开发告别冗余的魔法手册 - 拾光赋-拾光赋](https://i0.wp.com/i-blog.csdnimg.cn/direct/261783d4d5cf43b2ae0f1f8ae8598861.png)
可以看出来, lombok是⼀款在编译期⽣成代码的⼯具包. Java 程序的运⾏原理:
![图片[10]-【Spring】留言板简单项目-代码魔法师 Lombok:让 Java 开发告别冗余的魔法手册 - 拾光赋-拾光赋](https://i0.wp.com/i-blog.csdnimg.cn/direct/03945c4a50654be9afb83ab2c35fc6eb.png)
Lombok 的作⽤如下图所⽰:



![表情[baoquan]-拾光赋](https://blogs.ink/wp-content/themes/zibll/img/smilies/baoquan.gif)


暂无评论内容