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

springboot+html实现简单注册登录

news 2025/6/9 16:12:19

前端：

register.html

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>register</title><link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<div class="control"><div class="item"><div class="active">注册</div></div><div class="content"><div style="display: block;"><form action="/user/register" method="post"><p>用户名</p><input type="text" placeholder="请输入用户名" name="username" /><p>密码</p><input type="password" placeholder="请输入密码" name ="password"/><br/><input type="submit" value="注册"/></form><p>已注册，<a href="/user/login" target="top">去登录</a></p></div></div>
</div>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>login</title><link href="/css/style.css"  type="text/css" rel="stylesheet"><script src="/static/js/change.js"></script>
</head>
<body>
<div class="control"><div class="item"><div class="active">登录</div></div><div class="content"><div style="display: block;"><form action="/user/login" method="post"><p>账号</p><input type="text" placeholder="请输入用户名" name="username"/><p>密码</p><input type="password" placeholder="请输入密码"  name="password"/><br/><input type="submit" value="登录"/></form><p>没有账号，<a href="/user/register" target="top">去注册</a></p></div></div>
</div>
</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
登录成功
</body>
</html>

style.css

*{margin: 0;padding: 0;
}
body{background: #f3f3f3;
}
.control{width: 340px;background: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 5px;
}
.item{width: 340px;height: 60px;background: #eeeeee;
}
.item div{width: 340px;height: 60px;display: inline-block;color: black;font-size: 18px;text-align: center;line-height: 60px;cursor: pointer;
}
.content{width: 100%;
}
.content div{margin: 20px 30px;display: none;text-align: left;
}
p{color: #4a4a4a;margin-top: 30px;margin-bottom: 6px;font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{width: 100%;height: 40px;border-radius: 3px;border: 1px solid #adadad;padding: 0 10px;box-sizing: border-box;
}
.content input[type="submit"]{margin-top: 40px;width: 100%;height: 40px;border-radius: 5px;color: white;border: 1px solid #adadad;background: cyan;cursor: pointer;letter-spacing: 4px;margin-bottom: 40px;
}
.active{background: white;
}
.item div:hover{background: #f6f6f6;
}

后端：

com.example.entity.User

@Data
@Accessors(chain = true)
@EqualsAndHashCode(callSuper = false)
@Table( "user")public class User {private String username;private String password;}

数据库建表（user)

com.example.mapper.UserMapper

@Mapper
public interface UserMapper extends BaseMapper<User> {@Select(value = "select u.username,u.password from user u where u.username=#{username}")User findUserByName(@Param("username") String username);}

com.example.controller.UserController

