1.创建项目

2.导入前端代码

2.1 static包内

2.2 测试前端代码是否有误

显示成功说明无误

2.3 定义用户接口

请求路径：calc/sum
请求方式：GET/POST
接口描述：计算两个整数相加

请求参数:

3.服务器代码

@RestController
@RequestMapping("/calc")
public class CalcController {
    @RequestMapping("/sum")
    public String add(Integer num1,Integer num2){
        Integer sum=num1+num2;
        return "<h1>计算机计算结果: "+sum+"</h1>";
    }
}

3.1 测试是否有误

两种方式测试接口

3.1.1 浏览器测试

3.1.2 postman测试

后端无误

4.前后端交互 

添加访问url和请求⽅式

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

成功