SpringBoot系列文章目录

本系列校训

用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！
只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！

SpringBoot技术很多很多

韩顺平说：学习JAVA的人有两大难
第一困惑，JAVA能百度到的知识太多太多，完全不知道学啥
第二困惑，就是不知道以什么样的顺序去学，有的时候乱看一堆视频有遗漏，有的时候，两边的视频还有重复。
Spring的外围技术就更多了。其实，验证码就是其中之一。
在这里插入图片描述

环境及工具：

本系列环境

环境	win11
工具	idea 2017
jdk	1.8
数据库	mysql5.5
maven	3.2.1
项目导入方式	maven 导入
数据库前端工具	mysql-front (navicat 也可以)

数据库前端工具：mysql-front (navicat 也可以)
主要是这些跟PHPStudy 2018 整合了，所以有的时候懒的打开navicat
关于环境的重要性，直接看上面的《SpringBoot 的项目编译即报错处理--JSB系列之001》

上效果图

不管是啥系统，除了windows 上的小游戏之外，哪个不得注册，登陆，而登陆的页面大部分都会有一个验证码？

在这里插入图片描述
验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，实际上用验证码是现在很多网站通行的方式，我们利用比较简易的方式实现了这个功能。这个问题可以由计算机生成并评判，但是必须只有人类才能解答。由于计算机无法解答CAPTCHA的问题，所以回答出问题的用户就可以被认为是人类。

目前流行的验证码技术

这个东西，正如百度知道里介绍的。随着恶意破解密码的人越来越多，所以验证码技术也在越累越高。最初的时候，就是很简单的放一个算术表达式
在这里插入图片描述
还有这种

那基本上就直接画就行了。

早期的硬核画Graphics

/**
     * 生成验证码图片
     * @param securityCode
     * @return
     */
    public static BufferedImage createImage(String securityCode){
        int codeLength = securityCode.length();//验证码长度
        int fontSize = 18;//字体大小
        int fontWidth = fontSize+1;
        //图片宽高
        int width = codeLength*fontWidth+6;
        int height = fontSize*2+1;
        //图片
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = image.createGraphics();
        g.setColor(Color.WHITE);//设置背景色
        g.fillRect(0, 0, width, height);//填充背景
        g.setColor(Color.LIGHT_GRAY);//设置边框颜色
        g.setFont(new Font("Arial", Font.BOLD, height-2));//边框字体样式
        g.drawRect(0, 0, width-1, height-1);//绘制边框
        //绘制噪点
        Random rand = new Random();
        g.setColor(Color.LIGHT_GRAY);
        for (int i = 0; i < codeLength*6; i++) {
            int x = rand.nextInt(width);
            int y = rand.nextInt(height);
            g.drawRect(x, y, 1, 1);//绘制1*1大小的矩形
        }
        //绘制验证码
        int codeY = height-10;
        g.setColor(new Color(19,148,246));
        //Georgia  是个字体，如果想用中文要指定中文字体；eg:"宋体";
        //g.setFont(new Font("Georgia", Font.BOLD, fontSize));
        g.setFont(new Font("宋体", Font.BOLD, fontSize));
        for(int i=0;i<codeLength;i++){
            double deg=new Random().nextDouble()*20;
            g.rotate(Math.toRadians(deg), i*16+13,codeY-7.5);
            g.drawString(String.valueOf(securityCode.charAt(i)), i*16+5, codeY);
            g.rotate(Math.toRadians(-deg), i*16+13,codeY-7.5);
        }
        g.dispose();//关闭资源
        return image;
    }

CAPTCHA技术群雄乱战

如果你真的要用百度“spring Boot + 验证码”，这样并不能找到你想要的。但是当你使用 “spring Boot + CAPTCHA” 的时候，你就发现了，那叫一个多呀。还有N多的这种模块都说自己是官方的Spring Boot 验证码框架 - CAPTCHA 。

<dependency>
    <groupId>cn.dustlight.captcha</groupId>
    <artifactId>captcha-core</artifactId>
    <version>0.0.6</version>
