【SpringMVC】用户登录器项目,加法计算器项目的实现

 8e19eee2be5648b78d93fbff2488137b.png

阿华代码,不是逆风,就是我疯

你们的点赞收藏是我前进最大的动力!!

希望本文内容能够帮助到你!!

目录

一:用户登录项目实现

1:需求

2:准备工作

(1)跳转的页面(首页)

(2) 登录的页面

3:预期结果

 二:约定前后端交互接口

1:需求分析

2:接口定义

(1)校验接口

①请求参数

②响应数据

(2)查询登录用户接口

①请求参数

②响应数据

3:后端校验代码

4:查询登录用户后端代码

 三:调整前端代码

四:运行测试结果

 五:计算器项目实现

1:需求

2:准备工作

3:结果如下

六:约定前后端交互接口

1:需求分析

2:定义接口

3:请求参数

七:后端代码

八:运行测试


一:用户登录项目实现

1:需求

⽤⼾输⼊账号和密码,后端进⾏校验密码是否正确。
(1) 如果不正确,前端进⾏⽤⼾告知
(2)如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录⽤⼾
(3)后续再访问⾸⻚,可以获取到登录⽤⼾信息


2:准备工作

把前端代码放到项目中

(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></script>
</body></html>

(2) 登录的页面

<!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() {}</script>
</body></html>

3:预期结果

 二:约定前后端交互接口

1:需求分析

对于后端开发⽽⾔,只需要提供两个功能
①登录⻚⾯:通过账号和密码,校验输⼊的账号密码是否正确,并告知前端
② ⾸⻚:告知前端当前登录⽤⼾.如果当前已有⽤⼾登录,返回登录的账号,如果没有,返回空

2:接口定义

(1)校验接口

请求路径:/user/login
请求⽅式:POST
接⼝描述:校验账号密码是否正确

①请求参数

②响应数据

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

(2)查询登录用户接口

请求路径:/user/getLoginUser
请求⽅式:GET
接⼝描述:查询当前登录的⽤⼾


①请求参数

②响应数据

Content-Type: text/html
响应内容:
zhangsan

3:后端校验代码

package com.example.demoapplication;import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttribute;/*** Created with IntelliJ IDEA.* Description:* User: Hua YY* Date: 2024-11-11* Time: 13:10*/@RestController
@RequestMapping("/user")
public class LoginController {/** 这个类中的login方法是用来检验前端请求中的账号和密码是否正确的* */@RequestMapping(value = "/login")public Boolean login(String userName , String password , HttpSession session){//参数校验/*if(userName == null || userName.length() == 0|| password == null || password.length() == 0){return false;}*/if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){return false;}//检验账号密码是否正确,这里内置的账号密码写死了,后面接触数据库之后在加深理解if(!"cbro".equals(userName) || !"123456".equals(password)){return false;}session.setAttribute("userName" , userName);return true;}@RequestMapping("/index")public String getUserName(@SessionAttribute("userName") String userName){return userName;}
}

StringUtils.hasLength()是Spring提供的⼀个⼯具⽅法,判断字符串是否有值,字符串为null或者""时,返回false,其他返回true。

4:查询登录用户后端代码

@RestController
@RequestMapping("/user")
public class getLoginUser {@RequestMapping(value = "/getLoginUser" )public String getLoginUser(HttpSession session){String userName = (String)session.getAttribute("userName");//向下转型if(StringUtils.hasLength(userName)){return userName;}return "";}
}

 三:调整前端代码

<!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/getLoginUser",//这里才是真正的调用后端type:"get",success:function (loginName){//调用回调函数,接收后端结果,用body参数接收//给登录人span重新赋值$("#loginUser").text(loginName);//用text赋值,赋值来源为loginName}});</script>
</body></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() {//当点击登录的时候onclick调用function中的login//ajax请求包含路径类型,访问成功...,访问失败.....//格式   $.ajax({})  括号里面是一个对象$.ajax({url:"/user/login",//这里才是真正的调用后端type:"post",data:{  // data接收参数userName: $("#userName").val(),password: $("#password").val()},//以上是发送请求,响应成功//回调函数function内部有一个内置的参数用来接收后端的响应success:function (result){//result参数接收响应结果if(result){location.href = "/index.html"}else{alert("账号密码有误");//弹框}}})}</script>
</body></html>

四:运行测试结果

多次刷新http://127.0.0.1:8080/index.html发现依然可以获取到登录⽤⼾
如果重启服务器,则登录⼈显⽰:空

Session存在内存中,如果不做任何处理,默认服务器重启,Session数据就丢失了

 五:计算器项目实现

1:需求

输⼊两个整数,点击"点击相加"按钮,显⽰计算结果

2:准备工作

把前端代码引入项目中

前端代码如下

<!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" 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>

3:结果如下

六:约定前后端交互接口

1:需求分析

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

2:定义接口

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

3:请求参数

七:后端代码

@RestControllerpublic class CalculateController {@RequestMapping("/calc")public String sum(Integer num1 , Integer num2){int sum = num1 + num2;return "<h1>计算的结果是:" + sum + "</h1>";}}

八:运行测试

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

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

相关文章

3.5 认识决策树

3.5 认识决策树 3.5.1 认识决策树 如何高效的进行决策&#xff1f; 特征的先后顺序 3.5.2 决策树分类原理详解 已知有四个特征&#xff0c;预测 是否贷款给某个人。 先看房子&#xff0c;再看工作&#xff0c;是否贷款。 年龄&#xff0c;信贷情况&#xff0c;工作&#…

MyBatis-Plus分页查询方式

分页查询基本方式 SpringBootTest(classes LearningApplication.class) public class MPTest {AutowiredILearningLessonService lessonService;Testpublic void test(){/*** Page<LearningLesson>&#xff1a;MyBatisPlus提供的分页对象* 1&#xff1a;当前页数* 2&am…

AI智能体Prompt预设词指令大全+GPTs应用使用

AI智能体使用指南 直接复制在AI工具助手中使用&#xff08;提问前&#xff09; 可前往SparkAi系统用户官网进行直接使用 SparkAI系统介绍文档&#xff1a;Docs 常见AI智能体GPTs应用大全在线使用 自定义添加制作AI智能体进行使用&#xff1a; 文章润色器 你是一位具有敏锐洞察…

MYSQL字符集和校对规则

文章目录 MYSQL字符集MYSQL默认字符集MySQL常见字符集 MYSQL校对规则校对规则总结 MYSQL字符集 UTF(Unicode Tranformation Format)是Unicode字符集规范的其中一个编码方式。 各字符编码详解可参考&#xff1a;字符编码发展历史 MYSQL默认字符集 5.7版本及之前&#xff1a;…

K8S,StatefulSet

有状态应用 Deployment实际上并不足以覆盖所有的应用编排问题&#xff1f; 分布式应用&#xff0c;它的多个实例之间&#xff0c;往往有依赖关系&#xff0c;比如&#xff1a;主从关系、主备关系。 还有就是数据存储类应用&#xff0c;它的多个实例&#xff0c;往往都会在本地…

子类有多个父类的情况下Super不支持指定父类来调用方法

1、Super使用方法 super()函数在Python中用于调用父类的方法。它返回一个代理对象&#xff0c;可以通过该对象调用父类的方法。 要使用super()方法&#xff0c;需要在子类的方法中调用super()&#xff0c;并指定子类本身以及方法的名称。这样就可以在子类中调用父类的方法。 …

Mac电脑如何解压rar压缩包

group 868373192 second group 277356808 在 macOS 上解压 RAR 文件&#xff0c;你可以使用以下几种方法&#xff1a; 方法 1: 使用 The Unarchiver 下载并安装 The Unarchiver: 你可以从 Mac App Store 下载 The Unarchiver。 解压 RAR 文件: 找到你想要解压的 RAR 文件。 …

《深入浅出HTTPS》读书笔记(16):消息验证码算法分类

MAC算法有两种形式&#xff0c;分别是CBC-MAC算法和HMAC算法。 CBC-MAC算法从块密码算法的CBC分组模式演变而来&#xff0c;简单地说就是最后一个密文分组的值就是MAC值。 HMAC&#xff08;Hash-based Message Authentication Code&#xff09;算法使用Hash算法作为加密基元&am…

又一个ansible例子

这个例子有点复杂&#xff0c;他在被控端上采集CPU 内存和磁盘利用率&#xff0c;并且以模板的形式保存在被控端&#xff0c;最后再把这个结果文件从被控端取回来。综合用到了shell、register、template和fetch4个模块 --- - name: get cpu mem and disk hosts: all tasks…

使用国内镜像源加速Qt“更新/安装”的方法

QT更新/安装时&#xff0c;国外源下载很慢&#xff0c;国内镜像源也因网络环境的不同而速度各异&#xff0c;下文给出国内镜像源的配置方法。 一、命令行 1、切换对应目录&#xff0c;更新器默认目录是 C:\Qt 2、文件名镜像源 安装示例&#xff1a; .\qt-unified-windows-x…

包管理器npm, cnpm, yarn 和 pnpm 的命令

npm (Node Package Manager) 安装与更新 npm install 或 npm i&#xff1a; 安装项目依赖&#xff1a;根据 package.json 文件安装所有列出的依赖。参数&#xff1a; -S, --save&#xff1a;保存到 dependencies&#xff08;默认行为&#xff09;。-D, --save-dev&#xff1a;…

python中权重剪枝,低秩分解,量化技术 代码

目录 python中权重剪枝,低秩分解,量化技术 代码 权重剪枝 低秩分解 scipy 量化技术 python中权重剪枝,低秩分解,量化技术 代码 权重剪枝 权重剪枝可以通过PyTorch的torch.nn.utils.prune模块实现。以下是一个简单的例子: import torch import torch.nn as nn impor…

如何让Google快速收录你的页面?

要让Google更快地收录你的网站内容&#xff0c;首先需要理解“爬虫”这个概念。Google的爬虫是帮助它发现和评估网站内容质量的工具&#xff0c;如果你的页面质量高且更新频率稳定&#xff0c;那么Google爬虫更可能频繁光顾。通常情况下&#xff0c;通过Google Search Console&…

使用 Flutter 进行移动应用开发:深入探索

文章目录 前言一、介绍二、安装 Flutter 环境三、Flutter 应用结构与基础组件四、状态管理策略五、高级主题结语 前言 随着移动技术的迅猛发展&#xff0c;跨平台开发的需求日益增长。开发者们一直在寻找一种既能保证应用性能又能减少开发成本和时间的技术方案。Flutter 应运而…

qtcanpool 知 10:包管理雏形

文章目录 前言痛点转机雏形实践后语 前言 曾听闻&#xff1a;C/Qt 没有包管理器&#xff0c;开发起来太不方便。这是一个有过 node.js 开发经验的人对 Qt 的吐槽。 确实&#xff0c;像 python、golang、node.js 这些编程语言都有包管理器&#xff0c;给用户带来了极佳的开发体…

Python 浏览器自动化新利器:DrissionPage,让网页操作更简单!

Python 浏览器自动化新利器&#xff1a;DrissionPage&#xff0c;让网页操作更简单&#xff01; 文章目录 Python 浏览器自动化新利器&#xff1a;DrissionPage&#xff0c;让网页操作更简单&#xff01;&#x1f680; 引言&#x1f31f; DrissionPage简介&#x1f6e0;️ 三大…

网络安全知识:网络安全网格架构

在数字化转型的主导下&#xff0c;大多数组织利用多云或混合环境&#xff0c;包括本地基础设施、云服务和应用程序以及第三方实体&#xff0c;以及在网络中运行的用户和设备身份。在这种情况下&#xff0c;保护组织资产免受威胁涉及实现一个统一的框架&#xff0c;该框架根据组…

CEEMDAN-CPO-VMD二次分解(CEEMDAN+冠豪猪优化算法CPO优化VMD)

CEEMDAN-CPO-VMD二次分解&#xff08;CEEMDAN冠豪猪优化算法CPO优化VMD&#xff09; 目录 CEEMDAN-CPO-VMD二次分解&#xff08;CEEMDAN冠豪猪优化算法CPO优化VMD&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 首先运用CEEMDAN对数据进行一次分解&#xff…

Ubuntu 22.04安装Nessus(离线激活模式)

Ubuntu 22.04安装Nessus 一、 Nessus 简介二、Nessus下载安装三、激活Nessus四、创建一个基础扫描五、 破解Nessus只能扫描16个地址的限制六、更新插件 一、 Nessus 简介 Nessus 官网&#xff1a; https://www.tenable.com/ Nessus号称世界上最流行的扫描程序&#xff0c;Nessu…

Ubuntu22.04深度学习环境安装【显卡驱动安装】

前言 使用Windows配置环境失败&#xff0c;其中有一个包只有Linux版本&#xff0c;Windows版本的只有python3.10的&#xff0c;所以直接选用Linux来配置环境&#xff0c;显卡安装比较麻烦&#xff0c;单独出一期。 显卡驱动安装 方法一&#xff1a;在线安装&#xff08;操作…