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

devtools/2025/1/22 18:40:59/

目录

🎍序言

🌳加法计算器

🚩准备工作

🚩约定前后端交互接口

🚩后端服务器代码的书写

🌴用户登录

🚩准备工作

🚩约定前后端交互接口

🏀需求分析

🏀接口定义

📌校验接口

📌查询登录用户接口

🚩后端代码的书写

🏀校验接口代码

🏀查询登录用户接口

🏀完整代码和接口测试

🚩调整前端页面代码

🏀ajax介绍

🏀调整登录页面login.html

🏀调整首页index.html


🎍序言

本文章主要内容:

  1. 理解前后端交互过程
  2. 接口传参,数据返回,以及页面展示

🌳加法计算器

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

效果展示如下:

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

  1. 准备工作
  2. 约定前后端交互接⼝
  3. 后端服务器代码的书写

🚩准备工作

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

创建calc.html文件

接下来我会直接给出前端的代码,直接照抄即可,前端代码如下:

🚩约定前后端交互接口

接口概念介绍:

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

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

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

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

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

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

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

  • 接⼝⽂档通常由服务提供⽅来写,交由服务使⽤⽅确认,也就是客⼾端.
  • 接⼝⽂档⼀旦写好,尽量不要轻易改变.
  • 如若需要改变,必须要通知另⼀⽅知晓

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

首先我们进行需求分析:

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

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

  1. 站在前端的角度:前端需要计算的结果
  2. 站在后端的角度:后端需要输入的数据

请求路径(URL):calc/sum

参数:num1(Integer)  num2(Integer)
请求⽅式:GET/POST
接⼝描述:计算两个整数相加

对于请求参数说明:

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

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

🚩后端服务器代码的书写

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

代码:

先测试后端代码,通过浏览器访问:观察结果后端是没有问题的

接下来就是前端和后端进行交互,上述calc.html通过浏览器访问:

🌴用户登录

需求: 用户输⼊账号和密码,后端进⾏校验密码是否正确

1. 如果不正确,前端进⾏用户告知

2. 如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录用户

3. 后续再访问⾸⻚,可以获取到登录⽤⼾信息

前端页面展示:

🚩准备工作

将前端代码放入static文件中:

index.html代码如下:

longin.html代码如下:

🚩约定前后端交互接口

🏀需求分析

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

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

🏀接口定义

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

📌校验接口

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

  • 请求参数

  • 响应数据

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

  • true //账号密码验证成功
  • false//账号密码验证失败
📌查询登录用户接口

请求路径:/user/getUserInfo
请求⽅式:GET
接⼝描述:查询当前登录的用户信息

  • 请求参数

  • 响应数据

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

🚩后端代码的书写

🏀校验接口代码

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

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

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

如果用户名与密码正确,则将该用户添加至session

🏀查询登录用户接口

对于该接口实现就更加加简单了。直接在HttpSeesion对象中获取即可

🏀完整代码和接口测试

代码:

后端接口测试:

🚩调整前端页面代码

🏀ajax介绍

在上述的加法计算器中,前端是通过最原生的from表单来提交的,接下来换一种方式。

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行。

例子:在上述加法计算器中点击"点击相加"之后,就会跳转到另一个页面,但是有的时候,比如有一个登录页面,当我们用户名密码输入正确之后才需要进行页面跳转,用户名或者密码错误的时候,就不需要跳转,若出现跳转会给用户带来非常不好的体验!或者说一个注册页面,当用户 输入一个用户名之后,如果说该用户名已经被注册了,则提示"用户名已被注册",而这个数据是通过在数据库中查询之后得到的结果,即该结果是从后端返回的,而当前页面是没有进行跳转的,这种体验也是非常好的!上述的加法计算器是通过from表单的形式提交的,页面是一定会跳转的。

那么ajax是属于异步调用,异步调用的意思是我给你发送了一个请求,等你进行回复,等你回复之后,我再来看接下来的操作是什么。from表单是直接跳转到另一个URL了。

同步和异步的区别:

  • 同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻塞的,只有接收到返回的值或消息后才往下执行其他的命令。
  • 异步,执行完函数或方法后,不必阻塞性地等待返回值或消息,只需要向系统委托一个异步过程,那么当系统接收到返回值或消息时,系统会自动触发委托的异步过程,从而完成一个完整的流程。  

🏀调整登录页面login.html

由于idea中编写前端代码不是很方便,所以后面就通过vsCode来编写

在vsCode上打开你前端代码所在的路径:在idea中打开文件所在位置,复制后通过vsCode打开文件夹搜索改路径即可,所以现在idea中的前端代码(static文件路径下的)和vsCode中的代码对应的是同一个文件,即使在vsCode中修改之后保存,也会同步到idea中。

ajax的写法:写法有多种,原生的ajax这里就不说了,非常复杂 。此处通过JQuery的ajax方式,JQuery把ajax进行了封装。

语法:$.ajax();              ()里面是你需要做什么事情,是一个对象,对象使用{}表示   ​​​​​​​

