此项目原本是两个不同的项目，博主从网上找的，都是基于ide开发的项目，然当我导入ide与eclipse却运行不了，没办法只能博主自己重新构建项目,参考这两个不同的项目，修改了一部分的代码，最后把这两个项目合并为一个简单的ssm登录注册与增删改项目，。希望能帮助到你，加油，倔强与坚持，从放弃到开始！！！！！！
项目环境介绍：eclipse jdk7 maven .建议与博主的环境一样，要不可能会有不兼容，需要你自己去调整。
这边代码还是非常多，博主就不贴代码了。数据库也在项目中博主有上传，这边把代码上传到csdn中，
欢迎下载参考：下载之后修改你自己的环境，如果，你能看到博主下面提供的界面，说明你成功了！博主亲测可用。
下载地址：https://download.csdn.net/download/qq_30764991/11091023
项目页面可能并不美观，没办法。将就着用，以后再慢慢优化改善。
这边把项目运行后的界面提供参考，如果赶兴趣，可以下载：
项目结构表：相信这样博主介绍的很清楚了吧，喜欢记得留言支持。您的鼓励，是我最大的动力，谢谢！！！
一：用户注册页面：页面做了相应的ajax校验，做的还是不错的。然后又再后台做了相应的校验。
二：登录功能：
三：主页面如下图：
代码一点：这边粘贴一点jsp前端页面代码：index.jsp代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<%--<script type="javascript" src="<%=basePath%>js/jquery-3.2.1.js"></script>--%>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<%--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>--%>
<style type="text/css">
.modal{top:30%;}
</style>
<script type="text/javascript">
$(function(){
$("#body").css("background-image","url("+"<%=basePath%>"+"/images/9.jpg)");
//$("#body").css("background-repeat","no-repeat");
// background-repeat:no-repeat
totaladd(); //定时时触发的函数
setInterval(totaladd,3000);//设置定时1000=1秒
//登陆模态框的触发
$('#loginButton').click(function(){
$('#userName').val('');
$('#password').val('');
$('#checkCode').val('');
$('#message').css("display","none");
$('#message').html("");
getCheckCode();
})
//注册模态框的触发
$('#registerButton').click(function(){
$('#register_userName').val('');
$('#register_password').val('');
$('#register_checkCode').val('');
$('#register_message').css("display","none");
$('#register_message').html("");
getCheckCode_register();
})
//密码样式修改 待做
$('#show_login').click(function(){
$('#password').removeAttr('type');
$('#password').attr("type","text");
$('#show_login').css('display','none');
$('#hide_login').css('display','block');
})
$('#hide_login').click(function(){
$('#password').removeAttr('type');
$('#password').attr("type","password");
$('#hide_login').css('display','none');
$('#show_login').css('display','block');
})
})
function totaladd(){
var num = Math.floor(Math.random()*8);
var moveheight = num *1080;
var str = "0px "+moveheight+"px"
$("#body").css("background-position",str);
}
</script>
<script type="text/javascript">
//用于刷新验证码
function getCheckCode() {
document.getElementById("checkCodeImage").src = document.getElementById("checkCodeImage").src + "?nocache=" + new Date().getTime();
}
//注册模态框刷新验证码 document.getElementById("register_checkCodeImage").src = document.getElementById("register_checkCodeImage").src + "?nocache=" + new Date().getTime();
function getCheckCode_register() {
document.getElementById("register_checkCodeImage").src = document.getElementById("register_checkCodeImage").src + "?nocache=" + new Date().getTime();
}
//模态框页面 点击登录 校验验证码
function check() {
var userName = $('#userName').val();
var password = $('#password').val();
var vcode = $('#checkCode').val();
if(userName==""){
getCheckCode();
$('#message').css("display","block");
$('#message').html("用户名不能为空");
return;
}
if(password==""){
console.log('检验')
getCheckCode();
$('#message').css("display","block");
$('#message').html("密码不能为空");
return;
}
if(vcode==""){
getCheckCode();
$('#message').css("display","block");
$('#message').html("验证码不能为空");
return;
}
$.ajax({
url: "<%=basePath%>loginController/checkCode",
type: 'GET',
data: {
signcode: vcode,
},
dataType:"json",
xhrFields: {
withCredentials: true
},
success: function (data) {
console.log("校验验证码返回值为data=="+data)
if("1"==data){
getCheckCode();
$('#message').css("display","block");
$('#message').html("验证码不能为空");
return;
}
if("2"==data){
getCheckCode();
$('#message').css("display","block");
$('#message').html("操作异常，请重新登录");
return;
}
if("4"==data){
getCheckCode();
$('#message').css("display","block");
$('#message').html("验证码不正确");
return;
}
if("3"==data){
$('#message').css("display","none");
$('#message').html("");
login(userName,password);
}
}
})
}
//模态框页面 点击注册 校验验证码
function register_check() {
//register_button
$('#register_button').attr('disabled','disabled');
var userName = $('#register_userName').val();
var password = $('#register_password').val();
var secondPassword = $('#register_second_password').val();
var vcode = $('#register_checkCode').val();
if(userName==""){
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("用户名不能为空，请输入用户名");
return;
}
if(password==""){
console.log('检验')
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("密码不能为空");
return;
}
if(secondPassword==""){
console.log('检验')
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("请再次输入密码");
return;
}
if(vcode==""){
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("验证码不能为空");
return;
}
if(password!=secondPassword){
console.log('检验')
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("密码不一致，请重新输入");
return;
}
$.ajax({
url: "<%=basePath%>loginController/checkCode",
type: 'GET',
data: {
signcode: vcode,
},
dataType:"json",
xhrFields: {
withCredentials: true
},
success: function (data) {
console.log("校验验证码返回值为data=="+data)
if("1"==data){
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("验证码不能为空");
$('#register_button').removeAttr('disabled');
return;
}
if("2"==data){
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("操作异常，请重新登录");
$('#register_button').removeAttr('disabled');
return;
}
if("4"==data){
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("验证码不正确");
$('#register_button').removeAttr('disabled');
return;
}
if("3"==data){
$('#register_message').css("display","none");
$('#register_message').html("");
$('#register_button').removeAttr('disabled');
register(userName,password,secondPassword);
}
}
})
}
/**登录校验用户名和密码*/
function login(userName,password){
$.post("<%=basePath%>loginController/login",
{
userName: userName,
password:password,
},
function(data){
if(data.code=="1"){
console.log("用户名为空")
getCheckCode();
$('#message').css("display","block");
$('#message').html("用户名为空");
}
if(data.code=="2"){
console.log("密码为空")
getCheckCode();
$('#message').css("display","block");
$('#message').html("密码为空");
}
if(data.code=="3"){
console.log("用户名不存在")
getCheckCode();
$('#message').css("display","block");
$('#message').html("用户名不存在");
}
if(data.code=="4"){
console.log("用户名和密码不正确")
getCheckCode();
$('#message').css("display","block");
$('#message').html("用户名和密码不正确");
}
if(data.code=="6"){
console.log("业务异常")
getCheckCode();
$('#message').css("display","block");
$('#message').html("业务异常");
}
if(data.code=="5"){
console.log("登录成功")
window.location.href="<%=basePath%>loginController/tiao";
}
})
}
/**注册校验用户名和密码*/
function register(userName,password,secondPassword){
$.post("<%=basePath%>registerController/register",
{
userName: userName,
password:password,
secondPassword:secondPassword
},
function(data){
if(data.code=="1"){
console.log("用户名不能为空")
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("用户名不能为空");
}
if(data.code=="2"){
console.log("密码不能为空")
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("密码不能为空");
}
if(data.code=="7"){
console.log("二次输入密码为空")
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("二次输入密码为空");
}
if(data.code=="8"){
console.log("二次输入密码为空")
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("两次输入密码不同，请重新输入");
}
if(data.code=="3"){
console.log("该账户已注册")
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("该账户已注册");
}
if(data.code=="6" || data.code=="5"){
console.log("业务异常")
getCheckCode_register();
$('#register_message').css("display","block");
$('#register_message').html("业务异常");
}
if(data.code=="4"){
console.log("注册成功")
// window.location.href="<%=basePath%>registerController/";
$("#myModalRegister").modal('hide');
$('#register_password').val('');
$("#myModal").modal('show'); //手动开启
$("#userName").val('');
$("#checkCode").val('');
$('#register_second_password').val('');
}
})
}
</script>
</head>
<body id="body">
<div class="container">
<div id="userButton" style="width: 200px;height: 50px;width: 15%;float: left">
<span id="loginButton" data-toggle="modal" data-target="#myModal" class="btn btn-default btn-lg glyphicon glyphicon-log-in"> 用户登录</span>
</div>
<div id="registerUserButton" style="width: 200px;height: 50px;width: 15%;float: left;">
<span id="registerButton" data-toggle="modal" data-target="#myModalRegister" class="btn btn-default btn-lg glyphicon glyphicon-user"> 用户注册</span>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
登录
</h4>
</div>
<div class="modal-body">
<div id="logon" style="display: block">
<div class="input-group" style="padding-bottom: 10px">
<span class="input-group-addon" >用户名</span>
<input id="userName" type="text" class="form-control" placeholder="请输入用户名" aria-describedby="basic-addon1">
</div>
<div class="input-group" style="padding-bottom: 10px">
<span class="input-group-addon">密 码</span>
<input id="password" type="password" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1" style="display:block;z-index:9;float: left" >
<span id="show_login" class="glyphicon glyphicon-eye-close" style="display:block;z-index:10;float: left;margin-left: -5%;margin-top: 2%"></span>
<span id="hide_login" class="glyphicon glyphicon-eye-open" style="display:none;z-index:10;float: left;margin-left: -5%;margin-top: 2%"></span>
</div>
<div class="input-group" style="padding-bottom: 10px">
<span class="input-group-addon" >验证码</span>
<%--nocache=" + new Date().getTime()--%>
<input id="checkCode" type="text" class="form-control " placeholder="请输入图形验证码" aria-describedby="basic-addon1" style="width:50%">
<img id="checkCodeImage" src="<%=basePath%>loginController/getCheckCode" alt="图片加载失败" onclick="getCheckCode()" style="width: 100px;height: 30px;margin-left: 5%" >
</div>
<div class="input-group" >
<span id="message" class="bg-info" style="display: none" aria-describedby="basic-addon1" ></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button onclick="check()" type="button" class="btn btn-primary">
登录
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<div class="modal fade" id="myModalRegister" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="registerAccount">
注册
</h4>
</div>
<div class="modal-body">
<div id="register" style="display: block">
<div class="input-group" style="padding-bottom: 10px">
<span class="input-group-addon" >用户名</span>
<input id="register_userName" type="text" class="form-control" placeholder="请输入用户名" aria-describedby="basic-addon1">
</div>
<div class="input-group" style="padding-bottom: 10px">
<span class="input-group-addon">密 码</span>
<input id="register_password" type="password" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1">
</div>
<div class="input-group" style="padding-bottom: 10px">
<span class="input-group-addon">密 码</span>
<input id="register_second_password" type="password" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1">
</div>
<div class="input-group" style="padding-bottom: 10px">
<span class="input-group-addon" >验证码</span>
<input id="register_checkCode" type="text" class="form-control " placeholder="请输入图形验证码" aria-describedby="basic-addon1" style="width:50%">
<img id="register_checkCodeImage" src="<%=basePath%>loginController/getCheckCode" alt="图片加载失败" onclick="getCheckCode_register()" style="width: 100px;height: 30px;margin-left: 5%" >
</div>
<div class="input-group" >
<span id="register_message" class="bg-info" style="display: none" aria-describedby="basic-addon1" ></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button id="register_button" onclick="register_check()" type="button" class="btn btn-primary">
注册
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</body>
</html>
验证码代码如下：
package cn.com.utils;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.Random;
public class CheckCodeUtils {
/**验证码图片的长和宽*/
private int weight = 70;
private int height = 30;
/**用来保存验证码的文本内容*/
private String text;
private Random r = new Random(); //获取随机数对象
private String[] fontNames = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"}; //字体数组
private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ"; //验证码数组
/**
* 获取随机的颜色
*/
private Color randomColor() {
//这里为什么是150，因为当r，g，b都为255时，即为白色，为了好辨认，需要颜色深一点。
int r = this.r.nextInt(150);
int g = this.r.nextInt(150);
int b = this.r.nextInt(150);
//返回一个随机颜色
return new Color(r, g, b);
}
/**
* 获取随机字体
*/
private Font randomFont() {
//获取随机的字体
int index = r.nextInt(fontNames.length);
String fontName = fontNames[index];
//随机获取字体的样式，0是无样式，1是加粗，2是斜体，3是加粗加斜体
int style = r.nextInt(4);
//随机获取字体的大小
int size = r.nextInt(5) + 24;
//返回一个随机的字体
return new Font(fontName, style, size);
}
/**
* 获取随机字符
*/
private char randomChar() {
int index = r.nextInt(codes.length());
return codes.charAt(index);
}
/**
* 画干扰线，验证码干扰线用来防止计算机解析图片
*/
private void drawLine(BufferedImage image) {
int num = 155;
//定义干扰线的数量
Graphics2D g = (Graphics2D) image.getGraphics();
for (int i = 0; i < num; i++) {
int x = r.nextInt(weight);
int y = r.nextInt(height);
int xl = r.nextInt(weight);
int yl = r.nextInt(height);
g.setColor(getRandColor(160, 200));
g.drawLine(x, y, x + xl, y + yl);
}
}
/**
* 创建图片的方法
*/
private BufferedImage createImage() {
//创建图片缓冲区
BufferedImage image = new BufferedImage(weight, height, BufferedImage.TYPE_INT_RGB);
//获取画笔
Graphics2D g = (Graphics2D) image.getGraphics();
// 设定图像背景色(因为是做背景，所以偏淡)
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, weight, height);
//返回一个图片
return image;
}
/**
* 获取验证码图片的方法
*/
public BufferedImage getImage() {
BufferedImage image = createImage();
//获取画笔
Graphics2D g = (Graphics2D) image.getGraphics();
StringBuilder sb = new StringBuilder();
drawLine(image);
//画四个字符即可
for (int i = 0; i < 4; i++) {
//随机生成字符，因为只有画字符串的方法，没有画字符的方法，所以需要将字符变成字符串再画
String s = randomChar() + "";
//添加到StringBuilder里面
sb.append(s);
//定义字符的x坐标
float x = i * 1.0F * weight / 4;
//设置字体，随机
g.setFont(randomFont());
//设置颜色，随机
g.setColor(randomColor());
g.drawString(s, x, height - 5);
}
this.text = sb.toString();
return image;
}
/**
* 给定范围获得随机颜色
*/
Color getRandColor(int fc, int bc) {
Random random = new Random();
if (fc > 255) {
fc = 255;
}
if (bc > 255) {
bc = 255;
}
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
/**
* 获取验证码文本的方法
*/
public String getText() {
return text;
}
}
4691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
