SpringMVC案例学习(一)--计算器设计登录页面设计

news2024/11/14 18:38:42

文章目录

  • 1.计算器
    • 1.1.html代码
    • 1.2接口设计
    • 1.3前端测试
    • 1.4接口测试
  • 2.登录页面设计
    • 2.1接口实现
    • 2.2查看前端页面效果
    • 2.3未进行前后端交互时候的代码
    • 2.4前后端交互设计
    • 2.5个人实践遇到的问题
  • 3.lombok介绍
    • 3.1插件安装
    • 3.2导入依赖

1.计算器

1.1.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>

我们直接在这个static里面添加一个calchtml就可以了,把这个内容复制进去;然后我们就可以在这个浏览器上面进行测试;

image-20241112103115142

1.2接口设计

下面的这个就是我们就是自己实现这个后端的接口的代码,返回的就是这个计算器的计算的结果;

image-20241112104955324

1.3前端测试

前端测试就是指的在这个浏览器上直接输入这个静态代码里面的这个html网页就可以直接看到我们的这个效果;

image-20241112104921042

1.4接口测试

这个就是使用我们的这个postman进行测试,这个postman进行测试的时候,需要进行这个参数的传递,这个显示的结果就是执行我们的上面的这个接口里面的这个逻辑计算出来的结果;

image-20241112105028322

2.登录页面设计

2.1接口实现

我们的这个接口使用两个方式进行实现,但是这个本质都是一样的,就是需要判断我们的这个用户输入的这个内容是不是空的,其次就是这个输入的这个内容是不是和我们自己设置的这个内容是一样的;

因为这个是只有我们的这个输入内容和我们设置的这个内容是一样的时侯,这个才是可以登陆成功的;

这个下面进行判断这个输入是不是空的时候,提供的是两个方式,一个就是我们的这个lambda表达式的形式,还有一个就是我们的这个普通的判断的方式;

image-20241112105227451

我们可以使用这个postman尝试给出这个错误的内容,这个时候虽然我们的这个参数不是空的,但是和我们设置的这个内容不一致,因此这个就会返回false;

如果我们传递的这个参数和我们代码里面的这个参数是一样的,这个时候我们的这个返回值就是true,这个时候我们使用这个index返回值就是我们的用户信息里面的这个username,具体到这个里面就是我们的zhangsan;

image-20241112104616169

2.2查看前端页面效果

因为我们的这个里面涉及到的两个html都是属于这个静态文件,因此我们在这个浏览器上面是可以直接访问的,这个和我们的后端代码是没有关系的,下面的这个就是我们的这个login,html的页面效果展示;

image-20241113103450089

但是上面的这个即使我们进行相关的这个用户名和密码的输入,这个里面是不糊显示任何的效果的,因此这个时候,我们需要做的就是下面的前后端交互;

我们可以看看这个index.html,这个就是返回我们输入里面的这个用户的名字信息,但是我们没有对于这个前后端交互的代码进行设计,因此这个时候也不会出现实质性的效果;

image-20241113103646546

2.3未进行前后端交互时候的代码

下面的这个就是我们的这个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就是显示我们的这个返回的用户名的信息的代码: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.4前后端交互设计

实际上上面的这个前端的代码里面是给我们留了一个口的:就是我们的这个前后端的交互的代码实际上就是在这个script里面去进行编写的;

image-20241113110514100

我们可以在这个vscode里面进行代码的编写,这个idea上面写也可以,我们在这个vscode上面写完之后,这个idea里面也是会进行这个自动的更新的;

这个是一个ajax语法,里面包含了下面的几个部分:

1)type:表示我们的这个请求的类型

2)url就是我们的这个页面的位置,因为这个是进行的这个用户的输入,因此这个显示的就是我们的注解里面的这个check修饰的那个方法;

3)data表示的就是我们的数据,这个#后面的就是我们的选择器,获取这个用户名和密码(这个左边的需要和这个后端的代码一样,#后面的需要和我们的前端的代码一样(如果我们的这个前后端的这个名字不一样的话,需要特别注意这个地方);

4)这个success实际上就是一个回调函数,这个函数显示我们输入之后,进行核对之后显示的这个内容,如果发现这个输入的内容和我们的这个后端里面的这个设计的内容是一样的,这个时候我们需要进行这个页面的跳转,调到这个index.html里面去,这个显示的就是我们的这个输入的用户的名字信息;

如果这个输入的信息和我们的这个后端进行核对之后不一致,这个时候我们需要把这个错误显示,这个有很多的方式,我们采取这个方式就是弹框,告诉我们的这个用户,这个信息是错误的(弹窗情况如下);

image-20241113111505302

