【JavaEE】加法计算器与用户登录实战演练

目录

      • 综合练习
        • 加法计算器
          • 1. 准备工作
          • 2. 约定前后端交互接口
          • 3. 服务器代码
        • 用户登录
          • 1. 准备工作
          • 2. 约定前后端交互接口
          • 3. 服务器代码
          • 4. 调整前端页面代码

综合练习

  1. 理解前后端交互过程
  2. 接⼝传参, 数据返回, 以及⻚⾯展⽰
加法计算器

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

1. 准备工作

创建 SpringBoot 项⽬: 引⼊Spring Web依赖, 把前端⻚⾯放在项⽬中

前端方面：添加访问url和请求⽅式<form action="calc/sum" method="post">

calc.html

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

Servlet是放在webapp下面，Spring是放在static下面

2. 约定前后端交互接口

概念介绍

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

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

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

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

现在"前后端分离"模式开发, 前端和后端代码通常由不同的团队负责开发. 双⽅团队在开发之前, 会提前约定好交互的⽅式. 客⼾端发起请求, 服务器提供对应的服务. 服务器提供的服务种类有很多, 客⼾端按照双⽅约定指定选择哪⼀个服务.

接⼝, 其实也就是我们前⾯⽹络模块讲的的"应⽤层协议". 把约定的内容写在⽂档上, 就是"接⼝⽂档" ,接⼝⽂档也可以理解为是 应⽤程序的"操作说明书".

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

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

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

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

需求分析

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

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

请求路径：calc/sum

请求⽅式：GET/POST

接⼝描述：计算两个整数相加

请求参数：

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

⽰例: num1=5&num2=3

响应数据：

Content-Type: text/html

响应内容: 计算机计算结果: 8

服务器给浏览器返回计算的结果

3. 服务器代码
@RestController
@RequestMapping("/calc")
public class CalcController {

    @RequestMapping("/sum")
    public String sum(Integer num1,Integer num2){
        Integer sum=num1+num2;
        return "计算结果："+sum;
    }
}

在这里插入图片描述

在这里插入图片描述

开发中程序报错如何定位问题？

先定位前端还是后端

通过日志

  1. 前端：按F12看控制台
  2. 后端：接口，看控制台日志

看请求是否到达后端，没到后端就是前端问题

我们可以在后端接口处加个打印日志，通常打印在第一行，避免发生错误导致执行不到打印语句

@RequestMapping("/sum")
public String sum(Integer num1,Integer num2){
    System.out.println("=======sum=======");
    Integer sum=num1+num2;
    return "计算结果："+sum;
}

如果后端没有打印，那就是前端问题，就按F12看看控制台，如果也没有报错，那就得看代码了

如果此时也是发现不了问题，那就测试接口

直接输入127.0.0.1/calc/sum?num1=5&num2=3测试，这是我们后端响应的URL，如果这里OK那问题一定在前端

如果重启项目后，有些页面仍无法加载的话怎么办？

这是缓存的问题，我们可以清理缓存

双击后target就消失了

注意：浏览器缓存可能也是要清理的

用户登录

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

  1. 如果不正确, 前端进⾏⽤⼾告知
  2. 如果正确, 跳转到⾸⻚. ⾸⻚显⽰当前登录⽤⼾
  3. 后续再访问⾸⻚, 可以获取到登录⽤⼾信息
1. 准备工作

把前端⻚⾯放在项⽬中

login.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() {
    
    }

  </script>
</body>

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

</html>

2. 约定前后端交互接口

需求分析

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

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

接口定义

  1. 校验接⼝
请求路径：/user/login

请求⽅式：POST

接⼝描述：校验账号密码是否正确

请求参数

参数名类型是否必须备注
userNameString是校验的账号
passwordString是校验的密码

响应数据

Content-Type: text/html

响应内容: 

true //账号密码验证成功
false//账号密码验证失败
  1. 查询登录⽤⼾接⼝
请求路径：/user/getLoginUser

请求⽅式：GET

接⼝描述：查询当前登录的⽤⼾

请求参数

无

响应数据