</dependency>

<!--Kaptcha-->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

等等，

使用方式也是五花八门

有使用config配置类的。
有的用配置SpringBoot的配置文件里。

本文介绍的是SpecCaptcha或者叫easy-captcha？

easy-captcha工具包的好处：
1 跟以前的画验证码的方式差不多的理解，就用一个控制类就行了。
2 好看！ ==我觉得这个应该算第一条==
3 集成简单。适合初学者

项目里如何使用

maven的pom.xml

<!--验证码-->
        <dependency>
            <groupId>com.github.whvcse</groupId>
            <artifactId>easy-captcha</artifactId>
            <version>1.6.2</version>
        </dependency>

控制层

package com.example.bus.controller;

import com.wf.captcha.SpecCaptcha;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@RestController
@RequestMapping("/code")
public class CaptchaController {

    /**
     * 生成验证码
     * @return
     * @throws Exception
     */
    @GetMapping("/getCode")
    public void getCode(HttpServletRequest request, HttpServletResponse response) throws Exception {
        ServletOutputStream outputStream = response.getOutputStream();

        //算术验证码 数字加减乘除. 建议2位运算就行:captcha.setLen(2);
//        ArithmeticCaptcha captcha = new ArithmeticCaptcha(120, 40);

        // 中文验证码
//        ChineseCaptcha captcha = new ChineseCaptcha(120, 40);

        // 英文与数字验证码
        SpecCaptcha captcha = new SpecCaptcha(120, 40);

        //英文与数字动态验证码
//        GifCaptcha captcha = new GifCaptcha(120, 40);

        // 中文动态验证码
//        ChineseGifCaptcha captcha = new ChineseGifCaptcha(120, 40);
        // 几位数运算，默认是两位
        captcha.setLen(4);
        // 获取运算的结果
        String text = captcha.text();// 获取验证码文本内容
        System.out.println("验证码文本内容：" + text);
        request.getSession().setAttribute("captcha", text);
        //输出到页面。
        captcha.out(outputStream);
    }
}

从注释就可以看出，easy-captcha的功能还是挺强大，基本上主流的，英文+数字，中文，算术表达式都有。还有一个英文+数字GIF动画的，不过，在博客里也一样要用GIF才能看到效果。其实，博主最喜欢的就是他的英文+数字。跟别人的英文+数字真的是好看太多，而且也不易被软件识别。
在这里插入图片描述

页面里使用

因为整体的代码还是比较长。只放form的这一段了。

<form class="layui-form">
        <div class="login_face"><img src="/resources/images/face.jpg" class="userAvatar"></div>
        <div class="layui-form-item input-item">
            <label for="userName">用户名</label>
            <input type="text" placeholder="请输入用户名" autocomplete="off" name="loginname" class="layui-input" lay-verify="required">
        </div>
        <div class="layui-form-item input-item">
            <label for="password">密码</label>
            <input type="password" placeholder="请输入密码" autocomplete="off" name="pwd" class="layui-input" lay-verify="required">
        </div>
        <div class="layui-form-item input-item" id="imgCode">
            <label for="code">验证码</label>
            <input type="text" placeholder="请输入验证码" autocomplete="off" name="code"  id="code" class="layui-input">
            <img src="/code/getCode">
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button>
        </div>
        <div class="layui-form-item layui-row">
            <!-- <a href="javascript:;" class="seraph icon-qq layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
            <a href="javascript:;" class="seraph icon-wechat layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
            <a href="javascript:;" class="seraph icon-sina layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a> -->
        </div>
    </form>

验证码的功能一般都在后台的登陆系统中使用。毕竟一个网站的管理者权限才是最危险的。

还要注意的是

如果项目里使用了shiro 的话，一定要把验证码的URL放出来，不然的话，你的验证码的路径被你自己的shiro ==敌我不分的胡乱==杀掉了。
这里就不详细说了，这个知识点涉及的问题，比验证码还多。

