一、计算器
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
接口描述:计算两个整数的和
请求参数
参数名 类型 是否必须 备注 num1 Integer 是 参与计算的第一个数 num2 Integer 是 参与计算的第二个数 例: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 打印参数