##login.html里面的这个前后端交互的这个代码的编写
<script>
    function login() {
      $.ajax({
        type:"post",
        url:"/login/check",
        data:{
          username:$("#userName").val(),
          password:$("#password").val()
        },
        success:function(result){
          if(result==true){
            location.href="index.html";
          }
          else{
            alert("用户名或者是密码是错误的");
          }
        }
      })
    }

  </script>

2.5个人实践遇到的问题

1)就是我们的这个名字,因为我自己的这个前后端的名字不一样,一个是大写,一个是小写,因此这个需要额外的注意:

下面的这个内容,冒号左边的需要和这个后端的代码是一致的,这个冒号的右边的内容需要和我们的这个前端的代码是一致的(因此这个地方对于我自己而言,需要使用老师提供的前端的代码里面的这个名字写法);

image-20241113114131137

image-20241113110947845

2)就是前端的这个代码里面,我自己第一次进行尝试时候,这个无论输入的信息是不是正确的,这个时候都会跳转,检查的时候发现问题是下面的这个==写成了一个等号;

因此在这个情况下,就是无论我们的这个输入对不对,都会进行跳转,因此这个符号上面也是需要注意的;

image-20241113114525965

3.lombok介绍

为什么要学习这个lombok这个内容,可以先安装这个插件,进行设置,后面完成这个表白墙的案例需要进行使用;

3.1插件安装

image-20241112220240190

3.2导入依赖

image-20241112220334261

image-20241112220402298

image-20241112220423894

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

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

相关文章

【Linux 麒麟系统 qt 程序通过root启动 桌面程序】

通过.desktop pkexec 启动程序 关键字方案一方案二第一步 修改.desktop第二步 xxx.sh实现 注意 关键字 pkexec .desktop qt 原始需求&#xff1a; 用户在麒麟系统上通过快捷方式(.desktop)启动程序后绑定系统的26端口&#xff0c;但是因为系统权限问题&#xff0c;26端口普通…

DevOps-Gitlab-私有代码仓库

1. 概述 1. 私有代码仓库 2. 精细化权限配置,让系统更安全 3. 控制用户/用户组是否可以提交到主分支 (PR Push Request) 4. 它使用Ruby语言写成。后来&#xff0c;一些部分用Go语言重写 2. Gitlab vs Github/Gitee GitlabGithub/Gitee共同点存放代码,git访问存放代码,git访问…

【AI声音克隆整合包及教程】第二代GPT-SoVITS V2:技术、应用与伦理思考

一、引言 在当今科技迅速发展的时代&#xff0c;声音克隆技术成为人工智能领域的一个备受瞩目的分支。GPT-SoVITS V2作为一种声音克隆工具&#xff0c;正逐渐进入人们的视野&#xff0c;它在多个领域展现出巨大的潜力&#xff0c;同时也引发了一系列值得深入探讨的问题。本文旨…

重新认识HTTPS

一. 什么是 HTTPS HTTP 由于是明文传输&#xff0c;所谓的明文&#xff0c;就是说客户端与服务端通信的信息都是肉眼可见的&#xff0c;随意使用一个抓包工具都可以截获通信的内容。 所以安全上存在以下三个风险&#xff1a; 窃听风险&#xff0c;比如通信链路上可以获取通信…

Vite初始化Vue3+Typescrpt项目

初始化项目 安装 Vite 首先&#xff0c;确保你的 Node.js 版本 > 12.0.0。然后在命令行中运行以下命令来创建一个 Vite Vue 3 TypeScript 的项目模板&#xff1a; npm init vitelatest进入项目目录 创建完成后&#xff0c;进入项目目录&#xff1a; cd vue3-demo启动…

Three.js 搭建3D隧道监测

Three.js 搭建3D隧道监测 Three.js 基础元素场景scene相机carema网络模型Mesh光源light渲染器renderer控制器controls 实现3d隧道监测基础实现道路实现隧道实现多个摄像头点击模型进行属性操作实现点击模型发光效果 性能监视器stats引入使用 总结完整代码 我们将通过three.js技…

【学术会议介绍,SPIE 出版】第四届计算机图形学、人工智能与数据处理国际学术会议 (ICCAID 2024,12月13-15日)

第四届计算机图形学、人工智能与数据处理国际学术会议 2024 4th International Conference on Computer Graphics, Artificial Intelligence and Data Processing (ICCAID 2024) 重要信息 大会官网&#xff1a;www.iccaid.net 大会时间&#xff1a;2024年12月13-15日 大会地…

VScode C++配置opencv4.5.3——先赞后看,配置成功实属不易-(镜像加速环境w版和配置文件版)

