zoukankan      html  css  js  c++  java
  • 需求征集系统第二天

    今天实现了需求征集系统的登录页面

    html<%--
      Created by IntelliJ IDEA.
      User: 张志伟
      Date: 2020/10/20
      Time: 18:37
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <script src="bootstrap/js/jquery-3.5.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            <%--切换验证码--%>
            function refreshCode(){
                //获取验证码对象
                let vcode = document.getElementById("vcode");
    
                //设置其src属性,加时间戳
                vcode.src="${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
            }
        </script>
    </head>
    <body>
    
    <!--导航栏-->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">重大需求征集系统 <small>V1.0</small></a>
            </div>
    
    
        </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!--导航栏-->
    
    <div class="container-fluid">
        <!--标题用户登录-->
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <h2 class="text-center ">用户登录</h2>
            </div>
        </div>
        <!--登录表单-->
        <div class="row">
            <div class="col-sm-4 col-sm-offset-4">
                <form>
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="code">验证码</label>
                        <div class="row">
                            <div class="col-sm-8">
                                    <input type="text" class="form-control" id="code" placeholder="验证码">
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:refreshCode();">
                                <img src="${pageContext.request.contextPath}/checkCodeServlet" id="vcode" class="img-responsive" alt="" title="看不清?换一张" >
                                </a>
                            </div>
                        </div>
    
    
                    </div>
                    <button type="submit" class="btn btn-danger  btn-block">登录</button>
                    <a href="register.jsp" class="btn btn-info btn-block">注册</a>
                </form>
            </div>
        </div>
    </div>
    </body>
    </html>
    

    下面是验证码部分

    package web.servlet;
    
    import javax.imageio.ImageIO;
    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 java.awt.*;
    import java.awt.image.BufferedImage;
    import java.io.IOException;
    import java.util.Random;
    
    /**
     * 验证码
     */
    @WebServlet("/checkCodeServlet")
    public class CheckCodeServlet extends HttpServlet {
        public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
    
            //服务器通知浏览器不要缓存
            response.setHeader("pragma","no-cache");
            response.setHeader("cache-control","no-cache");
            response.setHeader("expires","0");
    
            //在内存中创建一个长80,宽30的图片,默认黑色背景
            //参数一:长
            //参数二:宽
            //参数三:颜色
            int width = 80;
            int height = 30;
            BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    
            //获取画笔
            Graphics g = image.getGraphics();
            //设置画笔颜色为灰色
            g.setColor(Color.WHITE);
            //填充图片
            g.fillRect(0,0, width,height);
    
            //产生4个随机验证码,12Ey
            String checkCode = getCheckCode();
            //将验证码放入HttpSession中
            request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
    
            //设置画笔颜色为黄色
            g.setColor(Color.CYAN);
            //设置字体的小大
            g.setFont(new Font("黑体", Font.BOLD,24));
            //向图片上写入验证码
            g.drawString(checkCode,15,25);
    
            //将内存中的图片输出到浏览器
            //参数一:图片对象
            //参数二:图片的格式,如PNG,JPG,GIF
            //参数三:图片输出到哪里去
            ImageIO.write(image,"PNG",response.getOutputStream());
        }
        /**
         * 产生4位随机字符串
         */
        private String getCheckCode() {
            String base = "0123456789ABCDEFGabcdefg";
            int size = base.length();
            Random r = new Random();
            StringBuffer sb = new StringBuffer();
            for(int i=1;i<=4;i++){
                //产生0到size-1的随机值
                int index = r.nextInt(size);
                //在base字符串中获取下标为index的字符
                char c = base.charAt(index);
                //将c放入到StringBuffer中去
                sb.append(c);
            }
            return sb.toString();
        }
        public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request,response);
        }
    }
    
    
  • 相关阅读:
    Flask入门到精通(二)
    MySQL安装配置,命令,异常纪要
    JQuery 选择器
    redhat Enterprise Linux Server release 7.2(Maipo) 安装redis-stat
    pssh 不能执行指定用户命令
    VMware 命令行下安装以及导入Ubuntu系统
    Linux CPU相关信息查看
    Ubuntu 16.04 Mxnet CPU 版本安装
    Ubuntu 16.04 TensorFlow CPU 版本安装
    <转>揭秘DNS后台文件:DNS系列之五
  • 原文地址:https://www.cnblogs.com/yeyueweiliang/p/13854464.html
Copyright © 2011-2022 走看看