当前位置: 首页 > article >正文

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

目录

🎍序言

🌳加法计算器

🚩准备工作

🚩约定前后端交互接口

🚩后端服务器代码的书写

🌴用户登录

🚩准备工作

🚩约定前后端交互接口

🏀需求分析

🏀接口定义

📌校验接口

📌查询登录用户接口

🚩后端代码的书写

🏀校验接口代码

🏀查询登录用户接口

🏀完整代码和接口测试

🚩调整前端页面代码

🏀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.kler.cn/a/508790.html

相关文章:

  • 快手极速版如何查找ip归属地?怎么关掉
  • OpenGL —— 基于Qt的视频播放器 - ffmpeg硬解码,QOpenGL渲染yuv420p或nv12视频(附源码)
  • 小白:react antd 搭建框架关于 RangePicker DatePicker 时间组件使用记录 2
  • 电脑风扇声音大怎么办? 原因及解决方法
  • 网络安全面试题汇总(个人经验)
  • C# 获取PDF文档中的字体信息(字体名、大小、颜色、样式等
  • 大模型技术的风险与挑战概述
  • 通过 API 开发实现淘宝链接解析并获取商品详情信息字段
  • Scrapy-Redis分布式爬虫
  • 2024年12月蓝桥杯Scratch12月stema选拔赛真题试卷
  • skywalking的使用
  • 【客观对比】激光雷达 vs 纯视觉方案:汽车自动驾驶的两种路径
  • 服务器迁移MySQL
  • Python爬虫学习前传 —— Python从安装到学会一站式服务
  • python实现批量视频提取音频
  • 深度学习 Pytorch 张量的广播和科学运算
  • RV1126+FFMPEG推流项目(8)AENC音频编码模块
  • 《Opencv》多对象模板匹配
  • Golang—— new() 、 make() 和简短声明符
  • 【万字详细教程】Linux to go——装在移动硬盘里的Linux系统(Ubuntu22.04)制作流程;一口气解决系统安装引导文件迁移显卡驱动安装等问题
  • Linux查看日志命令
  • StyleGaussian: Instant 3D Style Transferwith Gaussian Splatting 论文解读
  • 如何将本地电脑上的文件夹设置为和服务器的共享文件夹
  • 基于Flutter的物联网后台系统
  • C++ ——— string类oj题:字符串中的第一个唯一字符
  • 从零开始,掌握Django Web开发