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

【SpringBoot】实现登录功能

article 2026/3/13 14:55:23

在上一篇博客中，我们讲解了注册页面的实现。在此基础上会跳转到登录页面，今天给大家带来的是使用 SpringBoot，MyBatis，Html，CSS，JavaScript，前后端交互实现一个登录功能。

目录

一、效果

二、源码

2.1 前端

2.2 后端

一、效果

用户名和密码栏输入空或没有值时，提示错误。

在数据库中有以下信息，任意挑选一条信息进行登录操作。

输入用户 lisi，123 后登陆成功 

跳转到个人列表。

二、源码

2.1 前端

前端登陆页面 html 代码，login.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登陆页面</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css"><script src="js/jquery.min.js"></script>
</head><body><!-- 导航栏 --><div class="nav"><img src="img/touxiang.png" alt=""><span class="title">随心日记系统</span><!-- 用来占据中间位置 --><span class="spacer"></span><a href="blog_list.html">主页</a><a href="blog_edit.html">写日记</a><a href="login.html">注册</a><!-- <a href="#">注销</a> --></div><!-- 版心 --><div class="login-container"><!-- 中间的登陆框 --><div class="login-dialog"><h3>登陆</h3><div class="row"><span>用户名</span><input type="text" id="username"></div><div class="row"><span>密码</span><input type="password" id="password"></div><div class="row"><button id="submit" onclick="doLogin()">提交</button></div></div></div><script>// 登录功能function doLogin() {// 1.非空校验var username = jQuery("#username");var password = jQuery("#password");if(username.val().trim() == "") {alert("请先输入用户名!")username.focus();return false;}if(password.val().trim() == "") {alert("请输入密码！")password.focus();return false;}// 2.将数据提交到后端jQuery.ajax({url:"/user/login",type:"GET",data:{"username":username.val(),"password":password.val()},success:function(ret) {//3.将结果展示给用户if (ret.code == 200 && ret.data == 1 ) {alert("登录成功!");location.href = "myblog_list.html";} else {alert("登录失败!"+ret.msg);}}});}</script>
</body></html>

登陆页面的样式，login.css

.login-container {width: 100%;height: calc(100% - 50px);display: flex;justify-content: center;align-items: center;
}.login-dialog {width: 400px;height: 400px;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;
}.login-dialog h3 {padding: 50px 0;text-align: center;
}.login-dialog .row {height: 50px;display: flex;justify-content: center;align-items: center;
}.login-dialog .row span {display: block;width: 100px;font-weight: 700;
}.login-dialog .row input {width: 200px;height: 40px;line-height: 40px;font-size: 24px;border-radius: 10px;border: none;outline: none;text-indent: 10px;
}.login-dialog button {width: 300px;height: 50px;color: white;background-color: green;border: none;border-radius: 10px;
}.login-dialog button:active {background-color: #666;
}

公共样式（注册或登录页面），common.css:

* {margin: 0;padding: 0;box-sizing: border-box;
}/* 设置整体页面高度 */
html, body {height: 100%;background-image: url(../img/cat2.png);background-position: center center;background-size: cover;background-repeat: no-repeat;
}/* 上方导航栏 */
.nav {width: 100%;height: 50px;background-color: rgba(51, 51, 51, 0.4);color: #fff;display: flex;justify-content: left;align-items: center;
}/* 导航栏中的图标 */
.nav img {width: 40px;height: 40px;margin-left: 30px;margin-right: 10px;border-radius: 50%;
}/* 导航栏中的占位器 */
.nav .spacer {width: 70%;
}/* 导航栏中的按钮 */
.nav a {color: #fff;text-decoration: none;padding: 0 10px;
}/* 页面内容容器, 版心 */
.container {/* 使用 calc 计算高度 */height: calc(100% - 50px);/* 设置版心宽度 */width: 1000px;/* 水平居中 */margin: 0 auto;/* 使用弹性布局 */display: flex;justify-content: space-between;align-items: center;
}/* 左侧部分, 用来放置用户信息 */
.container-left {height: 100%;width: 200px;
}/* 右侧部分, 用来放置正文 */
.container-right {height: 100%;/* 和左侧部分中间留出 5px 间隙 */width: 795px;/* 如果内容溢出就自动加上滚动条 */overflow: auto;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;
}/* 展示用户信息的卡片 */
.card {background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;padding: 30px;
}/* 用户头像 */
.card img {width: 140px;height: 140px;border-radius: 50%;
}/* 用户名 */
.card h3 {text-align: center;padding: 10px;
}/* 用户 github 链接 */
.card a {display: block;text-align: center;color: #999;text-decoration: none;padding: 10px;
}/* 展示文章数目的面板 */
.card .counter {padding: 5px;display: flex;justify-content: space-around;
}