Content-Type: text/html

响应内容: 
zhangsan

返回当前登录的⽤⼾

3. 服务器代码
@RestController
@RequestMapping("/user")
public class UserController {
    @RequestMapping("/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("admin".equals(username)&&"admin".equals(password)){
            //设置session
            session.setAttribute("username","admin");
            return true;
        }
        return false; 
    }

    @RequestMapping("/getUserInfo")
    public String getUserInfo(HttpServletRequest request){
        //从session中获取登录用户
        HttpSession session=request.getSession(false);
        String username=null;
        if(session!=null) username= (String) session.getAttribute("username");
        return username;
    }
}

直接输入http://127.0.0.1:8080/user/login?username=admin&password=admin测试后端接口，这样不需要前端页面

在这里插入图片描述

如果是输入http://127.0.0.1:8080/user/login则显示false

4. 调整前端页面代码
  1. 调整登录⻚⾯login.html

对于前端⽽⾔, 当点击登录按钮时, 需要把⽤⼾输⼊的信息传递到后端进⾏校验, 后端校验成功, 则跳转到⾸⻚:index.html, 后端校验失败, 则直接弹窗

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
  function login() {
    console.log("登录...")
    $.ajax({
      url:"/user/login",
      type:"post",
      data:{
        "userName":$("#userName").val(),
        "password":$("#password").val()
      },
      success:function(result){
        if(result){
          location.href="/index.html";
          //location.assign();
        }else{
          alert("密码错误")
        }
      }
    });
  }

</script>

⻚⾯跳转的三种⽅式:

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

三者区别参考:https://developer.aliyun.com/article/330720

  1. 调整首页代码

⾸⻚代码⽐较简单, 只显⽰当前登录⽤⼾即可.

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

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    console.log("登录人...")
    //页面加载时，就去调用后端请求
    $.ajax({
        url:"/user/getUserInfo",
        type:"get",
        success:function(username){
            $("#loginUser").text(username);
        }
    });
</script>

调试

在这里插入图片描述

在这里插入图片描述

多次刷新 http://127.0.0.1:8080/index.html 发现依然可以获取到登录⽤⼾

如果重启服务器, 则登录⼈显⽰: 空

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

项目如何debug？

如果不想打日志，也可以用断点的方式

在自己的代码上打的断点运行前是红点，服务器运行成功后，是一个带√的红点

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

人生苦短，我学python之数据类型(下)

人生苦短，我学python之数据类型(下)

个人主页&#xff1a;星纭-CSDN博客 系列文章专栏&#xff1a;Python 踏上取经路&#xff0c;比抵达灵山更重要&#xff01;一起努力一起进步&#xff01; 目录 一.集合 1.1子集与超集 1.2交集&#xff0c;并集&#xff0c;补集&#xff0c;差集 1.intersection(英文&a…
阅读更多...
中间件是什么？信创中间件有哪些牌子？哪家好用？

中间件是什么？信创中间件有哪些牌子？哪家好用？

当今社会&#xff0c;中间件的重要性日益凸显&#xff0c;尤其是在信创背景下&#xff0c;选择适合的中间件产品对于推动企业数字化转型和升级具有重要意义。今天我们就来聊聊中间件是什么&#xff1f;信创中间件有哪些牌子&#xff1f;哪家好用&#xff1f;仅供参考哈&#xf…
阅读更多...
手把手教你解决 Hive 的数据倾斜

手把手教你解决 Hive 的数据倾斜

文章目录 数据倾斜是什么&#xff1f;产生数据倾斜的场景1.空值引发的数据倾斜2.不可拆分的大文件产生的数据倾斜3.数值膨胀引发的数据倾斜4.不同数据类型引发的数据倾斜5.Count(distinct) 引发的数据倾斜6.表 Join 操作时引发数据倾斜7.group by 引发的数据倾斜 解决数据倾斜数…
阅读更多...
[xx点评完结]——白马点评完整代码+rabbitmq实现异步下单+资料，免费

[xx点评完结]——白马点评完整代码+rabbitmq实现异步下单+资料，免费

