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

加法计算器

准备工作

创建 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 开发中的关键环节。接口又叫 APIApplication 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)就等待接收的结果
    sucesshttp 响应成功之后执行的函数(返回 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/448438.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024国际潜水小姐大赛中国区总决赛盛典在广州举行,吉林选手张潇文获冠军!

传承“以美之名&#xff0c;保护海洋”的精神&#xff0c;2024年10月15日晚&#xff0c;2024国际潜水小姐大赛中国区总决赛盛典在广州渔民新村隆重举行&#xff01;来自全国多个城市&#xff0c;经过层层选拔产生的20位佳丽齐聚广州&#xff0c;以独特的女性水下之美和健康美&a…

ubuntu18.04系统中图形化界面

一、Ubuntu 18.04 中&#xff0c;使用 GDM 作为默认的图形用户界面&#xff08;GUI&#xff09;管理器。GDM 是 GNOME Display Manager 的缩写&#xff0c;它是用于 Ubuntu 的显示管理器&#xff0c;负责处理登录和会话管理。 通过命令行重启 Ubuntu 18.04 上的图形界面服务&am…

Windows系统快捷键(自用)

Microsoft Windows 的键盘快捷方式 未标记&#xff1a;表示已掌握&#xff0c;少数&#xff08;不常用&#xff09;作为笔记 红色标记&#xff1a;表示尚需掌握 黄色标记&#xff1a;表示第一序列 系统快捷键 Esc&#xff1a;停止或离开当前任务 F2&#xff1a;重命名选中的文…

若依框架篇-若依框架搭建具体过程、后端源代码分析、功能详解(权限控制、数据字典、定时任务、代码生成、表单构建、接口测试)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 若依框架概述 1.1 若依构建 1.2 后端项目搭建 1.3 前端项目搭建 2.0 利用若依框架生成前后端代码案例 3.0 功能详解 3.1 功能详解 - 权限控制 3.1.1 使用权限控制…

ORM框架简介

什么是ORM&#xff1f; ORM&#xff08;Object-Relational Mapping&#xff0c;对象关系映射&#xff09;是一种编程技术&#xff0c;用于在关系数据库和对象程序语言之间转换数据。ORM框架允许开发者以面向对象的方式来操作数据库&#xff0c;而不需要编写复杂的SQL语句。简单…

计算机网络 tcp和udp

目录 一、TCP 建立连接-TCP 三次握手 1&#xff09; 什么是半连接队列和全连接队列&#xff1f; 2&#xff09; 为什么要三次握手? 3&#xff09; 三次握手过程中可以携带数据吗&#xff1f; 断开连接-TCP 四次挥手 1&#xff09; 为什么要四次挥手&#xff1f; 2&…

美洽入选中国信通院《2024高质量数字化转型产品及服务全景图》AI 版块

近日&#xff0c;2024大模型数字生态发展大会在北京举办&#xff0c;中国信息通信研究院发布了《高质量数字化转型产品及服务全景图&#xff08;2024&#xff09;》。美洽凭借“AI客服平台”产品入选人工智能、AI大模型、客户服务三大板块。 中国信息通信研究院是工业和信息化部…

超全!一文详解大型语言模型的11种微调方法

导读&#xff1a;大型预训练模型是一种在大规模语料库上预先训练的深度学习模型&#xff0c;它们可以通过在大量无标注数据上进行训练来学习通用语言表示&#xff0c;并在各种下游任务中进行微调和迁移。随着模型参数规模的扩大&#xff0c;微调和推理阶段的资源消耗也在增加。…

基于springboot实习管理系统

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 系统展示 【2024最新】基于JavaSpringBootVueMySQL的&#xff0c;前后端分离。 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;…

编译原理——扫描器设计与实现

改进了一下&#xff0c;加入了能够输出错误提示&#xff08;注意&#xff1a;我们是用char接收的&#xff0c;但是遇到中文的时候因为码值的原因&#xff0c;一个中文字占三个char所以按照我们判断流程会输出三个错误提示&#xff0c;你们要是见意的话可以自行修改&#xff09;…

【JMeter】使用BeanShell写入内容到文件

一、前言 在我们日常工作中&#xff0c;可能会遇到需要将请求返回的数据写入到文件中。在我们使用JMeter进行性能测试时&#xff0c;就经常能够遇到这种情况。要想达到这种目的&#xff0c;我们一般采取BeanShell后置处理器来将内容写入到文件。 二、提取 在目前大多数的性能…

Java多线程编程实战:生产者与消费者问题的同步、互斥案例分析

前言 生产者和消费者模式是一个十分经典的多线程协作模式&#xff0c;该模式又称为等待唤醒机制。本质上就是打破多线程的随机性&#xff0c;使得线程轮流执行。 问题分析 生产者和消费者问题&#xff1a; 生产者生产数据&#xff0c;消费者消费数据&#xff0c;需要借助第三…

The First项目报告:Puffer Finance如何破解LST/LRT赛道中心化难题?

10月09日The First上线了一种基于以太坊的协议&#xff0c;引入了重新质押的概念的生态协议EigenLayer。10月15日&#xff0c;一款搭建在 Eigenlayer 上原生流动性再质押平台 Puffer Finance 宣布其原生代币 PUFFER 将于 2024 年 10 月 15 日 07时&#xff08;UTC8&#xff09;…

Java基于微信小程序的健身小助手打卡预约教学系统(源码+lw+部署文档+讲解等)

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…

android11 usb摄像头添加多分辨率支持

部分借鉴于&#xff1a;https://blog.csdn.net/weixin_45639314/article/details/142210634 目录 一、需求介绍 二、UVC介绍 三、解析 四、补丁修改 1、预览的限制主要存在于hal层和framework层 2、添加所需要的分辨率&#xff1a; 3、hal层修改 4、frameworks 5、备…

多场景多任务建模(三): M2M(Multi-Scenario Multi-Task Meta Learning)

多场景建模: STAR(Star Topology Adaptive Recommender) 多场景建模&#xff08;二&#xff09;: SAR-Net&#xff08;Scenario-Aware Ranking Network&#xff09; 前面两篇文章&#xff0c;讲述了关于多场景的建模方案&#xff0c;其中可以看到很多关于多任务学习的影子&…

CSS网页布局(重塑网页布局)

一、实现两列布局 许多网站有一些特点&#xff0c;如页面顶部放置一个大的导航或广告条&#xff0c;右侧是链接或图片&#xff0c;左侧放置主要内容&#xff0c;页面底部放置版权信息等 一般情况&#xff0c;此类网页布局的两列都有固定的宽度&#xff0c;而且从内容上很容易区…

Cherno游戏引擎笔记(73~90)

------- scene viewport ---------- 》》》》做了两件事&#xff1a;设置视口和设置相机比例 》》》》为什么要设置 m_ViewportSize 为 glm::vec2 而不是 ImVec2 ? 因为后面需要进行 ! 运算&#xff0c;而 ImVec2 没有这个运算符的定义&#xff0c;只有 glm::vec2 有这个运算…

linux 下 verilog 简明开发环境附简单实例

author: hjjdebug date: 2024年 10月 12日 星期六 10:34:13 CST descripton: linux 下 verilog 简明开发环境附简单实例 甲: 安装软件 1. sudo apt install iverilog 该包verilog 源代码的编译器iverilog&#xff0c;其输出是可执行的仿真文件格式vvp格式 它可以检查源代码中…

高效办公必备:2024四款免费PDF转换器推荐!

PDF文件的管理和转换离不开一些PDF转换器的使用。今天就给大家盘点几个好用免费的PDF转换器&#xff0c;帮助大家轻松应对各种文档转换任务 福昕PDF转换大师&#xff08;365客户端&#xff09; 直达链接&#xff1a;www.pdf365.cn/pdf2word/ 操作教程&#xff1a;立即获取 …