1：后端导入程序依赖
<dependency><groupId>com.anji-plus</groupId><artifactId>spring-boot-starter-captcha</artifactId><version>1.3.0</version></dependency>
开源代码链接
/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 ")@Configurationpublic class CorsFilter implements Filter {@Overridepublic 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);}}
打开页面即可看到滑块验证码登录。如果想在点击按钮时触发验证码
