脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → Spring用户登录

Spring实现加法计算器和用户登录功能

 更新时间：2024年10月23日 15:06:21   作者：椰椰椰耶  
在前后端分离的Web开发模式中,接口(API)扮演着至关重要的角色,它是前后端交互的桥梁,创建加法计算器和用户登录功能时,介绍了接口测试和问题解决的一般流程,如使用Postman测试接口、查看日志、处理缓存问题等,确保开发过程中的高效协作和问题快速定位

加法计算器

准备工作

创建 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 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 测试后端接口有没有问题，排除后端的情况

  • 看日志

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

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

用户登录

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

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

准备工作

把前端页面放在项目中

约定前后端交互接口

需求分析

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

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

校验接口

校验接口

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

请求参数

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

响应数据

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">
  密码：<input name="password" type="password" id="password">
  <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>

到此这篇关于Spring实现加法计算器和用户登录的文章就介绍到这了,更多相关Spring用户登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Java解析方法的调用关系示例详解

    Java解析方法的调用关系示例详解

    这篇文章主要介绍了Java解析方法的调用关系,方法在Java编程中用于封装重复的代码,提高代码复用性,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • Java常用HASH算法总结【经典实例】

    Java常用HASH算法总结【经典实例】

    这篇文章主要介绍了Java常用HASH算法,结合实例形式总结分析了Java常用的Hash算法,包括加法hash、旋转hash、FNV算法、RS算法hash、PJW算法、ELF算法、BKDR算法、SDBM算法、DJB算法、DEK算法、AP算法等,需要的朋友可以参考下
    2017-09-09
  • springboot+mybaties项目中扫描不到@mapper注解的解决方法

    springboot+mybaties项目中扫描不到@mapper注解的解决方法

    本文主要介绍了springboot+mybaties项目中扫描不到@mapper注解的解决方法,该报错表明扫描不到Mapper层,具有一定的参考价值,感兴趣的可以了解一下
    2024-05-05
  • java开发中防止重复提交的几种解决方案

    java开发中防止重复提交的几种解决方案

    我们日常开发中有很多的应用场景都会遇到重复提交问题,下面这篇文章主要给大家介绍了关于java开发中防止重复提交的几种解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Java流程控制之选择结构

    Java流程控制之选择结构

    这篇文章主要介绍了Java流程控制之选择结构，主要以if单选择结构、if双选择结构、if多选择结构、嵌套的if结构、switch多选择结构多种选择结构展开全文。需要的小伙伴可以参考一下
    2021-12-12
  • java模拟实现银行ATM机操作

    java模拟实现银行ATM机操作

    这篇文章主要为大家详细介绍了java模拟实现银行ATM机操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • SpringSecurity授权实现基本思路

    SpringSecurity授权实现基本思路

    本文介绍了SpringSecurity中使用FilterSecurityInterceptor进行权限校验的基本方法,通过SecurityContextHolder获取Authentication中的权限信息,感兴趣的朋友跟随小编一起看看吧
    2024-10-10
  • Java中常见的5种WEB服务器介绍

    Java中常见的5种WEB服务器介绍

    这篇文章主要介绍了Java中常见的5种WEB服务器介绍,它们分别是Tomcat、Resin、JBoss、WebSphere、WebLogic,需要的朋友可以参考下
    2014-07-07
  • mybatis中点击mapper接口快速定位到对应xml中sql方式

    mybatis中点击mapper接口快速定位到对应xml中sql方式

    这篇文章主要介绍了mybatis中点击mapper接口快速定位到对应xml中sql方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Java实现的剪刀石头布游戏示例

    Java实现的剪刀石头布游戏示例

    这篇文章主要介绍了Java实现的剪刀石头布游戏,涉及java随机数生成及逻辑判定等相关操作技巧,需要的朋友可以参考下
    2017-12-12

最新评论