主页 > 软件开发 >

javaEE-14.springMVC练习

软件开发
2025-08-29 22:24:02

1.加法计算器

需求分析:

前端页面代码:

后端代码实现功能:

调整前端页面代码:

进行测试:

2.用户登录

需求分析:

定义接口:

1.登录数据校验接口:

2.查询登录用户接口:

前端代码:

后端代码:

调整前端代码:

测试/查错因

后端:

前端:

lombok工具

1.引入依赖:

2.使用

3.原理

3.留言板

需求分析:

接口定义:

前端代码:

后端代码:

前端代码完善功能:

1.加法计算器

需求: 输⼊两个整数, 点击"点击相加"按钮, 显⽰计算结果

在项⽬开发前,根据需求先约定好前后端交互接⼝,双⽅按照接⽂档进⾏开发.

接⼝⽂档通常由服务提供⽅来写,交由服务使⽤⽅确认,也就是客⼾端.

接⼝⽂档⼀旦写好,尽量不要轻易改变. 如若需要改变,必须要通知另⼀⽅知晓

需求分析:

加法计算器功能,对两个整数进⾏相加, 需要客⼾端提供参与计算的两个数,服务端返回这两个整数计算的结果.

基于上述分析,定义接口(这里的接口不是java初阶的interface接口,而是前后端交互的路径接口):

1.请求路径:calc/sum

2.请求方法:get/post

3.接口描述:计算两个整数相加

请求参数:

参数名类型描述num1Integer参与计算的第一个参数num2Integer参与计算的第二个参数

响应数据:

Content-Type: text/html

响应内容: 计算机计算结果: 8

前端页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="calc/sum" method="post"> <h1>计算器</h1> 数字1：<input name="num1" type="text"><br> 数字2：<input name="num2" type="text"><br> <input type="submit" value=" 点击相加 "> </form> </body> </html>

浏览器测试页面是否正常:路径以static为根目录进行遍历

前端代码正常.

后端代码实现功能: package com.springmvc.test; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RequestMapping("/calc") @RestController public class calcController { @RequestMapping("/sum") public String getSum(Integer num1,Integer num2){ Integer sum=num1+num2; return "计算器计算结果为:"+sum; } }

通过Postman对后端代码进行测试:

通过响应结果可以看到后端代码正常.

调整前端页面代码:

添加访问url和请求⽅式

进行测试:

点击相加:

2.用户登录

需求:⽤⼾输⼊账号和密码,后端进⾏校验密码是否正确

1. 如果不正确,前端进⾏⽤⼾告知

2. 如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录⽤⼾

3. 后续再访问⾸⻚,可以获取到登录⽤⼾信息

需求分析:

1.登录界面:通过账号和密码,校验输入的账号和密码是否正确,并告诉前端.

2.首页:告知前端当前登录⽤⼾. 如果当前已有⽤⼾登录, 返回登录的账号,如果没有,返回空

定义接口: 1.登录数据校验接口:

请求路径：/user/login

请求⽅式：POST

接⼝描述：校验账号密码是否正确

请求参数:

参数名类型userNameStringpasswordString

响应数据:

Content-type: text/html

响应内容 : true //账号密码验证成功

false//账号密码验证失败

2.查询登录用户接口:

请求路径：/use/index

请求⽅式：get

接⼝描述：查询当前登录的用户

请求参数:无

响应数据:

Content-type: text/html

响应内容 :zhangsan

前端代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <h1>用户登录</h1> 用户名：<input name="userName" type="text" id="userName"><br> 密码：<input name="password" type="password" id="password"><br> <input type="button" value="登录" onclick="login()"> <script src=" cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> function login() { } </script> </body> </html>

index.html:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>用户登录首页</title> </head> <body> 登录人: <span id="loginUser"></span> <script src=" cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> </script> </body> </html> 后端代码:

由于要在首页中获取登录人的用户名,因此,在登录方法中,要设置SessionId,将登录信息保存下来,在获取登录人信息时,进行返回.

注意:

1.对数据的校验可以通过:StringUtils.hasLength()方法来进行校验.

StringUtils.hasLength()是Spring提供的⼀个⼯具⽅法,判断字符串是否有值,字符串为null或者""时,返回false,其他返回true.

2. 使用equals方法的时候,建议将常量放在前面,变量放在后面.(防止出现空指针异常)