2.2 后端

统一返回格式,ResultAjax 类：

/*** 统一的返回格式*/
@Data
public class ResultAjax {private int code;private String msg;private Object data;// 成功public static ResultAjax success(Object data) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(200);resultAjax.setMsg("");resultAjax.setData(data);return resultAjax;}public static ResultAjax success(int code, String msg, Object data) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(code);resultAjax.setMsg(msg);resultAjax.setData(data);return resultAjax;}// 失败public static ResultAjax fail(int code, String msg) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(code);resultAjax.setMsg(msg);return resultAjax;}public static ResultAjax fail(int code, String msg, Object data) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(code);resultAjax.setMsg(msg);resultAjax.setData(data);return resultAjax;}
}

UserMapper 接口：

@Mapper
public interface UserMapper {//登录功能@Select("select * from userinfo where username=#{username}")Userinfo getUserinfoByName(@Param("username") String username);
}

UserService 类：

@Service
public class UserService {//注册接口注入进来@Autowiredprivate UserMapper userMapper;//登录功能public Userinfo getUserByName(String username) {return userMapper.getUserinfoByName(username);}
}

UserControler 类：

@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService; /*** 登录接口* @param userinfoVO* @return*/@RequestMapping("/login")public ResultAjax login(UserinfoVO userinfoVO, HttpServletRequest request) {// 1.参数校验if (userinfoVO == null || !StringUtils.hasLength(userinfoVO.getUsername())|| !StringUtils.hasLength(userinfoVO.getPassword())) {// 非法登录return ResultAjax.fail(-1,"非法登录!");}// 2.根据用户名查询对象，判断用户名是否错误Userinfo userinfo = userService.getUserByName(userinfoVO.getUsername());if (userinfo == null && userinfo.getId() == 0) {return ResultAjax.fail(-2,"账号或密码错误!");}// 3.使用对象中的密码和输入的密码进行对比，判断密码是否错误if (!userinfoVO.getPassword().equals(userinfo.getPassword())) {return ResultAjax.fail(-2,"账号或密码错误!");}// 4.成功后将对象存储到 session 中HttpSession session = request.getSession();session.setAttribute(ApplicationVariable.SESSION_USERINFO_KEY,userinfo);// 5.结果返回给用户return ResultAjax.success(1);}
}

上述为整个登录功能的核心代码，其中需要注意的是前端需自行映入 jQuery 依赖、在 application.properties 文件中连接数据库、创建对应的数据库。连接数据库，数据库的创建代码在上篇博客中已讲解。

本篇博客到这里就结束了，感谢各位的观看。

相关文章：

【SpringBoot】实现登录功能

在上一篇博客中&#xff0c;我们讲解了注册页面的实现。在此基础上会跳转到登录页面&#xff0c;今天给大家带来的是使用 SpringBoot&#xff0c;MyBatis&#xff0c;Html&#xff0c;CSS&#xff0c;JavaScript&#xff0c;前后端交互实现一个登录功能。 目录 一、效果 二、…...

编程日记 2026/3/7 23:05:39

图论part3｜101.孤岛的总面积、沉没孤岛、417. 太平洋大西洋水流问题

101. 孤岛的总面积 &#x1f517;&#xff1a;101. 孤岛的总面积思路&#xff1a;和昨天的岛的区别是&#xff1a;是否有挨着边的岛屿 所以可以先遍历四条边挨着的岛屿&#xff0c;把他们标记为非孤岛再计算其他岛屿当中的最大面积 代码&#xff1a;&#xff08;深度搜索&…...

