需求:输入两个整数,点击 “点击相加” 按钮,显示计算结果。
一、准备工作
创建Spring Boot项目,引入Spring Web依赖,把前端代码放入static目录下。
前端代码:
<!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>
放在static目录下:
二、约定前后端交互接口
1、概念介绍
约定 “前后端交互接口” 是进行Web开发中的关键环节。
接口又叫 API(Application Programming Interface),我们一般讲到接口或者API,指的都是同一个东西。
这里的接口是指应用程序对外提供的服务的描述,用于交换信息和执行任务(与JavaSE阶段学习的 [类和接口] 中的接口不一样,两个不同的概念)。
简单来说,就是允许客户端给服务器发送哪些 HTTP 请求,并且每种请求预期获取什么样的HTTP响应。
现在流行 “前后端分离” 模式开发,前端和后端代码通常由不同的团队负责开发。双方团队在开发之前,会提前约定好交互的方式。客户端发起请求 —> 服务器提供对应的服务。服务器提供的服务种类有很多,客户端按照双方约定,指定选择哪一个服务。
接口:其实就是我们前面网络模块讲的 “应用层协议”。把约定的内容写在文档上,就是 “接口文档”,接口文档也可以理解为 应用程序的“操作说明书”。
比如儿童电话玩具:
按键1:响应儿歌 按键2:响应钢琴乐曲 按键3:安抚睡眠等等。但是这些说明,如果没有一个文档来说明,用户就不太清楚哪个按键对应哪个,所以商品一般会带一个说明书。这些按键,就是接口,这个“说明书”,就是应用程序的 “接口文档”。
在项目开发前,根据需求先约定好前后端交互接口,双方按照接口文档进行开发。接口文档通常由服务提供方来写,交由服务使用方确认,也就是客户端。接口文档一旦写好,尽量不要轻易改变,如果需要改变,必须要通知另一方知晓。
2、需求分析
加法计数器功能,对两个整数进行相加,需要客户端提供参与计算的两个数,服务端返回这两个整数计算的结果。
3、接口定义
请求路径:calc / sum
请求方式:GET/POST
接口描述:计算机计算结果
请求参数
参数名 | 类型 | 是否必须 | 备注 |
num1 | Integer | 是 | 参与计算的第一个数 |
num2 | Integer | 是 | 参与计算的第二个数 |
示例:num1=5&num2=3
响应数据
Content-Type:text/html
响应内容:相加计算结果为:8
服务器给计算机返回计算结果。
三、服务器代码
@RestController @RequestMapping("/calc") public class Calc { @RequestMapping("/sum") public String calc(Integer num1, Integer num2) { int sum = num1 + num2; return "<h1>计算机计算结果: " + sum + "</h1>"; } }
四、前端页面代码
<!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>
五、运行测试
浏览器访问:http:127.0.0.1:8080/calc.html ,页面如下:
跳转页面后,却报错了,如图:
首先,先检查后端代码有没有问题,使用Postman检查,如图:
发现也报错了,检查URL,检查代码中的URL是否写错了,如图:
发现代码出问题了,URL多了空格,将空格删除。重新使用Postman测试,如图:
再使用浏览器测试,页面如下:
没有问题了。
遇到问题如何解决?
1、先测试后端接口,通过Postman测试后端接口没有问题,暂时排除后端问题。
2、查看日志(可以借助Debug)
3、如果觉得代码没问题,优先考虑缓存的问题:
前端缓存:Ctrl + F5 强制刷新,或者清除浏览器缓存。
后端缓存:Maven -> Plugins -> clean。