package com.springmvc.test; import jakarta.servlet.http.HttpSession; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.bind.annotation.SessionAttribute; @RestController @RequestMapping("/user") public class loginController { @RequestMapping("/login") public Boolean login(String userName, String password, HttpSession session){ // 1.数据校验 //法一: // if(userName==null || userName.length()==0 || password==null || password.length()==0){ // return false; // } //法二 if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){ return false; } //判断: // 使用equals方法时,通常将常量写在前面,目的:防 useraName为null,报空指针异常 if("zhangsan".equals(userName) && "123456".equals(password)){ session.setAttribute("userName",userName); return true; } return false; } @RequestMapping("/index") public String getUserName(@SessionAttribute("userName")String userName){ return userName; } } 调整前端代码:

对于前端⽽⾔, 当点击登录按钮时, 需要把⽤⼾输⼊的信息传递到后端进⾏校验, 后端校验成功,则跳转到⾸⻚:index.html, 后端校验失败,则直接弹窗

页面跳转3种方法:

window.location.href="index.html";

window.loction.assign( "index.html");

window.location.replace( "index.html");

通常把window. 省略,常用前两种方法.

index.html:

代码功能完成后,

1>.可通过Postman进行测试,

2>.若测试能通过,后续再出现问题几乎就不是后端问题了.

3>.若没有通过,可能是后端有缓存,刷新Maven:clean,然后重启spring,再次测试.

4>.若还是出错,可以通过看日志的方法,(看不懂,可以上网查)

5>.通过debug,打断点的方法,进行调试

前端:

1>.通过打日志的方法 : console.log() / alert()方法

2>.前端打断点:

lombok工具

lombok是一个java工具库,通过添加注解,简化java代码的开发.

1.引入依赖:

通过在pom.xml文件中导入依赖:

<dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <scope>annotationProcessor</scope> </dependency>

快捷引入方式:要先下载一个插件:EditStarter

然后选择pom文件,右键:选择生成->EditStarter

->选择lombok进行添加就行:

注意: 不是所有的依赖都能从EditStarter添加,依赖不在的时候,还有从Maven仓库去找,再粘贴依赖代码.

还可以在创建项目的时候,勾选lombok工具包:

若创建的时候,没有勾选,在开发的时候也可以再添加:选中pom文件,点击编辑启动器,进行添加.(这个和上面的通过EditStarter方法相同)

2.使用

在写一些对象类的时候,通过⼀些注解的⽅式,可以帮助我们消除⼀些冗⻓代码,使代码看起来简洁⼀些

比如user类:

@Data注解,可以帮助我们自动完成一些方法:getter(),setter(),toString(),equals()等.

@Data这个注解的功能比较强大,lombok还有一些更细粒度的注解:

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

3.原理

添加@Data注解后,可以看idea运行后反编译的class文件:

class文件中就能看到 lombok实现的代码了

java程序的运行原理:

加上lombok后:

3.留言板

需求: 界⾯如下图所⽰

1. 输⼊留⾔信息,点击提交.后端把数据存储起来.

2. ⻚⾯展⽰输⼊的表⽩墙的信息

需求分析:

后端需要提供两个服务

1. 提交留⾔:⽤⼾输⼊留⾔信息之后,后端需要把留⾔信息保存起来

2. 展⽰留⾔:⻚⾯展⽰时,需要从后端获取到所有的留⾔信息

接口定义:

1.发表留言接口:

请求:body为JSON格式.

请求路径：/message/publish

请求⽅式：POST

接⼝描述：校验数入格式是否正确

请求参数:

参数名类型fromStringtoStringsayString

响应数据:true:输入格式正确

false:格式错误

前端代码: <!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> <script src=" cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script>  function submit(){ } // </script> </body> </html> 后端代码:

定义信息对象MessageInfo类:

package com.model; import lombok.Data; @Data public class MessageInfo { private String from; private String to; private String say; }

创建messageController类:

package com.springmvc.test; import ch.qos.logback.core.util.StringUtil; import com.model.MessageInfo; 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 messageWallController { //留言集合: List<MessageInfo> messageInfos=new ArrayList<>(); /** *发表留言 * @param messageInfo * @return */ @RequestMapping("/publish") public Boolean publish(MessageInfo messageInfo){ // 1.数据校验 if(!StringUtils.hasLength(messageInfo.getFrom()) || !StringUtils.hasLength(messageInfo.getTo()) || !StringUtils.hasLength(messageInfo.getSay())){ return false; } messageInfos.add(messageInfo); return true; } /** * 返回浏览信息 * @return */ @RequestMapping("/getList") public List<MessageInfo> getList(){ return messageInfos; } } 前端代码完善功能: <script src=" 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; } // 构造ajax请求 $.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("输入信息格式有误!"); } } }); } // 获取提交结果集合: $.ajax({ url:"message/getList", type:"get", success:function(messageInfos){ //将提交的所有信息进行字符串拼接: var finalHtml=""; for(var messageInfo of messageInfos){ finalHtml+="<div>"+messageInfo.from +"对" + messageInfo.to + "说:" + messageInfo.say+"</div>"; } // 发送信息给后端 $(".container").append(finalHtml); } }); </script>

前后端参数对应关系:

标签：

javaEE-14.springMVC练习由讯客互联软件开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“javaEE-14.springMVC练习”

上一篇
强化学习能让小模型多恐怖？

下一篇
MATLAB中ifft函数用法