加法计算器
准备工作
创建 SpringBoot
项目:引入 Spring Web
依赖,把前端的页面放入项目中
**<!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>**
放入静态文件夹中
约定前后端交互接口
接口定义:前后端交互的约定,定义完了之后,前端就按照这个文档进行开发
- 通常由服务端定义
- 定义之后,客户端(前端)进行检查(
review
) - 双方开始并行开发
概念介绍
约定“前后端交互接口”是进行 Web 开发中的关键环节。接口又叫 API
(Application Programming Interface
),我们一般讲到接口或者 API
,指的都是同一个东西
是指应用程序对外提供的服务的描述,用于交换信息和执行任务(与 JavaSE
中学习的类和接口是两回事)。简单来说,就是允许客户端给服务器发送哪些 HTTP
请求,并且每种请求预期获取什么样的 HTTP
响应。
现在“前后端分离”模式开发,前端和后端的代码通常由不同的团队负责开发,双方团队在开发之前,会提前约定好交互的方式
- 客户端发起请求
- 服务器提供对应的服务
服务器提供的服务种类有很多,客户端按照双方约定指定选择哪一个服务
接口,其实也就是我们前面网络模块讲的“应用层协议”,把约定的内容写在文档上,就是“接口文档”,接口文档也可以理解为是应用程序的“操作说明书”
- 接口定义之后,不轻易改变
- 如果需要修改,就必须要通知到每一个调用方
- 一定同步接口文档,防止背锅
比如儿童玩具
- 按 1:响应儿歌
- 按 2:响应钢琴曲
- 按 3:安抚睡眠
等等,但是这些操作说明,如果没有一个文档来说明,用户就不太清楚哪个按键对应哪个,所以商品一般会带一个说明书。- 这些按键,就是“接口“
- 这个说明书,就是应用程序的“接口文档“
需求分析
加法计算器功能,对两个整数进行相加,需要客户端提供参与计算的两个数,服务端返回的两个整数计算的结果
基于上面的分析,我们来定义接口
接口定义
请求路径: calc/sum请求方式: GET/POST接口描述: 计算两个整数相加
请求参数
参数名 | 类型 | 是否必须 | 备注 |
---|---|---|---|
num 1 | Integer | 是 | 参与计算的第一个数 |
num 2 | Integer | 是 | 参与计算的第二个数 |
服务器端代码
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController; @RequestMapping("/calc")
@RestController
public class CalcController { @RequestMapping("/sum") public String sum(Integer num1, Integer num2) { Integer sum = num1 + num2; return "计算器计算结果: " + sum; }
}
遇到问题后如何解决
-
先测试后端接口。通过 Postman 测试后端接口有没有问题,排除后端的情况
-
看日志
-
如果觉得代码没问题,就优先考虑缓存问题
- 前端缓存,
ctrl+F5
强制刷新,或者大招(清除浏览器缓存) - 后端缓存:
Maven
——>Lifecycle
——>cleannnn
- 前端缓存,
用户登录
需求:用户输入账号和密码,后端进行校验密码是否正确
- 如果不正确,前端进行用户告知
- 如果正确,跳转到首页,首页显示当前登录用户
- 后续再访问首页,可以获取到登录用户信息
准备工作
把前端页面放在项目中
约定前后端交互接口
需求分析
对于后端开发人员而言,不涉及前端页面的展示,只需要提供两个功能
- 登录页面:通过账号和密码,校验输入的账号密码是否正确,并告知前端
- 首页:告知前端当前登录用户,如果当前已有登录用户,返回登录的账号;如果没有,则返回 null
校验接口
校验接口
请求路径:/user/login请求方式:POST接口描述:校验账号密码是否正确
请求参数
参数名 | 类型 | 是否必须 | 备注 |
---|---|---|---|
userName | String | 是 | 校验的账号 |
userName | String | 是 | 校验的密码 |
响应数据
Content-Type:text/html响应内容:
true //账号密码验证成功
false //账号密码验证失败
登录接口
请求路径:/user/getLoginUser请求方式:GET接口描述:查询当前登录的用户
请求参数:无
- 当我们登录成功之后,后端会将当前用户的信息存储到 Session 中。之后后端要用的时候直接到里面拿就可以了
- 前端发送请求的时候,任何的信息 Cookie 都会带过去,不管你要不要
响应数据
Content-Type:text/html响应内容:zhangsan
- 返回当前登录的用户
服务器端代码
参数校验
普通判断方式
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController; @RestController
@RequestMapping("/user")
public class UserController { @RequestMapping("/login") public Boolean login(String userName, String password){ //参数校验 if(userName == null || userName.length()==0 || password == null || password.length()==0){ return false; } }
}
学习 Spring 后的判断方式
@RestController
@RequestMapping("/user")
public class UserController { @RequestMapping("/login") public Boolean login(String userName, String password){ //参数校验 if(!StringUtils.hasLength(userName)|| !StringUtils.hasLength(password)) { return false; } }
}
判断密码是否正确
@RestController //登录接口
@RequestMapping("/user")
public class UserController { @RequestMapping("/login") public Boolean login(String userName, String password){ //参数校验 if(!StringUtils.hasLength(userName)|| !StringUtils.hasLength(password)) { return false; } //判断密码是否正确 if("admin".equals(userName) && "admin".equals(password)){ return true; } return false; }
}
上面已经做了判空的处理,userName
不会为 null
- 但如果上面没有进行判断,
userName
为空的时候就会报空指针异常 - 所以就把常量写在前面,这是一种习惯
登录页面
- 当你从
Session
拿数据的时候,前提是要有人设置过Session
信息才可以- 我们就在
HttpSession
直接拿就好了(在前面先定义)
- 我们就在
调整前端页面代码
- 调整登录页面 login.html
对于前端而言,当点击登录按钮时,需要把用户输入的信息传递到后端进行校验,后端校验成功,则跳转到首页:index. html,后端校验失败,则直接弹窗
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页面</title>
</head>
<body><h1>用户登录</h1>用户名:<input name="userName" type="text" id="userName"><br>密码:<input name="password" type="password" id="password"><br><input type="button" value="登录" onclick="login()"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function login() {$.ajax({url:"/user/login",type:"post",data:{userName: $("#userName").val(),password: $("#password").val()},//http响应成功后success:function(result){if(result==true){//页面跳转location.href = "index.html";//location.assign("index.html");//location.replace("index.html");}else{alert("密码错误");}}})}</script>
</body>
</html>
使用 ajax
传递参数。
- 请求发送完毕之后(
url—data
)就等待接收的结果
sucess
是http
响应成功之后执行的函数(返回 200)。并不是账号密码响应成功,返回true
的时候 - 对应的是一个回调函数
- 其里面有一个内置的参数,接收我们的
http
响应(使用任何一个变量都可以)
- 调整首页代码
只需要显示当前登录用户即可
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户登录首页</title>
</head><body>登录人: <span id="loginUser"></span><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$.ajax({url: "/user/index",type: "get",success: function (loginName) {$("#loginUser").test(loginName);}})</script>
</body></html>