当前位置： 首页 > news >正文

前后端交互避坑指南：从登录到留言板

news 2026/8/3 9:02:58

大家好，很多新手小白在学习JavaSpringMVC的时候十分吃力，特别是在学习前后端如何交互的时候，如何传递参数？如何接收参数？明明知识点都会，但是为什么会一直报错呢？下面是我在学习过程中遇见的一些问题，为了帮助大家更好学习，我将通过登录案例+留言板案例讲知识点串通起来，文章末尾附全代码，希望能够帮助到大家！

目录

1.登录案例

1.1判断输入是否正确并存储信息

1.2返回信息

1.3前端代码

2.留言板（重点）

总结易错

登录案例代码

留言板代码

1.登录案例

接口一：判断输入的信息是否有效正确，正确还需存储用户信息

请求方式：get

参数：用户姓名，用户密码

参数类型：String

返回类型：Boolean

接口二：信息正确，返回登录信息，信息错误，告知用户

请求方式：get

返回值：用户姓名

返回类型：String

1.1判断输入是否正确并存储信息

我们先从后端开始写，根据接口文档描述，我们要从客户端的请求中拿到登录用户的姓名和输入的密码，判断这两个是否有效并且判断两者输入是否正确，由于本文重点是讲解前后端交互过程，所有我们暂时将用户姓名和密码定为“admin”，后续再讲解如何从数据库中获取数据

