综合性练习（后端代码练习3）——留言板

2024-05-01 20:36
文章标签 代码 练习 综合性 留言板

本文主要是介绍综合性练习（后端代码练习3）——留言板，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

一、准备工作

二、约定前后端交互接口

1、需求分析

2、接口定义

（1）发布留言

（2）获取留言

三、实现服务器代码

1、lombok介绍

（1）引入依赖

（2）使用lombok

（3）原理解释

（4）更多使用

2、更快捷的引入依赖

3、服务器代码实现

四、调整前端页面代码

五、运行测试

六、遇到问题的解决方法

页面如下：

需求：

1、输入留言信息，点击提交。后端把数据存储起来。

2、页面展示输入的表白墙信息。

3、网页刷新后，原本在网页上的内容不会消失

一、准备工作

        把前端页面放在项目中，如图：

        前端页面代码：

<!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>

二、约定前后端交互接口

1、需求分析

后端需要提供两个服务：

（1）发布留言：用户输入完留言信息后，服务器要把留言信息保存起来。

（2）获取留言：页面展示，需要从后端获取到所有的留言信息。

2、接口定义

（1）发布留言

        url：/message/publish

        param（参数）：from，to，say

        return：true / false（成功或失败）

（2）获取留言

        url：/message/getList

        param：无

        返回结果：[{from1, to1, say1}, {from2, to2, say2}, {from3, to3, say3}.....]

三、实现服务器代码

1、lombok介绍

        我们创建一个对象，写一些属性，然后有获取和设置这些属性的值的方法，代码如下：

public class MessageInfo {private Integer id;private String from;private String to;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getFrom() {return from;}public void setFrom(String from) {this.from = from;}public String getTo() {return to;}public void setTo(String to) {this.to = to;}
}

        我们发现，这些get和set方法是有规律的，有很多重复性的操作，那么我们能不能把它们进行封装呢？让代码更简洁呢？肯定是可以的，这里就可以使用到 lombok工具包，在创建项目的时候，我就勾选了 lombok工具包，如图：

（1）引入依赖

        因为勾选了，所以pom.xml文件会自动给我引入依赖，如图：

        

        如果没有勾选，可以手动添加依赖，填入下列代码：

        <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency>

（2）使用lombok

        lombok是通过一些注解的方式，帮助我们消除一些冗长的代码，使代码看起来更简洁，例如上面的 MessageInfo对象，可以写成下面这种形式：

import lombok.Data;@Data
public class MessageInfo {private Integer id;private String from;private String to;
}

（3）原理解释

        @Data注解 会帮助我们自动生成一些方法，包含getter/setter，equals，toString等。启动项目后，生成target文件，里面会有MessageInfo对象，get和set方法都有，如图

        上面就是加了@Data注解之后，IDEA反编译的class文件。

注意：

上面这些代码不是真正的字节码文件，而是IDEA根据字节码进行反编译后的文件。

反编译是将可执行的程序代码转换为某种形式的高级编程语言，使其具有更易读的格式。反编译是一种逆向工程，它的作用与编译器的作用相反。

        上面是我们执行了Spring项目，才生成的 MessageInfo.class文件，可以看出lombok是一款在编译期间生成代码的工具包。

        java的运行原理：

        lombok的作用如下图所示：

（4）更多使用

        如果决定@Data比较暴力（生成的方法太多），lombok也提供了一些更精细粒度的注解，如下表：

注解作用
@Getter自动添加getter方法
@Setter自动添加setter方法
@ToString自动添加toString方法
@EqualsAndHashCode自动添加equals和hashCode方法
@NoArgsConstructor自动添加无参构造方法
@AllArgsConstructor自动添加全属性构造方法，顺序按照属性的定义顺序
@NonNull属性不能为null
@RequiredArgsConstructor自动添加必须属性的构造方法，final+@NonNull的属性为必须

        @Data = @Getter + @Setter + @ToString + @EqualsAndHashCode + @RequiredArgsConstructor + @NoArgsConstructor

2、更快捷的引入依赖

        上述引入lombok依赖，需要去找lombok的坐标，接下来介绍更简单引入依赖的方式：EditStarter。安装EditStarter，重启IDEA，如图：

        在pom.xml文件中，单击右键，选择Generate，操作如下图：

        然后回进入Edit Starters的编辑页面，添加对应依赖即可，如图：

注意：不是所有依赖都可以在这里添加的，这个界面和SpringBoot创建项目界面一样；不在这里的依赖，还需要去Maven仓库查找坐标，添加依赖。

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;}
}

        初学阶段，先把留言存到内存中，后面再引入数据库。

四、调整前端页面代码

