目录
1.效果展示
2.环境搭建
3.前端代码
4.后端代码
表

登入界面

注册界面

注册一个账号


登入该账号
1.尝试输入错误密码

2.输入正确密码


再次注册该账号


MySQL下载安装网上都有可以参考http://t.csdn.cn/czWMN
Eclipse搭载MySQLhttp://t.csdn.cn/NKXAh
这边说一点 javaWeb项目中无法驱动数据库 http://t.csdn.cn/jwKcA
tomcat下载安装 http://t.csdn.cn/EKMxB
Eclipse搭载tomcat http://t.csdn.cn/bCd6q
搭配过程中可能出现的问题:
1.设置里面没有Server http://t.csdn.cn/LZCeq
2.以上办法出现无法安装 http://t.csdn.cn/nVlL9
其他的网上都有
1.hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
background-size: 100% 130%;
}
#login_box {
width: 20%;
height: 400px;
background-color: #262d2a60;
margin: auto;
margin-top: 10%;
text-align: center;
border-radius: 10px;
padding: 50px 50px;
}
h2 {
color: #ffffff90;
margin-top: 5%;
}
#input-box {
margin-top: 5%;
}
span {
color: #fff;
}
input {
border: 0;
width: 60%;
font-size: 15px;
color: #fff;
background: transparent;
border-bottom: 2px solid #fff;
padding: 5px 10px;
outline: none;
margin-top: 10px;
}
#submitbtn {
margin-top: 50px;
width: 60%;
height: 40px;
border-radius: 10px;
border: 0;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 15px;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
a {
color: #2f6d84;
text-decoration: none;
}
#bottom{
margin-top: 50px;
}
#signup{
margin-left: 100px;
}
#loginFail{
color: rgb(215, 40, 40);
}
</style>
<script>
function check(){
var no=document.getElementById("no").value;
var pw=document.getElementById("pw").value;
var legal=true;
if(no.length<8||no.length>20)legal=false;
else if(pw.length<8||pw.length>20)legal=false;
if(!legal)document.getElementById("loginFail").innerHTML="账号或者密码错误";
return legal;
}
function deleteFailtext(){
document.getElementById("loginFail").innerHTML="";
}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// form 表单提交数据的话 会自动跳转 我并不希望他这么做
//用ajax
function testAjax(){
//简单的判断
if(!check())return;
$.ajax({
url: "HelloForm", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
data: {
"username": document.getElementById("no").value,
"password": document.getElementById("pw").value
}, //参数值
type: "GET",
success: function(req) {
var login=req[0].login;
//登入成功
if(login=="true"){
window.location.href="MainPage.html";
}
else {
$("#loginFail").html("账号或者密码错误");
}
},
error: function() {
//请求出错处理
//可能是返回的json格式出错
alert("error");
}
});
}
</script>
</head>
<body>
<div id="login_box">
<h2>LOGIN</h2>
<form action="HelloForm" method="post" target="myIframe">
<span id="loginFail"></span>
<div id="input_box">
<input type="text" id="no" name="username" placeholder="请输入用户名" onclick="deleteFailtext()">
</div>
<div class="input_box">
<input type="password" id="pw" name="password" placeholder="请输入密码" onclick="deleteFailtext()">
</div>
<input type="button" id="submitbtn" value="登入" onclick="testAjax()">
</form>
<div id="bottom">
<a href="misspassword.html" id="misspassword">忘记密码?</a>
<a href="signup.html" id="signup">注册</a>
</div>
</div>
</body>
</html>
2.signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url('http://pic1.win4000.com/wallpaper/4/591564dfe432a.jpg') no-repeat;
background-size: 100% 130%;
}
#login_box {
width: 20%;
height: 400px;
background-color: #262d2a60;
margin: auto;
margin-top: 10%;
text-align: center;
border-radius: 10px;
padding: 50px 50px;
}
h2 {
color: #ffffff90;
margin-top: 5%;
}
#input-box {
margin-top: 5%;
}
span {
color: #fff;
}
input {
border: 0;
width: 60%;
font-size: 15px;
color: #fff;
background: transparent;
border-bottom: 2px solid #fff;
padding: 5px 10px;
outline: none;
margin-top: 10px;
}
#submitbtn {
margin-top: 50px;
width: 60%;
height: 40px;
border-radius: 10px;
border: 0;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 15px;
background-image: linear-gradient(to right, #30cfd0, #330867);
}
a {
color: #2f6d84;
text-decoration: none;
}
</style>
<script>
function nocheck(){
var legal=true;
var ps=document.getElementById("no").value;
if(ps.length==0){
document.getElementById("noinfor").innerHTML="";
legal=false;
return;
}
if(ps.length!=11){
legal=false;
document.getElementById("noinfor").innerHTML="×";
}
else document.getElementById("noinfor").innerHTML="√";
return legal;
}
function firstpwcheck(){
var legal=true;
var ps=document.getElementById("pw").value;
if(ps.length==0){
document.getElementById("firpwinfor").innerHTML="";
legal=false;
return;
}
if(ps.length<8||ps.length>20){
document.getElementById("firpwinfor").innerHTML="×";
legal=false;
}
else {
document.getElementById("firpwinfor").innerHTML="√";
}
return legal;
}
function secpwcheck(){
var legal=true;
var psa=document.getElementById("pwa").value;
var ps=document.getElementById("pw").value;
if(psa.length==0){
document.getElementById("secpwinfor").innerHTML="";
legal=false;
return;
}
if(ps!=psa){
document.getElementById("secpwinfor").innerHTML="×";
legal=false;
return;
}
document.getElementById("secpwinfor").innerHTML="√";
return legal;
}
function usernamecheck(){
var legal=true;
var ps=document.getElementById("username").value;
if(ps.length==0){
document.getElementById("usernameinfor").innerHTML="";
legal=false;
return;
}
document.getElementById("usernameinfor").innerHTML="√";
return legal;
}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// form 表单提交数据的话 会自动跳转 我并不希望他这么做
//用ajax
function testAjax(){
//简单的判断
if(!nocheck()||!usernamecheck()||!firstpwcheck()||!secpwcheck()){
alert("请完善所有信息");
return;
}
$.ajax({
url: "register", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
data: {
"no": document.getElementById("no").value,
"password": document.getElementById("pw").value,
"username": document.getElementById("username").value
}, //参数值
type: "GET",
success: function(req) {
var signup=req[0].flag;
//登入成功跳转到登入界面
if(signup=="true"){
alert("注册成功!请返回登入");
window.location.href="hello.html";
}
else {
alert("注册失败!用户名已存在");
}
},
error: function() {
//请求出错处理
//可能是返回的json格式出错
alert("error");
}
});
}
</script>
</head>
<body>
<div id="login_box">
<h2>SIGN UP</h2>
<form action="HelloForm" method="post">
<div id="input_box">
<input type="text" id="no" name="no" placeholder="请输入用户名(手机号或者邮箱)" onkeyup="nocheck()">
<span id="noinfor"></span>
</div>
<div id="input_box">
<input type="text" id="username" name="username" placeholder="请输入昵称" onkeyup="usernamecheck()">
<span id="usernameinfor"></span>
</div>
<div class="input_box">
<input type="password" id="pw" name="password" placeholder="请输入密码" onkeyup="firstpwcheck()">
<span id="firpwinfor"></span>
</div>
<div class="input_box">
<input type="password" id="pwa" name="passworda" placeholder="请再次输入密码" onkeyup="secpwcheck()">
<span id="secpwinfor"></span>
</div>
<input type="button" id="submitbtn" value="注册" onclick="testAjax()">
</form>
<div id="bottom">
</div>
</div>
</body>
</html>
内容我就不解释了html没怎么学,说一下前后端数据交互问题吧
form表单交互
<form action="后端接受方地址" method="方式POST或者GET" target="myIframe">
<span id="loginFail"></span>
<div id="input_box">
<input type="text" id="no" name="username" placeholder="请输入用户名" onclick="deleteFailtext()">
</div>
<div class="input_box">
<input type="password" id="pw" name="password" placeholder="请输入密码" onclick="deleteFailtext()">
</div>
<input type="submit" id="submitbtn" value="登入">
</form>
按钮type得是submit,会跳转
ajax交互
function testAjax(){
$.ajax({
url: "HelloForm", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
data: {
//数据
"username": document.getElementById("no").value,
"password": document.getElementById("pw").value
}, //参数值
type: "GET", //方式
//成功处理,我想这边的成功应该是接受到反馈的信息就算成功吧
success: function(req) {
var login=req[0].login;
//登入成功
if(login=="true"){
window.location.href="MainPage.html";
}
else {
$("#loginFail").html("账号或者密码错误");
}
},
error: function() {
//请求出错处理
//可能是返回的json格式出错
alert("error");
}
});
}
这时候按钮不需要submit就可以传输信息,登入界面我更喜欢用这个
注意需要引入包
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
而且在代码中最好放在 ajax方法之上
其他的不多说了.....
后端代码
先看一下我的文件结构