@RestController @RequestMapping("/login") public class Controller { //判断 @RequestMapping("/r1") public Boolean loginJudge(String userName, String password, HttpSession session){ if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){ return false; } if("admin".equals(userName)||"admin".equals(password)){ return false; } //利用Session存储用户信息 session.setAttribute("userName",userName); return true; } }

注意事项：

1.如果是使用@Controller注解，还需要添加@RequestBody。因为前端向后端传递的参数是String类型

2.StringUtils.hasLength(userName)相当于userName!=null&&userName.length!=0，可互换

3."admin".equals(userName)判断用户输入的是否正确，String判断相等使用equals方法，建议把常数写在前面，因为前面若是null会报异常，而无法确定输入的userName是否是null

4.Session可以存储用户信息，并保存到服务器结束运行，所以可以将用户信息存入Session中，想了解更多Session知识可移步--->Session​​​​​​

1.2返回信息

接口一返回到前端后，前端会根据后端返回的来判断来选择是要告知用户输入错误还是返回正确的信息，如果是显示正确的信息，那需要发送请求给后端拿存储在Session中的有效信息

@RequestMapping("/r2") public String getName(HttpSession session) { String name = session.getAttribute("userName").toString(); return name; }

注意事项：

1.获取存储在Session中的信息，使用getAttribute方法，参数要和前面设置的key名一样

2.session.getAttribute("userName")的返回类型为Object类，要将其转化为String，使用toString。

1.3前端代码

用户在浏览器页面输入信息点击提交后，要把用户输入的信息传递给后端，让后端来判断是否正确，所以在点击提交之后，前端需要写请求将数据发送给后端，下面我们将使用ajax来写（这部分对于走后端的同学可以不要求掌握，看懂即可）

<!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="js/jquery-4.0.0.min.js"></script> <script> function login() { $.ajax({ type: "post", url: "login/r1", data: { userName: $("#userName").val(), password: $("#password").val() }, success: function (resule) { if (resule) { location.assign("index.html"); }else { alert("登录失败"); } } }); } </script> </body> </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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> $.ajax({ type:"post", url:"login/r2", success: function (userName){ $("#loginUser").text(userName); } }); </script> </body> </html>

注意事项：

1.前端向后端发送请求的时候，如果需要传输数据data，传递的参数名要和发送给的后端的方法参数名一致，除非使用@RequestParam

2.请求中的url要和后端的方法路径相对应，一般是类路径/方法路径

2.留言板（重点）

接口一：获取全部留言信息，存储在List中，可以用JSON来描述这个List数据.

接口二：发表新留言

请求: body 也为 JSON 格式

使用工具：lombok

新建List存放留言，在刷新后发送给前端，展示在留言板上

public List<Message> list=new ArrayList<>(); @RequestMapping("/r1") public List<Message> getMessage(){ return list; }

用户输入留言点击提交后，前端负责把留言发送给后端，后端收到请求，要先判断留言是否合规，合规再把留言存储在lsit中，在返回true，如果不合规，返回false

@RequestMapping(value = "/r2",produces = "application/json") public Boolean judge( @RequestBody Message message){//参数绑定 if(!StringUtils.hasLength(message.getFrom())||!StringUtils.hasLength(message.getMessage())||!StringUtils.hasLength(message.getTo())){ return false; } list.add(message); return true; }

注意：

1.produces = "application/json"表示后端返回响应的数据格式为json，如果不加，前端不能拿到对象，而是字符串，要手动调用JSON.parse()把格式转换成对象

2.前端传递过来的json要用注解@RequestBody 绑定给message对象，spring会自动把json转换为对象方便使用

前端代码（body部分）

<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="js/jquery-4.0.0.min.js"></script> <script> load(); function load(){ //刷洗的时候就要获取list $.ajax({ type : "get", url : "message/r1", success : function (result){ if(result!=null&&result.length()>0){ for(var message of result){ var divE = "<div>"+message.from +"对" + message.to + "说:" + message.message+"</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; }$.ajax({ type: "post", url:"message/r2", contentType : "application/json", data : JSON.stringify({ from :from, to: to, message:say }), success : function (result){ if(!result){ alert("留言失败！"); }else { //2. 构造节点 var divE = "<div>"+from +"对" + to + "说:" + say+"</div>"; //3. 把节点添加到页面上 $(".container").append(divE); //4. 清空输入框的值 $('#from').val(""); $('#to').val(""); $('#say').val(""); } } }); } </script> </body>

这段代码的核心是:

每次刷新的时候前端都会使用ajax发送请求给后端，目的是拿到存储在后端之前保存下来的留言，这样刷新之后依旧可以看到留言

用户输入留言点击提交后，前端调用submit方法

function submit(){ //1. 获取留言的内容 var from = $('#from').val(); var to = $('#to').val(); var say = $('#say').val(); if (from== '' || to == '' || say == '') { return; }$.ajax({ type: "post", url:"message/r2", contentType : "application/json", data : JSON.stringify({ from :from, to: to, message:say }), success : function (result){ if(!result){ alert("留言失败！"); }else { //2. 构造节点 var divE = "<div>"+from +"对" + to + "说:" + say+"</div>"; //3. 把节点添加到页面上 $(".container").append(divE); //4. 清空输入框的值 $('#from').val(""); $('#to').val(""); $('#say').val(""); } } }); }

创建变量获得input框的值，发送请求给后端，根据返回的result判断留言是否成功，成功就把节点添加到页面上并清楚留言框里的值，如果留言失败，就跳出弹框告知失败

总结易错

1.拼写不要错误，比如请求中的数据类型是contentType，不要写成content-type

2.前端向后端传递的数据类型是JSON的时候，后端要用@RequestBody进行参数绑定，如果没有@RequestBody,String无法找到数据，同时，前端传递json给后端，Jackson会自动调用json转换成对象，后端可以直接当做对象使用

3.请求类型是get的时候，不能传递json，get请求没有请求体（body），不能传输复杂数据，如果get要传输数据，只能在查询字符串中输入，参数类型是json时，要使用post传递

Get和Post对比
GetPost
数据位置查询字符串中请求体（Body）
数据格式？key1=value1&&key2=value2JSON\XML\复杂格式均可
数据大小url限制大小无限制大小
安全性内容暴露在url中相对安全，但若未加密仍可通过抓包获得
缓存可以被浏览器缓存默认不被缓存
语义获取数据（查询数据）发送数据（提交数据）
浏览器 服务端 | | | | | | 这是get请求，没有请求体，服务器等待请求体，等不到，报异常 |------发送Get请求------ | | | | | |------发送Post请求------| 这是Post请求，有请求体，服务器解析请求体拿到数据
后端传递参数格式
后端传递类型前端拿到的初始状态前端操作
application/json（较多使用）自动转成对象可以进行xx.操作之间取值
text/plain字符串要手动转成json对象才能取值

将contentType定义成application/json常出现在返回字符串的时候。告诉前端把这个字符串按json处理，如果不定义，那在传的时候前端可能会当成普通字符串，就需要前端自己手动调用JSON.parse()把字符串转成对象

前端向后端发送json和js对象的区别（重点）

JS对象（常用）

JSON

实际输出内容JSON字符串JSON字符串
前端代码怎么写{name="zhangsan"}{"name"="zhangsan"}
是否需要手动序列化不需要需要调用JSON.Stringify()
后端收到jsonjson

后端向前端发送json和js的区别

对象（常用）JSON
实际输出内容JSONJSON
后端代码怎么写return 对象；return " {\"name":\"zhangsan\"}";
是否需要手动序列化不用，spring自己调用

需要程序员手动拼写字符串

前端拿到js对象js对象

后端如果发送的是对象，在传输过程中一定是会进行序列化转成字符串，到前端后，在进行反序列化，变成js对象使用

总结：前端后端传递对象比较多，但是无论是前端还是后端，在网络运输的过程中，对象都会序列化成json，json相当于是通用的语音，到达之后再将json反序列化成对象取值，如果后端传递的是字符串（长得像json而不是普通文本，如“操作成功”这些没必要转），建议修改contentType为"application/json"告诉前端把这个字符串当成json处理，让它自动转成对象

附代码

登录案例代码

package com.by.demo; import ch.qos.logback.core.util.StringUtil; import jakarta.servlet.http.HttpSession; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; /** * Created with IntelliJ IDEA. * Description: * User: Administrator * Date: 2026-08-01 * Time: 21:21 */ @RequestMapping("/login") @RestController public class loginController { //两个接口，一个是判断登录信息是否正确，一个是向前端传递登录用户姓名 @RequestMapping("/judge") public Boolean judgeLoginMessage(String userName, String password, HttpSession session){ if(StringUtils.hasLength(userName)&&StringUtils.hasLength(password)){ if("admin".equals(userName)&&"admin".equals(password)){ //把用户信息存储到会话中，方便返回用户姓名 session.setAttribute("userName",userName); return true; }else { return false; } }else { return false; } } @RequestMapping("/getuserName") public String getUserName(HttpSession session){ //从会话中得到userName，要把userName存储到会话中 return session.getAttribute("userName").toString(); } }
<!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="js/jquery-4.0.0.min.js"></script> <script> function login() { $.ajax({ type: "post", url: "login/judge", data: { userName: $("#userName").val(), password: $("#password").val() }, success: function (resule) { if (resule) { location.assign("index.html"); }else { alert("登录失败"); } } }); } </script> </body> </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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> $.ajax({ type:"post", url:"login/getuserName", success: function (userName){ $("#loginUser").text(userName); } }); </script> </body> </html>

留言板代码

package com.by.demo; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.ArrayList; import java.util.List; /** * Created with IntelliJ IDEA. * Description: * User: Administrator * Date: 2026-08-02 * Time: 11:06 */ @RequestMapping("/message") @RestController public class MessageController { public List<Message> list=new ArrayList<>(); @RequestMapping("/r1") public List<Message> getMessage(){ return list; } @RequestMapping(value = "/r2",produces = "application/json") public Boolean judge( @RequestBody Message message){//参数绑定 if(!StringUtils.hasLength(message.getFrom())||!StringUtils.hasLength(message.getMessage())||!StringUtils.hasLength(message.getTo())){ return false; } list.add(message); return true; } }
<!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="js/jquery-4.0.0.min.js"></script> <script> load(); function load(){ //刷洗的时候就要获取list $.ajax({ type : "get", url : "message/r1", success : function (result){ if(result!=null&&result.length()>0){ for(var message of result){ var divE = "<div>"+message.from +"对" + message.to + "说:" + message.message+"</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; }$.ajax({ type: "post", url:"message/r2", contentType : "application/json", data : JSON.stringify({ from :from, to: to, message:say }), success : function (result){ if(!result){ alert("留言失败！"); }else { //2. 构造节点 var divE = "<div>"+from +"对" + to + "说:" + say+"</div>"; //3. 把节点添加到页面上 $(".container").append(divE); //4. 清空输入框的值 $('#from').val(""); $('#to').val(""); $('#say').val(""); } } }); } </script> </body> </html>

以上均属个人学习心得，如有错误请多多指教！

http://www.cnnetsun.cn/news/3811062.html

相关文章：

  • Java基本类型与参数传递机制深度解析
  • GEO在AI搜索中的作用是什么？2026核心价值与实操解析
  • 口腔出现白色斑块不痛不痒，需要警惕吗
  • 郑州心海岸家庭教育品牌中心专业团队
  • C#进制转换原理与实现详解
  • NBTExplorer：免费开源的Minecraft NBT数据编辑终极指南
  • 【愚公系列】《WorkBuddy从上手到变现》014-用AI Agent实现公众号自动化运营（案例:1人运营13个平台）
  • 2026年应届生黑科技榜单9款一键生成论文工具实测！
  • Linux字符设备驱动开发：从file_operations到用户空间交互的完整指南
  • Unity等距Tilemap实战：从原理到实现《星露谷物语》风格2.5D地图
  • IPTV电视系统双机热备份解决方案—助力IPTV电视系统主机出现故障系统不间断稳定运行
  • UE5后处理材质实战：C++组件化封装相机特效，告别蓝图混乱
  • 模拟CMOS集成电路设计：从Razavi理论到Cadence仿真的实战指南
  • 数字人直播适合哪些行业使用？
  • Python自由职业接单实战：从平台选择、报价到交付的全流程指南
  • 基于Spring Boot+Vue+MySQL的在线考试系统毕业设计实战指南
  • 阿里云认证新手指南：从ACA到ACP的备考策略
  • 牛客每日一题：二叉树层序遍历变种题解析
  • AI选择性去背景音乐实测：只动BGM不动其他音效
  • Neon pageserver layer文件
  • 轻量化AIGC实训算力平台技术架构：两项专利撑起数字人+3DGS+XR能力链
  • 工业物联网数据高速公路：Autbus现场总线技术解析与实战部署
  • 老打印机驱动兼容性实战：从LBP2900看32位与64位驱动冲突解决
  • 2026年B端短视频代运营公司选型指南：5家机构客观盘点与避坑策略
  • 七律•咏伟人（原创诗）
  • COMSOL流固耦合在井筒应力分析中的工程实践
  • 折线图深度解析：从核心原理到实战避坑指南
  • AE自动化动画核心：父子级链接与表达式实战指南
  • 游戏AI寻路异常分析与双重验证机制实践
  • WPS/Excel核心函数与高效技巧：从数据处理到自动化实战指南