前置准备&#xff1a;配置MinGW和CMake 手把手教——class1_VScode配置C环境_linux vscode cpp配置-CSDN博客文章浏览阅读398次&#xff0c;点赞4次&#xff0c;收藏6次。点击Windows x64 Installer:下载msi文件 安装完成后验证。配置gcc文件下bin环境。最后ctrlF5运行尝试。W…

机器学习 笔记

特征值提取 字典 from sklearn.extaction import DictVectorizer mDictVectorizer(sparseFalse)#sparse是否转换成三元组形式 data[], #传入字典数据 data1model.fit_transform(data) #使用API 英文特征值提取 from sklearn.feature_extraction.text import CountVe…

推荐一款好用的postman替代工具2024

Apifox 是国内团队自主研发的 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;是非常好的一款 postman 替代工具。 它通过一套系统、一份数据&#xff0c;解决多个系统之间的数据同步问题。只要定义好接口文档&#xff0c;接口调试、数据 Mock、接口…

项目模块十七:HttpServer模块

一、项目模块设计思路 目的&#xff1a;实现HTTP服务器搭建 思想&#xff1a;设计请求路由表&#xff0c;记录请求方法与对应业务的处理函数映射关系。用户实现请求方法和处理函数添加到路由表&#xff0c;服务器只接受请求并调用用户的处理函数即可。 处理流程&#xff1a; …

Android音视频直播低延迟探究之:WLAN低延迟模式

Android WLAN低延迟模式 Android WLAN低延迟模式是 Android 10 引入的一种功能&#xff0c;允许对延迟敏感的应用将 Wi-Fi 配置为低延迟模式&#xff0c;以减少网络延迟&#xff0c;启动条件如下&#xff1a; Wi-Fi 已启用且设备可以访问互联网。应用已创建并获得 Wi-Fi 锁&a…

requests库如何处理 - POST请求常见的两种请求体格式:表单格式JSON格式

目录&#xff1a; 每篇前言&#xff1a;一、POST请求的两种常见请求体格式详解1. 表单格式&#xff08;form-encoded&#xff09; - 举例&#xff1a;福州搜索示例代码&#xff08;表单数据&#xff09;&#xff1a; 2. JSON格式 - 举例&#xff1a;CSDN搜索示例代码&#xff0…

HCIP-HarmonyOS Application Developer 习题(二十二)

1、用户将手机导航迁移至智能手表之后&#xff0c;智能手表如果需要获取手机传过来的数据&#xff0c;从下列哪个方法中获取? A、onCompleteContinuation() B、onStartContinuation() C、onRestoreData() D、onSaveData() 答案&#xff1a;C 分析&#xff1a;FA发起迁移后&am…

LLMs之Code:Github Spark的简介、安装和使用方法、案例应用之详细攻略

LLMs之Code&#xff1a;Github Spark的简介、安装和使用方法、案例应用之详细攻略 目录 Github Spark的简介 Github Spark的安装和使用方法 1、安装 2、使用方法 Github Spark的案例应用 Github Spark的简介 2024年10月30日&#xff0c;GitHub 重磅发布GitHub Spark 是一…

会议直击|美格智能受邀出席第三届无锡智能网联汽车生态大会,共筑汽车产业新质生产力

11月10日&#xff0c;2024世界物联网博览会分论坛——第三届无锡智能网联汽车生态大会在无锡举行&#xff0c;美格智能CEO杜国彬受邀出席&#xff0c;并参与“中央域控&#xff1a;重塑汽车智能架构的未来”主题圆桌论坛讨论&#xff0c;与行业伙伴共同探讨智能网联汽车产业领域…

HMSC联合物种分布模型在群落生态学中的贝叶斯统计分析

联合物种分布模型&#xff08;Joint Species Distribution Modelling&#xff0c;JSDM&#xff09;在生态学领域&#xff0c;特别是群落生态学中发展最为迅速&#xff0c;它在分析和解读群落生态数据的革命性和独特视角使其受到广大国内外学者的关注。在学界不同研究团队研发出…

【AI技术对电商的影响】

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Python酷库之旅-第三方库Pandas(211)

目录 一、用法精讲 986、pandas.MultiIndex.get_loc方法 986-1、语法 986-2、参数 986-3、功能 986-4、返回值 986-5、说明 986-6、用法 986-6-1、数据准备 986-6-2、代码示例 986-6-3、结果输出 987、pandas.MultiIndex.get_locs方法 987-1、语法 987-2、参数 …

【go从零单排】通道select、通道timeout、Non-Blocking Channel Operations非阻塞通道操作

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 select 语句是 Go 的一种控制结构&#xff0c;用于等待多个通道操作。它类似于 s…