一个充满科技感的登录页面以及图片验证码功能实现

温馨提示，前端代码是基于 vue 的，因此你可能需要了解 vue 才能看懂前端代码。因为代码写的比较仓促，风格可能不太好，如因代码引起不适，请关闭浏览器。:dog:（狗头保命）

图片验证码

图片验证码我是用 EasyCaptcha 生成的，如需更深入了解，点击 EasyCaptcha 跳转。

maven 项目导入

   
      com.github.whvcse
      easy-captcha
      1.6.2
   

使用 SpecCaptcha 生成 PNG 格式验证码

如需生成 gif 类型、 中文 类型等，请查看文档。

@GetMapping("getCode")
public void getCode(HttpServletRequest request, HttpServletResponse response) throws Exception {
    // 设置宽、高、位数
    SpecCaptcha specCaptcha = new SpecCaptcha(200, 40, 5);
    String text = specCaptcha.text();
    redisTemplate.setValueSerializer(new StringRedisSerializer());
    redisTemplate.opsForValue().set("VERIFY_CODE", text, 5 * 60, TimeUnit.SECONDS);
    specCaptcha.out(response.getOutputStream());
}

这里使用 redis 缓存的目的主要是因为我这个项目是前后端分离的，将验证码存储在 redis 中便于验证码的校，前后端分离项目建议不要存储在 session 中，当然也可以往 session 中存。

前端请求

getCode() {
  let url = BACKEND_IP_AND_PORT + "/captcha/getCode";
  let xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = "blob";
  xhr.onload = function () {
    if (this.status === 200) {
      let res = this.response;
      $("#code").attr("src", window.URL.createObjectURL(res));
    }
  };
  xhr.send();
}

因为后台传回的是流的形式，因此需要将其转为 blob 格式再赋予 img 标签。

效果展示

image.png

完成代码及登录页面展示

Untitled.gif

下面轮到代码出场了。

后端代码

import com.wf.captcha.SpecCaptcha;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.StringRedisSerializer;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.concurrent.TimeUnit;


@RestController
@RequestMapping("captcha")
@CrossOrigin
public class CaptchaController {

    private final static Logger logger = LoggerFactory.getLogger(CaptchaController.class);

    private final RedisTemplate redisTemplate;

    @Autowired
    public CaptchaController(RedisTemplate redisTemplate) {
        this.redisTemplate = redisTemplate;
    }

    @GetMapping("getCode")
    public void getCode(HttpServletRequest request, HttpServletResponse response) throws Exception {
        // 设置宽、高、位数
        SpecCaptcha specCaptcha = new SpecCaptcha(200, 40, 5);
        String text = specCaptcha.text();
        redisTemplate.setValueSerializer(new StringRedisSerializer());
        redisTemplate.opsForValue().set("VERIFY_CODE", text, 5 * 60, TimeUnit.SECONDS);
        specCaptcha.out(response.getOutputStream());
    }
}

前端代码

---------------------------------分割线------------------------------------

应简友要求，把背景图片上传分享一下：

链接：https://pan.baidu.com/s/1sEJpDXKJyNggjm_5H8EYRA
提取码：mugu