编程日记 2026/3/6 2:21:25

选型消息队列（MQ）：ActiveMQ、RabbitMQ、RocketMQ、Kafka对比

选型消息队列&#xff08;MQ&#xff09;&#xff1a;ActiveMQ、RabbitMQ、RocketMQ、Kafka对比 选型消息队列&#xff08;MQ&#xff09;1. 引言2. 消息队列核心指标3. MQ 技术对比分析4. 详细分析及案例4.1 ActiveMQ&#xff1a;传统企业级 MQ 方案4.2 RabbitMQ&#xff1a;高…...

编程日记 2026/2/14 15:36:59

常见FUZZ姿势与工具实战：从未知目录到备份文件漏洞挖掘

本文仅供学习交流使用&#xff0c;严禁用于非法用途。未经授权&#xff0c;禁止对任何网站或系统进行未授权的测试或攻击。因使用本文所述技术造成的任何后果&#xff0c;由使用者自行承担。请严格遵守《网络安全法》及相关法律法规&#xff01; 目录 本文仅供学习交流使用&am…...

编程日记 2026/2/21 13:29:44

基于异构特征融合与轻量级集成学习的软件漏洞挖掘方案设计与Python实现

标题：基于异构特征融合与轻量级集成学习的软件漏洞挖掘方案设计与Python实现 一、方案设计原理 异构特征工程 静态特征：基于AST的代码属性图（CPG）解析（使用Joern+NetworkX）动态特征：内存访问模式分析（通过QEMU模拟执行）上下文特征：CWE漏洞模式匹配（集成Semgrep规则引…...

编程日记 2026/2/22 4:36:22

监控快手关注列表更新以及去视频水印视频

def printData(self):if len(self.UpdateDataList) > 0:self.UpdateDataList sorted(self.UpdateDataList, keylambda x: x[minutes]) # 先更新的在前sucess 0for index, video in enumerate(self.UpdateDataList):minutes video[minutes]if minutes > self.updateIn…...

编程日记 2026/2/19 10:46:05

【从零开始学习计算机科学】数据库系统（十一）云数据库、NoSQL 与 NewSQL

【从零开始学习计算机科学】数据库系统（十一）云数据库、NoSQL 与 NewSQL 云数据库云服务器的服务云数据库和传统的分布式数据库的异同NoSQLNoSQL数据库的特点CAP定理NoSQL的特性NoSQL数据库的分类NoSQL的适用场景Nosql数据库实例-RedisRedis的优势MongoDBMongoDB的特点NewSQL…...

编程日记 2026/2/16 6:49:10

江科大51单片机笔记【12】AT24C02（I2C总线）

写在前言 此为博主自学江科大51单片机&#xff08;B站&#xff09;的笔记&#xff0c;方便后续重温知识 在后面的章节中&#xff0c;为了防止篇幅过长和易于查找&#xff0c;我把一个小节分成两部分来发&#xff0c;上章节主要是关于本节课的硬件介绍、电路图、原理图等理论知识…...

编程日记 2026/3/3 1:17:51

【附JS、Python、C++题解】Leetcode面试150题（9）——三数之和

一、题目​​​​​ 15. 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足&#xff1a; i!j、i!k 且 j! k &#xff0c;同时还满足&#xff1a;nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意…...

编程日记 2026/2/15 18:05:23

网络安全防护架构有哪些 网络安全防护措施包括

网络安全预防措施 网安措施 计算机网络安全措施主要包括保护网络安全、保护应用服务安全和保护系统安全三个方面&#xff0c;各个方面都要结合考虑安全防护的物理安全、防火墙、信息安全、Web安全、媒体安全等等。 (一)保护网络安全。 网络安全是为保护商务各方网络端系统之…...

编程日记 2026/3/8 6:26:09

多线程实现批量保存数据

