使用 spring MVC 简单的案例 (1)计算器

一、计算器

1.1前端代码

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

1.2 需求分析

在接到一个需求的时候,首先思考这个项目最终想要的结果是什么?

例如这个计算器,最终是希望,求得两个数字的和。

那么作为后端人员,要计算出结果,就需要在后端拿到这两个数字,这样才能处理数据。

处理完数据之后,怎样返回?

接口定义

请求路径:calc/sum

请求方式:GET/POST

接口描述:计算两个整数的和

请求参数

参数名类型是否必须备注
num1Integer参与计算的第一个数
num2Integer参与计算的第二个数

例:num1=5&num2=3

响应数据

Content-Type: text/html

响应内容:计算器结果是:8

编写后端代码

package com.ameris.springmvcdemo;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/calc")
public class CalcController {@RequestMapping("/sum")public String sum(Integer num1,Integer num2){Integer sum = num1 + num2;return "计算器结果是:" + sum;}
}

postman 测试结果:正确计算出两个数字之和 

使用浏览器测试:正常计算出结果

 

1.3 排错思路:

1.3.1.前端代码

1.3.2.后端代码 (可以使用postman发送请求,验证后端代码逻辑)

1.3.3.前后端交互(可以使用fiddler抓包)

        1.3.3.1 请求是否正常发出去了

        1.3.3.2 后端是否接收到请求了 

可以打印一个日志,如果后端收到请求了,日志会优先打印这行话

 

如果肉眼看不出问题所在

1.3.3.2-1 Debug 打断点调试

再在浏览器运行

点击之后,立马跳转到idea代码

提示,这两个值都是null

但是我们在浏览器的的确确输入了数据,并且后端也做出了处理

那就是说明可能在前端传递参数的时候出现问题了

再去查看前端html代码,发现 没有写写上参数

修改代码,加上参数

重新启动服务,成功了

如果没有成功,查看一下网页源代码 F12,有时候网页没有刷新过来,缓存没有及时更新,导致网页结果不正确。可以清理缓存ctrl + F5 或者 刷新页面 点击浏览器左上角的小圈圈。

1.3.3.2-2 打印参数

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

签名优化:请求数据类型不是`application/json`,将只对随机数进行签名计算,例如文件上传接口。

文章目录 I 签名进行请求数据类型类型判断1.1 常见的ContentType1.2 签名切面处理1.3 文件上传案例1.4 处理接口信息背景: 文件上传接口的请求数据类型通常为multipart/form-data,方便携带文本域和使用接口文档进行调试。 如果携带JSON数据,不方便调试接口。 前端数据也要特…

Github 2024-07-18 开源项目日报Top10