<!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: sayfrom: $('#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>

        主要逻辑在JS代码里，两个ajax请求，一个点击提交按钮，获取留言板写的信息并把信息放在页面上；一个是拿到服务器所有的留言信息，放在页面上。

五、运行测试

        输入内容，点击提交，如图：

        刷新页面，原话内容信息也还在，如图：

        因为此时的数据存储在服务器的内存中，如果重启服务器，再点击刷新，上面的信息就会消失了。如图：

        

六、遇到问题的解决方法

        出现问题后，先定位，看是前端还是后端的问题。

        后端：使用Postman测试，如果Postman测试能通过，后续出现问题的话，90%以上可以排除后端问题，另外10%是通过Postman的测试错了。

        如果后端出现问题，解决方案：

1、打日志（System.out.print），Debug。看下请求是否进入到后端程序了。

2、继续使用Postman测试。

3、考虑缓存问题。

        前端出现问题

1、打日志，抓包。

2、考虑缓存问题。

都看到这了，点个赞再走吧，谢谢谢谢谢

这篇关于综合性练习（后端代码练习3）——留言板的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/952601。

相关文章

深入解析 Java Future 类及代码示例

深入解析 Java Future 类及代码示例

《深入解析JavaFuture类及代码示例》JavaFuture是java.util.concurrent包中用于表示异步计算结果的核心接口,下面给大家介绍JavaFuture类及实例代码,感兴... 目录一、Future 类概述二、核心工作机制代码示例执行流程2. 状态机模型3. 核心方法解析行为总结：三
阅读更多...
python获取cmd环境变量值的实现代码

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》：本文主要介绍在Python中获取命令行（cmd）环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中，总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061
阅读更多...
pandas实现数据concat拼接的示例代码

pandas实现数据concat拼接的示例代码

《pandas实现数据concat拼接的示例代码》pandas.concat用于合并DataFrame或Series,本文主要介绍了pandas实现数据concat拼接的示例代码,具有一定的参考价值,... 目录语法示例：使用pandas.concat合并数据默认的concat：参数axis=0，join=
阅读更多...
C#代码实现解析WTGPS和BD数据

C#代码实现解析WTGPS和BD数据

《C#代码实现解析WTGPS和BD数据》在现代的导航与定位应用中,准确解析GPS和北斗（BD）等卫星定位数据至关重要,本文将使用C#语言实现解析WTGPS和BD数据,需要的可以了解下... 目录一、代码结构概览1. 核心解析方法2. 位置信息解析3. 经纬度转换方法4. 日期和时间戳解析5. 辅助方法二、L
阅读更多...
Python使用Code2flow将代码转化为流程图的操作教程

Python使用Code2flow将代码转化为流程图的操作教程

《Python使用Code2flow将代码转化为流程图的操作教程》Code2flow是一款开源工具,能够将代码自动转换为流程图,该工具对于代码审查、调试和理解大型代码库非常有用,在这篇博客中,我们将深... 目录引言1nVflRA、为什么选择 Code2flow？2、安装 Code2flow3、基本功能演示
阅读更多...
IIS 7.0 及更高版本中的 FTP 状态代码

IIS 7.0 及更高版本中的 FTP 状态代码

《IIS7.0及更高版本中的FTP状态代码》本文介绍IIS7.0中的FTP状态代码,方便大家在使用iis中发现ftp的问题... 简介尝试使用 FTP 访问运行 Internet Information Services （IIS） 7.0 或更高版本的服务器上的内容时，IIS 将返回指示响应状态的数字代
阅读更多...
MySQL 添加索引5种方式示例详解(实用sql代码)

MySQL 添加索引5种方式示例详解(实用sql代码)

《MySQL添加索引5种方式示例详解(实用sql代码)》在MySQL数据库中添加索引可以帮助提高查询性能,尤其是在数据量大的表中,下面给大家分享MySQL添加索引5种方式示例详解(实用sql代码),... 在mysql数据库中添加索引可以帮助提高查询性能，尤其是在数据量大的表中。索引可以在创建表时定义，也可
阅读更多...
使用C#删除Excel表格中的重复行数据的代码详解

使用C#删除Excel表格中的重复行数据的代码详解

《使用C#删除Excel表格中的重复行数据的代码详解》重复行是指在Excel表格中完全相同的多行数据,删除这些重复行至关重要,因为它们不仅会干扰数据分析,还可能导致错误的决策和结论,所以本文给大家介绍... 目录简介使用工具C# 删除Excel工作表中的重复行语法工作原理实现代码C# 删除指定Excel单元
阅读更多...
Python实现一键PDF转Word(附完整代码及详细步骤)

Python实现一键PDF转Word(附完整代码及详细步骤)

《Python实现一键PDF转Word(附完整代码及详细步骤)》pdf2docx是一个基于Python的第三方库,专门用于将PDF文件转换为可编辑的Word文档,下面我们就来看看如何通过pdf2doc... 目录引言：为什么需要PDF转Word一、pdf2docx介绍1. pdf2docx 是什么2. by
阅读更多...
Spring Security介绍及配置实现代码

Spring Security介绍及配置实现代码

《SpringSecurity介绍及配置实现代码》SpringSecurity是一个功能强大的Java安全框架,它提供了全面的安全认证(Authentication)和授权(Authorizatio... 目录简介Spring Security配置配置实现代码简介Spring Security是一个功能强
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2