【JavaEE进阶】 利用Spring简单实现加法计算器和用户登录

文章目录

  • 🎍序言
  • 🌳加法计算器
    • 🚩准备工作
    • 🚩约定前后端交互接⼝
    • 🌲后端服务器代码的书写
  • 🌴用户登录
    • 🚩效果展示
    • 🚩准备工作
    • 🚩约定前后端交互接⼝
      • 🎈需求分析
      • 🎈接⼝定义
        • 📌校验接⼝
        • 📌查询登录⽤⼾接⼝
    • 🚩后端代码的书写
      • 🎈校验接⼝代码
      • 🎈查询登录⽤⼾接⼝
      • 🎈完整代码实现
  • ⭕总结

🎍序言

本篇博客主要内容:

  1. 理解前后端交互过程

  2. 接⼝传参,数据返回,以及⻚⾯展⽰

🌳加法计算器

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

效果展示如下:
在这里插入图片描述
在这里插入图片描述

具体实现步骤,博主大致分为以下几步:

  1. 准备工作

  2. 约定前后端交互接⼝

  3. 后端服务器代码的书写

🚩准备工作

创建SpringBoot项⽬: 引⼊Spring Web依赖

这部分不会的小伙伴可以去看看博主写的【JavaEE进阶】 SpringBoot的创建与简单使用

创建calc.html文件
在这里插入图片描述

接下来我会直接给出大家前端的代码,大家直接导入即可,前端代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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>

🚩约定前后端交互接⼝

约定"前后端交互接"是进⾏Web开发中的关键环节

接⼝⼜叫API(Application Programming Interface),我们⼀般讲到接⼝或者API,指的都是同⼀个东西.

是指应⽤程序对外提供的服务的描述,⽤于交换信息和执⾏任务(与JavaSE阶段学习的[类和接⼝]中的接⼝是两回事).

简单来说,就是允许客⼾端给服务器发送哪些HTTP请求,并且每种请求预期获取什么样的HTTP响应.

现在"前后端分离"模式开发,前端和后端代码通常由不同的团队负责开发.双⽅团队在开发之前,会提前约定好交互的⽅式.客⼾端发起请求,服务器提供对应的服务.

服务器提供的服务种类有很多,客⼾端按照双⽅约定指定选择哪⼀个服务
接⼝,其实也就是我们前⾯⽹络模块讲的的"应⽤层协议".把约定的内容写在⽂档上,就是"接⼝⽂档",接⼝⽂档也可以理解为是应⽤程序的"操作说明书

在项⽬开发前,根据需求先约定好前后端交互接⼝,双⽅按照接⼝⽂档进⾏开发.

  • 接⼝⽂档通常由服务提供⽅来写,交由服务使⽤⽅确认,也就是客⼾端.

  • 接⼝⽂档⼀旦写好,尽量不要轻易改变.

  • 如若需要改变,必须要通知另⼀⽅知晓

接下来我们一起来写一个关于加法计算器的简单的接口文档

首先我们进行需求分析

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

基于以上分析,我们来定义接⼝

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

对于所传参数我们也需要进行规定

参数名类型是否必须备注
num1Integer参与计算的第⼀个数
num2Integer参与计算的第⼆个数

最后我们对于响应数据的格式也进行规定

Content-Type: text/html
响应内容:例如:计算结果为:23+25=48

🌲后端服务器代码的书写

基于接口文档我们就直接书写了

后端代码如下:

package org.example.smallprojects.demos.web;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 "<h1>计算结果为:"+num1 + "+" + num2 + "=" + sum +"<h1/>";}
}

注意:

  • 返回数据类型与传入参数名一定要与接口文档相对应

接下里直接访问:http://127.0.0.1:8080/calc.html

🌴用户登录

🚩效果展示

登录校验展示:
在这里插入图片描述
登录后获取用户名展示;
在这里插入图片描述
实现步骤依旧三步走

🚩准备工作

这里博主依旧给出前端代码

在这里插入图片描述

index.html代码如下:

<!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({type: "get",url: "/user/getLoginUser",success: function (result) {$("#loginUser").text(result);}});
</script>
</body></html>

longin.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({type: "post",url: "/user/login",data: {"userName": $("#userName").val(),"password": $("#password").val()},success: function (result) {if (result) {location.href = "/index.html"} else {alert("账号或密码有误.");}}});}</script>
</body></html>

🚩约定前后端交互接⼝

🎈需求分析

对于后端开发⼈员⽽⾔,不涉及前端⻚⾯的展⽰,只需要提供两个功能

  1. 登录⻚⾯: 通过账号和密码,校验输⼊的账号密码是否正确,并告知前端
  2. ⾸⻚:告知前端当前登录⽤⼾.如果当前已有⽤⼾登录,返回登录的账号,如果没有,返回false

🎈接⼝定义

