当前位置： 首页 > news >正文

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

news 2026/5/27 23:13:24

加法计算器

准备工作

创建 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>**

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

约定前后端交互接口

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

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

概念介绍

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

是指应用程序对外提供的服务的描述，用于交换信息和执行任务（与 JavaSE 中学习的类和接口是两回事）。简单来说，就是允许客户端给服务器发送哪些 HTTP 请求，并且每种请求预期获取什么样的 HTTP 响应。

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

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

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

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

比如儿童玩具 image.png|300

  • 按 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;  }  
}

image.png

遇到问题后如何解决

  1. 先测试后端接口。通过 Postman 测试后端接口有没有问题，排除后端的情况

  2. 看日志

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

    • 前端缓存，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
  • 返回当前登录的用户

服务器端代码

参数校验

普通判断方式

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 直接拿就好了（在前面先定义）

调整前端页面代码

  1. 调整登录页面 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 响应（使用任何一个变量都可以）
  1. 调整首页代码

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

<!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实现加法计算器和用户登录

加法计算器 准备工作 创建 SpringBoot 项目&#xff1a;引入 Spring Web 依赖&#xff0c;把前端的页面放入项目中 **<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport"…...

编程日记 2024/10/17 6:05:36

电脑d盘不见了怎么恢复？

在使用电脑的时候&#xff0c;我们可能会遇到这样一个问题&#xff0c;电脑里的D盘突然不见了&#xff0c;在“此电脑”中看不到D盘了。这这个情况可能会让人感到非常困惑甚至是头疼&#xff0c;因为D盘里面可能存放着非常重要的文件。今天的内容要和大家分析一下D盘不见的原因…...

编程日记 2024/10/17 6:04:35

电子商务网站维护技巧：保持WordPress、主题和插件的更新

在这个快节奏的数字时代&#xff0c;维护一个电子商务网站的首要任务之一是保持WordPress、主题和插件的最新状态。过时的软件不仅可能导致功能故障&#xff0c;还可能带来安全风险。本文将深入探讨如何有效地更新和维护您的WordPress网站&#xff0c;以确保其安全性和性能。 …...

编程日记 2024/10/17 6:03:34

交叉编译--目标平台aarch64 ubuntu 22.04

开发宿主机&#xff1a; ubuntu22.04虚拟机&#xff08;PC&#xff09; 目标平台&#xff1a; 地平线x3派/x3 Module , ubuntu22.04&#xff0c; ros2 humble 基于地平线x3开发板 5核 4G的内存的有限的资源&#xff0c;直接在目标机上编译虽然也可以&#xff0c;但耗时太长&a…...

编程日记 2024/10/17 6:02:32

【pytorch】昇思大模型配置python的conda版本

首先&#xff0c;切换conda的源&#xff0c;可以参考这篇文章&#xff0c;如果python的版本比较老的话不推荐使用清华源。 比如算子开发文档中推荐的python版本是3.7.5&#xff0c;比较老&#xff0c;使用清华源无法安装。 之后就是比较重要的&#xff0c;修改~/.bashrc。 把…...

编程日记 2024/10/17 6:01:30

nodejs的卸载和nvm安装

由于项目需求&#xff0c;需要多版本控制的nodejs&#xff0c;所以要把原来的nodejs卸载干净&#xff0c;然后再装nvm 常见问题 1.在安装nvm的时候没有卸载node&#xff0c;导致使用nvm安装完之后&#xff0c;node和npm都不可用。 2.在第一次使用nvm安装node后&#xff0c;要…...

编程日记 2024/10/17 5:57:23

网络七层架构

目录标题 网络七层架构从正确认识网络七层架构开始 网络七层架构 简介&#xff1a; 网络七层架构是指ISO/OSI模型&#xff0c;它是国际标准化组织&#xff08;ISO&#xff09;制定的一种用于计算机网络体系结构的参考模型。该模型将计算机网络的功能划分为七个层次&#xff0c…...

编程日记 2024/10/17 5:56:20

2024年华为OD机试真题-敏感字段加密-Java-OD统一考试（E卷）

最新华为OD机试考点合集：华为OD机试2024年真题题库（E卷+D卷+C卷）_华为od机试题库-CSDN博客 每一题都含有详细的解题思路和代码注释，精编c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看，发现新题及时跟新。 题目描述 给定一个由多个…...

编程日记 2024/10/17 5:55:19

图神经网络黑书笔记--术语

一、图的基本概念 图由节点集合和边集合组成。节点代表实体&#xff0c;边代表实体之间的关系。节点、边、整个图都可以与丰富的信息相关联&#xff0c;这些信息被表征为节点/边/图的特征。 中心度&#xff1a;是度量节点的重要性。如果许多其他重要的节点也连接到该节点&a…...