首先注入 private final SqlSessionFactory sqlSessionFactory;private final static int BATCH_SIZE 200; //保存数据条数private final static int THREAD_POOL_SIZE 15; // 线程池大小然后把保存的数据根据BATCH_SIZE 切割成多个批次封装起来&#xff1a; /*** 将数据分成…...

编程日记 2026/2/27 6:29:16

ActiveMQ监听器在MQ重启后不再监听问题

应用的监听器注解 JmsListener(destination "TopicName",containerFactory "FactoryName")工厂代码 BeanJmsListenerContainerFactory<?> FactoryName(ConnectionFactory connectionFactory){SimpleJmsListenerContainerFactory factory new S…...

编程日记 2026/2/22 16:22:03

大模型架构记录5-向量数据库

一 倒排索引、KNN、PQ 1.1 基础版本 query -> requery 对问题做处理&#xff0c;处理上下文 对query 做 refined query 1.2 向量数据库 二 搜索逻辑 2.1 knn 2.2 近似KNN 先和N个空间的均值比较再和空间内部的所有点比较&#xff0c;计算最近值。 优化一&#xff1a; …...

编程日记 2026/2/27 1:06:17

Linux：基本指令与内涵理解

1.文件操作指令 1.1 ls ls指令用于查看指定层级文件夹下的文件或文件夹 基本格式&#xff1a;ls (选项) (查看层级&#xff09; 其中选项处不写就默认是显示文件名&#xff0c;查看层级默认是当前层级 选项1&#xff1a; -l 作用&#xff1a;将查找文件的详细信息显示出来 我们…...

编程日记 2026/3/13 3:30:58

Android实现简易计算器

<?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android" android:layout_width"match_parent" android:layout_height"match_parent" and…...

编程日记 2026/2/25 14:11:32

PHP 在 if 判断时由于运算符优先级导致 false 的问题

首先来看一段代码&#xff1a; $price 187.50;if (!is_numeric($price) || $price < 0 || ($price * 100 > 1000000)) {echo "价格错误&#xff1a;$price\n"; } else {echo "价格正确&#xff1a;$price\n"; }乍一看是不是认为并没有什么问题&…...

编程日记 2026/2/25 20:02:36

【分布式】如何使用RocketMQ实现下单-库存-支付这个场景的分布式事务问题

在 下单-库存-支付 场景中&#xff0c;通过消息队列实现最终一致性&#xff0c;需保证三个微服务的操作最终一致&#xff0c;且在支付失败或库存不足时触发回滚补偿。以下是具体实现方案&#xff1a; 1. 整体流程设计 正常流程&#xff08;成功场景&#xff09; 订单服务 创建…...

编程日记 2026/2/24 1:58:35

手写一些常见算法

手写一些常见算法 快速排序归并排序Dijkstra自定义排序交替打印0和1冒泡排序插入排序堆排序 快速排序 public class Main {public static void main(String[] args) {int nums[] {1,3,2,5,4,6,8,7,9};quickSort(nums,0,nums.length - 1);}private static void quickSort(int[…...

编程日记 2026/3/10 3:25:01

使用DeepSeek完成一个简单嵌入式开发

开启DeepSeek对话 请帮我使用Altium Designer设计原理图、PCB&#xff0c;使用keil完成代码编写&#xff1b;要求&#xff1a;使用stm32F103RCT6为主控芯片&#xff0c;控制3个流水灯的原理图 这里需要注意&#xff0c;每次DeepSeek的回答都不太一样。 DeepSeek回答 以下是使…...

编程日记 2026/2/14 14:01:15

每日一题之储存晶体

问题描述 威慑纪元 2230 年&#xff0c;人类联邦在与三体文明的对抗中&#xff0c;为了强化飞船的能源储备&#xff0c;决定收集能量晶体。飞船的储存空间呈矩形&#xff0c;边长分别为 a 和 b。对于一个能量晶体&#xff0c;只有当它的长度小于或等于存储空间的对角线长度时&…...

编程日记 2026/1/27 15:30:16

关于我和快速幂的事（）

我之前只会这样的(dfs&#xff09;&#xff1a; 不懂下面这种写法的具体逻辑&#xff1a; 看完下面的推理&#xff0c;再转转我聪明的小老戴&#xff1a; 法一中&#xff1a;把2^11看成(2^5)^2 法二中&#xff1a;把2^11看成(2^2)^5...

编程日记 2026/2/15 23:40:56

【鸿蒙开发】Hi3861学习笔记- GPIO之直流电机

00. 目录 文章目录 00. 目录01. GPIO概述02. 直流电机概述03. ULN2003模块概述04. 硬件设计05. 软件设计06. 实验现象07. 附录 01. GPIO概述 GPIO&#xff08;General-purpose input/output&#xff09;即通用型输入输出。通常&#xff0c;GPIO控制器通过分组的方式管理所有GP…...

编程日记 2026/3/7 21:37:12

mapbox高阶，结合threejs（threebox）添加extrusion挤出几何体，并添加侧面窗户贴图和楼顶贴图，同时添加真实光照投影

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️threebox extrusion挤出几何体1.3 ☘️…...

编程日记 2026/3/1 13:02:56

【蓝桥杯速成】| 2.逆向思维

题目一&#xff1a;青蛙跳台阶 题目描述 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级台阶。 求该青蛙跳上一个 n 级的台阶总共有多少种跳法。 解题步骤 选用递归的方法解决该问题&#xff01; 使用递归只需要考虑清楚边界条件/终止条件&#xff0c;再写清楚单层…...

编程日记 2025/4/17 23:15:19

halcon机器人视觉(四)calibrate_hand_eye_stationary_3d_sensor

目录 一、准备数据和模型二、按照表面匹配的的结果进行手眼标定三、根据标定结果计算CalObjInCamPose一、准备数据和模型 1、读3D模型：read_object_model_3d 2、创建表面匹配模板：create_surface_model 3、创建一个HALCON校准数据模型：create_calib_data read_object_mode…...

编程日记 2026/3/5 3:50:25

python-leetcode-叶子相似的树

872. 叶子相似的树 - 力扣&#xff08;LeetCode&#xff09; 下面是一个完整的 Python 函数&#xff0c;接收两个二叉树的根节点 root1 和 root2&#xff0c;返回它们是否叶相似。 代码实现 class TreeNode:def __init__(self, val0, leftNone, rightNone):self.val valself…...

编程日记 2026/3/13 9:42:58

＜03.13＞八股文补充知识

import java.lang.reflect.*; public class Main {public static void main(String[] args) throws Exception {// 获取 Class 对象//1. 通过类字面量Class<?> clazz Person.class;//2 通过对象实例化String str "Hello";Class<?> clazz_str str.ge…...

编程日记 2026/3/7 9:28:40

GraphRAG 融合 RAG：双剑合璧，精度更上一层楼

检索增强生成 (Retrieval-Augmented Generation, RAG) 已成为构建知识密集型 NLP 应用的标准范式。RAG 通过结合大型语言模型 (LLM) 的生成能力和外部知识库的检索能力，显著提升了生成结果的质量。然而，在某些场景下，仅依靠传统的 RAG 或 GraphRAG 可能无法达到最佳效果。本…...

编程日记 2025/8/6 1:58:55

ffmpeg + opencv 打静态库编译到可执行文件中

下载ffmpeg ，我下载的为6.0 版本，解压后执行： ./configure --enable-static --disable-shared --pkg-config-flags=“–static” --extra-cflags=“-fPIC” --extra-cxxflags=“-fPIC” --prefix=/usr/local2.等待配置完成，执行 make && make install 进行编译安装…...

编程日记 2026/3/2 5:30:05

2025探索短剧行业新可能报告40+份汇总解读|附PDF下载

原文链接&#xff1a;https://tecdat.cn/?p41043 近年来&#xff0c;短剧以其紧凑的剧情、碎片化的观看体验&#xff0c;迅速吸引了大量用户。百度作为互联网巨头&#xff0c;在短剧领域积极布局。从早期建立行业专属模型冷启动&#xff0c;到如今构建完整的商业生态&#xf…...

编程日记 2026/2/18 5:24:03