一、计算器
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,有时候网页没有刷新过来，缓存没有及时更新，导致网页结果不正确。可以清理缓存ctrl + F5 或者 刷新页面 点击浏览器左上角的小圈圈。
1.3.3.2-2 打印参数
