【SpringMVC】用户登录器项目，加法计算器项目的实现

news2024/12/11 21:47:39

 8e19eee2be5648b78d93fbff2488137b.png

阿华代码，不是逆风，就是我疯

你们的点赞收藏是我前进最大的动力！！

希望本文内容能够帮助到你！！

目录

一：用户登录项目实现

1：需求

2：准备工作

（1）跳转的页面（首页）

（2） 登录的页面

3：预期结果

 二：约定前后端交互接口

1：需求分析

2：接口定义

（1）校验接口

①请求参数

②响应数据

（2）查询登录用户接口

①请求参数

②响应数据

3：后端校验代码

4：查询登录用户后端代码

 三：调整前端代码

四：运行测试结果

 五：计算器项目实现

1：需求

2：准备工作

3：结果如下

六：约定前后端交互接口

1：需求分析

2：定义接口

3：请求参数

七：后端代码

八：运行测试

一：用户登录项目实现

1：需求

⽤⼾输⼊账号和密码,后端进⾏校验密码是否正确。
（1） 如果不正确,前端进⾏⽤⼾告知
（2）如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录⽤⼾
（3）后续再访问⾸⻚,可以获取到登录⽤⼾信息


2：准备工作

把前端代码放到项目中

（1）跳转的页面（首页）

<!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） 登录的页面

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

3：预期结果

 二：约定前后端交互接口

1：需求分析

对于后端开发⽽⾔,只需要提供两个功能
①登录⻚⾯:通过账号和密码,校验输⼊的账号密码是否正确,并告知前端
② ⾸⻚:告知前端当前登录⽤⼾.如果当前已有⽤⼾登录,返回登录的账号,如果没有,返回空

2：接口定义

（1）校验接口

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

①请求参数

②响应数据

Content-Type: text/html
响应内容:
true //账号密码验证成功
false//账号密码验证失败

（2）查询登录用户接口

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


①请求参数

无

②响应数据

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

3：后端校验代码

package com.example.demoapplication;

import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttribute;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: Hua YY
 * Date: 2024-11-11
 * Time: 13:10
 */


@RestController
@RequestMapping("/user")
public class LoginController {
    /*
    * 这个类中的login方法是用来检验前端请求中的账号和密码是否正确的
    * */

    @RequestMapping(value = "/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(!"cbro".equals(userName) || !"123456".equals(password)){
            return false;
        }
        session.setAttribute("userName" , userName);
        return true;
    }

    @RequestMapping("/index")
    public String getUserName(@SessionAttribute("userName") String userName){
        return userName;
    }
}

StringUtils.hasLength()是Spring提供的⼀个⼯具⽅法,判断字符串是否有值，字符串为null或者""时,返回false,其他返回true。

4：查询登录用户后端代码

@RestController
@RequestMapping("/user")
public class getLoginUser {
    @RequestMapping(value = "/getLoginUser" )
    public String getLoginUser(HttpSession session){
        String userName = (String)session.getAttribute("userName");//向下转型
        if(StringUtils.hasLength(userName)){
            return userName;
        }
        return "";
    }
}

 三：调整前端代码

<!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({
            url:"/user/getLoginUser",//这里才是真正的调用后端
            type:"get",
            success:function (loginName){//调用回调函数，接收后端结果，用body参数接收
                //给登录人span重新赋值
                $("#loginUser").text(loginName);//用text赋值，赋值来源为loginName
            }
        });
    </script>
</body>

</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() {//当点击登录的时候onclick调用function中的login
      //ajax请求包含路径类型，访问成功...，访问失败.....
      //格式   $.ajax({})  括号里面是一个对象
      $.ajax({
        url:"/user/login",//这里才是真正的调用后端
        type:"post",
        data:{  // data接收参数
          userName: $("#userName").val(),
          password: $("#password").val()
        },//以上是发送请求,响应成功

        //回调函数function内部有一个内置的参数用来接收后端的响应
        success:function (result){//result参数接收响应结果
          if(result){
            location.href = "/index.html"
          }else{
            alert("账号密码有误");//弹框
          }
        }


      })
    
    }

  </script>
</body>

</html>

四：运行测试结果

多次刷新http://127.0.0.1:8080/index.html发现依然可以获取到登录⽤⼾
如果重启服务器,则登录⼈显⽰:空

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

 五：计算器项目实现

1：需求

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

2：准备工作

把前端代码引入项目中

前端代码如下

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

3：结果如下

六：约定前后端交互接口

1：需求分析

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

2：定义接口

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

3：请求参数

七：后端代码

@RestControllerpublic class CalculateController {

    @RequestMapping("/calc")