@Controller
@RequestMapping("user")
public class UserController {@Autowiredprivate UserMapper userMapper;@RequestMapping("/register")public String register(User user, Model m) {if (user.getUsername()!=null&&userMapper.findUserByName(user.getUsername()) == null) {//判断用户是否已经存在if (!user.getUsername().isEmpty()) {//注册的时候，用户名不能为空if (!user.getPassword().isEmpty()) {//注册 的时候,密码不能为空*/userMapper.insert(user);return "html/login";} else {m.addAttribute("msg", "用户名已经存在！");return "html/register";}} else {m.addAttribute("msg", "用户名不能为空！");return "html/register";}} else {m.addAttribute("msg", "密码不能为空！");return "html/register";}}@RequestMapping("/login" )public String login(  User user, Model m){User exitUser=userMapper.findUserByName(user.getUsername());if(user.getUsername()==null||user.getUsername().isEmpty()){m.addAttribute("msg","用户名不能为空");return "html/login";}if(user.getPassword()==null||user.getPassword().isEmpty()){m.addAttribute("msg","密码不能为空");return "html/login";}if(exitUser==null){m.addAttribute("msg","该用户未注册");return "html/login";}if(!user.getPassword().equals(exitUser.getPassword())){m.addAttribute("msg","用户输入的密码有误");return "html/login";}else{m.addAttribute("msg","登录成功");return "html/success";}}}

注册逻辑：

1.判断要创建的用户在数据库是否存在，如果不存在就注册

2.注册的时候用户名不能为空

3.注册的时候密码不能为空

登录逻辑：

1.判断要登录的用户在数据库是否存在，如果存在就登录

2.登录的时候，输入的密码要与数据库里对应的用户的密码保持一致

3.登录的时候，输入用户名与密码不能为空

application.properities

spring.datasource.url=jdbc:mysql://localhost:3306/springboot?serverTimezone=GMT
spring.datasource.username=root
spring.datasource.password=1234

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.5.0</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>register-login</artifactId><version>0.0.1-SNAPSHOT</version><name>register-login</name><description>register-login</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><version>8.0.33</version><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>com.mybatis-flex</groupId><artifactId>mybatis-flex-spring-boot-starter</artifactId><version>1.6.4</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency><dependency><groupId>com.mybatis-flex</groupId><artifactId>mybatis-flex-spring-boot-starter</artifactId><version>1.6.4</version></dependency><dependency><groupId>com.mybatis-flex</groupId><artifactId>mybatis-flex-spring-boot-starter</artifactId><version>1.6.4</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><fork>true</fork><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build></project>

调试：

注册：

如果注册的用户在数据库中不存在，且注册的时候，用户名与密码都不为空，则跳转到

登录界面，反之，任意一个条件都不满足的话就不会跳转到登录界面

springboot+html实现简单注册登录

前端： register.html <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>register</title><link rel"stylesheet" type"text/css" href"/css/style.css&…...

编程日记 2023/10/18 19:09:33

ESP32网络开发实例-Web控制8路继电器

Web控制8路继电器文章目录 Web控制8路继电器1、继器器介绍2、软件准备3、硬件准备4、代码实现4.1 单路继电器控制灯泡4.2 Web控制8路继电器将继电器与 ESP32 一起使用是远程控制交流家用电器的好方法。本文介绍如何使用 ESP32 控制继电器模块。我们将了解继电器模块的工作原…...

编程日记 2023/10/18 19:08:32

Flutter ☞ 变量

在Flutter中，变量分为两种类型弱类型强类型弱类型 var 如果没有初始值，可以变成任何类型 var a; // var a ; // 一旦赋值，就确定类型，不能随意改动 a abc; a 123; a true; a {key: 123}; a [abc];print(a)Object 动…...

编程日记 2023/10/18 19:07:31

冲刺十五届蓝桥杯P0006平面切分

文章目录题目思路代码总结题目平面切分思路这道题是一个思维题把，之前没有接触过平面几何的知识，做起来感觉还是比较难的，用到的set集合和自己创建一个类首先我们知道，一根直线A是可以将平面切分成两块的，如…...

编程日记 2023/10/18 19:05:26

mac电脑文献管理 EndNote 21最新 for Mac

EndNote 21 Mac版不仅能够快速有效的的帮助用户管理自己的文献，而且还可以用来创建个人参考文献库，添加各种文本，图像，连接，表格等等内容！ - 搜索数百个在线资源以获取参考和PDF - 只需点击一下即可查找参…...

编程日记 2023/10/18 19:04:25

vue使用pdf-dist实现pdf预览以及水印一.使用pdf-dist插件将PDF文件转换为一张张canvas图片 npm install pdf-dist二.页面引入插件 const pdfJS require("pdfjs-dist"); pdfJS.GlobalWorkerOptions.workerSrc require("pdfjs-dist/build/pdf.worker.entry&…...

编程日记 2023/10/18 19:02:23

[Python进阶] 操纵键盘：Pynput

6.7 操纵键盘：Pynput 6.7.1 press、release 按下或释放某个按键。 from pynput.keyboard import Controller, Keykeyboard Controller() # 按下并释放f keyboard.press(f) keyboard.release(f) # 按下组合按键：alt tab keyboard.press(Key.alt) key…...

编程日记 2023/10/18 19:01:22

购药不烦恼：线上购药小程序的快捷方式

在这个数字化时代，线上购药小程序的快捷方式正在改变着我们购药的方式。本文将介绍如何通过使用Python和Flask框架创建一个简单的线上购药小程序的原型，为用户提供购药的便利和快捷体验。安装和设置首先，确保你已经安装了Python和Flask。…...

编程日记 2023/10/18 19:00:20

10.17课上（七段显示器，递归异或与电路）

异或的递归与数电实现用二选一选择器实现异或函数在异或当中，如果有一项为0，就可以把那一项消掉；如果有一项为1，就是把剩下的所有项运算完的结果取反 （由此在算法当中可以采用递归解决） 当w1为0时&…...

编程日记 2023/10/18 18:59:20

maven-plugin-shade 详解

一、介绍 [1] This plugin provides the capability to package the artifact in an uber-jar, including its dependencies and to shade - i.e. rename - the packages of some of the dependencies. maven-plugin-shade 插件提供了两个能力： 把整个项目&#xf…...

编程日记 2023/10/18 18:58:19

cocosCreator 之 3.x使用NodePool对象池和封装

版本： cocosCreator 3.4.0 语言： TypeScript 环境： Mac NodePool 在项目中频繁的使用instantiate和node.destory对性能有很大的耗费，比如飞机射击中的子弹使用和销毁。因此官方提供了NodePool，它被作为管理节点对象…...

编程日记 2023/10/18 18:57:18

三、RestClient操作索引库与文档

文章目录三、RestClient操作索引库与文档3.1 操作索引库3.2 操作文档结束语三、RestClient操作索引库与文档 ES官方提供了各种不同语言的客户端，用来操作ES。这些客户端的本质就是组装DSL语句，通过http请求发送给ES。官方文档地址: https://www.ela…...

编程日记 2023/10/18 18:56:17

Hadoop3教程（五）：NameNode和SecondaryNameNode

文章目录 （59）NN和2NN的工作机制（60）FsImage镜像文件（61）Edits编辑日志（62）Checkpoint时间设置参考文献 （59）NN和2NN的工作机制 NameNode的数据是存储在磁盘…...

编程日记 2023/10/18 18:55:16

腾讯云我的世界mc服务器多少钱一年？

腾讯云我的世界mc服务器多少钱？95元一年2核2G3M轻量应用服务器、2核4G5M带宽优惠价218元一年、4核8G12M带宽轻量服务器446元一年，云服务器CVM标准型S5实例2核2G优惠价280元一年、2核4G配置服务器748元一年，腾讯云百科txybk.com分享腾讯云我的…...

编程日记 2023/10/18 18:54:15

modelsim实现二选一以及D触发器并仿真

#实验一二选一 module two_1(in1,in2,cho,out); input[3:0] in1,in2; output[3:0] out; reg[3:0] out; input cho; always* begin if(cho0) outin1; else outin2; end endmodule module two1_test(); …...

编程日记 2023/10/18 18:53:14

直线导轨在喷涂行业中的应用场景

直线导轨因其具有精度高、速度快、刚性强、使用寿命长等特点被广泛应用在各行各种中，其中，在喷涂行业中的应用最为广泛，以下是直线导轨在喷涂行业中的应用场景： 1、平面喷涂：直线导轨可以应用在各种机械加工的平面&…...

编程日记 2023/10/18 18:52:14

纯css+js自制下拉框

前提因为html的select标签，下拉框自定义程度非常的低，为了贴合而项目ui显示，所以打算自制下拉框代码 html <div class"pos-rel"><div id"select" class"select get-select"><span class&…...

编程日记 2023/10/18 18:51:12

uniapp在App端如何动态修改原生导航栏？

uniapp在App端如何动态修改原生导航栏？ 文章目录 uniapp在App端如何动态修改原生导航栏？page.json配置修改 buttons 文字修改按钮上的角标设置 searchInput的 focus设置 searchInput的 text 在App端可以通过得到 webview 对象，通过当前 webvi…...

编程日记 2023/10/18 18:50:11

Linux：CPUPower管理器 --- cpufreq解析

一、cpufreq是什么？ cpufreq是Linux内核下的一种功率管理框架，它负责改变CPU的频率，以降低功耗并延长电池寿命。该框架的主要机制是动态调整CPU频率，该频率受限于CPU的负载和功耗。cpufreq能够动态地将频率降低到最低值或最高值&a…...

编程日记 2023/10/18 18:49:10

【嵌入式开发问答】不是普通的嵌入式八股

1. 进程、线程、堆栈、溢出【问：】进程的堆栈的物理内存是什么时候分配的？ 堆栈的大小限制是多大？这个限制可以调整吗？ 当堆栈发生溢出后应用程序会发生什么？ 【答：】...

编程日记 2023/10/18 18:48:09

uni-app学习笔记二十四--showLoading和showModal的用法

showLoading(OBJECT) 显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。 OBJECT参数说明参数类型必填说明平台差异说明titleString是提示的文字内容，显示在loading的下方maskBoolean否是否显示透明蒙层，防止触摸穿透，默…...

编程新知 2025/6/9 14:48:26

智能生成完整 Java 后端架构，告别手动编写 ControllerServiceDao

在 Java 后端开发的漫长征途上，开发者们常常深陷繁琐的基础代码编写泥潭。尤其是 Controller、Service、Dao 这三层代码的手动编写，堪称开发效率的 “拦路虎”。从搭建项目骨架到填充业务逻辑，每一个环节都需要开发者投入大量精力&#xff0c…...

编程新知 2025/6/9 14:29:31

Linux 用户层和内核层锁的实现

目录一、系统调用futex介绍1. 核心机制2. 常见操作3. 工作流程示例（互斥锁）4. 优势5. 注意事项6. 典型应用二、Linux中用户态的锁和内核的锁不是同一个实现吗？2.1 本质区别2.2 用户态锁如何工作（以 pthread_mutex 为例&#xff…...

编程新知 2025/6/9 12:08:08

【仿生机器人】仿生机器人智能架构：从感知到个性的完整设计

仿生机器人智能架构：从感知到个性的完整设计仿生机器人不仅需要模拟人类的外表，更需要具备类人的认知、情感和个性特征。本研究提出了一个综合性的软件架构，实现了从环境感知到情感生成、从实时交互到人格塑造的完整智能系统。该架构突破了…...

编程新知 2025/6/9 1:09:45

使用阿里云百炼embeddings+langchain+Milvus实现简单RAG

使用阿里云百炼embeddingslangchainMilvus实现简单RAG 注意测试时，替换其中的key、文档等 import os from langchain_community.embeddings import DashScopeEmbeddings from langchain_community.vectorstores import Milvus from langchain_text_splitters impor…...

编程新知 2025/6/9 1:03:27

抗辐照MCU在卫星载荷电机控制器中的实践探索

摘要:在航天领域，卫星系统的可靠运行对电子元件的抗辐照性能提出了严苛要求。微控制单元（MCU）作为卫星载荷电机控制器的核心部件，其稳定性与可靠性直接关系到卫星任务的成败。本文聚焦抗辐照MCU在卫星载荷电机控制器中的应用实践&…...

编程新知 2025/6/9 0:58:13

网络协议通俗易懂详解指南

目录 1. 什么是网络协议？ 1.1 协议的本质 1.2 为什么需要协议？ 1.3 协议分层的概念 2. TCP协议详解 - 可靠的信使 📦 2.1 TCP是什么？ 2.2 TCP的核心特性 🔗 面向连接 🛡️ 可靠传输 📊 流量控制 2.3 TCP三次握手 - 建立连接 2.4 TCP四次挥手 - 断开连接…...

编程新知 2025/6/9 0:19:37