/**
     * 配置shiro的过滤器
     */
    @Bean(SHIRO_FILTER)
    public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager) {
        ShiroFilterFactoryBean factoryBean = new ShiroFilterFactoryBean();
        // 设置安全管理器
        factoryBean.setSecurityManager(securityManager);
        // 设置未登陆的时要跳转的页面
        factoryBean.setLoginUrl(loginUrl);
        Map<String, String> filterChainDefinitionMap = new HashMap<>();
        // 设置放行的路径
        if (anonUrls != null && anonUrls.length > 0) {
            for (String anon : anonUrls) {
                filterChainDefinitionMap.put(anon, "anon");
            }
        }
        filterChainDefinitionMap.put("/static/**", "anon"); // 先把页面全放行了，不然调 试起来太麻烦了 ，by项目花园范德彪
        filterChainDefinitionMap.put("/code/**", "anon"); //这里要注意的是把验证码的URL放出来，不然不会显示到登陆上。by项目花园范德彪
        
        // 设置登出的路径
        if (null != logOutUrl) {
            filterChainDefinitionMap.put(logOutUrl, "logout");
        }
        // 设置拦截的路径
        if (authcUlrs != null && authcUlrs.length > 0) {
            for (String authc : authcUlrs) {
                filterChainDefinitionMap.put(authc, "authc");
            }
        }
        Map<String, Filter> filters=new HashMap<>();
//        filters.put("authc", new ShiroLoginFilter());
        //配置过滤器
        factoryBean.setFilters(filters);
        factoryBean.setFilterChainDefinitionMap(filterChainDefinitionMap);
        return factoryBean;
    }

成功之后就可以展示出效果图的样子了。

配置文件设置

项目目录，不能有中文或空格，就乖乖的用C语言能识别的变量名是最好的

#配置数据源的属性
spring:
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://127.0.0.1:3306/pet_minimeng?useUnicode=true&characterEncoding=utf8&useSSL=true&serverTimezone=UTC
      username: root
      password: 123456
    #最大活跃数
      max-active: 20
      max-wait: 50000
      initial-size: 1
      filters: stat,log4j,wall
      validationQuery: SELECT 'x'   #验证连接
      enable: true
   #监控配置
      stat-view-servlet:
        enabled: true
        login-username: root
        login-password: xinyerfid
        allow: 
        deny: 
        url-pattern: /druid/*
  #thymeleaf的配置 
  thymeleaf: 
    cache: false
    enabled: true
#      web-stat-filter: 
#        enabled: true
#        exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"

  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8
#  aop:
#    proxy-target-class: true
#配置mybatisplus
mybatis-plus:
  mapper-locations:
  - classpath:mapper/*/*Mapper.xml
  global-config:
    db-config:
      id-type: auto
    banner: true
#  configuration:
#    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    
#shiro的配置
shiro:
  hash-algorithm-name: md5
  hash-iterations: 2
  anon-urls:
  - /wx/**
  - /index.html*
  - /sys/toLogin*
  - /login/login*
  - /resources/**
  - /user/loadAllUser
  - /user/loadUsersByHospitalId
  login-url: /index.html
  log-out-url: /login/logout*
  authc-ulrs:
  - /**
server:
  port: 8088
example:
  wx:
    app-id:
    app-secret:

要注意的是启动的端口号，
数据源里的datasource 的名字。用户名，密码。还有就是mysql 的驱动是com.mysql.jdbc.Driver
总的来说，
com.mysql.jdbc.Driver 是 mysql-connector-java 5.5之前的，
com.mysql.cj.jdbc.Driver 是 mysql-connector-java 6及6之后的的，
初学者容易陷入一个误区，就是什么东西最新版是最好的，事实上很有可能他写的东西，明明JDK6.0就完全足够。一边喊着自己的机器内存不足，一边让内存运行着他自己用不到的东西。就比如说idea应该算是这些开发者工具里最卡的。有人可能明明只是打开几个网页，那为什么不使用webstorm? 甚至不是写很多代码的时候，为什么不选择更轻量级的VSCode?

项目中的一点小技巧：
第一套之后的其实是静态页面。那么从controller里转到public 里的静态资源里。

    /**
     * 跳转到首页
     */
    @RequestMapping("index")
    public String index() {
//        return "system/index/index";
        return "redirect:/index.html";
    }

