当前位置: 首页 > article >正文

【JavaEE进阶】Spring MVC(3)

欢迎关注个人主页:逸狼


创造不易,可以点点赞吗

如有错误,欢迎指出~


返回响应

返回静态页面

//@RestController
@Controller
@RequestMapping("/response")
public class ResponseController {@RequestMapping("/returnHtmlPage")public String returnHtmlPage(){return "/hello.html";}
}

创建前端页面hello.html(注意要放到static文件夹下面) 

@RestController = @Controller+@ResponseBody(返回数据

如果只加@Controller,返回的是视图页面,若加上@RestController,返回的就是数据了

@ResponseBody 既是类注解,又是方法注解,

  • 加在上,该类的所有方法都 返回数据,
  • 加在方法上,该方法 返回数据,其他方法不受影响

如果⼀个类的⽅法⾥,既有返回数据的,⼜有返回⻚⾯的,就把 @ResponseBody 注解添加到对应的⽅ 法上即可.

@Controller
public class IndexController {@RequestMapping("/index")public Object index(){return "/index.html";}@ResponseBody@RequestMapping("/returnData")public String returnData(){return "该⽅法返回数据";}
}

 如果将第二个方法returnDate中的注解@ResponseBody去掉,前端会报404的错误,因为程序会认为返回的是一个html页面,所以会在static文件夹找,没有找到就会报错

返回Html代码

后端数据中如果有html代码,会被浏览器解析

    //返回Html的代码@ResponseBody@RequestMapping("/returnHtml")public String returnHtml(){return "<h1>returnHtml</h1>";}

通过Fiddler观察响应结果, Content-Type 为 text/html

响应中的Content-Type常⻅取值有以下⼏种:

  1.  text/html :body数据格式是HTML
  2. text/css :body数据格式是CSS
  3. application/javascript :body数据格式是JavaScript
  4. application/json :body数据格式是JSON 

返回json数据

    //返回json@ResponseBody@RequestMapping("/returnJson")public User returnJson(){User user=new User();user.setName("zhangsan");user.setAge(18);return user;}

返回状态码 

SpringMVC会根据我们⽅法的返回结果⾃动设置响应状态码,程序员也可以⼿动指定状态码 通过SpringMVC的内置对象HttpServletResponse提供的⽅法来进⾏设置

    //设置状态码@ResponseBody@RequestMapping("/setStatus")public User returnJson(HttpServletResponse response){User user=new User();user.setName("zhangsan");user.setAge(18);response.setStatus(500);return user;}

状态码不影响界面的展示 

设置Header

    //设置header@ResponseBody@RequestMapping(value="/setHeader",produces="application/json")public String setHeader(){return "{\"success\":true}";}

方法二

设置其他Header的话,需要使⽤SpringMVC的内置对象HttpServletResponse提供的⽅法来进⾏设置

voidsetHeader(Stringname,Stringvalue)设置⼀个带有给定的名称和值的header.如果name 已经存在,则覆盖旧的值.

    @ResponseBody@RequestMapping("/setHeader2")public String setHeader(HttpServletResponse response){response.setHeader("myKey","myValue");return "success";}

小案例实践1:实现一个加法计算器

 约定前后端交互接⼝

约定"前后端交互接⼝"是进⾏Web开发中的关键环节. 接⼝⼜叫API(Application Programming Interface),我们⼀般讲到接⼝或者API,指的都是同⼀个东 西.(就是允许客⼾端给服务器发送哪些HTTP请求,并且每种请求预期获取什么样的HTTP响应.

接⼝,其实也就是我们前⾯⽹络模块讲的的"应⽤层协议".把约定的内容写在⽂档上,就是"接⼝⽂档",接⼝⽂档也可以理解为是应⽤程序的"操作说明书".

以实现上面的加法计数器 为例 

需求分析

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

接⼝定义

  1.  请求路径:calc/sum
  2. 请求⽅式:GET/POST
  3. 接⼝描述:计算两个整数相加

请求参数

 响应数据

  1. Content-Type: text/html
  2. 响应内容: 计算机计算结果: 8

服务器给浏览器返回计算的结果

 后端服务器代码

@RestController
@RequestMapping("/calc")
public class CalcController {@RequestMapping("/sum")public String sum(@RequestParam("num1") Integer num1,@RequestParam("num2") Integer num2){Integer sum=num1 + num2 ;return "计算器计算结果:"+sum;}
}

前端calc.html代码

<!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文件夹下 

小案例实践2:⽤⼾登录 

需求分析

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

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

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

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

校验接口 

接口定义

  1. 请求路径:/user/login
  2. 请求⽅式:POST
  3. 接⼝描述:校验账号密码是否正确

响应数据

  1. Content-Type: text/html
  2. 响应内容: true //账号密码验证成功
  3. false//账号密码验证失败

 后端代码实现

@RequestMapping("/user")
@RestController
public class UserController {@RequestMapping(value="/login",method= RequestMethod.POST)public Boolean login(String userName, String password, HttpSession session){//如果有session则返回,没有就创建
//        if(userName==null || "".equals(userName)){//将常量写在前面,防止userName为空,会报空指针异常
//            return false;
//        }//如果用户名和密码两者有一个为空,if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){return false;}//不为空,校验账号和密码是否正确if("admin".equals(userName) && "admin".equals(password)){//登入成功,要设置session,把⽤⼾名存储在Session中 session.setAttribute("userName",userName);return true;}return false;//尽可能少些嵌套}

查询用户登入接口

接口定义

  1. 请求路径:/user/getLoginUser
  2. 请求⽅式:GET
  3. 接⼝描述:查询当前登录的⽤⼾

响应数据

  1. Content-Type: text/html
  2. 响应内容: zhangsan

返回当前登录的⽤⼾

 后端代码实现

@RequestMapping(value="/getLoginUser",method= RequestMethod.GET)public String getLoginUser(HttpSession session){if(session.getAttribute("userName")!= null){return (String) session.getAttribute("userName");}return "";}

前端login.html代码

<!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="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>function login() {$.ajax({type: "post",url: "/user/login",data: {"userName": $("#userName").val(),"password": $("#password").val()},success: function(body){if(body==true){//跳转到index页面location.href = "index.html";}else{//当前页面alert("密码错误");}}});}</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="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>$.ajax({type: "get",url: "/user/getLoginUser",success: function(userName){$("#loginUser").text(userName);}});</script>
</body></html>

在浏览器中测试的结果如下

小案例实践3:留言板

需求分析

 后端需要提供两个服务

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

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

 创建MessageInfo类

@Data//来自lombok,加上后不用写get和set方法了(自动帮助生成get和set方法)
public class MessageInfo {public String from;public String to;public String message;
}

 接⼝定义

1. 获取全部留⾔

全部留⾔信息,我们⽤List来表⽰,可以⽤JSON来描述这个List数据.接口定义

2. 发表新留⾔

请求:body也为JSON格式.

后端代码实现 

@RestController
@RequestMapping("/message")
public class MessageController {//存储留言信息private List<MessageInfo> messageInfos=new ArrayList<>();@RequestMapping("/getList")public List<MessageInfo> getList(){return messageInfos;}//发表留言@RequestMapping(value = "/publish",produces = "application/json")//设置返回结果为jsonpublic String publish(@RequestBody MessageInfo messageInfo){if(StringUtils.hasLength(messageInfo.getFrom())&& StringUtils.hasLength(messageInfo.getTo())&& StringUtils.hasLength(messageInfo.getMessage())){messageInfos.add(messageInfo);return "{\"ok\":1}";}//发布失败return "{\"ok\":0}";}
}

前端代码实现

<!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://code.jquery.com/jquery-3.7.1.min.js"></script><script>getList();function getList() {$.ajax({type: "get",url: "/message/getList",success: function (messages) {for (let msg of messages) {let html = "<div>" + msg.from + " 对 " + msg.to + " 说: " + msg.message + "</div>";$(".container").append(html);}}});}function submit() {let from = $("#from").val();let to = $("#to").val();let say = $("#say").val();if (from == "" || to == "" || say == "") {alert("请检查输入内容");return;}//检验完成之后, 发起后端请求$.ajax({url: "/message/publish",type: "post",// 设置Request ContentTypecontentType: "application/json",// 将对象转为jsondata: JSON.stringify({from: from,to: to,message: say}),success: function (result) {if (result.ok == 1) {//添加成功alert("添加成功");let html = "<div>" + from + " 对 " + to + " 说: " + say + "</div>";$(".container").append(html);$(":text").val("");} else {//失败alert("添加失败");}}});}</script>
</body></html>

引入lombok

Lombok是⼀个Java⼯具库,通过添加注解的⽅式,简化Java的开发.

lombok通过⼀些注解的⽅式,可以帮助我们消除⼀些冗⻓代码,使代码看起来简洁⼀些

在pom文件里加上lombok依赖

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

相关文章:

【JavaEE进阶】Spring MVC(3)

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗 如有错误&#xff0c;欢迎指出~ 返回响应 返回静态页面 //RestController Controller RequestMapping("/response") public class ResponseController {RequestMapping("/returnHtmlPage&…...

火语言RPA--Excel读取内容

【组件功能】&#xff1a;读取Excel内指定位置的内容或读取整篇Sheet页内容 配置预览 配置说明 读取位置 单元格&#xff1a;读取指定单元格中的内容。 行&#xff1a;读取指定行内容。 列&#xff1a;读取指定列内容。 区域&#xff1a;读取指定区域内容。 整篇sheet页&…...

sass报错:[sass] Undefined variable. @import升级@use语法注意事项

今天创建vue3项目&#xff0c;迁移老项目代码&#xff0c;使用sass的时候发现import语法已经废弃&#xff0c;官方推荐使用use替换。 这里我踩了一个坑找半天的问题&#xff0c;原因是sass升级到1.85之后 定义变量前加上 - 就是表示变量私有&#xff0c;即使使用use导出 在新的…...

DeepSeek VS ChatGPT-速度、准确性和成本

撰写本文时马斯克刚刚发布了聊天机器人Grok2&#xff0c;10万张算卡体现了马斯克的财大气粗。近年来&#xff0c;人工智能模型取得了长足的发展&#xff0c;每个模型都力求在速度、准确性和成本效率方面超越其他模型。在本文中&#xff0c;我将深入研究比较中美在AI的焦点模型上…...

重新出发的LLM本地部署——DeepSeek加持下的Ollama+OpenWebUI快速部署

DeepSeek 这真的是太惊艳了&#xff0c;发布出来的模型这么能打&#xff0c;在线的版本使用起来也是丝滑连招&#xff0c;感觉效果比起之前一直用智谱 chatglm4 更好用&#xff0c;想着本地化部署一下。 本来以为&#xff0c;会和之前在开发测试 transformers 的模型和代码一样…...

动态网格图片展示中的自适应逻辑

在现代网页设计中&#xff0c;自适应逻辑不仅提升了用户体验&#xff0c;也显著提高了组件的灵活性。本文将探讨如何通过 动态计算每页图片数 和 窗口尺寸变化监听 来实现网格图片的自适应展示。以下内容不仅包含逻辑的核心&#xff0c;还展示了如何优雅地将这些逻辑与 Vue 框架…...

Java基础——代理模式

代理模式是一种比较好理解的设计模式。简单来说就是 我们使用代理对象来代替对真实对象(real object)的访问&#xff0c;这样就可以在不修改原目标对象的前提下&#xff0c;提供额外的功能操作&#xff0c;扩展目标对象的功能。 一、代理模式的主要作用 控制访问&#xff1a;通…...

Django项目之订单管理part1

一.前言 我们前面把django的常用知识点给讲完了&#xff0c;现在我们开始项目部分&#xff0c;项目是一个订单管理系统&#xff0c;我们同时也会在项目之中也会讲一些前面没有用到的知识点。 项目大概流程如下&#xff1a; 核心的功能模块&#xff1a; 认证模块&#xff0c;用…...

Electron通过ffi-napi调用dll导出接口

electron使用ffi-napi环境搭建 附打包好的ffi-napi可以直接放到项目目录下使用&#xff0c;避免以后麻烦 一、安装node.js Node.js官网&#xff1a;https://nodejs.org/zh-cn/download&#xff0c;选择LTS长期稳定版本即可 ![在这里插入图片描述](https://i-blog.csdnimg.c…...

Laravel从入门到上云

大家好&#xff0c;今天给大家介绍一下PHP的经典框架Laravel。 本文假定你已经安装好了PHP执行环境&#xff0c;并且使用PHP版本为PHP8.0以上。 首先&#xff0c;让我们来安装Laravel框架&#xff0c;执行命令&#xff1a;composer create-project laravel/laravel 命令执行…...

大数据SQL调优专题——Hive执行原理

引入 Apache Hive 是基于Hadoop的数据仓库工具&#xff0c;它可以使用SQL来读取、写入和管理存在分布式文件系统中的海量数据。在Hive中&#xff0c;HQL默认转换成MapReduce程序运行到Yarn集群中&#xff0c;大大降低了非Java开发者数据分析的门槛&#xff0c;并且Hive提供命令…...

用 Biome 替代 ESLint 和 Prettier

简介 ESLint 和 Prettier ESLint&#xff1a;代码质量检查工具&#xff0c;确保代码风格一致与无错误 Prettier&#xff1a;代码格式化工具&#xff0c;自动美化代码布局 所以&#xff1a;ESLint Prettier 能自动美化代码、自动检查代码错误的工具 Biome Biome&#xff1a;…...

【后端】k8s

1. 命令 1.1 获取service服务 获取集群内所有命名空间的service服务 sudo kubectl get service --all-namespaces 获取集群内指定命名空间的service服务 sudo kubectl get service -n命名空间 当权限限制到一个命名空间时,只能使用下面这个 sudo kubectl -n 命名空间 get se…...

golang深度学习-基础篇

基础数据结构及类型 字符型-string string 是Go标准库 buildin 内置的一个基础数据类型。string是由8比特字节的集合,通常不一定是UTF-8编码的文本。string可以为空(长度为0),但不会是nil。 string is the set of all strings of 8-bit bytes, conventionally but not nec…...

前端笔试面试资源汇总

好的&#xff0c;我现在需要帮助用户找到热门实用的前端笔试面试贴。首先&#xff0c;回顾之前的对话&#xff0c;用户已经询问了常见的前端算法题目&#xff0c;现在他们想要更广泛的资源&#xff0c;可能包括面试题、面经、学习资料等。用户可能正在准备前端面试&#xff0c;…...

win11安装wsl报错:无法解析服务器的名称或地址(启用wsl2)

1. 启用wsl报错如下 # 查看可安装的 wsl --install wsl --list --online此原因是因为没有开启DNS的原因&#xff0c;所以需要我们手动开启DNS。 2. 按照如下配置即可 Google的DNS&#xff08;8.8.8.8和8.8.4.4) 全国通用DNS地址 (114.114.114.114) 3. 运行以下命令来重启 WSL…...

【Day44 LeetCode】图论问题 Ⅱ

一、图论问题 Ⅱ 1、岛屿的最大面积 这题和上一篇博客求岛屿数量如出一辙&#xff0c;都是要找出所有岛屿&#xff0c;深度优先搜索代码如下&#xff1a; # include<iostream> # include<vector>using namespace std;int dfs(vector<vector<int>> …...

技术总结 | MySQL面试知识点

存储引擎 Mysql 中的存储引擎 查询存储引擎的命令 show engines; Archive 只支持 insert 与select操作, 不支持索引 不支持事务 适用于存储需要长期保存,但是很少访问的数据,例如 历史日志 BlackHole 不存储数据,但是会记录写入操作 适用于性能测试 语言验证等情况 MyISAM…...

frameworks 之 Activity添加View

frameworks 之 Activity添加View 1 LaunchActivityItem1.1 Activity 创建1.2 PhoneWindow 创建1.3 DecorView 创建 2 ResumeActivityItem 讲解 Activity加载View的时机和流程 涉及到的类如下 frameworks/base/core/java/android/app/Activity.javaframeworks/base/services/cor…...

Linux下Ollama下载安装速度过慢的解决方法

问题描述&#xff1a;在Linux下使用默认安装指令安装Ollama&#xff0c;下载安装速度过慢&#xff0c;进度条进度缓慢&#xff0c;一直处于Downloading Linux amd64 bundle中&#xff0c;具体如下图所示&#xff1a; 其中&#xff0c;默认的Ollama Linux端安装指令如下&#xf…...

【小白学HTML5】一文讲清常用单位(px、em、rem、%、vw、vh)

html5中&#xff0c;常用的单位有px、em、rem、%、vw、vh&#xff08;不常用&#xff09;、cm、m等&#xff0c;这里主要讲解px、em、rem、%、vw。 学习了解&#xff1a;主流浏览器默认的字号&#xff1a;font-size:16px&#xff0c;无论用什么单位&#xff0c;浏览器最终计算…...

用自定义注解实现Excel数据导入中的枚举值校验

使用自定义注解实现Excel数据导入中的枚举值校验 在实际开发中&#xff0c;我们经常需要从Excel文件中导入数据&#xff0c;并且这些数据需要符合一定的规则&#xff0c;比如某些字段的值必须是预定义的枚举值。本文将介绍如何使用自定义注解来实现这一功能&#xff0c;以提高…...

关于redis的主从复制(下)

目录 全量复制 关于replid和runid 部分复制 补充问题 实时复制 psync可以从主节点获取全量数据&#xff0c;也可以获取一部分数据。主要就是看offset的进度&#xff0c;如果offset写作-1&#xff0c;就是获取全量数据。offset写具体的正整数&#xff0c;则是从当前偏移量位…...

uniapp uni.request重复请求处理

类似这种切换tab时&#xff0c;如果操作很快并且网络不太好&#xff0c;就出现数据错乱&#xff0c;在网上查了一圈&#xff0c;有一个使用uview拦截处理的&#xff0c;但是原生uni.requse没有找到详细的解决办法&#xff0c;就查到使用 abort 方法&#xff0c;我自己封装了一个…...

【大模型】DeepSeek:AI浪潮中的破局者

【大模型】DeepSeek&#xff1a;AI浪潮中的破局者 引言&#xff1a;AI 新时代的弄潮儿DeepSeek&#xff1a;横空出世展锋芒&#xff08;一&#xff09;诞生背景与发展历程&#xff08;二&#xff09;全球影响力初显 探秘 DeepSeek 的技术内核&#xff08;一&#xff09;独特的模…...

SOME/IP--协议英文原文讲解8

前言 SOME/IP协议越来越多的用于汽车电子行业中&#xff0c;关于协议详细完全的中文资料却没有&#xff0c;所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块&#xff1a; 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 4.2 Speci…...

用PyInstaller构建动态脚本执行器:嵌入式Python解释器与模块打包 - 简明教程

技术场景&#xff1a; 需分发的Python工具要求终端用户可动态修改执行逻辑将Python环境与指定库&#xff08;如NumPy/Pandas&#xff09;嵌入可执行文件实现"一次打包&#xff0c;动态扩展"的轻量化解决方案。 ▌ 架构设计原理 1. 双模运行时识别 # 核心判断逻辑…...

在做题中学习(89):螺旋矩阵

解法&#xff1a;模拟 思路&#xff1a;创建ret数组&#xff0c;用变量标记原矩阵的行数和列数&#xff0c;遍历一个元素就push_back进ret数组&#xff0c;每次遍历完一行或一列&#xff0c;相应行/列数--&#xff0c;进行顺时针螺旋遍历到为0即可。 细节&#xff1a;要有边界…...

从零搭建微服务项目Base(第5章——SpringBoot项目LogBack日志配置+Feign使用)

前言&#xff1a; 本章主要在原有项目上添加了日志配置&#xff0c;对SpringBoot默认的logback的配置进行了自定义修改&#xff0c;并详细阐述了xml文件配置要点&#xff08;只对日志配置感兴趣的小伙伴可选择直接跳到第三节&#xff09;&#xff0c;并使用Feign代替原有RestT…...

数据结构《图》

数据结构《图论》 图的性质 一、无向图&#xff08;Undirected Graph&#xff09; 定义 由一组顶点&#xff08;Vertex&#xff09;和一组无向边&#xff08;Edge&#xff09;构成。 每条无向边用一条无方向的线段连接两个顶点&#xff0c;记为 ( (u, v) )&#xff0c;其中…...