发布时间：2025-06-24 20:00:52  作者：北方职教升学中心  阅读量：983


文章目录

  • 加法计算器
    • 准备工作
    • 约定前后端交互接口
      • 概念介绍
      • 需求分析
      • 接口定义
    • 服务器端代码
    • 遇到问题后如何解决
  • 用户登录
    • 准备工作
    • 约定前后端交互接口
      • 需求分析
      • 校验接口
      • 登录接口
    • 服务器端代码
      • 参数校验
      • 判断密码是否正确
      • 登录页面
    • 调整前端页面代码

加法计算器

准备工作

创建 SpringBoot项目：引入 Spring Web依赖，把前端的页面放入项目中

**<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><formaction="calc/sum"method="post"><h1>计算器</h1>数字1：<inputname="num1"type="text"><br>数字2：<inputname="num2"type="text"><br><inputtype="submit"value="点击相加 "></form></body></html>**

放入静态文件夹中 image.png|422
image.png

约定前后端交互接口

接口定义：前后端交互的约定，定义完了之后，前端就按照这个文档进行开发

  1. 通常由服务端定义
  2. 定义之后，客户端（前端）进行检查（review）
  3. 双方开始并行开发

概念介绍

约定“前后端交互接口”是进行 Web 开发中的关键环节。接口又叫 API（Application Programming Interface），我们一般讲到接口或者 API，指的都是同一个东西

是指应用程序对外提供的服务的描述，用于交换信息和执行任务（与 JavaSE中学习的类和接口是两回事）。

  • 这些按键，就是“接口“
  • 这个说明书，就是应用程序的“接口文档“

    • 需求分析

    加法计算器功能，对两个整数进行相加，需要客户端提供参与计算的两个数，服务端返回的两个整数计算的结果

    基于上面的分析，我们来定义接口

    接口定义

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

    请求参数

    参数名类型是否必须备注
    num 1Integer是参与计算的第一个数
    num 2Integer是参与计算的第二个数

    服务器端代码

    importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;@RequestMapping("/calc")@RestControllerpublicclassCalcController{@RequestMapping("/sum")publicStringsum(Integernum1,Integernum2){Integersum =num1 +num2;return"计算器计算结果: "+sum;}}

    image.png

    遇到问题后如何解决

    1. 先测试后端接口。并不是账号密码响应成功，返回 true的时候

    2. 对应的是一个回调函数
    3. 其里面有一个内置的参数，接收我们的 http响应（使用任何一个变量都可以）
      1. 调整首页代码

      只需要显示当前登录用户即可

      <!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>用户登录首页</title></head><body>登录人: <spanid="loginUser"></span><scriptsrc="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>

    • 请求发送完毕之后（url—data）就等待接收的结果
      sucess是 http响应成功之后执行的函数（返回 200）。通过 Postman 测试后端接口有没有问题，排除后端的情况

    • 看日志

    • 如果觉得代码没问题，就优先考虑缓存问题

      • 前端缓存，ctrl+F5强制刷新，或者大招（清除浏览器缓存）
      • 后端缓存：Maven——> Lifecycle——> cleannnn

      • 用户登录

      需求：用户输入账号和密码，后端进行校验密码是否正确

      1. 如果不正确，前端进行用户告知
      2. 如果正确，跳转到首页，首页显示当前登录用户
      3. 后续再访问首页，可以获取到登录用户信息

      准备工作

      把前端页面放在项目中 image.png|274

      约定前后端交互接口

      需求分析

      对于后端开发人员而言，不涉及前端页面的展示，只需要提供两个功能

      1. 登录页面：通过账号和密码，校验输入的账号密码是否正确，并告知前端
      2. 首页：告知前端当前登录用户，如果当前已有登录用户，返回登录的账号；如果没有，则返回 null

      校验接口

      校验接口

      请求路径：/user/login请求方式：POST接口描述：校验账号密码是否正确

      请求参数

      参数名类型是否必须备注
      userNameString是校验的账号
      userNameString是校验的密码

      响应数据

      Content-Type：text/html响应内容：true   //账号密码验证成功false  //账号密码验证失败

      登录接口

      请求路径：/user/getLoginUser请求方式：GET接口描述：查询当前登录的用户

      请求参数：无

      • 当我们登录成功之后，后端会将当前用户的信息存储到 Session 中。之后后端要用的时候直接到里面拿就可以了
      • 前端发送请求的时候，任何的信息 Cookie 都会带过去，不管你要不要

      响应数据

      Content-Type：text/html响应内容：zhangsan
      • 返回当前登录的用户

      服务器端代码

      参数校验

      普通判断方式

      importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;@RestController@RequestMapping("/user")publicclassUserController{@RequestMapping("/login")publicBooleanlogin(StringuserName,Stringpassword){//参数校验  if(userName ==null||userName.length()==0||password ==null||password.length()==0){returnfalse;}}}

      学习 Spring 后的判断方式

      @RestController@RequestMapping("/user")publicclassUserController{@RequestMapping("/login")publicBooleanlogin(StringuserName,Stringpassword){//参数校验  if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){returnfalse;}}}

      判断密码是否正确

      @RestController//登录接口  @RequestMapping("/user")publicclassUserController{@RequestMapping("/login")publicBooleanlogin(StringuserName,Stringpassword){//参数校验  if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){returnfalse;}//判断密码是否正确  if("admin".equals(userName)&&"admin".equals(password)){returntrue;}returnfalse;}}

      上面已经做了判空的处理，userName不会为 null

      • 但如果上面没有进行判断，userName为空的时候就会报空指针异常
      • 所以就把常量写在前面，这是一种习惯

      登录页面

      • 当你从 Session拿数据的时候，前提是要有人设置过 Session信息才可以
        • 我们就在 HttpSession直接拿就好了（在前面先定义）

      调整前端页面代码

      1. 调整登录页面 login.html

      对于前端而言，当点击登录按钮时，需要把用户输入的信息传递到后端进行校验，后端校验成功，则跳转到首页：index. html，后端校验失败，则直接弹窗

      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>登录页面</title></head><body><h1>用户登录</h1>用户名：<inputname="userName"type="text"id="userName"><br>密码：<inputname="password"type="password"id="password"><br><inputtype="button"value="登录"onclick="login()"><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>functionlogin(){$.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传递参数。

      现在“前后端分离”模式开发，前端和后端的代码通常由不同的团队负责开发，双方团队在开发之前，会提前约定好交互的方式

      • 客户端发起请求
      • 服务器提供对应的服务
        服务器提供的服务种类有很多，客户端按照双方约定指定选择哪一个服务

      接口，其实也就是我们前面网络模块讲的“应用层协议”，把约定的内容写在文档上，就是“接口文档”，接口文档也可以理解为是应用程序的“操作说明书”

      • 接口定义之后，不轻易改变
      • 如果需要修改，就必须要通知到每一个调用方
      • 一定同步接口文档，防止背锅

      比如儿童玩具 image.png|300

      • 按 1：响应儿歌
      • 按 2：响应钢琴曲
      • 按 3：安抚睡眠
        等等，但是这些操作说明，如果没有一个文档来说明，用户就不太清楚哪个按键对应哪个，所以商品一般会带一个说明书。简单来说，就是允许客户端给服务器发送哪些 HTTP请求，并且每种请求预期获取什么样的 HTTP响应。

    上一篇：Elasticsearch系列组件：Beats高效的日志收集和传输解决方案
    下一篇：国际通信业务出入口局新增6个