耳目一新的滑块版登录注册界面~
又到了毕业季，大家做毕设的时候总会参考已有的案例，不过大多产品的样式非常单一雷同。本帖博主给大家分享一个比较别树一帜的登录界面，如下：
如果没有账号，点击“去注册”，则会产生如下的效果：
前端的代码这里不细说了，大家直接CV即可：（图片名什么的自定义即可）和图片中稍微有些不一样，因为博主针对数据库和后端进一步完善了修改~
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>滑动切换的注册登录界面</title><style>* {/* 初始化 */margin: 0;padding: 0;}body {/* 100%窗口高度 */height: 100vh;/* 弹性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 *//* background: linear-gradient(200deg, #f3e7e9, #e3eeff); */background-image: url(S05-登录页面.jpg);/*background-color: honeydew;*/}.container {background-color: #fff;opacity: 90%;width: 650px;height: 415px;border-radius: 5px;/* 阴影 */box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);/* 相对定位 */position: relative;}.form-box {/* 绝对定位 */position: absolute;top: -10%;left: 5%;background-color:#4169E1;width: 320px;height: 500px;border-radius: 5px;box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);display: flex;justify-content: center;align-items: center;z-index: 2;/* 动画过渡 加速后减速 */transition: 0.5s ease-in-out;}.register-box,.login-box {/* 弹性布局 垂直排列 */display: flex;flex-direction: column;align-items: center;width: 100%;}.hidden {display: none;transition: 0.5s;}h1 {text-align: center;margin-bottom: 25px;/* 大写 */text-transform: uppercase;color: #fff;/* 字间距 */letter-spacing: 5px;}input {background-color: transparent;width: 70%;color: #fff;border: none;/* 下边框样式 */border-bottom: 1px solid rgba(255, 255, 255, 0.4);padding: 10px 0;text-indent: 10px;margin: 8px 0;font-size: 14px;letter-spacing: 2px;}input::placeholder {color: #fff;}input:focus {color: #87CEFA;outline: none;border-bottom: 1px solid #87CEEB;transition: 0.5s;}input:focus::placeholder {opacity: 0;}.button1 {width: 70%;margin-top: 35px;background-color: #f6f6f6;outline: none;border-radius: 8px;padding: 13px;color: #4169E1;font-size: large;letter-spacing: 2px;border: none;cursor: pointer;}.button1:hover {background-color:#000080;color: #f6f6f6;transition: background-color 0.5s ease;}.con-box {width: 50%;/* 弹性布局 垂直排列 居中 */display: flex;flex-direction: column;justify-content: center;align-items: center;/* 绝对定位 居中 */position: absolute;top: 50%;transform: translateY(-50%);}.con-box.left {left: -2%;}.con-box.right {right: -2%;}.con-box h2 {color: #8e9aaf;font-size: 25px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-bottom: 4px;}.con-box p {font-size: 13px;letter-spacing: 2px;color: #8e9aaf;text-align: center;}.con-box span {color: #4169E1;}.con-box img {width: 150px;height: 150px;opacity: 0.9;margin: 40px 0;}.con-box button {margin-top: 3%;background-color: #fff;color: #1E90FF;border: 1px solid #4682B4;padding: 6px 10px;border-radius: 5px;letter-spacing: 1px;outline: none;cursor: pointer;}.con-box button:hover {background-color: #6495ED;color: #fff;}</style>
</head><body><div class="container"><div class="form-box"><!-- 注册 --><form action="/CX_DL1_war/registerServlet" method="get"><div class="register-box hidden"><h1>register</h1><input type="text" placeholder="用户名"name="username1" id="username1"><input type="password" placeholder="密码" name="password1" id="password1"><input type="submit" class="button1" value="注册"></div></form><!-- 登录 --><form action="/CX_DL1_war/loginServlet"><div class="login-box"><h1>login</h1><input type="text" placeholder="用户名" id="username" name="username"><input type="password" placeholder="密码" id="password" name="password"><input type="submit" class="button1" value="登录"></div></form></div><div class="con-box left"><h2>欢迎来到<span>管理系统</span></h2><p>快来完善个人<span>信息</span>吧</p><img src="index1.jpg"alt=""><p>已有账号</p><button id="login">去登录</button></div><div class="con-box right"><h2>欢迎来到<span>管理系统</span></h2><p>快来看看你的<span>账户</span>吧</p><img src="index2.jpg" alt=""><p>没有账号？</p><button id="register">去注册</button></div></div><script>// 要操作到的元素let login = document.getElementById('login');let register = document.getElementById('register');let form_box = document.getElementsByClassName('form-box')[0];let register_box = document.getElementsByClassName('register-box')[0];let login_box = document.getElementsByClassName('login-box')[0];// 去注册按钮点击事件register.addEventListener('click', () => {form_box.style.transform = 'translateX(80%)';login_box.classList.add('hidden');register_box.classList.remove('hidden');})// 去登录按钮点击事件login.addEventListener('click', () => {form_box.style.transform = 'translateX(0%)';register_box.classList.add('hidden');login_box.classList.remove('hidden');})</script>
</body></html>接下来详细说一下后端：
目录
一.用户登录
二.用户注册
三.项目源码及项目展示
一.用户登录
开发的流程大致如下：
- 用户填写用户名密码，提交到LoginServlet
- 在LoginServlet中使用Mybatis查询数据库，验证密码和用户名是否正确
- 如果正确，响应登录成功， 否则响应登录失败
首先，将上面的html粘贴到Webapp目录下：
然后使用你的Navicat或者DataGrip，创建数据库资源：
create database db1;
use db1;-- 创建用户表
CREATE TABLE tb_user(id int primary key auto_increment,username varchar(20) unique,password varchar(32)
);-- 添加数据
INSERT INTO tb_user(username,password) values('zhangsan','123'),('lisi','234');SELECT * FROM tb_user;创建pojo实体类目录。
创建实体类User：
package pojo;public class User {private Integer id;private String username;private String password;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {return "User{" +"id=" + id +", username='" + username + '\'' +", password='" + password + '\'' +'}';}
}添加依赖：（可以不一样但是建议以样版为准）
<dependencies><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.5</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.27</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version></dependency></dependencies>然后在resources文件夹下添加Mybatis-config.xml，密码之类的记得改为自己的：（还有5代的驱动jar包改为8代jar包的细节记得修改，懂的都懂，不然会500报错~）
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration><!--起别名--><typeAliases><package name="pojo"/></typeAliases><environments default="development"><environment id="development"><transactionManager type="JDBC"/><dataSource type="POOLED"><property name="driver" value="com.mysql.cj.jdbc.Driver"/><property name="url" value="jdbc:mysql:///db1?useSSL=false"/><property name="username" value="root"/><property name="password" value="219744"/></dataSource></environment></environments><mappers><mapper resource="mapper/UserMapper.xml"/></mappers>
</configuration>创建mapper目录，创建UserMapper接口：
并在resources中同样创建mapper目录，添加UserMapper.xml文件：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="mapper.UserMapper"></mapper>mapper接口中添加如下代码：
@Select("select * from tb_user where username= #{username} and password=#{password}")User select(@Param("username")String usernaem, @Param("password")String password);
然后定义登录的Servlet：（LoginServlet）
package web;import com.sun.net.httpserver.HttpServer;
import mapper.UserMapper;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import pojo.User;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username=req.getParameter("username");String password=req.getParameter("password");String resource = "mybatis-config.xml";InputStream inputStream = Resources.getResourceAsStream(resource);SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);//2.获取SqlSession对象SqlSession sqlSession= sqlSessionFactory.openSession();UserMapper userMapper=sqlSession.getMapper(UserMapper.class);User user=userMapper.select(username,password);sqlSession.close();resp.setContentType("text/html;charset=utf-8");PrintWriter writer=resp.getWriter();if(user!=null){writer.write("yes~");}else {writer.write("NO~");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {super.doPost(req, resp);}
}二.用户注册
mapper接口中添加如下代码：
@Select("select * from tb_user where username = #{username}")User selectByUsername(String username);@Insert("insert into tb_user values (null,#{username},#{password})")void add(User user);定义注册的Servlet：
package web;import mapper.UserMapper;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import pojo.User;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username=req.getParameter("username1");String password=req.getParameter("password1");User user=new User();user.setUsername(username);user.setPassword(password);String resource = "mybatis-config.xml";InputStream inputStream = Resources.getResourceAsStream(resource);SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);//2.获取SqlSession对象SqlSession sqlSession= sqlSessionFactory.openSession();UserMapper userMapper=sqlSession.getMapper(UserMapper.class);User u=userMapper.selectByUsername(username);if(u==null){resp.setContentType("text/html;charset=utf-8");resp.getWriter().write("注册成功~");userMapper.add(user);sqlSession.commit();sqlSession.close();}else {resp.setContentType("text/html;charset=utf-8");resp.getWriter().write("用户已经存在~");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {}
}
三.项目源码及项目展示
如上是博主自己的版本，切忌不要随便修改名字和路径！！！
提供学习版源码如下：
链接：https://pan.baidu.com/s/1vfWoZNQL35Nbj4uL1FNY4Q
提取码：yu24
运行Tomcat并登录首页：
登录成功后有相关提示：
注册新的账号会同步到数据库中并做出提示：
由于主键约束，不允许重复使用用户名~
相关文章：
耳目一新的滑块版登录注册界面~
又到了毕业季，大家做毕设的时候总会参考已有的案例，不过大多产品的样式非常单一雷同。本帖博主给大家分享一个比较别树一帜的登录界面，如下： 如果没有账号，点击“去注册”，则会产生如下的效果： …...
分布式系统的发展史
目录 🐳今日良言：且视他人之疑目如盏盏鬼火，大胆地去走自己的夜路 🐇一、常见概念 🐇二、发展史 今日良言：且视他人之疑目如盏盏鬼火，大胆地去走自己的夜路 一、常见概念 在正式介绍分布式系…...
2024年腾讯云服务器最新价格表，CPU内存带宽系统盘报价
腾讯云服务器价格表2024年最新价格，轻量2核2G3M服务器61元一年、2核2G4M服务器99元1年，三年560元、2核4G5M服务器165元一年、3年900元、轻量4核8M12M服务器646元15个月、4核16G10M配置32元1个月、8核32G配置115元1个月，345元3个月。CVM云服务…...
深入解析Oracle数据库ORA-01427错误：单行子查询返回多行的问题与解决办法
深入解析Oracle数据库ORA-01427错误：单行子查询返回多行的问题与解决办法 1、引言2、错误描述3、常见场景与示例4、解决方案5、声明 1、引言 在Oracle数据库日常运维与开发过程中，经常会遇到ORA-01427错误，这是一个很典型的数据库错误提示&am…...
【正点原子FreeRTOS学习笔记】————（12）信号量
这里写目录标题 一、信号量的简介（了解）二、二值信号量（熟悉）三、二值信号量实验（掌握）四、计数型信号量（熟悉）五、计数型信号量实验（掌握）六、优先级翻转简介…...
【数据分享】1929-2023年全球站点的逐年平均露点（Shp\Excel\免费获取）
气象数据是在各项研究中都经常使用的数据，气象指标包括气温、风速、降水、能见度等指标，说到气象数据，最详细的气象数据是具体到气象监测站点的数据！ 有关气象指标的监测站点数据，之前我们分享过1929-2023年全球气象站…...
PHP+MySQL开发组合：智慧同城便民信息小程序源码系统 带完整的安装代码包以及安装部署教程
当前，城市生活的节奏日益加快，人们对各类便民信息的需求也愈发迫切。无论是寻找家政服务、二手交易，还是发布租房、求职信息，一个高效、便捷的信息平台显得尤为重要。传统的信息发布方式往往存在信息更新不及时、查找困难等问题&a…...
Linux相关命令（1）
1、找出文件夹下包含 “aaa” 同时不包含 “bbb”的文件，然后把他们重新生成一下。要求只能用一行命令。 find ./ -type f -name "*aaa*" ! -name "*bbb*" -exec touch {} \;文件系统操作命令 df：列出文件系统的整体磁盘使用情况 …...
NO9 蓝桥杯单片机实践之串口通信的使用
1 回顾 串口通信的代码编写结构还是与中断一样，不同的是： 初始中断函数条件涉及到串口通信相关的寄存器和定时器1相关的寄存器（定时器1用于产生波特率），但初始条件中的中断寄存器只考虑串口通信而不考虑定时器1。 vo…...
数据库管理-第163期 19c重建ADG的两个方法（20240323
数据库管理163期 2024-03-23 数据库管理-第163期 19c重建ADG的两个方法（20240323）1 ORA-081032 新办法1 关闭MRP2 恢复备库3 其他操作4 启动备库5 启动MRP 3 老办法4 预告总结 数据库管理-第163期 19c重建ADG的两个方法（20240323）…...
8款常见的自动化测试开源框架
在如今开源的时代，我们就不要再闭门造车了，热烈的拥抱开源吧！本文针对性能测试、Web UI 测试、API 测试、数据库测试、接口测试、单元测试等方面，为大家整理了github或码云上优秀的自动化测试开源项目，希望能给大家带来…...
【QT】：基本框架
基本框架 一.创建程序二.初识函数1.main2.Widget.h3.Wight.cpp4.Wight.ui5.文件名.pro 三.生成的中间文件 本系列的Qt均使用Qt Creator进行程序编写。 一.创建程序 二.初识函数 1.main 2.Widget.h 3.Wight.cpp 4.Wight.ui 此时再点击编辑，就看到了ui文件的本体了。…...
【Python】定时更换clashx工具
An empty street An empty house A hole inside my heart I’m all alone The rooms are getting smaller I wonder how I wonder why I wonder where they are The days we had The songs we sang together Oh yeah And oh, my love I’m holding on forever Reaching for a l…...
2024年第16届大广赛新命题发布-爱华仕箱包
2024年3月27日，2024年第16届大广赛发布了新的命题，爱华仕箱包命题，自2017年起，爱华仕箱包已连续8年担任全国大学生广告艺术大赛命题单位。 爱华仕现已实现百货、超市、电商、礼品、投标、海外市场6大零售网络的全覆盖，…...
前端理论总结（js）——闭包和内存泄漏
闭包 什么是闭包？ 函数内部和函数外部连接起来的桥梁，可以在一个内层函数中访问到其外层函数的作用域 为什么要用 封装变量 收敛权限 临时变量持久化 优点 1.保护函数内的变量安全 2.在内存中维持一个变量(用的太多就变成了缺点，…...
PHP页面如何实现设置独立访问密码
PHP网页如果需要查看信息必须输入密码，验证后才可显示出内容的代码如何实现？ 对某些php页面设置单独的访问密码,如果密码不正确则无法查看内容,相当于对页面进行了一个加密。 如何实现这个效果，详细教程可以参考：PHP页面如何实现…...
M1 mac安装 Parallels Desktop 18 激活
M1 mac安装 Parallels Desktop 18 激活 下载安装Parallels Desktop 18.1.1 (53328) 激活1. 拷贝prl_disp_service2. 在终端打开Crack所在位置3. 输入命令，激活成功 下载 安装包和激活文件下载地址 链接: https://pan.baidu.com/s/1EjT7xeEDcntIIoOvvhBDfg?pwd9pue …...
嵌入式学习46——硬件相关2串口通信
串口： 端口： COM 波特率： 9600 115200 （bps） 每秒传输的数据…...
企业产品网络安全建设日志3月20
今天主要以下几个事情 确定了OCI当前情况下，更新某安全配置会导致链接中断 这问题说大不大，说小不小。 由此引申出各云服务器产品的完善度： AWS＞OCI＞其他 国内一些安全公司提供的WAF功能，缺点在于其全球的…...
BRICK POP展示了有趣的链上游戏玩法与奖励
新游戏BRICK POP将Sui区块链技术与低Gas费用，以及我们在Web3游戏开发方面的专业知识无缝结合。通过充分利用Sui和我们自己的INNO平台的优势，BRICK POP为玩家提供了一个融合了前沿技术和引人入胜游戏的沉浸式游戏体验。BRICK POP游戏设计为实时交易和高用…...
jetcache 2级缓存模式实现批量清除
需求 希望能够实现清理指定对象缓存的方法，例如缓存了User表，当User表巨大时，通过id全量去清理不现实，耗费资源也巨大。因此需要能够支持清理指定本地和远程缓存的批量方法。 分析 查看jetcache生成的cache接口，并没…...
【MD】激光驱动原子动力学的全尺寸从头算模拟
Zeng Q, Chen B, Zhang S, et al. Full-scale ab initio simulations of laser-driven atomistic dynamics[J]. npj Computational Materials, 2023, 9(1): 213.核心研究内容： 本文研究了激光驱动的原子动力学的全尺度从头算模拟。研究的重点是探讨在极端条件下材料…...
访问者模式（数据与行为解耦）
目录 前言 UML plantuml 类图 实战代码 SimpleFileVisitor FileVisitor 接口 删除指定文件夹 模板 IVisitor IVisitable Client 前言 一个类由成员变量和方法组成，成员变量即是类的数据结构，方法则是类的行为。 如果一个类的数据结构稳定&am…...
LeetCode：1319. 连通网络的操作次数（并查集 Java）
目录 1319. 连通网络的操作次数 题目描述： 实现代码与解析： 并查集 原理思路： 1319. 连通网络的操作次数 题目描述： 用以太网线缆将 n 台计算机连接成一个网络，计算机的编号从 0 到 n-1。线缆用 connections 表示…...
C++ STL教程
C STL教程 文章目录 C STL教程1.1 std::vector1.1.1vector的定义1.1.2vector容器的初始化1.1.3vector容器内元素的访问和修改1.1.4vector中的常用函数 1.2 std::string1.2.1string的定义1.2.2string的初始化1.2.3string中元素的访问和修改1.2.4string中连接字符串1.2.5string中…...
系列学习前端之第 6 章：一文掌握 jQuery（熟悉即可）
前言：为什么说 jQuery 熟悉即可，已日渐过时？ 作为前端开发中常用的两个库或框架：Vue.js 和 jQuery。不少开发者想要学习 Vue.js 时，都会有一个疑惑：学习 Vue.js 是否一定要学习 jQuery？ 从几个…...
python 中判断文件、目录是否存在的方法
判断目录是否存在并创建目录 一、实现上传文件功能二、判断目录是否存在的办法2.1、使用os模块2.1.1、判断目录是否存在2.1.2、os.makedirs()：递归创建目录 2.2、使用pathlib模块2.2.1、path.exist()判断目录是否存在2.2.1、path.mkdir()：创建目录 2.3、…...
Redis的安装与启动
一、Linux环境安装&启动Redis 1. 安装步骤 第一步：在官网下载好Redis安装包，上传到Linux中并进行解压到相应（如/opt/software/）目录中；（注意：完成了第二步后，即安装了C/C语言…...
WebGIS航线编辑器(无人机航线规划)
无人机航点、航线规划，实现全自动航点飞行作业及飞行航拍。禁飞区、作业区功能保障飞行安全。 GIS引擎加载 const viewer new Cesium.Viewer("cesiumContainer", { imageryProvider: new Cesium.IonImageryProvider({ assetId: 3872 }), }); const im…...
STEP 格式三维模型读取
STEP是常用的三维模型存储格式，使用Express语言描述几何图形，文件存储方式为BRep，分为STEP203和STEP214，后者多了颜色信息，opencascade中提供了相应算法读取STEP文件。 #include <STEPControl_Reader.hxx>TopoD…...