根据Github Trendings的统计,今日(2024-07-18统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量TypeScript项目3非开发语言项目3Jupyter Notebook项目2Python项目2JavaScript项目1C#项目1Rust项目1MDX项目1C++项目1项目化学习 创建周期:253…

Python数据获取(网页视频、音频版)

爬取数据&#xff0c;上一章有介绍&#xff0c;不懂流言私信或者评论交流即可&#xff0c; 在Python中编写爬虫通常涉及以下几个步骤&#xff1a; 发送HTTP请求&#xff1a;使用requests库向目标网站发送请求。解析网页内容&#xff1a;使用BeautifulSoup从HTML中解析出需要的…

JAVA中的File类,文件流,字节流和字符流超级详解(1.8万字干货 )

1.File类 在Java中&#xff0c;File 类是 java.io 包中的一个重要类&#xff0c;它提供了与文件或目录路径名相关的一系列操作。File 类可以用来创建、删除、重命名文件和目录&#xff0c;也可以用来获取文件或目录的属性&#xff0c;比如大小、最后修改时间等。 File类的常用方…

10 - FFmpeg - 重采样 - SoftwareResampleExample

一. 音频帧概率详解&#xff1a; 1. 概念 1&#xff09;采样率&#xff08;Sample Rate&#xff09;&#xff1a;每秒从连续信号中提取并组成离散信号的采样个数&#xff0c;它用赫兹&#xff08;Hz&#xff09;来表示。 一般音乐CD的采样率是 44100Hz&#xff0c;所以视频…

Mac Electron 应用如何进行签名(signature)和公证(notarization)?

最近很多客户反映&#xff0c;从官网下载的Mac Electron应用打不开&#xff0c;直接报病毒&#xff0c;类似于这种&#xff1a; 这是因为在MacOS 10.14.5之后&#xff0c;如果应用没有在苹果官方平台进行公证notarization(我们可以理解为安装包需要审核&#xff0c;来判断是否存…

spring 同类方法调用事务失效解决办法

可以使用AopContext.currentProxy()获取到当前类的代理对象&#xff0c;然后再用代理对象进行调用本类中的方法 如下 f1 和f2 属于同一个类 public voidf1() {((本类名)AopContext.currentProxy()).f2();}Transactionalpublic f2() {} AopContext.currentProxy()方法的使用场景…

Python(字典)

字典根据一个信息查找另外一个信息&#xff0c;也是可变数据类型&#xff0c;底层元素是无序的&#xff0c;第一个添加的元素&#xff0c;地址不一定在第一位&#xff0c;键只能有一个不能重复&#xff0c;但是值可以重复&#xff0c;字典当中的键要求是不可以变的数据类型&…

第6章 单片机的定时器/计数器

6.1 定时/计数器的结构与工作原理 6.2 定时器的控制 6.3 定时/计数器的工作方式 6.4 定时/计数器的编程和应用 6.1 定时/计数器的结构与工作原理 6.1.1 定时/计数器的基本原理 纯软件定时/计数方法&#xff1a; 定时——空循环预定周次&#xff0c;等待预定时间 计数—…

【Qt】之【Bug】error:C1083 无法打开包括文件

背景 a.cpp引用b.h正常&#xff0c;但是a.h引用b.h就报 “无法打开包括文件”的错误 分析 查看“编译输出”&#xff0c;显示不是a.h引起的错误&#xff0c;而是C插件&#xff0c; 查看后发现&#xff0c;C插件引用了a所在插件pro&#xff0c;但是没有引用a依赖的b所在的插件…

Axure中继器进阶指南:打造专业级交互

中继器进阶篇 前言 经过了基础篇的学习,我们已经掌握了中继器的基本操作,接下来来解锁中继器的进阶操作。 1. 修改删除指定行 首先拖入中继器,加上【修改】 【删除】的按钮,然后给修改按钮添加单击事件选择【更新行】。 这里可以看到我们在中继器内部添加的事件,在编…

IDEA关联数据库

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …

2024-07-16 Unity插件 Odin Inspector7 —— Number Attributes

文章目录 1 说明2 Number 特性2.1 MaxValue / MinValue2.2 MinMaxSlider2.3 ProgressBar2.4 PropertyRange2.5 Unit2.6 Wrap 1 说明 ​ 本文介绍 Odin Inspector 插件中有关 Number 特性的使用方法。 2 Number 特性 2.1 MaxValue / MinValue 在 Inspector 窗口中对象能够被设…

LLM 构建Data Multi-Agents 赋能数据分析平台的实践之④:数据分析之三(数据展示)

概述 在先前探讨的文章中&#xff0c;我们构建了一个全面的数据测试体系&#xff0c;该体系遵循“数据获取—数据治理—数据分析”的流程。如何高效地构建数据可视化看板&#xff0c;以直观展现分析结果&#xff0c;正逐渐成为利用新兴技术提升效能的关键领域。伴随业务拓展、数…

java json 实体互转 null现象

结论 相对于json字符串转为实体&#xff0c;再转回为json字符串&#xff0c;更接近高保真的是 “com.google.gson.Gson {}”, new GsonBuilder().create().toJson(bo1)); 和 “com.alibaba.fastjson.JSON {}”, JSON.toJSONString(bo1)); 代码 BusinessInsertBO bo Business…

《驾驭AI浪潮:伦理挑战与应对策略》

AI发展下的伦理挑战&#xff0c;应当如何应对&#xff1f; 人工智能飞速发展的同时&#xff0c;也逐渐暴露出侵犯数据隐私、制造“信息茧房”等种种伦理风险。随着AI技术在社会各个领域的广泛应用&#xff0c;关于AI伦理和隐私保护问题日趋凸显。尽管国外已出台系列法规来规范…

YOLOv7网络结构学习

YOLOV7详细解读&#xff08;一&#xff09;网络架构解读 YOLOV7学习记录之原理代码介绍 【Make YOLO Great Again】YOLOv1-v7全系列大解析&#xff08;Backbone篇&#xff09; yolov7 图解 深入浅出 Yolo 系列之 Yolov7 基础网络结构详解 我觉得Head、Neck和Head的划分不太…

从产品手册用户心理学分析到程序可用性与易用性的重要区别

注&#xff1a;机翻&#xff0c;未校对。 Designing for People Who Have Better Things To Do With Their Lives 为那些生活中有更重要事情要做的人设计 When you design user interfaces, it’s a good idea to keep two principles in mind: 在设计用户界面时&#xff0c;…

FTPS 和 SFTP

FTPS 和 SFTP 都是用于安全文件传输的协议&#xff0c;但它们之间存在一些关键的区别&#xff0c;包括它们如何实现安全性、工作方式以及与 FTP 的关系。下面是关于这两种协议的详细信息&#xff1a; FTPS (FTP over SSL/TLS) FTPS 是 FTP 协议的扩展&#xff0c;它通过在 FT…

三大ip代理服务商PK,IPFoxy黑马逆袭成首选?

最近亚马逊的Prime Day ,小编我呀忙得不可开交。因为小编负责的店铺数量多且需要稳定的长期连接&#xff0c;我用某一海外ip代理竟然不稳定&#xff0c;这还是号称老牌的ip代理服务商&#xff0c;因为它的漏洞&#xff0c;让我加班了好久处理工作上的问题。 吃一堑&#xff0c…