写的一个网页登录注册模板（css+js），注册成功后把账号保存到MySQL数据库，登录时从数据库查找进行验证（jsp+javabean）
2024-04-27 20:44:57
首先是网页前端的设计，使用css美化（字体使用Google font，图标使用font awemome，颜色使用palettes|flat ui colors，谷歌可找到，个人觉得挺好用）
使用了简单的js进行表单验证用户名长度、密码、确认密码
登录界面
注册界面
把前端代码写到jsp里面了，通过表单post提交到action，进行相应的业务逻辑处理操作
**main.jsp**
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><meta charset="utf-8"><title>login-register</title><link rel="stylesheet" type="text/css" href="css/style.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body><div class="bt"><i class="fas fa-long-arrow-alt-right"></i>Login my own account<br/></div><div class="register"><i class="fas fa-registered"></i>Register new account</div><div class="login-box"><div class="hide-bt1"><i class="fas fa-times"></i></div><form action="login_check.jsp" method="post" class="login-form"><h1>Welcome</h1><input type="text" name="username" id="" class="text" placeholder="USERNAME" /><input type="password" name="password" id="" class="text" placeholder="PASSWORD" /><input type="submit" name="" class="login-bt" id="" value="Login" /></form></div><div class="register-box"><div class="hide-bt2"><i class="fas fa-times"></i></div><form action="register_check.jsp" method="post" class="register-form"><h1>Welcome</h1><input type="text" name="username" id="username" class="text" placeholder="USERNAME" "checkregister_username(this)"/><input type="password" name="password" id="password" class="text" placeholder="PASSWORD" "checkregister_pass(this)"/><input type="password" name="repassword" id="repassword" class="text" placeholder="REPASSWORD" "checkregister_repass(this)"/><input type="submit" name="" class="register-bt" id="" value="Register" /></form></div>
</body>
</html>
<script type="text/javascript">$(".bt").on("click",function(){$(".login-box").toggleClass("showed_login");})$(".register").on("click",function(){$(".register-box").toggleClass("showed_register");})$(".hide-bt1").on("click",function(){$(".login-box").toggleClass("showed_login");})$(".hide-bt2").on("click",function(){$(".register-box").toggleClass("showed_register");})function checkregister_username(username) {if (username.value.length < 3 || username.value.length > 10) {alert("用户名必须是3-10位");}}function checkregister_pass(pass){var repass=document.getElementById("repassword").value;if(pass.value.length<3||pass.value.length>10){alert("密码必须是3-10位");}}function checkregister_repass (repass) {var pass=document.getElementById("password").value;if(repass.value!=pass){alert("请输入密码和确认密码相等");}}
</script>
css样式
使用jquery中toggleClass来切换页面，login页面在left=-100%处，register页面在-200%处
*{font-family: "montserrat",sans-serif;
}
body{margin: 0;padding: 0;background: #333;
}
.login-box{position: absolute;top: 0;left: -100%;width: 100%;height: 100vh;background-image: linear-gradient(45deg,#9fbaa8,#31354c);
}
.login-form{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: white;text-align: center;
}
.login-form h1{font-family: 'Pacifico', cursive;font-weight: 400;font-size: 40px;margin-top: 0;
}
.text{display: block;box-sizing: border-box;width: 240px;background: #ffffff28;border: 1px solid white;padding: 10px 20px;color: white;outline: none;margin: 10px 0;border-radius: 6px;text-align: center;
}
.login-bt{font-family: 'Pacifico', cursive;width: 240px;background: #c0392b;border: 0;color: white;padding: 10px;border-radius: 6px;cursor: pointer;
}
.login-bt:hover{background: #e74c3c;
}
.hide-bt1{color: #000;position: absolute;top: 40px;right: 40px;cursor: pointer;font-size: 24px;}
.bt{left: 50%;position: absolute;top: 50%;transform: translate(-50%,-50%);color: white;border: 2px solid;padding: 10px;cursor: pointer;
}
.register{left: 50%;position: absolute;top: 60%;transform: translate(-50%,-50%);color: white;border: 2px solid;padding: 10px;cursor: pointer;
}
.showed_login{left: 0%;
}.register-box{position: absolute;top: 0;left: -200%;width: 100%;height: 100vh;background-image: linear-gradient(45deg,#9fbaa8,#31354c);
}
.register-form{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: white;text-align: center;
}
.register-form h1{font-family: 'Pacifico', cursive;font-weight: 400;font-size: 40px;margin-top: 0;
}
.register-bt{font-family: 'Pacifico', cursive;width: 240px;background: #c0392b;border: 0;color: white;padding: 10px;border-radius: 6px;cursor: pointer;
}
.register-bt:hover{background: #e74c3c;
}
.showed_register{left: 0%;
}
.hide-bt2{color: #000;position: absolute;top: 40px;right: 40px;cursor: pointer;font-size: 24px;}
前端代码写完了便是对数据进行处理的部分
我在这里正在学习jsp，便选择了jsp+javabean
logincheck.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="dao.DaoFactory" %>
<%request.setCharacterEncoding("utf-8");
%>
<html>
<head><title>Title</title>
</head>
<body><%String username=request.getParameter("username");String password=request.getParameter("password");boolean flag= false;try {flag = DaoFactory.getUserImplinstance().hasaccount(username,password);} catch (Exception e) {e.printStackTrace();}if(flag){%><jsp:forward page="index2.jsp"/><%}else{%><jsp:forward page="index.jsp"/><%}%>
</body>
</html>
registercheck.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="dao.DaoFactory" %>
<%@ page import="dao.User" %>
<%request.setCharacterEncoding("utf-8");
%>
<html>
<head><title>Title</title>
</head>
<body><%User user=new User();user.set_username(request.getParameter("username"));user.set_password(request.getParameter("password"));boolean flag= false;try {flag = DaoFactory.getUserImplinstance().addaccount(user);} catch (Exception e) {e.printStackTrace();}if(flag){%><h1>注册成功！<br/></h1><a href="index.jsp">返回登录</a><%}else {%><jsp:forward page="index.jsp"/><%}%>
</body>
</html>
数据库操作使用javabean中的dao模式
首先是用户账号信息类
package dao;public class User {private String username;private String password;public String get_username(){return this.username;}public String get_password(){return this.password;}public void set_username(String username){this.username=username;}public void set_password(String password){this.password=password;}
}业务逻辑dao接口
package dao;
import java.util.*;
public interface UserDao {public boolean hasaccount(String username,String password) throws Exception;public boolean addaccount(User user) throws Exception;
}数据库连接
package dao;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;public class DBconnection {private static final String Driver="com.mysql.cj.jdbc.Driver";private static final String URl="jdbc:mysql://localhost:3306/mygame?useUnicode=true&serverTimezone=UTC&characterEncoding-UTF8";private static final String user="root";private static final String password="xxxxx";private Connection con=null;public DBconnection() throws SQLException, ClassNotFoundException {Class.forName(Driver);this.con= DriverManager.getConnection(URl,user,password);}public Connection getConnection(){return this.con;}public void close() throws SQLException {if(this.con!=null){this.con.close();}}
}业务逻辑接口具体方法实现
package dao;import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;public class UserDaoImpl implements UserDao{public Connection con=null;public PreparedStatement psmt=null;public UserDaoImpl(Connection con){this.con=con;}@Overridepublic boolean hasaccount(String username,String password) throws Exception {boolean falg=false;String sql="select password from mygame.user where username=? limit 1";this.psmt=this.con.prepareStatement(sql);this.psmt.setString(1,username);ResultSet rs=this.psmt.executeQuery();while(rs.next()){String check_pass=rs.getString(1);if(check_pass.equals(password)) {falg = true;}}this.psmt.close();return falg;}@Overridepublic boolean addaccount(User user) throws Exception {boolean flag=false;String sql="insert into mygame.user(username,password) values(?,?)";this.psmt=this.con.prepareStatement(sql);this.psmt.setString(1,user.get_username());this.psmt.setString(2,user.get_password());if(this.psmt.executeUpdate()>0){flag=true;}this.psmt.close();;return flag;}
}数据库连接+业务逻辑操作
package dao;import java.util.List;public class UserService implements UserDao{private DBconnection dbcon=null;private UserDao dao=null;public UserService()throws Exception{this.dbcon=new DBconnection();this.dao=new UserDaoImpl(this.dbcon.getConnection());}@Overridepublic boolean hasaccount(String username,String password) throws Exception {boolean flag=false;if(this.dao.hasaccount(username,password)){flag=true;}this.dbcon.close();return flag;}@Overridepublic boolean addaccount(User user) throws Exception {boolean flag=false;try{if(this.dao.addaccount(user)){flag=true;}}catch (Exception e){e.printStackTrace();}finally {this.dbcon.close();}return flag;}
}工厂类
package dao;public class DaoFactory {public static UserDao getUserImplinstance()throws Exception{return new UserService();}
}
写的一个网页登录注册模板（css+js），注册成功后把账号保存到MySQL数据库，登录时从数据库查找进行验证（jsp+javabean）相关推荐
- Python 多线程、利用request使用代理、利用递归深度抓取电影网页的内容并将电影的介绍和下载链接保存到mysql中
本文仅为学习python过程的一个笔记,其中还有一些bug! 还请各位大佬赐教 有些专业的说法还不是很熟悉,欢迎各位大佬帮忙指出 本人时一个新晋奶爸,而立之年突然想转业,想学习python 先介绍一个 ...
- 有趣的HTML实例（十五） 注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编码实现 i ...
- 有趣的HTML实例（七） 注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编 ...
- HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)...
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
- HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
- [html] 对于写一个页面布局，html/css/js这三者你是先写哪个后写哪个？
[html] 对于写一个页面布局,html/css/js这三者你是先写哪个后写哪个? 快捷键创建模板html+css写出结构写js做交互 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
- ❤送女朋友生日快乐祝福网页制作❤（HTML+CSS+JS）
❤女朋友生日快乐祝福网页制作❤(HTML+CSS+JS) 程序员情人节表白网页, 生日祝福网页制作 ❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板 HTML生日快乐 ...
- HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 临近期末, 你还在为HTML网页设计结 ...
- HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员 ...
最新文章
- Go 学习笔记（78）— Go 标准库 net/http 创建服务端（接收 GET、POST 请求）
- 《OpenCV3编程入门》学习笔记7 图像变换（五 ）直方图均衡化
- git换行符之autoCRLF配置的意义
- GGTalk ——C#开源即时通讯系统
- Database · 理论基础 · 关于一致性协议和分布式锁
- 谷歌体三维捕捉新突破：实现后期任意照明修改
- spring框架注解多？注解到底是个什么东西？这篇文章给你讲明白
- 画活动图教程_二次元人物头发怎么画？画好头发有什么技巧？
- Beanutils-No origin bean specified问题分析
- 个推开发者服务进阶之路
- Node.js webpack 加载器
- javascript学习随笔(编写浏览器脚本 Navigator Scripting )
- 400 道前端面试题！阿里、头条、网易等 19 家大厂面经全公开！
- 清理C盘内存有用的办法
- 计算机培训心得ppt展示,ppt制作学习心得
- css设置背景图片透明度
- VScode光标乱跳、换行失灵、保存导致光标乱跳等解决办法
- Android系统优化的那些年那些事
- matlab 简单算例,MATLAB 3D 动画简单实例 | 学步园
- 笔记本升级--固态硬盘安装双系统win10-CentOS