项目所有功能已测&#xff0c;均可以跑通&#xff0c;Jmeter和RabbitMQ也都测了。 项目源码:dianpinghui: 仿黑马点评项目 资料: https://pan.baidu.com/s/1kTCn9PxgeIey90WgM4KRqA?pwdn66b 对佬有帮助可以给个star哈&#xff0c;感谢&#x1f339;&#x1f339;&#x1f3…
阅读更多...
【Linux】进程终止与进程等待

【Linux】进程终止与进程等待

目录 进程终止 errno exit和_exit 进程等待 wait和waitpid 宏&#xff1a;WIFEXITED 非阻塞等待 进程终止 下面要谈的一个话题就是进程终止&#xff0c;就是说一个进程退出了&#xff0c;可能有三种情况 1.进程代码执行完&#xff0c;结果是正确的 2.进程代码执行完&…
阅读更多...
kali下载zsteg和stegpy

kali下载zsteg和stegpy

1.kali下载zsteg 从 GitHub 上克隆zsteg到kali git clone https://github.com/zed-0xff/zsteg 切换目录 cd zsteg 用于安装名为 zsteg 的 Ruby Gem 包 gem install zsteg 2.kali下载stegpy 下载网站内的stegpy-master压缩包GitCode - 开发者的代码家园 并拉到kali中 切换到s…
阅读更多...
pycharm配置python开发环境—miniconda+black+gitlab

pycharm配置python开发环境—miniconda+black+gitlab

下载miniconda管理python开发环境 miniconda下载地址&#xff1a;https://docs.anaconda.com/free/miniconda/ miniconda最新版本的python版本是python3.12.2&#xff0c;下载这个miniconda最新版本后&#xff0c;会导致执行conda create -n py31013 python3.10.13指令配置py…
阅读更多...
Excel中sum的跨表求和

Excel中sum的跨表求和

#实际工作中&#xff0c;一个xlsx文件中会包含多个Excel表格&#xff0c;一般会有“总-分”的关系&#xff0c;如何把分表里的数字汇总到总表里呢&#xff1f; 一般有上图所示的两种表达方式。 可以使用通配符 *&#xff1a;代表任意个数、任意字符&#xff1b; &#xff1f;&…
阅读更多...
成都爱尔眼科医院《中、欧国际近视手术大数据白皮书2.0》解读会圆满举行

成都爱尔眼科医院《中、欧国际近视手术大数据白皮书2.0》解读会圆满举行

2024年5月12日&#xff0c;爱尔眼科联合中国健康促进基金会健康传播与促进专项基金、新华社新媒体中心与中南大学爱尔眼科研究院、爱尔数字眼科研究所重磅发布《中、欧国际近视手术大数据白皮书2.0》。这是继2021、2022年在国内相继发布《国人近视手术白皮书》、《2022中、欧近…
阅读更多...
Java进阶学习笔记7——权限修饰符

Java进阶学习笔记7——权限修饰符

什么是权限修饰符&#xff1f; 就是用来限制类中的成员&#xff08;成员变量、成员方法、构造器、代码块....&#xff09;能够被访问的范围。 protected使用的比较少&#xff0c;但是程序员还是要阅读代码&#xff0c;看官方文档是怎么写的&#xff0c;都会接触到protected修饰…
阅读更多...
计算机网络学习小结_物理层

计算机网络学习小结_物理层

数据通信基础知识 信道相关概念 单工&#xff0c;半双工&#xff0c;全双工 基带信号&#xff1a;信源发出的信号&#xff0c;如计算机输出的文字和图像都是基带信号。基带信号常包含较多低频成分&#xff0c;有的还有直流成分&#xff0c;有的信道不能传输低频成分和直流成…
阅读更多...
手撕算法|斯坦福大学教授用60页PPT搞定了八大神经网络

手撕算法|斯坦福大学教授用60页PPT搞定了八大神经网络

