一、计算器
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 打印参数
