【SpringMVC】_SpringMVC实现用户登录

目录

1、需求分析

2、接口定义

2.1 校验接口

       请求参数

       响应数据

2.2 查询登录用户接口

        请求参数

        响应数据

4、服务器代码

5、前端代码

5.1 登录页面login.html

5.2 首页页面index.html

6、运行测试


1、需求分析

        用户输入账号与密码,后端校验密码是否正确:

(小型项目仅作阶段性学习练习,此处不使用数据库连接,使用session保存客户端信息)

        账号与密码不匹配(或称密码不正确):弹窗提示;

        账号与密码匹配(密码正确):跳转至首页显示登录用户信息。

                                                           并在后续再访问中可以获取到登录用户信息;

        对于后端开发人员,不涉及前端页面的展示,只需要提供两个功能:

        (1)登录页面:通过账号与密码校验输入的账号密码是否正确;

        (2)首页:告知前端当前登录用户,如果当前已有用户登录,返回登录人的信息;

                             如果没有,返回空;

2、接口定义

2.1 校验接口

        (1)请求方式:/user/login

        (2)请求方式:GET

        (3)接口描述:校验账号密码是否正确

       请求参数

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

       响应数据

        (1)Content-Type:text/html

        (2)响应内容:

                true:账号密码验证成功;

                false:账号密码验证失败;

2.2 查询登录用户接口

        (1)请求路径:/user/getLoginUser

        (2)请求方式:GET

        (3)接口描述:查询当前登录的用户

        请求参数

        无

        响应数据

        (1)Content-Type:text/html

        (2)响应内容:admin

4、服务器代码

包括   校验接口   与  查询登录用户接口