编程日记 2024/10/17 5:54:18

原型基于颜色的图像检索与MATLAB

原型基于颜色的图像检索与MATLAB 摘要 基于内容的检索数据库(图像)已经变得越来越受欢迎。为了达到这一目的&#xff0c;需要发展算法检测/模拟工具&#xff0c;但市场上没有合适的商业工具。 本文介绍了一个模拟环境&#xff0c;能够从数据库中检索图像直方图的相似之处。该…...

编程日记 2024/10/17 5:53:17

【C++笔试强训】如何成为算法糕手Day9

学习编程就得循环渐进&#xff0c;扎实基础&#xff0c;勿在浮沙筑高台 循环渐进Forward-CSDN博客 目录 循环渐进Forward-CSDN博客 添加逗号 思路&#xff1a; 代码实现&#xff1a; 跳台阶 思路&#xff1a; 代码实现&#xff1a; 扑克牌顺子 思路&#xf…...

编程日记 2024/10/17 5:52:16

初识算法 · 二分查找(1)

目录 前言&#xff1a; 二分查找 题目解析 算法原理 算法编写 搜索插入位置 题目解析 算法原理 算法编写 前言&#xff1a; 本文呢&#xff0c;我们从滑动窗口窗口算法移步到了二分查找算法&#xff0c;我们简单了解一下二分查找算法&#xff0c;二分查找算法是一个十…...

编程日记 2024/10/17 5:51:15

数据结构：数字统计

请统计某个给定范围[L, R]的所有整数中&#xff0c;数字2出现的次数。 比如给定范围[2, 22]&#xff0c;数字2在数2中出现了1次&#xff0c;在数12中出现1次&#xff0c;在数20中出现1次&#xff0c;在数21中出现1次&#xff0c;在数22中出现2次&#xff0c;所以数字2在该范围…...

编程日记 2024/10/17 5:50:14

网页前端开发之HTML入门

HTML入门 HTML全称HyperText Markup Language&#xff0c;中文译为&#xff1a;超文本标记语言。 它有一个同胞兄弟叫&#xff1a;XML&#xff0c;全称Extensible Markup Language&#xff0c;中文译为&#xff1a;可扩展标记语言。 简单来讲&#xff0c;它们都是标记语言。 …...

编程日记 2024/10/17 5:49:13

Python do while 实现案例

在 Python 中没有传统的 do while 循环语法。 但是可以通过使用 while True 结合条件判断来实现类似 do while 的效果。 一、语法 while True:# 执行某些操作#...if not condition:break 这里先无条件地执行一次循环体中的代码&#xff0c;然后在每次循环结束时检查条件&#…...

编程日记 2024/10/17 5:48:12

docker网络管理详解 一

一 生产故障&#xff1a;docker 同一宿主机不能通信 1. 检查容器网络配置 1.1 查看容器的网络信息 使用 docker inspect 命令查看容器的网络配置&#xff0c;确保它们连接到了正确的网络。 docker inspect -f {{json .NetworkSettings.Networks }} container1 docker inspe…...

编程日记 2024/10/17 5:47:11

前端使用Canvas实现网页电子签名（撤销、下载）

前言&#xff1a;一般在一些后台的流程资料以及审核的场景中会需要电子签名&#xff0c;介绍一种用canvas实现的电子签名&#xff0c;此案例用的是原生js 效果展示&#xff1a; 一、html和css&#xff1a; <div class"divCla2"><canvas id"myCanvas&q…...

编程日记 2024/10/17 5:46:10

Lepus安装与配置管理（Lepus Installation and Configuration Management)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…...

编程日记 2024/10/17 5:45:09

Tomcat中存放图片文件丢失问题

1、tomcat中存放的图片丢失原因&#xff1a; tomcat 在处理 WAR 包时&#xff0c;会在部署时解压 WAR 包并创建文件夹。如果在 tomcat 运行时删除了 WAR 包&#xff0c;tomcat会检测到这种变化&#xff0c;然后可能会自动清理已解压的文件夹。这是tomcat默认的行为&#xff0c;…...

编程日记 2024/10/17 5:44:08

Webpack一键打包多个环境

1. 安装打包插件 安装如下插件&#xff0c;以便可以在打包命令中设置环境变量区分不同的环境。 npm install --save-dev cross-env 2. 配置打包命令 在package.json中配置正式环境和测试环境打包命令&#xff0c;同时添加一个命令同打包两个环境。 // package.json "…...

编程日记 2024/10/17 5:41:06

