【Spring】Spring实现加法计算器和用户登录

文章目录加法计算器准备工作约定前后端交互接口概念介绍需求分析接口定义服务器端代码遇到问题后如何解决用户登录准备工作约定前后端交互接口需求分析校验接口登录接口服务器端代码参数校验判断密码是否正确登录页面调整前端页面代码加法计算器准备工作创建SpringBoot项目引入Spring Web依赖把前端的页面放入项目中**!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body form actioncalc/sum methodpost h1计算器/h1 数字1input namenum1 typetextbr 数字2input namenum2 typetextbr input typesubmit value 点击相加 /form /body /html**放入静态文件夹中约定前后端交互接口接口定义前后端交互的约定定义完了之后前端就按照这个文档进行开发通常由服务端定义定义之后客户端前端进行检查review双方开始并行开发概念介绍约定“前后端交互接口”是进行 Web 开发中的关键环节。接口又叫APIApplication Programming Interface我们一般讲到接口或者API指的都是同一个东西是指应用程序对外提供的服务的描述用于交换信息和执行任务与JavaSE中学习的类和接口是两回事。简单来说就是允许客户端给服务器发送哪些HTTP请求并且每种请求预期获取什么样的HTTP响应。现在“前后端分离”模式开发前端和后端的代码通常由不同的团队负责开发双方团队在开发之前会提前约定好交互的方式客户端发起请求服务器提供对应的服务服务器提供的服务种类有很多客户端按照双方约定指定选择哪一个服务接口其实也就是我们前面网络模块讲的“应用层协议”把约定的内容写在文档上就是“接口文档”接口文档也可以理解为是应用程序的“操作说明书”接口定义之后不轻易改变如果需要修改就必须要通知到每一个调用方一定同步接口文档防止背锅比如儿童玩具按 1响应儿歌按 2响应钢琴曲按 3安抚睡眠等等但是这些操作说明如果没有一个文档来说明用户就不太清楚哪个按键对应哪个所以商品一般会带一个说明书。这些按键就是“接口“这个说明书就是应用程序的“接口文档“需求分析加法计算器功能对两个整数进行相加需要客户端提供参与计算的两个数服务端返回的两个整数计算的结果基于上面的分析我们来定义接口接口定义请求路径: calc/sum 请求方式: GET/POST 接口描述: 计算两个整数相加请求参数参数名类型是否必须备注num 1Integer是参与计算的第一个数num 2Integer是参与计算的第二个数服务器端代码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 测试后端接口有没有问题排除后端的情况看日志如果觉得代码没问题就优先考虑缓存问题前端缓存ctrlF5强制刷新或者大招清除浏览器缓存后端缓存Maven——Lifecycle——cleannnn用户登录需求用户输入账号和密码后端进行校验密码是否正确如果不正确前端进行用户告知如果正确跳转到首页首页显示当前登录用户后续再访问首页可以获取到登录用户信息准备工作把前端页面放在项目中约定前后端交互接口需求分析对于后端开发人员而言不涉及前端页面的展示只需要提供两个功能登录页面通过账号和密码校验输入的账号密码是否正确并告知前端首页告知前端当前登录用户如果当前已有登录用户返回登录的账号如果没有则返回 null校验接口校验接口请求路径/user/login 请求方式POST 接口描述校验账号密码是否正确请求参数参数名类型是否必须备注userNameString是校验的账号userNameString是校验的密码响应数据Content-Typetext/html 响应内容 true //账号密码验证成功 false //账号密码验证失败登录接口请求路径/user/getLoginUser 请求方式GET 接口描述查询当前登录的用户请求参数无当我们登录成功之后后端会将当前用户的信息存储到 Session 中。之后后端要用的时候直接到里面拿就可以了前端发送请求的时候任何的信息 Cookie 都会带过去不管你要不要响应数据Content-Typetext/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 langen head meta charsetUTF-8 title登录页面/title /head body h1用户登录/h1 用户名input nameuserName typetext iduserNamebr 密码input namepassword typepassword idpasswordbr input typebutton value登录 onclicklogin() script srchttps://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(resulttrue){ //页面跳转 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 langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0 meta http-equivX-UA-Compatible contentieedge title用户登录首页/title /head body 登录人: span idloginUser/span script srchttps://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