Vue2实现滑块验证码登录验证

1：后端导入程序依赖

        <dependency>
            <groupId>com.anji-plusgroupId>
            <artifactId>spring-boot-starter-captchaartifactId>
            <version>1.3.0version>
        dependency>

开源代码链接
https://github.com/anji-plus/captcha

2：前端导入vertification

修改绑定地址

修改为后端打开运行时的前端端口号

3：在使用的页面导入包

并在export default中的conponents里添加Verify

在使用的模块加入Verify组件

此处的@success表示当验证成功时，跳转到方法doSendEmailCode，我们在script中添加此方法即可
注：在你验证成功后会有一个参数输出。

4：后端导入CorsFilter

package net.botany.config;

import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


@WebFilter(filterName = "CorsFilter ")
@Configuration
public class CorsFilter implements Filter {

    @Override
    public  void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws ServletException, IOException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        response.setContentType("application/json; charset=utf-8");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET,PUT, OPTIONS, DELETE");//http请求方式
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, token");
        filterChain.doFilter(request, response);
    }

}

打开页面即可看到滑块验证码登录。如果想在点击按钮时触发验证码