所以，第2套到第6套如果还是要用菜单的话，只需要将return "system/index/index"; 的注释打开，再将return "redirect:/index.html"; 这一行注释掉就可以了。

导数据库

打开mysql-front 或navicat
注意：数据库名：jsb_db_score 超级用户：root 密码：123456
运行本例附件即可。最后导入数据库成功的截图如下：
系统登陆信息使用了md5加密
超级管理员：用户admin密码123456
在这里插入图片描述

ER图：很常用的用户，角色，权限模型，还有一个loginfo的登陆信息
业务表大部分都删掉了，不然表太多，学习起来也累。
在这里插入图片描述

项目目录如图：

不熟悉SpringBoot的人，可以好好研读一下【JSB系列】，注意目录层次。

关于public 与template 的差别请参见《SpringBoot项目中WEB页面放哪里--【JSB系列之008】》

代码部分：

其它的代码直接参考另一篇登陆《SpringBoot登陆+6套主页-【JSB项目实战】》
项目不同，而且这个项目密码也加密了，还使用了shiro。

登陆进去之后

管理的界面大多数都是左树右表。
在这里插入图片描述

其它配套页面展示

直接给第二套方案的页面吧

在这里插入图片描述

第三套方案的页面。

在这里插入图片描述

让人发疯的好长好长的配套4的页面。

在这里插入图片描述

无电商不主页的配套5页面

在这里插入图片描述

迷你版电商的配套6

在这里插入图片描述

配套资源

不要VIP，就看你有多少积分了，还有就是CSDN好象自己会涨价。早下早享受哟
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】1
https://download.csdn.net/download/dearmite/88104969
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】2
https://download.csdn.net/download/dearmite/88105072?spm=1001.2014.3001.5503
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】3
https://download.csdn.net/download/dearmite/88105075
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】4
https://download.csdn.net/download/dearmite/88105180?spm=1001.2014.3001.5503
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】5
https://download.csdn.net/download/dearmite/88105183
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】6
https://download.csdn.net/download/dearmite/88105311?spm=1001.2014.3001.5503

作业：

无，看懂即是神
彪哥经典语录：学项目，你得灵活，对方不按套路出牌，那你也不能按套路去打。

SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】

SpringBoot系列文章目录

本系列校训

SpringBoot技术很多很多

环境及工具：

上效果图

目前流行的验证码技术

早期的硬核画Graphics

CAPTCHA技术群雄乱战

使用方式也是五花八门

本文介绍的是SpecCaptcha或者叫easy-captcha？

项目里如何使用

maven的pom.xml

控制层

页面里使用

还要注意的是

配置文件设置

导数据库

项目目录如图：

代码部分：

登陆进去之后

其它配套页面展示

直接给第二套方案的页面吧

第三套方案的页面。

让人发疯的好长好长的配套4的页面。

无电商不主页的配套5页面

迷你版电商的配套6

配套资源

作业：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】

SpringBoot系列文章目录

本系列校训

SpringBoot技术很多很多

环境及工具：

上效果图

目前流行的验证码技术

早期的硬核画Graphics

CAPTCHA技术群雄乱战

使用方式也是五花八门

本文介绍的是SpecCaptcha或者叫easy-captcha？

项目里如何使用

maven的pom.xml

控制层

页面里使用

还要注意的是

配置文件设置

导数据库

项目目录如图：

代码部分：

登陆进去之后

其它配套页面展示

直接给第二套方案的页面吧

第三套方案的页面。

让人发疯的好长好长的配套4的页面。

无电商不主页的配套5页面

迷你版电商的配套6

配套资源

作业：

热门文章

最新文章

相关课程

相关电子书

相关实验场景