该功能设计两个页面,所以这里我们定义两个接口

📌校验接⼝

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

  • 请求参数
参数名类型是否必须备注
userNameString校验的账号
passwordString校验的密码
  • 响应数据

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

  • true //账号密码验证成功
  • false//账号密码验证失败
📌查询登录⽤⼾接⼝

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

  • 请求参数

  • 响应数据

Content-Type: text/html
响应内容:遇事问春风乄

🚩后端代码的书写

🎈校验接⼝代码

校验我们首先需要进行判断用户名与密码是否为空或者长度为0,若为,则返回false。

这里我们选择使用StringUtils.hasLength()来判断,StringUtils.hasLength()是Spring提供的⼀个⼯具⽅法,判断字符串是否有值字符串为null或者""时,返回false,其他返回true

其次由于我们这里并没有添加数据库,所以我们直接使用固定的字符串进行判断。

如果用户名与密码正确,则将该用户添加至session,对session不了解的小伙伴可以看看博主写的【JavaEE进阶】 获取Cookie和Session

🎈查询登录⽤⼾接⼝

对于该接口实现就更加加简单了。直接使用@SessionAttribute进行获取即可

🎈完整代码实现

package org.example.smallprojects.demos.web;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttribute;import javax.servlet.http.HttpSession;
@RestController
@RequestMapping("/user")
public class LoginController {@RequestMapping("/login")public Boolean login(String userName, String password, HttpSession session) {if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {return false;}if("遇事问春风乄".equals(userName)&&"666666".equals(password)) {//密码验证成功, 把⽤⼾名存储在Session中session.setAttribute("userName",userName);return true;}return false;}@RequestMapping("getLoginUser")public String getLoginUser(@SessionAttribute(value = "userName",required = false) String username) {return username;}
}

⭕总结

关于《【JavaEE进阶】 利用Spring简单实现加法计算器和用户登录》就讲解到这儿,感谢大家的支持,欢迎各位留言交流以及批评指正,如果文章对您有帮助或者觉得作者写的还不错可以点一下关注,点赞,收藏支持一下!

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

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

相关文章

JavaI/O流 File类(目录)

目录 File类目录操作实例 File类目录操作 Java的File类提供了对文件和目录进行操作的方法。对于目录&#xff0c;File类提供了以下一些方法&#xff1a; 判断目录是否存在&#xff1a;使用exists()方法可以判断目录是否存在。创建目录&#xff1a;使用mkdir()或mkdirs()方法可…

16 贪吃蛇

目录 游戏背景游戏效果展示基本功能技术要点WIN32 API介绍设计与分析实现参考代码 1. 游戏背景 贪吃蛇是久负盛名的游戏&#xff0c;是一款经典游戏 2. 效果展示 3. 基本功能 使用c语言在windows环境的控制台模拟实现小游戏贪吃蛇 基本的功能&#xff1a; 地图绘制吃食物上…

题记(40)--二次方程计算器

目录 一、题目内容 二、输入描述 三、输出描述 四、输入输出示例 五、完整C语言代码 一、题目内容 设计一个二次方程计算器 二、输入描述 每个案例是关于x的一个二次方程表达式&#xff0c;为了简单&#xff0c;每个系数都是整数形式。 三、输出描述 每个案例输出两个实数…

MIT-Missing Semester_Topic 3:Editors (Vim) 练习题

文章目录 练习一练习二练习三练习四练习五练习六练习七练习八 本 Topic 的 MIT 讲解网页&#xff08;练习题未给解答&#xff09; 练习一 自行完成 vimtutor。vimtutor 是 Vim 本身附带的一个入门教程&#xff0c;在 shell 中直接输入 vimtutor 便能运行。注意该教程在 8024 大…

[ubuntu]split命令分割文件

split 命令 $ split --help Usage: split [OPTION]... [INPUT [PREFIX]] Output fixed-size pieces of INPUT to PREFIXaa, PREFIXab, ...; default size is 1000 lines, and default PREFIX is x. With no INPUT, or when INPUT is -, read standard input.Mandatory argume…

千里马平台设计说明-字典缓存

字典是软件开发中常用的功能。使用字典的核心问题是翻译&#xff0c;因为数据库中存储的是代码&#xff0c;前台页面展示的是描述。用于多语言环境时&#xff0c;翻译过程还需要根据语言环境进行适配。为了加快字典的加载速度&#xff0c;千里马平台采用了后台缓存前台缓存2级缓…

Gin 中使用 base64Captcha 生成图形验证码

验证码库 https://github.com/mojocn/base64Captcha 中文文档 Go进阶37:重构我的base64Captcha图形验证码项目 | &#x1f436;❤️&#x1f980; 在models文件夹中写一个验证码的文件&#xff0c;Captcha.go package modelsimport ("github.com/mojocn/base64Captcha&quo…

【小沐学GIS】基于C++QT绘制三维数字地球Earth(OpenGL)

&#x1f37a;三维数字地球系列相关文章如下&#x1f37a;&#xff1a;1【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;456:OpenGL、glfw、glut&#xff09;第一期2【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;456:OpenGL、glfw、glut&#xff09;第二期3【小沐…

QT:实现图片选择器

一、效果图 二、用到的类 qApp&#xff1a;可以快速获取到项目目录位置。 QSettings &#xff1a;编写config文件&#xff0c;记录上次打开图片的位置&#xff0c;下次打开图片会从上次的位置查找图片。 QPixmap&#xff1a;用于图片的缩放&#xff0c;防止图片过小&#xff0…

DVWA靶场下载安装

DVWA介绍 DVWA 一共包含了十个攻击模块&#xff0c;分别是:Brute Force(暴力破解)、Command Injection(命令行注入)、CSRF(跨站请求伪造)、File Inclusion(文件包含)、File Upload(文件上传)、Insecure CAPTCHA (不安全的验证码)、SQL Injection(SQL注入)、SQL Injection Blin…

【Java程序设计】【C00249】基于Springboot的私人健身与教练预约管理系统(有论文)

基于Springboot的私人健身与教练预约管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的私人健身与教练预约管理系统 本系统分为系统功能模块、管理员功能模块、教练功能模块以及用户功能模块。 系统功能模…

一、部署Oracle

部署Oracle 一、Docker部署1.Oracle11g1.1 测试环境1.1.1 拉取镜像1.1.2 启动容器1.1.3 配置容器环境变量1.1.4 修改sys、system用户密码1.1.5 创建表空间1.1.6 创建用户并授权1.1.5 使用DBeaver测试连接 二、安装包部署 一、Docker部署 1.Oracle11g 1.1 测试环境 当前只能用…

【Spring MVC篇】Cookie和Session的获取 Header的获取

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Spring MVC】 本专栏旨在分享学习Spring MVC的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; Cookie是客户端保存用…

「知识札记」1.Object[ ]数组

前言 这个系列主要记录一些比较零碎、细节的知识点&#xff0c;随缘更新啦~ 正文 Object[]类型的数组是一个非常灵活的数据结构&#xff0c;它可以存储任意类型对象的数组。 在Java中&#xff0c;所有的类都继承自Object类&#xff0c;所以Object[ ]类型的数组可以存储任意类…

基于Java (spring-boot)的职工管理系统

一、项目介绍 基于Java (spring-boot)的职工管理系统功能&#xff1a;登录、老板、职员人事经理、职员、部门列表、职工列表、权限修改、查看所有管理、正在审核列表、添加考勤、添加职工、添加奖惩、合同列表、合同信息、等等等。 适用人群&#xff1a;适合小白、大学生、毕业…

Python学习之路-初识爬虫:requests

Python学习之路-初识爬虫:requests requests的作用 作用&#xff1a;发送网络请求&#xff0c;返回响应数据 中文文档 &#xff1a; http://docs.python-requests.org/zh_CN/latest/index.html 为什么学requests而不是urllib requests的底层实现就是urllibrequests在pytho…

360网络安全面试题汇总

防范常见的 Web 攻击 重要协议分布层 arp 协议的工作原理 rip 协议是什么&#xff1f;rip 的工作原理 什么是 RARP&#xff1f;工作原理 OSPF 协议&#xff1f;OSPF 的工作原理 TCP 与 UDP 区别总结 什么是三次握手四次挥手&#xff1f; tcp 为什么要三次握手&#xff1f; dns…

PyTorch vs TensorFlow:谁拥有更多预训练深度学习模型?

众所周知,访问预先训练的深度学习模型对于当代深度学习应用至关重要。随着最先进的模型变得越来越大,达到数万亿个参数,在许多领域,尤其是自动语音识别等领域,从头开始训练高级模型不再有意义。 鉴于预训练深度学习模型的重要性,哪个深度学习框架(PyTorch 或 TensorFlo…

“程序员的秘密:为何我们的电脑从不眠眼——揭秘背后的奥秘!“

程序员们经常不关电脑&#xff0c;这背后确实有一些实际的原因和考虑&#xff0c;而不仅仅是因为“上瘾”。以下是一些为什么程序员倾向于让电脑持续运行的原因&#xff1a; 1. 长时间的任务 程序员可能会运行一些耗时较长的任务&#xff0c;比如大数据处理、模型训练或是复杂…

【PyTorch】PyTorch中张量(Tensor)切片操作

PyTorch深度学习总结 第三章 PyTorch中张量(Tensor)切片操作 文章目录 PyTorch深度学习总结一、前言二、获取张量中的元素1、切片&#xff08;行、列数&#xff09;方法2、torch.where()函数3、使元素置零的操作 一、前言 上文介绍了PyTorch中改变张量(Tensor)形状的操作&…