您的位置:首页 > 教育 > 锐评 > 使用 spring MVC 简单的案例 (1)计算器

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

2024/10/4 0:39:18 来源:https://blog.csdn.net/weixin_55807049/article/details/140519530  浏览:    关键词:使用 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,有时候网页没有刷新过来,缓存没有及时更新,导致网页结果不正确。

1)浏览器缓存

可以清理缓存 ctrl + shift + delete

刷新页面 ctrl + F5 、点击浏览器左上角的小圈圈。

2)后端编译缓存

双击 clean

1.3.3.2-2 打印参数

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com