SpringBoot+Vue realizes the functional requirements of picture verification code

There is a personal public account at the bottom of the article: Xiao Zheng who loves technology. Mainly share development knowledge, if you are interested, you can pay attention. Why share? There is no need for others to step on the pits that have been stepped on, and replaying the game by yourself can also deepen the memory. Self-interest and others, the so-called win-win situation.

foreword

I have written the requirement development of saving the verification code in Redis, and also written the requirement development of calling the third-party interface to send the verification code directly to the mobile phone. This time, get a more common picture verification code. The user clicks on the picture to obtain the verification code, and the verification code is directly displayed on the page. There are many source codes, and it is not convenient to give them all here. If necessary, you can enter the verification code in my official account to obtain the source code.

Effect demo

Verification code login

Page Effect Demo

Here I wrote two sets of login page effect display. The function of the verification code is exactly the same, and the same interface is called. If you need to log in to the interface, enter the keyword verification code in the official account to get the source code of the login interface.

insert image description here

project structure

1.1 Backend project structure

The main function is realized by the backend, and the frontend is only responsible for displaying. I am here to gradually add new functions to the system that has been completed before. The version control used, so the color of the file you see will vary.

insert image description here

Specific implementation process

1.1 Basic steps

1. Add a verification code table to the database
2. Add pom dependencies
3. The method of generating the verification code picture at the back end
4. The method of verifying the verification code at the back end
5. Front-end display verification code picture

1.2 Create a table

insert image description here

1.3 Import Pom dependencies

These dependencies are related to generating image verification codes. For specific usage methods, please refer to the information yourself.

        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version>
        </dependency>
        <dependency>
            <groupId>com.github.axet</groupId>
            <artifactId>kaptcha</artifactId>
            <version>0.0.9</version>
        </dependency>

        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
            <version>2.9.9</version>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

1.4 Method of generating verification code

Here is the core verification code implementation method

    @Override
    public BufferedImage getCaptcha(String uuid) {
    
    
        if(StringUtils.isBlank(uuid)){
    
    }
        
        //生成文字验证码
        String code = producer.createText();
        SysCaptchaEntity captchaEntity = new SysCaptchaEntity();
        captchaEntity.setUuid(uuid);
        captchaEntity.setCode(code);
        //5分钟后过期
        captchaEntity.setExpireTime(DateUtils.addDateMinutes(new Date(), 5));
        this.save(captchaEntity);

        return producer.createImage(code);
    }

1.5 Verify the input verification code

The core part, verify the verification code entered by the user, and check whether the input verification code is expired

    @Override
    public boolean validate(String uuid, String code) {
    
    
        SysCaptchaEntity captchaEntity = this.getOne(new QueryWrapper<SysCaptchaEntity>().eq("uuid", uuid));
        if(captchaEntity == null){
    
    
            return false;
        }

        if(captchaEntity.getCode().equalsIgnoreCase(code) && captchaEntity.getExpireTime().getTime() >= System.currentTimeMillis()){
    
    
            //删除验证码
            this.removeById(uuid);
            return true;
        }

        return false;
    }

1.6 Front-end display

Use this part <img :src="captchaPath" @click="getCaptcha()" alt="" />to implement image echoing.

        <el-form-item prop="captcha">
          <span slot="label">
            <span style="color: white"><strong>验证码</strong></span>
          </span>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-input
                v-model="ruleForm.captcha"
                placeholder="验证码"
              >
              </el-input>
            </el-col>
            <el-col :span="10" class="login-captcha">
              <img :src="captchaPath" @click="getCaptcha()" alt="" />
            </el-col>
          </el-row>
        </el-form-item>

Afterword

Slowly add new functions to your system, learn endlessly, come on! ! !

All files included in the source code and the sql script file directory are as follows:

insert image description here