ssm登录注册增删改查

小咪咪 2022-02-23 01:44 277阅读 0赞

>     此项目原本是两个不同的项目，博主从网上找的，都是基于ide开发的项目，然当我导入ide与eclipse却运行不了，没办法只能博主自己重新构建项目,参考这两个不同的项目，修改了一部分的代码，最后把这两个项目合并为一个简单的ssm登录注册与增删改项目，。希望能帮助到你，加油，倔强与坚持，从放弃到开始！！！！！！

项目环境介绍：eclipse jdk7  maven  .建议与博主的环境一样，要不可能会有不兼容，需要你自己去调整。

这边代码还是非常多，博主就不贴代码了。数据库也在项目中博主有上传，这边把代码上传到csdn中，

欢迎下载参考：下载之后修改你自己的环境，如果，你能看到博主下面提供的界面，说明你成功了！博主亲测可用。

### 下载地址：[https://download.csdn.net/download/qq\_30764991/11091023][https_download.csdn.net_download_qq_30764991_11091023] ###

项目页面可能并不美观，没办法。将就着用，以后再慢慢优化改善。

这边把项目运行后的界面提供参考，如果赶兴趣，可以下载：

项目结构表：相信这样博主介绍的很清楚了吧，喜欢记得留言支持。您的鼓励，是我最大的动力，谢谢！！！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70][]

一：用户注册页面：页面做了相应的ajax校验，做的还是不错的。然后又再后台做了相应的校验。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 1][]

二：登录功能：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 2][]

三：主页面如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 3][]

代码一点：这边粘贴一点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>
                </div>
            </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>
                </div>
            </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;
        }
    }

[https_download.csdn.net_download_qq_30764991_11091023]: https://download.csdn.net/download/qq_30764991/11091023
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70]: /images/20220223/0ff8d3c3e05e4ad0a1baa98d7c913037.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 1]: /images/20220223/51c75cf8c6264af8b4c1b2e062b0087c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 2]: /images/20220223/56e12e28fffa48efb7f07ab30648165e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 3]: /images/20220223/527b17a2b41d489d81b7f04697c4ad9a.png