    public String sum(Integer num1 , Integer num2){

        int sum = num1 + num2;

        return "<h1>计算的结果是：" + sum + "</h1>";

    }

}

八：运行测试

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

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

相关文章

联通光猫DT741-csf 完全po解 改桥接

联通光猫DT741-csf 完全po解 改桥接

1.管理员密码破解&#xff0c;把光猫的loid pppoe用户名密码&#xff0c;各个连接vlan id记下来 打开链接 http://192.168.1.1/hidden_version_switch.html version选择Default Version&#xff0c;点击submit&#xff0c;光猫默认重启。重启后ip地址变为192.168.1.1 并且dhcp…
阅读更多...
12月2日星期一今日早报简报微语报早读

12月2日星期一今日早报简报微语报早读

12月2日星期一&#xff0c;农历十一月初二&#xff0c;早报#微语早读。 1、公安部&#xff1a;全国机动车所有人12月2日起均可申领电子行驶证&#xff1b; 2、2025年国考笔试开考&#xff1a;参考率约为86.7%&#xff0c;约65人录1人&#xff1b; 3、今日头条、拼多多等9款A…
阅读更多...
机器学习概述，特征工程简述2.1——2.3

机器学习概述，特征工程简述2.1——2.3

机器学习概述&#xff1a; 1.1人工智能概述 达特茅斯会议—人工智能的起点 机器学习是人工智能的一个实现途径 深度学习是机器学习的一个方法发展而来 1.1.2 机器学习和深度学习能做什么 传统预测 图像识别 自然语言处理 1.2什么是机器学习 数据 模型 预测 从历史数…
阅读更多...
C语言(一维数组练习）

C语言(一维数组练习）

键盘录入一组数列&#xff0c;利用冒泡排序将数据由大到小排序 #include <stdio.h>int main(int argc,char *argv[]) {int i,j,tmep;int arr[10];printf("请输入10个测试整数&#xff1a;\n");int lensizeof(arr)/sizeof(arr[0]);for(i0;i<len;i){scanf(&q…
阅读更多...
【2025最新计算机毕业设计】基于SSM+Vue中华传统文化吟诵知识学习系统

【2025最新计算机毕业设计】基于SSM+Vue中华传统文化吟诵知识学习系统

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…
阅读更多...
MySQL需掌握到何种程度？才能胜任工作

MySQL需掌握到何种程度？才能胜任工作

大家好&#xff0c;我是袁庭新。星友问&#xff1a;MySQL需要学到什么程度&#xff1f;才能胜任日常的软件开发工作呢&#xff01;以下是一些建议的学习目标和程度&#xff0c;这些目标旨在帮助你在工作中高效地使用MySQL。 数据库的基本概念、MySQL的安装及配置、SQL的概念、S…
阅读更多...
[TPAMI 2024]Vision-Language Models for Vision Tasks: A Survey

[TPAMI 2024]Vision-Language Models for Vision Tasks: A Survey

论文网址&#xff1a;Vision-Language Models for Vision Tasks: A Survey | IEEE Journals & Magazine | IEEE Xplore 论文Github页面&#xff1a;GitHub - jingyi0000/VLM_survey: Collection of AWESOME vision-language models for vision tasks 英文是纯手打的&…
阅读更多...
桂湾公园的地面免费停车场（50个左右）

桂湾公园的地面免费停车场（50个左右）

之前一直以为桂湾公园只有P1和P2地下停车场可以免费停车。没想到桂湾公园还有地面停车场&#xff0c;停车位大概是50个。 具体位置在桂湾公园5号门地上停车场。 桂湾公园-5号门 广东省深圳市南山区桂湾河南街与鲤鱼门西二街交叉口西北20米 停车场入口对面是红星美凯龙&#x…
阅读更多...
SpringBoot连接多数据源MySQL、SqlServer等（MyBatisPlus测试）

SpringBoot连接多数据源MySQL、SqlServer等（MyBatisPlus测试）

SpringBoot连接多数据源MySQL、SqlServer等&#xff08;MyBatisPlus测试&#xff09; 在实际的项目开发中&#xff0c;我们往往需要同时连接多个数据源对数据进行处理。本文将详细介绍在SpringBoot下配合MybatisPlus如何连接多数据源&#xff0c;实例将会使用连接MySQL、SqlSe…
阅读更多...
基于NVIDIA NIM 平台的知识问答系统实现客服功能

基于NVIDIA NIM 平台的知识问答系统实现客服功能

前言&#xff1a; NVIDIA联合CSDN推出了《NVIDIA NIM黑客松训练营》&#xff0c;通过对着提供的实验手册&#xff0c;学习了基于NVIDIA的NIM平台知识问答系统&#xff0c;简单的一段代码就可以实现一个AI智能问答系统。而且这次活动注册账号即可获得到免费的1000tokens&#x…
阅读更多...
（12）时间序列预测之MICN（CNN）

（12）时间序列预测之MICN（CNN）

文章目录 前言1. challenge 一、网络结构1. MHDecomp2. Trend-cyclical Prediction Block3. Seasonal Prediction BlockMIC LayerMerge 实验结果1.长时预测 总结参考 文章信息 模型&#xff1a; MICN (Multi-scale Isometric Convolution Network)关键词&#xff1a; 长时预测…
阅读更多...
设计模式——Facade(门面)设计模式

设计模式——Facade(门面)设计模式

摘要 本文介绍了外观设计模式&#xff0c;这是一种通过简单接口封装复杂系统的设计模式。它简化了客户端与子系统之间的交互&#xff0c;降低了耦合度&#xff0c;并提供了统一的调用接口。文章还探讨了该模式的优缺点&#xff0c;并提供了类图实现和使用场景。 1. 外观设计模…
阅读更多...
opencv-android编译遇到的相关问题处理

opencv-android编译遇到的相关问题处理

1、opencv-android sdk下载 下载地址&#xff1a;https://opencv.org/releases/ 下载安卓SDK即可 2、解压下载好的SDK 3、导入opencv的SDK到安卓项目中 导入步骤在/OpenCV-android-sdk/sdk/build.gradle文件的注释中写的非常详细&#xff0c;大家可安装官方给出的步骤导入。…
阅读更多...
go语言读取yaml配置文件内容

go语言读取yaml配置文件内容

1、config.yaml配置文件内容假设如下 name: "example" version: 1.0 settings:timeout: 30debug: truefeatures:- feature1- feature22、定义结构体 go语言定义结构体匹配yaml内容 package mainimport ("fmt""log""os""gopkg.…
阅读更多...
STL算法之其它算法_下

STL算法之其它算法_下

random_shuffle 这个算法将[first,last)的元素次序随机排列。也就说&#xff0c;在N!中可能的元素排列中随机选出一种&#xff0c;此处N为last-first。 N个元素的序列&#xff0c;其排列方式为N!中&#xff0c;random_shuffle会产生一个均匀分布&#xff0c;因此任何一个排列被…
阅读更多...
模拟简单的iOT工作流

模拟简单的iOT工作流

没有实际接触过iOT的流程&#xff0c;应该实际使用比这个接口返回要复杂&#xff0c;只是演示~希望能参与实际的接口接入&#xff0c;而不是只展示个假数据。 启动RabbitQ 使用的是3.8.5 启动命令 RabbitMQ Service - start RabbitMQ Command Prompt rabbitmqctl start_app …
阅读更多...
【快速入门 LVGL】-- 1、STM32 工程移植 LVGL

【快速入门 LVGL】-- 1、STM32 工程移植 LVGL

目录 一、LVGL 简述 二、复制一个STM32工程 三、下载 LVGL 四、裁剪 源文件 五、工程添加 LVGL 文件 六、注册 显示 七、注册 触摸屏 八、LVGL 心跳、任务刷新 九、开跑 LVGL 十、控件的事件添加、响应处理 十 一、几个好玩小事情 十 二、显示中文 ~~ 约定 ~~ 在…
阅读更多...
关于线扫相机的使用和注意事项

关于线扫相机的使用和注意事项

引言 线扫相机作为工业视觉系统中的核心设备之一&#xff0c;以其高分辨率和高速成像的特点被广泛应用于印刷质量检测、电子元件检测、纺织品缺陷检测等领域。本文从线扫相机的基本原理出发&#xff0c;探讨其使用方法&#xff0c;并总结在实际应用中的注意事项&#xff0c;为…
阅读更多...
MybatisPlus字段类型处理器TypeHandler

MybatisPlus字段类型处理器TypeHandler

个人博客&#xff1a;无奈何杨&#xff08;wnhyang&#xff09; 个人语雀&#xff1a;wnhyang 共享语雀&#xff1a;在线知识共享 Github&#xff1a;wnhyang - Overview 简介 官网&#xff1a;字段类型处理器 在 MyBatis 中&#xff0c;类型处理器&#xff08;TypeHandle…
阅读更多...
c++编译版本问题#error C++17 or later compatible compiler is required to use xx

c++编译版本问题#error C++17 or later compatible compiler is required to use xx

问题解决方向 网上多数给出的解决方法是找到setup.py&#xff0c;然后修改extra_compile_args参数中的cxx&#xff0c;由-stdc14改为-stdc17&#xff0c;但是这个方法在我这里没用。 所以我重新理解了下这个error&#xff0c;应该是说为了编译安装当前的库&#xff0c;需要的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023