实现前后端交互管理系统

目录

登录

登录jsp页面

 前端代码实现

后端代码实现

servlet代码实现

单击验证码变化的实现

jsp页面

单击事件的实现

后端servlet代码的实现

添加功能的实现 

分析

代码实现

servlet接收页面

修改功能jsp页面

分析

 jsp页面代码实现

servlet后端接收代码

删除功能的实现

分析

jsp页面实现 

servlet页面

批量选中删除功能的实现

分析

 jsp页面关键代码

servler代码展示

分页查询功能实现

分页分析

jsp页面

servlet关键代码

分页底层类(重要,封装在这个类里面的)

数据库分页模糊查找查询方法

总数据量查找

动态模糊数据查找


登录

登录jsp页面

 前端代码实现

<html>
<head>
    <title>登录</title>
    <script>
        window.onload=function () {
            var img = document.getElementById("checkCode");
            img.onclick=function () {
                var date=new Date().getTime();
                img.src="${pageContext.request.contextPath}/checkServlet?"+date;
            }
        }
    </script>
</head>
<body>
    <div>
        <h1 align="center">管理员登录</h1><br>
        <form action="${pageContext.request.contextPath}/LoginServlet" method="post">
            <div align="center">
                用户:<input type="text" name="username" placeholder="请输入用户名" >
            </div>
            <div align="center">
                密码:<input type="password" name="password" placeholder="请输入密码" >
            </div>
            <div align="center">
                验证码:<input type="text" name="check" placeholder="请输入验证码" ><br>
                <img src="${pageContext.request.contextPath}/checkServlet" id="checkCode"/>
            </div>
            <div align="center">
                <button type="submit">登录</button>
            </div>
        </form>
    </div>
</body>
</html>

后端代码实现

servlet代码实现

        request.setCharacterEncoding("utf-8");
        login login=new login();
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String check = request.getParameter("check");
        HttpSession session = request.getSession();
        String check_session = (String) session.getAttribute("check_session");
        session.removeAttribute("check_session");
        if (check_session!=null && check_session.equalsIgnoreCase(check)){
            List<admin> findadmin = null;
            try {
                findadmin = login.findadmin(username, password);
            } catch (Exception e) {
                e.printStackTrace();
            }
            String name="";
            String password1="";
            for (int i=0;i<findadmin.size();i++){
                name = findadmin.get(i).getName();
                password1 = findadmin.get(i).getPassword();
            }
            if (name.equals(username) && password.equals(password1)){
                response.setContentType("text/html;charset=UTF-8");
                response.getWriter().print("<script>alert('登录成功');location.href='findUserByPageServlet';</script>");
            }else {
                response.setContentType("text/html;charset=UTF-8");
                response.getWriter().print("<script>alert('登录失败');history.go(-1);</script>");
            }
        }else {
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().print("<script>alert('验证码错误');history.go(-1);</script>");
        }

单击验证码变化的实现

jsp页面

            <div align="center">
                验证码:<input type="text" name="check" placeholder="请输入验证码" ><br>
                <img src="${pageContext.request.contextPath}/checkServlet" id="checkCode"/>
            </div>

单击事件的实现

    <script>
        window.onload=function () {
            var img = document.getElementById("checkCode");
            img.onclick=function () {
                var date=new Date().getTime();
                img.src="${pageContext.request.contextPath}/checkServlet?"+date;
            }
        }
    </script>

后端servlet代码的实现

        int width=100;
        int height=50;
        //创建一对象,在内存中图片(验证码图片对象)
        BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);
        //美化图片
        //填充背景色
        Graphics g=image.getGraphics();//画笔对象
        g.setColor(Color.pink);//填充颜色
        g.fillRect(0,0,width,height);
        //画边框
        g.setColor(Color.BLUE);
        g.drawRect(0,0,width-1,height-1);
        //生成随机角标
        String str="QWERTYUIOPASDFGHJKLZXCVBNMmnbvcxzlkjhgfdsapoiuytrewq1234567890";
        Random random=new Random();
        StringBuilder sb=new StringBuilder();
        for (int i=0;i<4;i++){
            int index=random.nextInt(str.length());
            char c = str.charAt(index);
            sb.append(c);
            g.drawString(c+"",width/5*i,height/2);
        }
        String check_session = sb.toString();
        request.getSession().setAttribute("check_session",check_session);

        //画干扰线
        g.setColor(Color.GREEN);
        //随机生成坐标点
        for (int i=0;i<10;i++){
            int i1 = random.nextInt(width);
            int i2 = random.nextInt(width);
            int i3 = random.nextInt(height);
            int i4 = random.nextInt(height);
            g.drawLine(i1,i2,i3,i4);
        }
        //将图片输出到页面展示
        ImageIO.write(image,"jpg",response.getOutputStream());

添加功能的实现 

分析

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值