首页 > 其他分享 >页面调整、登录功能_验证码显示、代码实现

页面调整、登录功能_验证码显示、代码实现

时间：2023-02-12 11:11:57浏览次数：36  
标签：登录 request 验证码 javax import servlet response 页面

页面调整

会做出以下的功能

　　列表查询，登录，添加，删除，修改

　　删除选中，分页查询，复杂条件查询

 

 登录功能_验证码显示

登录页面的验证码功能：

 

 login.jsp登录页面：（把html改为jsp页面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>管理员登录</title>

  <!-- 1. 导入CSS的全局样式 -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
  <script src="js/jquery-2.1.0.min.js"></script>
  <!-- 3. 导入bootstrap的js文件 -->
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript">
    //切换验证码
    function refreshCode(){
      //1.获取验证码图片对象
      var vcode = document.getElementById("vcode");

      //2.设置其src属性，加时间戳
      vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
    }
  </script>
</head>
<body>
<div class="container" style="width: 400px;">
  <h3 style="text-align: center;">管理员登录</h3>
  <form action="${pageContext.request.contextPath}/loginServlet" method="post">
    <div class="form-group">
      <label for="user">用户名：</label>
      <input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/>
    </div>

    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
    </div>

    <div class="form-inline">
      <label for="vcode">验证码：</label>
      <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
      <a href="javascript:refreshCode();">
        <img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/>
      </a>
    </div>
    <hr/>
    <div class="form-group" style="text-align: center;">
      <input class="btn btn btn-primary" type="submit" value="登录">
    </div>
  </form>

  <!-- 出错显示的信息框 -->
  <div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" >
      <span>×</span>
    </button>
    <strong>${login_msg}</strong>
  </div>
</div>
</body>
</html>

验证码CheckCodeServlet：

 

 

package com.jstl.web.servlet;

import javax.imageio.ImageIO;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 服务器通知浏览器不要缓存
        response.setHeader("pargma","no-cache");
        response.setHeader("cache-control","no-cache");
        response.setHeader("expires","0");
        
        // 在内存中创建一个长80,宽30的图片,默认黑色背景
        // 参数1:长
        // 参数2:宽
        // 参数3:颜色
        int width = 80;
        int height = 30;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

        // 获取画笔
        Graphics g = image.getGraphics();
        // 设置画笔颜色为灰色
        g.setColor(Color.CYAN);
        // 填充图片
        g.fillRect(0,0,width,height);

        // 产生4个随机验证码,12Ey
        String checkCode = getCheckCode();
        // 将验证码放入HttpSession中
        request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);

        // 设置画笔颜色为黄色
        g.setColor(Color.YELLOW);
        // 设置字体的小大
        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 = "ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";
        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();
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

代码实现

登录页面：进行修改

 

 

添加数据库字段

username和password

添加数据

 

 User实现类也要进行修改

 

 UserDao：

 

 UserDaoImpl

@Override
    public User findUserByUsernameAndPassword(String username, String password) {
        try {
            String sql = "select * from user where username = ? and password = ?";
            User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username, password);
            return user;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

UserService

 

 UserServiceImpl

 

 loginService

package com.peng.ca.web.servlet;

import com.peng.ca.domain.User;
import com.peng.ca.service.UserService;
import com.peng.ca.service.impl.UserServiceImpl;
import org.apache.commons.beanutils.BeanUtils;

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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/loginServlet")
public class loginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码
        request.setCharacterEncoding("utf-8");
        //获取数据
        //获取验证码
        String verifycode = request.getParameter("verifycode");
        //验证码校验
        HttpSession session = request.getSession();
        String checkode_server = (String) session.getAttribute("CHECKCODE_SERVER");
        //确保验证码一次性
        session.removeAttribute("CHECKCODE_SERVER");
        if (checkode_server==null || !checkode_server.equalsIgnoreCase(verifycode)){
            //验证码不正确
            //提示信息，跳转登录页面
            request.setAttribute("login_msg","验证码错误!");
            request.getRequestDispatcher("/login.jsp").forward(request,response);
            return;
        }
        Map<String, String[]> map = request.getParameterMap();
        //封装user对象
        User user = new User();
        try {
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //调用Service查询
        UserService service = new UserServiceImpl();
        User loginUser = service.login(user);
        //判断是否登录成功
        if (loginUser!=null){
            //登录成功
            //将用户存入session
            session.setAttribute("user",loginUser);
            //跳转页面
            response.sendRedirect(request.getContextPath()+"/index.jsp");
        }else {
            //登录失败
            request.setAttribute("login_msg","用户名或密码错误!");
            request.getRequestDispatcher("/login.jsp").forward(request,response);
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

标签：登录,request,验证码,javax,import,servlet,response,页面
From： https://www.cnblogs.com/wsfj/p/17113424.html

相关文章

  • 通过写登录接口来解释action的用法
    目录通过写登录接口来解释action的用法一、路由二、表模型三、视图类通过写登录接口来解释action的用法一、路由fromdjango.contribimportadminfromdjango.urlsim......
  • Python黑客编程之爆破网站登录表单
    描述遍历字典，发送requests请求到目标网站，根据响应判断是否登录成功分析SecLists仓库中存放了大量有用的字典文件，我这里用了一个爆破字典cain.txt在本地部署wordpres......
  • linux找回root密码以及远程登录和远程传输文件
    注:远程登录首次都需要先查看linux的ip地址(控制台输入ifconfig)且可以互相ping通xshell7(远程登陆linux):主机框需要为ip地址如上设置  接受并保存下次不用输入密......
  • GitLab CICD Day 19 - SSH免密登录远程服务器 *
    服务器免密：生成ssh-key(服务器A&B)[root@qaonpremise]#ssh-keygenGeneratingpublic/privatersakeypair.Enterfileinwhichtosavethekey(/root/.ssh/id_rs......
  • bbs项目：注册功能、登录功能
    目录一、项目开发基本流程二、项目流程仿造博客园项目（bbs项目）分析表分析三、前期准备四、注册功能五、登录功能六、作业一、项目开发基本流程1.需求分析2.架构设计3.分......
  • 84、商城业务---认证服务---微博登录测试
    首先到微博开放平台进行身份认证、创建应用。主要流程如下：1、在我们的网站点击社交登录2、在社交登录页面输入用户名密码登录，登录成功后会给我们一的code3、通过code获......
  • 给页面加loading
    2023-1-101、给页面加loading引用页面loading组件//如果pageLoading为true（pageLoading默认为true），就显示loading，否则就显示页面内容初始化，接口调成功后，pageLoading设为f......
  • 进入页面，textarea多行输入框怎么自动打开输入面板
    2022-11-161、进入页面，textarea多行输入框怎么自动打开输入面板focus绑定的值默认设为true(不要用autofocus)focus="{{inputFocus}}"data:{inputFocus:true,}......
  • Redis实战-session共享之修改登录拦截器
    在上一篇中​​Redis实战之session共享​​，我们知道了通过Redis实现session共享了，那么token怎么续命呢？怎么刷新用户呢？本来咱们就通过拦截器来实现这两个功能。登录拦截器优......
  • React+hook+ts+ant design封装一个具有动态表格得页面
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99