获取验证码和校验登陆验证码

设置项目编码 utf-8
<%@ page language=”java” contentType=”text/html; charset=UTF-8” pageEncoding=”UTF-8”%>
在控制层类上加入

@SessionAttributes(value={"randImage"}) 
/***
     * 获取验证码
     * @param model
     * @param response
     */
    @RequestMapping(value="/getRandCode",method = RequestMethod.GET)
    public void getRandCode(ModelMap model,HttpServletResponse response){
        try {
            model.addAttribute("randImage",userService.writeImg(response.getOutputStream()));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

login.jsp 页面

<span><img id="randImage" src="${contextPath}/login/getRandCode?id=<%=System.currentTimeMillis()%>" alt="看不清,换一个" /></span>

service层方法

/*
     * 产生验证码
     */
    public String writeImg(OutputStream stream) {
        // 设置图形大小。
        int width = 86, height = 24;
        // 建立图形缓冲区。
        BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics();// 获得 Graphics 对象。
        g.setColor(getRandomColor(180, 240));// 设置背景色。
        g.fillRect(0, 0, width, height);// 填充背景。

        StringBuilder validationCode = new StringBuilder();// 用于保存最后的验证码
        String[] fontNames = {"微软雅黑"};// 用于随机的字体的集合

        Random r = new Random();
        // 随机生成4个验证码
        for (int i = 0; i < 4; i++) {
            g.setFont(new Font(fontNames[0], Font.PLAIN, height-4));
            char codeChar = codeChars.charAt(r.nextInt(codeChars.length()));
            validationCode.append(codeChar);
            g.setColor(getRandomColor(40, 60));
            g.drawString(String.valueOf(codeChar), 20 * i + r.nextInt(5),height - 4);// 在图形上输出验证码
        }
        // 随机生干扰码
        for (int i = 0; i < 30; i++) {
            g.setColor(getRandomColor(100, 200));
            int x = r.nextInt(width);
            int y = r.nextInt(height);
            g.drawLine(x, y, x + r.nextInt(10), y + r.nextInt(5));
        }

        g.dispose();// 关闭Graphics对象
        OutputStream os = stream;// 得到输出流
        try {
            ImageIO.write(image, "JPEG", os);
        } catch (IOException e) {
            e.printStackTrace();
        }// 以JPEG格式向客户端发送图形验证码
        return validationCode.toString();
    }


    /**
     * 产生随机的颜色
     * 
     * @param minColor
     * @param maxColor
     * @return
     */
    private static Color getRandomColor(int minColor, int maxColor) {
        Random r = new Random();
        int red = minColor + r.nextInt(maxColor - minColor);
        int green = minColor + r.nextInt(maxColor - minColor);
        int blue = minColor + r.nextInt(maxColor - minColor);
        return new Color(red, green, blue);
    }

Logincontroller

/***
     * 检查图片验证码是否相等
     * @param randImage
     * @param inputRandCode
     * @return
     */
    @RequestMapping(value="/checkRandCode",method = RequestMethod.GET)
    @ResponseBody
    public boolean checkRandCode(@ModelAttribute("randImage") String randImage,String inputRandCode){
        if(randImage.equalsIgnoreCase(inputRandCode)){
            return true;
        }
        return false;
    }

loginController 在登陆时候的校验

//验证码
        if(!checkRandCode(randImage,randCode)){
            model.addAttribute("authCodeError", "验证码不正确!");
            return "admin/login";
        }

login.js中

var $randImage = $("img[id=randImage]");//验证码图片
$randImage.click(function(){
        $randCode.val("");
        $randImage.attr("src",getRootPath()+"/login/getRandCode?id="+Math.random());
    });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Uniapp获取短信验证码和手机号校验,你可以使用第三方插件来简化开发过程。以下是一个常用的Uniapp插件示例:uni-smscode。 uni-smscode插件提供了获取短信验证码和手机号校验的功能,使用该插件可以方便地实现短信验证码的发送和验证。以下是使用uni-smscode插件的步骤: 1. 在Uniapp项目,通过npm或yarn安装uni-smscode插件: ``` npm install uni-smscode ``` 2. 在需要使用短信验证码的页面,引入uni-smscode插件: ```vue <template> <view> <!-- 手机号输入框 --> <input type="text" v-model="mobile" placeholder="请输入手机号码" /> <!-- 验证码输入框 --> <input type="text" v-model="code" placeholder="请输入验证码" /> <!-- 获取验证码按钮 --> <button @click="sendCode">获取验证码</button> <!-- 校验手机号和验证码按钮 --> <button @click="verifyCode">校验</button> </view> </template> <script> import smsCode from 'uni-smscode' export default { data() { return { mobile: '', code: '' } }, methods: { sendCode() { smsCode.send(this.mobile).then(res => { // 短信验证码发送成功处理逻辑 console.log('短信验证码发送成功') }).catch(err => { // 短信验证码发送失败处理逻辑 console.error('短信验证码发送失败', err) }) }, verifyCode() { smsCode.verify(this.mobile, this.code).then(res => { // 手机号和验证码校验成功处理逻辑 console.log('手机号和验证码校验成功') }).catch(err => { // 手机号和验证码校验失败处理逻辑 console.error('手机号和验证码校验失败', err) }) } } } </script> ``` 在上述示例,通过调用smsCode.send方法来发送短信验证码,并使用smsCode.verify方法来校验手机号和验证码。你可以根据需求自定义按钮的样式和交互逻辑。 需要注意的是,具体插件的使用方法可能会因插件版本和更新而有所变化,建议查阅相关插件的文档或示例代码来进行具体的使用和定制。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值