做的事情:发送一个请求,成功干什么,失败干什么(需要传递URL,请求方法,数据)​​​​​​​​​​​​​​​​​​​​​

上述给后端传递了数据,由于是异步的,不像加法计算器中发送请求后就直接跳转了(跳转完之后页面上接口返回计算结果),那么ajax发出去请求之后,等请求成功了,后端调用success方法,success方法中就写成功了干什么​​​​​​​,请求失败​​​​​​​,后端调用error方法......​​​​​​​​​​​​​​

页面跳转的三种方式:

  • 1. window.location.href = "book_list.html";
  • 2. window.location.assign("book_list.html");
  • 3. window.location.replace("book_list.html");

以上写法,通常把window.省略,比如 写成 window.location.href = "book_list.html"; location.href = "book_list.html";

三者区别参考:location.assign()、location.href、location.replace(url)的不同-阿里云开发者社区

页面访问一(记得重启服务):由于index.html代码还没有写,所以没有信息,当前可看到请求后端接口成功,页面发生了跳转

访问页面二:当前请求后端接口失败,提示"用户名或者密码错误"

通过Fiddler抓包查看前端传递参数的形式:后端可用对象接收,也可使用包装类型接收

ajax语法小结:

ajax括号里面的是对象,使用{}来表示

里面的属性是由键值对组成,个键值对之间使用逗号分隔

在传递的参数中,其中key与后端接收的参数保持一致,若不一致使用后端参数重命名(@RequestParam),value表示给后端传递的参数

success表示HTTP请求成功时执行的内容,function函数中的变量表示后端接口返回的数据,起任何名字都可

🏀调整首页index.html

在上述login.html中,请求后端接口成功后跳转到了index.html页面,只显⽰当前登录用户即可.

当前登录⽤⼾需要从后端获取,并显⽰到前端

在上述login.html页面中,在点击"登录"会去执行"login"这个函数,所以把ajax写在了"login"函数中

那么在index.html页面中,只需要显示从后端获取的用户名,没有任何点击操作,直接在script中写ajax即可

页面访问:发现用户主页还是没有打印出用户名信息

排查前后端问题:作为后端人员,首先排查后端问题(可通过postman,Fiddler,debug,打印日志等方式排查后端问题)

通过Fiddler抓包是否正确返回响应,发现正确返现

此处是前端的缓存问题:crtl+F5强刷


http://www.ppmy.cn/devtools/152663.html

相关文章

Netty搭建websocket服务器,postman可以连接,浏览器无法连接

简介:Netty搭建websocket服务器,postman可以连接,浏览器无法连接,很奇怪,不知道为什么。最后更换端口解决问题,原来端口时6666,把6666改成其他端口就可以了。 过程: 前端代码 后端…

Python----Python高级(模块与包,Python基本库)

一、模块 1.1、概念 就是一个包含了Python代码的以.py为后缀的Python文件,可以被其他 Python程序导入和使用,也可以自己独立执行,里面存放着的是一组相关的函 数或者类,比如查看关键字列表时导入的keyword模块。 1.2、作用 令Py…

嵌入式硬件篇---基本组合逻辑电路

文章目录 前言基本逻辑门电路1.与门(AND Gate)2.或门(OR Gate)3.非门(NOT Gate)4.与非门(NAND Gate)5.或非门(NOR Gate)6.异或门(XOR Gate&#x…

前端包管理工具npm、pnpm 和 Yarn 的总结对比

1. npm npm 是 Node.js 的官方包管理工具,长期以来是 JavaScript 生态系统的标准工具。它提供了丰富的功能,并且与所有 Node.js 项目兼容。 优点: 广泛的兼容性:npm 是默认的包管理工具,与 Node.js 的所有版本兼容&…

Text2SQL 智能报表方案介绍

0 背景 Text2SQL智能报表方案旨在通过自然语言处理(NLP)技术,使用户能够以自然语言的形式提出问题,并自动生成相应的SQL查询,从而获取所需的数据报表,用户可根据得到结果展示分析从而为结论提供支撑&#…

小程序获取微信运动步数

1、用户点击按钮&#xff0c;在小程序中触发getuserinfo方法&#xff0c;获取用户信息 <scroll-view class"scrollarea" scroll-y type"list"><view class"container"><button bind:tap"getLogin">获取</button&…

ZOXM的魔法篇

本篇解决的问题 docker镜像无法拉取&#xff0c;github网站无法访问 第一步&#xff1a;先解决可以上网github 方案一&#xff1a;dev-sidecar工具 https://gitee.com/timfengzi/dev-sidecar 缺点&#xff1a;有时候不稳定&#xff0c;但是这个已经比修改hosts文件好用多了&am…

我的创作纪念日,纪念我的第512天

目录 年末 年初 入围 博客 变动 生活 期待 年末 很快&#xff0c;2024年已经过去了&#xff0c;本想在跨年夜的时候营造一点小小的仪式感&#xff0c;结果也因为身体的原因放弃了&#xff0c;浑身感觉疼痛&#xff0c;躺在床上&#xff0c;闭上眼睛&#xff0c;什么也不…