User.java
package user;
public class User {
//用户ID
int user_id;
//用户昵称
String user_name;
//账号密码
String no;
String password;
//区分是否为管理员
//所有页面注册的都是普通用户 管理员由后端指定 以0为普通用户 1为管理员
int role_id=0;
public User() {
this.no="";
this.password="";
}
public User(String no,String password) {
this.no=no;
this.password=password;
}
public User(String no,String password,String user_name) {
this.no=no;
this.password=password;
this.user_name=user_name;
}
public void setUsername(String a) {
this.no=a;
}
public void setPassword(String a) {
this.password=a;
}
public void setUser_id(int id) {
this.user_id=id;
}
}
UserDao.java
package user;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import database.Connect;
public class UserDao {
User user;
Connect connect=new Connect();
Connection connection=null;
public void setUser(User u) {
this.user=u;
}
//连接数据库
public void getConnection() {
connection=connect.getConnection();
}
//释放数据库
public void deleteConnection() throws SQLException {
if(connection!=null) {
connection.close();
}
connection=null;
}
//用户登入是否成功
public boolean checkUserLogin() {
if(user==null)return false;
try {
PreparedStatement presta=connection.prepareStatement("select *"
+ " from user where no like ? and password like ? ;");
//同时验证账号密码
presta.setString(1, user.no);
presta.setString(2, user.password);
boolean a=presta.executeQuery().next();
presta.close();
return a;
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return false;
}
//用户是否存在 用于注册页面判断
public boolean checkUserExist() {
if(user==null)return false;
try {
Statement statement=connection.createStatement();
//只需验证用户名是否存在
String sql="select * from user where no = "+user.no+";";
boolean a=statement.executeQuery(sql).next();
statement.close();
return a;
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return false;
}
//注册成功 应该在前端判断成功之后才调用此函数
public void addUser() {
//查找最大的用户ID 然后 此用户ID+1 特别注意线程安全(将来完善)
int MaxUserId=-1;
try {
Statement statement=connection.createStatement();
//
String sql="select max(user_id) id from user";
//是否是第一个用户 如果不是ID=MAXID+1
ResultSet rs=statement.executeQuery(sql);
MaxUserId=rs.next()?rs.getInt("id")+1:0;
//
this.user.setUser_id(MaxUserId);
String updateSql="insert into user values(?,?,?,?,?);";
PreparedStatement presta=connection.prepareStatement(updateSql);
presta.setInt(1, MaxUserId);
presta.setString(2, user.no);
presta.setString(3, user.user_name);
presta.setString(4, user.password);
presta.setInt(5, user.role_id);
presta.executeUpdate();
statement.close();
presta.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
Connect.java
package database;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class Connect {
Connection con;
public static String user;
public static String password;
public Connection getConnection() {
try { // 加载数据库驱动类
//记得在lib下面放jar包
Class.forName("com.mysql.cj.jdbc.Driver");
System.out.println("数据库驱动加载成功");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
user = "root";//数据库登录名
password = "你自己的密码";//密码
try { // 通过访问数据库的URL获取数据库连接对象
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/你自己的数据库?useUnicode=true&characterEncoding=utf-8",
user, password);
System.out.println("数据库连接成功");
} catch (SQLException e) {
e.printStackTrace();
}
return con; // 按方法要求返回一个Connection对象
}
}
HelloForm.java
package com.servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
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 user.User;
import user.UserDao;
/**
* Servlet implementation class HelloForm
*/
@WebServlet("/HelloForm")
public class HelloForm extends HttpServlet {
private static final long serialVersionUID = 1L;
UserDao user=new UserDao();
/**
* @see HttpServlet#HttpServlet()
*/
public HelloForm() {
super();
System.out.println("HelloForm occur");
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置响应内容类型
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String name=request.getParameter("username");
String password=request.getParameter("password");
String login="false";
System.out.println(name+" "+password);
//验证
user.getConnection();
user.setUser(new User(name,password));
login=Boolean.toString(user.checkUserLogin());
try {
user.deleteConnection();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//Json格式不能出错
String buffer = "[{\"login\":"+"\""+login+"\"}]";
System.out.println(buffer);
//写入回复中
PrintWriter writer = response.getWriter();
writer.write(buffer);
writer.close();
}
// 处理 POST 方法请求的方法
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
register.java
package com.servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
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 user.User;
import user.UserDao;
/**
* Servlet implementation class register
*/
@WebServlet("/register")
public class register extends HttpServlet {
UserDao user=new UserDao();
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public register() {
super();
System.out.println("register occur");
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// 设置响应内容类型
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String no=request.getParameter("no");
String password=request.getParameter("password");
String username=request.getParameter("username");
System.out.println(no+" "+password+" "+username);
user.getConnection();
user.setUser(new User(no,password,username));
boolean usernoexist=user.checkUserExist();
//用户不存在 添加到数据库
if(!usernoexist) {
user.addUser();
}
try {
user.deleteConnection();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//Json格式不能出错
String buffer = "[{\"flag\":"+"\""+!usernoexist+"\"}]";
System.out.println(buffer);
//写入回复中
PrintWriter writer = response.getWriter();
writer.write(buffer);
writer.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
至此,就完成了简单的登入注册
关于使用servlet 我推荐菜鸟教程,哈哈哈哈哈哈,我也是刚看的,文件名还没换呢





创作不易,点个赞吧
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o
文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目,Java开发。基于数据库增量日志解析,提供增量数据订阅&消费。Git地址:https://github.co
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
目录1.漏洞简介2、AJP13协议介绍Tomcat主要有两大功能:3.Tomcat远程文件包含漏洞分析4.漏洞复现 5、漏洞分析6.RCE实现的原理1.漏洞简介2020年2月20日,公开CNVD的漏洞公告中发现ApacheTomcat文件包含漏洞(CVE-2020-1938)。ApacheTomcat是Apache开源组织开发的用于处理HTTP服务的项目。ApacheTomcat服务器中被发现存在文件包含漏洞,攻击者可利用该漏洞读取或包含Tomcat上所有webapp目录下的任意文件。该漏洞是一个单独的文件包含漏洞,依赖于Tomcat的AJP(定向包协议)。AJP自身存在一定缺陷,导致存在可控
MIMO技术的优缺点优点通过下面三个增益来总体概括:阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下,MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中,可以获得复用增益,即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中,可以获得分集增益,即可靠性性能的改善。分集增益用独立衰落支路数来描述,即分集指数。在使用了空时编码的MIMO系统中,由于接收天线或发射天线之间的间距较远,可认为它们各自的大尺度衰落是相互独立的,因此分布式MIMO
作为新的阿里云用户,您可以50免费试用多种优惠,价值高达1,700美元(或8,500美元)。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用,您将获得价值1,700美元的优惠。但是,如果您是注册公司,您可以选择企业免费试用,提交基本信息通过企业实名注册验证,即可开始价值$8,500的免费试用!本教程介绍了如何设置您的帐户并使用您的免费试用版。关于免费试用在我们开始此试用之前,您还必须遵守以下条款和条件才能访问您的免费试用:只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠,用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐
遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg
通常,数组被实现为内存块,集合被实现为HashMap,有序集合被实现为跳跃列表。在Ruby中也是如此吗?我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为,并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而,大多数Rubyist对数组的性能特征有一些期望,这会迫使不符合它们的实现变得默默无闻,因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复
我在我的项目中有一个用户和一个管理员角色。我使用Devise创建了身份验证。在我的管理员角色中,我没有任何确认。在我的用户模型中,我有以下内容:devise:database_authenticatable,:confirmable,:recoverable,:rememberable,:trackable,:validatable,:timeoutable,:registerable#Setupaccessible(orprotected)attributesforyourmodelattr_accessible:email,:username,:prename,:surname,: