前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
<form action="">
用户名：<input type="text" v-model="user.username"><br>
密码: <input type="password" v-model="user.password"><br>
验证码: <input type="text" v-model="code">
<!--前后端分离的架构, 动态访问验证码-->
<img :src="src" id="img-vcode" @click="getImage" :key="key"><br>
<input type="button" value="提交" @click="submit()">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
src: "",
key: "",//后端验证码的值
user:{},
code: "",
},
methods: {
getImage() { //点击切换验证码
_this = this;
axios.get("http://localhost:8080/user/getImage").then((res) => {
_this.src = "data:image/png;base64," + res.data.image;
_this.key = res.data.key;
console.log(res.data.key)
})
},
submit(){
_this = this;
console.log(_this.key)
axios.post("http://localhost:8080/user/register?code="+this.code+"&key="+this.key,this.user).then((res)=> {
console.log(res.data);
})
}
},
created() {
this.getImage(); // 获取验证码
}
});
</script>
</html>
后端
package com.me.travels.controller;
import com.me.travels.entity.ResponseEntity;
import com.me.travels.entity.User;
import com.me.travels.utils.CreateImageCode;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.util.Base64Utils;
import org.springframework.web.bind.annotation.*;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("/user")
@Slf4j // 日志对象
public class UserController {
@PostMapping("/register")
@ResponseBody
public ResponseEntity register(String code,String key,@RequestBody User user,HttpServletRequest request) {
System.out.println("接受的request::"+request);
System.out.println("接受的验证码"+code);
System.out.println("接收的key"+key);
// System.out.println(user);
//后端真正的验证码值
Object realcode = request.getAttribute(key);
System.out.println("真正的验证码"+realcode);
if (code.equalsIgnoreCase((String) realcode)){
System.out.println("++++++++++成功++++++++++");
return ResponseEntity.OK();
}else {
System.out.println("============失败============");
return ResponseEntity.ERROR("failed");
}
}
/**
* 生成验证码
* @throws IOException
*/
@GetMapping("/getImage")
@ResponseBody
public Map<String, String> getImage(HttpServletRequest request) throws IOException {
Map<String, String> result = new HashMap<>();
CreateImageCode createImageCode = new CreateImageCode();
// 获取验证码
String securityCode = createImageCode.getCode();
// 验证码存入session
String key = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
System.out.println("conroller 的key"+key);
request.setAttribute(key, securityCode);
System.out.println("生成的验证码"+request.getAttribute(key));
System.out.println("生成的request::"+request);
// 生成图片
BufferedImage image = createImageCode.getBuffImg();
//进行base64编码
ByteArrayOutputStream bos = new ByteArrayOutputStream();
ImageIO.write(image, "png", bos);
String string = Base64Utils.encodeToString(bos.toByteArray());
result.put("key", key);
result.put("image", string);
return result;
}
}
明明request都是一样的，key我也拿到了，可是为什么取不出真正的验证码
我要疯了！
