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

springboot+html实现简单注册登录

news 2026/2/9 16:26:36

前端：

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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目章节操作，重…...

编程新知 2026/2/8 4:37:41

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/8 4:37:20

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26