package com.example.demo.controller;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;@RequestMapping("/user")
@RestController
public class UserController {@RequestMapping("/login")public boolean login(String userName, String password, HttpSession session){// 第一步:校验参数合法性方法// 校验参数合法性方法1:普通判别式
//        if(userName == null || userName.length()==0 || password == null || password.length()==0){
//            return false;
//        }// 校验参数合法性方法2:使用Spring提供的方法if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){return false;}// 第二步:校验账户名与密码if("admin".equals(userName) && "admin".equals(password)){// 第三步:设置sessionsession.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;}
}

5、前端代码

5.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() {$.ajax({url:"/user/login",type:"post",data:{"userName": $("#userName").val(),"password": $("#password").val()},// 回调函数success:function(result){// result表示后端返回的结果if(result){// 完成页面跳转// 方式1:location.href = "/index.html";// 方式2:// location.assign();}else{alert("用户名与密码不匹配");}}});}</script>
</body></html>

5.2 首页页面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>// 需要在页面加载时就要调用后端请求$.ajax({url:"/user/getUserInfo",type:"get",success:function(username){$("#loginUser").text(username);}})
</script>
</body>
</html>

6、运行测试

使用本地回环URL: http://127.0.0.1:8080/login.html

登录页面如下:

输入用户名:admin,密码:admin并点击登录:

点击登录可以实现登录页面跳转至首页,并显示登录人信息;

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FineBi导出Excel后台版实现

就是不通过浏览器,在后台运行的导出 参考文档在:仪表板查看接口- FineBI帮助文档 FineBI帮助文档 我这里是将这个帮助文档中导出的excel文件写到服务器某个地方后,对excel进行其他操作后再下载。由于原有接口耦合了HttpServletRequest req, HttpServletResponse res对象,…

可变参数

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中&#xff0c;还可以定义可变参数。可变参数也称不定长参数&#xff0c;即传入函数中的实际参数可以是任意多个。 定义可变参数时&#xf…

SRS视频服务器应用研究

1.SRS尝试从源码编译启动 1.1.安装ubuntu 下载镜像文件 使用VMWare安装&#xff0c;过程中出现蓝屏&#xff0c;后将VM的软件版本从15.5升级到17&#xff0c;就正常了。 1.2.更新ubuntu依赖 1.3.下载源码 官方推荐下载develop 切换到用户目录&#xff0c;开始安装 安装后 突然…

[AI OpenAI] 为非营利组织推出OpenAI

我们正在启动一项新计划&#xff0c;以增强非营利组织对我们工具的可访问性&#xff0c;包括ChatGPT Team和Enterprise的折扣优惠。 今天&#xff0c;我们推出了OpenAI for Nonprofits&#xff0c;这是一项旨在增强非营利组织对我们工具的可访问性的新计划。 非营利组织已经在…

5G专网驻网失败分析(suci无效)

suci 5G终端第一次驻网时&#xff0c;注册消息Registartion request中携带的5GS mobile identity要携带suci类型的mobile identity。 注册消息协议规范见5G NAS 协议3gpp TS24.501 8.2.6 Registration request。 suci协议规范参见3gpp TS24.501 9.11.3.4 5GS mobile identity …

python zip()函数(将多个可迭代对象的元素配对,创建一个元组的迭代器)zip_longest()

文章目录 Python zip() 函数深入解析基本用法函数原型基础示例 处理不同长度的迭代器高级用法多个迭代器使用 zip() 与 dict()解压序列 注意事项内存效率&#xff1a;zip() 返回的是一个迭代器&#xff0c;这意味着直到迭代发生前&#xff0c;元素不会被消耗。这使得 zip() 特别…

Mysql | select语句导入csv后再导入excel表格

需求 从mysql数据库中导出数据到excel 解决方案 sql导出csv文件 sql SELECT col1,col2 FROM tab_01 WHERE col3 xxx INTO OUTFILE /tmp/result.csv FIELDS TERMINATED BY , ENCLOSED BY " LINES TERMINATED BY \n;csv文件导出excel文件 1、【数据】-【导入数据】 …

【redis】宝塔,线上环境报Redis error: ERR unknown command del 错误

两种方式&#xff1a; 1.打开宝塔上的redis&#xff0c;通过配置文件修改权限&#xff0c;注释&#xff1a;#rename-command DEL “” 2.打开服务器&#xff0c;宝塔中默认redis安装位置是&#xff1a;cd /www/server/redis 找到redis.conf,拉到最后&#xff0c;注释#rename-co…

『 Linux 』文件系统

文章目录 磁盘构造磁盘抽象化 磁盘的寻址方式磁盘控制器磁盘数据传输文件系统Inode数据块(Data Blocks)超级块(SuperBlock)块组描述符(Group Descriptor) 磁盘构造 磁盘内部构造由磁头臂,磁头,主轴,盘片,盘面,磁道,柱面,扇区构成; 磁头臂&#xff1a;控制磁头的移动,可以精确地…

测试工具fio

一、安装部署 fio是一款优秀的磁盘IO测试工具&#xff0c;在Linux中比较常用于测试磁盘IO 其下载地址&#xff1a;https://brick.kernel.dk/snaps/fio-2.1.10.tar.gz 或者登录其官网&#xff1a;http://freshmeat.sourceforge.net/projects/fio/ 进行下载。 tar -zxvf fio-…

PCL 二维凸包切片法计算树冠体积

目录 一、算法原理1、原理概述2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 1、原理概述 二维凸包法是先将树冠等间隔分层切片,如图(e)采用二维凸包算法对每层…

ABP框架+Mysql(二)

展示页面--图书列表页面 本地化 开始的UI开发之前,我们首先要准备本地化的文本(这是你通常在开发应用程序时需要做的).本地化文本在前端页面会常用。 本地化文本位于 Acme.BookStore.Domain.Shared 项目的 Localization/BookStore 文件夹下: 打开 en.json (英文翻译)文件并更…

Superset二次开发之Github项目推送到GitLab仓库

以下是从GitHub克隆Superset项目并将其推送到GitLab的详细操作步骤 lab 地址: xxx lab 配置: 生成SSH密钥 ssh-keygen -t rsa -b 4096 -C "邮箱地址" 默认情况下密钥会生成在~/.ssh (/c/Users/Administrator/.ssh/id_rsa)目录下。 公钥添加到GitLab: 打开公钥文件…

音视频开发—FFmpeg打开麦克风,采集音频数据

文章目录 1.使用命令行实现采集PCM数据2.使用代码实现3.播放PCM4.PCM转换为WAV 1.使用命令行实现采集PCM数据 确保你的系统有FFmpeg安装。你可以通过在终端运行ffmpeg -version来检查是否已安装。 找出你的麦克风设备名。在Linux中&#xff0c;你可以使用arecord -l命令列出所…

Java实战:从文件读出学生列表

本实战项目的目标是从文本文件中读取学生列表&#xff0c;并验证读取过程的正确性通过单元测试。 创建静态方法 实现一个名为readStudentsFromFile的静态方法&#xff0c;该方法接收一个文件路径作为参数。创建一个Student对象的列表&#xff0c;用于存储从文件中读取的学生信息…

使用PyCharm 开发工具创建工程

一. 简介 前面学习了 安装 python解释器。如何安装python的一种开发工具 PyCharm。 本文来简单学习一下&#xff0c;如何使用 PyCharm 开发工具创建一个简单的 python工程。 二. PyCharm 开发工具创建一个工程 1. 首先&#xff0c;首先打开PyCharm 开发工具。选择 创建一…

2024-6-1 石群电路-20

2024-6-1&#xff0c;星期六&#xff0c;18:24&#xff0c;天气&#xff1a;晴&#xff0c;心情&#xff1a;晴。已经到学校啦&#xff0c;本来打算今天休息一天不更了&#xff0c;但是觉得可以更新完再休息&#xff0c;没有这么累&#xff0c;哈哈哈哈&#xff0c;这就不得不说…

长安链使用Golang编写智能合约教程(二)

长安链2.3.0的go合约虚拟机和2.3.0以下的不兼容&#xff0c;编译的方式也有差异&#xff0c;所以在ide上做了区分。 教程三会写一些&#xff0c;其他比较常用SDK方法的解释和使用方法 教程一&#xff1a;&#xff08;长安链2.1.的版本的智能合约&#xff09; 教程三&#xff…

排序方法——堆排序

文章目录 一、堆的概念二、向下调整法三、堆排序建堆排序 四、 完整代码 一、堆的概念 堆的概念&#xff1a;一个按照完全二叉树的储存方式存储的一维数组我们称之为堆。   堆可以分为大堆和小堆&#xff1a;   大堆&#xff1a;二叉树中父亲节点的值都比自己的孩子节点的…

阿里云部署nodejs

目录 1、安装node.js 1-1 进入opt/software 1-2 下载node.js安装包 1-3 解压 2 配置环境变量 2-1 vim中配置环境变量 2-2 命令行中保存环境变量 2-3 检查安装版本 2-3 更换镜像 3、上传node.js项目 1-1 启动项目 1-2 配置对应的安全组 ​编辑 4、pm2启动多个node项…