使用springboot+vue实现图片验证码登录验证的前后端代码
时间: 2023-07-27 07:05:46 浏览: 83
以下是使用Spring Boot和Vue.js实现图片验证码登录验证的前后端代码:
## 后端代码(Spring Boot)
### 1. 引入依赖
在`pom.xml`中添加以下依赖:
```xml
<dependency>
<groupId>com.github.axet</groupId>
<artifactId>kaptcha</artifactId>
<version>0.0.9</version>
</dependency>
```
### 2. 创建验证码生成器
在`config`包下创建一个`KaptchaConfig`类,用于配置验证码生成器:
```java
@Configuration
public class KaptchaConfig {
@Bean
public Producer captchaProducer() {
Properties properties = new Properties();
// 配置验证码生成器
// ...
return new DefaultKaptcha();
}
}
```
### 3. 创建验证码接口
在`controller`包下创建一个`CaptchaController`类,用于生成验证码图片:
```java
@RestController
@RequestMapping("/captcha")
public class CaptchaController {
@Autowired
private Producer captchaProducer;
@GetMapping("/image")
public void captchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 设置响应头信息,告诉浏览器返回的是图片
response.setContentType("image/jpeg");
// 配置验证码生成器
// ...
// 生成验证码文本和图片
String captchaText = captchaProducer.createText();
BufferedImage captchaImage = captchaProducer.createImage(captchaText);
// 将验证码文本存入session
HttpSession session = request.getSession();
session.setAttribute("captchaText", captchaText);
// 将验证码图片输出到响应流中
ServletOutputStream out = response.getOutputStream();
ImageIO.write(captchaImage, "jpeg", out);
out.flush();
out.close();
}
}
```
### 4. 创建登录接口
在`controller`包下创建一个`LoginController`类,用于处理登录请求:
```java
@RestController
@RequestMapping("/login")
public class LoginController {
@PostMapping("/check")
public boolean check(@RequestParam String captcha, HttpSession session) {
// 获取session中存储的验证码文本
String captchaText = (String) session.getAttribute("captchaText");
// 比较用户输入的验证码和session中存储的验证码是否一致
return captchaText != null && captchaText.equalsIgnoreCase(captcha);
}
}
```
## 前端代码(Vue.js)
### 1. 安装依赖
在项目目录下执行以下命令安装依赖:
```bash
npm install axios vue-axios vue-qriously
```
### 2. 创建组件
在`components`目录下创建一个`CaptchaLogin`组件,包含一个输入框、一个验证码图片和一个登录按钮:
```html
<template>
<div>
<input type="text" v-model="captcha" placeholder="请输入验证码" />
<qriously :value="captchaImageUrl"></qriously>
<button @click="login">登录</button>
</div>
</template>
<script>
import axios from "axios";
import VueAxios from "vue-axios";
import Qriously from "vue-qriously";
export default {
name: "CaptchaLogin",
components: {
Qriously,
},
data() {
return {
captcha: "",
captchaImageUrl: "",
};
},
created() {
this.refreshCaptcha();
},
methods: {
refreshCaptcha() {
const captchaUrl = `/captcha/image?timestamp=${new Date().getTime()}`;
this.captchaImageUrl = captchaUrl;
},
login() {
axios
.post("/login/check", { captcha: this.captcha })
.then((response) => {
if (response.data) {
alert("登录成功");
} else {
alert("验证码错误");
}
this.refreshCaptcha();
});
},
},
mounted() {
Vue.use(VueAxios, axios);
},
};
</script>
```
### 3. 在页面中使用组件
在需要登录验证的页面中使用`CaptchaLogin`组件:
```html
<template>
<div>
<CaptchaLogin />
</div>
</template>
<script>
import CaptchaLogin from "@/components/CaptchaLogin.vue";
export default {
name: "LoginPage",
components: {
CaptchaLogin,
},
};
</script>
```