数组专项（一）：数组排序、去重、查找

大家好，欢迎来到《算法面试60讲（2026最新版全真题带解析）》第19篇！上一篇我们彻底吃透了字符串专项的核心难点——BF暴力匹配与KMP高效匹配算法，搞定了字符串模块面试最难的算法考点。从本节课开始，我们正式进入算法面试第一高频模块：数组专项。 在算法面试中，数组是出…...

编程新知 2026/5/26 2:09:22

Agent开发面试通关攻略：吃透稳拿offer

阅读前置&#xff1a;2026年当下最卷也最缺人的AI岗位&#xff0c;一定是AI Agent开发。最近刷遍CSDN、牛客、力扣最新面经&#xff0c;发现一个非常明显的招聘趋势&#xff1a;普通大模型微调岗位饱和内卷&#xff0c;而AI Agent开发岗位人才严重缺口&#xff0c;薪资更高、竞…...

编程新知 2026/5/26 1:51:13

Python合并Excel文档

有若干个Excel文档&#xff0c;每个文档格式一致&#xff0c;及第一行为文件标题&#xff0c;第二行为表格表头&#xff08;表头不完全一致&#xff09;。现需要将他们合并。合并规则为&#xff1a;去掉每个文档的第一行&#xff0c;以第二行为表头&#xff0c;将每个文档的第三…...

编程新知 2026/5/26 1:13:04

告别鼠标手！5分钟上手开源鼠标连点器MouseClick，轻松实现自动化点击

告别鼠标手&#xff01;5分钟上手开源鼠标连点器MouseClick&#xff0c;轻松实现自动化点击 【免费下载链接】MouseClick &#x1f5b1;️ MouseClick &#x1f5b1;️ 是一款功能强大的鼠标连点器和管理工具&#xff0c;采用 QT Widget 开发 &#xff0c;具备跨平台兼容性 。软…...

编程新知 2026/5/26 0:24:13

荣耀出征官方网站下载正版手游 翅膀养成细节玩法全方位讲解

玩荣耀出征的玩家都清楚&#xff0c;翅膀不仅是角色的颜值象征&#xff0c;更是提升整体战力的核心途径。很多新手玩家只顾着升级、刷装备&#xff0c;完全忽略翅膀养成&#xff0c;导致等级很高但战力始终上不去。还有不少玩家胡乱合成、盲目进阶&#xff0c;浪费了大量稀有翅…...

编程新知 2026/5/25 23:45:44

如何快速批量下载高质量歌词：ZonyLrcToolsX跨平台终极解决方案

如何快速批量下载高质量歌词&#xff1a;ZonyLrcToolsX跨平台终极解决方案 【免费下载链接】ZonyLrcToolsX ZonyLrcToolsX 是一个能够方便地下载歌词的小软件。 项目地址: https://gitcode.com/gh_mirrors/zo/ZonyLrcToolsX 还在为本地音乐库缺少歌词而烦恼吗&#xff1…...

编程新知 2026/5/25 23:20:56

账务台账数据

银行里说的 “账务台账数据”&#xff0c;本质就是按会计规则把每笔业务逐笔、分户、分科目记下来的完整明细流水 余额 辅助信息&#xff0c;核心是 “可逐笔追溯、可对账、可审计” 的一套明细数据。下面用通俗、具体的方式拆开说&#xff1a;一、银行 “账务台账” 到底是什…...

编程新知 2026/5/25 23:02:48

百度文心一言开发者如何通过Taotoken低成本接入多模型API

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 百度文心一言开发者如何通过Taotoken低成本接入多模型API 对于已经熟悉并正在使用百度文心一言等国产大模型API的开发者而言&#…...

编程新知 2026/5/25 23:00:46

LizzieYzy：你的智能围棋教练，让AI分析变得简单有趣 [特殊字符]

LizzieYzy&#xff1a;你的智能围棋教练&#xff0c;让AI分析变得简单有趣 &#x1f3af; 【免费下载链接】lizzieyzy LizzieYzy - GUI for Game of Go 项目地址: https://gitcode.com/gh_mirrors/li/lizzieyzy 还在为复盘找不到关键点而烦恼吗&#xff1f;想提升棋力却…...

编程新知 2026/5/25 22:42:37

5个必知的Universal-Updater高级功能：从QR扫描到后台安装

5个必知的Universal-Updater高级功能&#xff1a;从QR扫描到后台安装 【免费下载链接】Universal-Updater An easy to use app for installing and updating 3DS homebrew 项目地址: https://gitcode.com/gh_mirrors/un/Universal-Updater Universal-Updater是一款专为任…...

编程新知 2026/5/25 22:12:18