人工智能领域深度学习的八大神经网络常见的是以下几种 1.卷积神经网络&#xff08;CNN&#xff09;&#xff1a; 卷积神经网络是用于图像和空间数据处理的神经网络&#xff0c;通过卷积层和池化层来捕捉图像的局部特征&#xff0c;广泛应用于图像分类、物体检测等领域。 2.循…
阅读更多...
2024.5组队学习——MetaGPT（0.8.1）智能体理论与实战（下）：多智能体开发

2024.5组队学习——MetaGPT（0.8.1）智能体理论与实战（下）：多智能体开发

传送门&#xff1a; 《2024.5组队学习——MetaGPT&#xff08;0.8.1&#xff09;智能体理论与实战&#xff08;上&#xff09;&#xff1a;MetaGPT安装、单智能体开发》《2024.5组队学习——MetaGPT&#xff08;0.8.1&#xff09;智能体理论与实战&#xff08;中&#xff09;&…
阅读更多...
对AI 感兴趣的小伙伴

对AI 感兴趣的小伙伴

如图&#xff0c;欢迎来玩儿&#xff01; 欢迎来玩儿
阅读更多...
区块链论文总结速读--CCF A会议 USENIX Security 2024 共7篇 附pdf下载

区块链论文总结速读--CCF A会议 USENIX Security 2024 共7篇 附pdf下载

Conference&#xff1a;33rd USENIX Security Symposium CCF level&#xff1a;CCF A Categories&#xff1a;网络与信息安全 Year&#xff1a;2024 Num&#xff1a;7 1 Title: Practical Security Analysis of Zero-Knowledge Proof Circuits 零知识证明电路的实用安全…
阅读更多...
js禁止使用浏览器的前进后退按钮的方法

js禁止使用浏览器的前进后退按钮的方法

效果图&#xff1a; // 替换当前页面的历史记录&#xff0c;使用户不能通过浏览器的前进后退按钮导航 history.replaceState(null, null, location.href);// 监听浏览器的历史记录变化事件 window.onpopstate function(event) {// 再次替换当前页面的历史记录&#xff0c;确保…
阅读更多...
AWS安全性身份和合规性之Identity and Access Management（IAM）

AWS安全性身份和合规性之Identity and Access Management（IAM）

通过AWS Identity and Access Management&#xff08;IAM&#xff09;&#xff0c;您可以指定谁或什么能够访问AWS中的服务和资源、集中管理精细权限&#xff0c;并分析访问权限以优化跨AWS的权限。 比如一家软件开发公司需要在AWS上创建多个开发人员账户&#xff0c;并对其进…
阅读更多...
解禁谷歌等浏览器禁止网站使用麦克等媒体设备

解禁谷歌等浏览器禁止网站使用麦克等媒体设备

1、浏览器地址栏输入chrome://flags/ 微软的chromium内核的edge浏览器&#xff0c;既可以输入&#xff1a;chrome://flags/ &#xff0c;也可以输入edge://flags/ 2、打开后&#xff0c;界面如下 3、输入搜索&#xff0c;unsafe&#xff0c;并启用、输入需要启用的网址
阅读更多...
Algoriddim djay Pro Ai for Mac：AI引领，混音新篇章

Algoriddim djay Pro Ai for Mac：AI引领，混音新篇章

当AI遇上音乐&#xff0c;会碰撞出怎样的火花&#xff1f;Algoriddim djay Pro Ai for Mac给出了答案。这款专业的DJ混音软件&#xff0c;以AI为引擎&#xff0c;引领我们进入混音的新篇章。 djay Pro Ai for Mac的智能混音功能&#xff0c;让每一位DJ都能感受到前所未有的创作…
阅读更多...
SqlSession是什么？在MyBatis-Spring中有什么应用？

SqlSession是什么？在MyBatis-Spring中有什么应用？

目录 一、SqlSession是什么 二、SqlSession在MyBatis中的应用 三、SqlSession在Spring中的应用 一、SqlSession是什么 SqlSession 是 MyBatis 框架中的一个核心概念&#xff0c;它代表与数据库的一次会话。MyBatis 是一个流行的 Java 持久层框架&#xff0c;用于简化数据库…
阅读更多...
最新文章

Copyright @ 2022~2023