验证码的后端生成与前端接收
- 后端采用开源工具类来生成验证码
导入依赖
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
<version>1.6.2</version>
</dependency>
此验证码工具类特别强大,不仅满足前后端分离项目,也满足其它需要:介绍详情:https://github.com/whvcse/EasyCaptcha
- 直接利用输入输出流来加载出验证码
@RequestMapping("/getImage2")
public void getImage(HttpServletRequest request, HttpServletResponse response) throws IOException{
CaptchaUtil.out(request, response);
}
在 postman工具中测试,看该接口回返回什么东西:
前端使用:
<img src="/user/getImage2" width="130px" height="48px" />
- 输出base64编码
@RequestMapping("/getImage")
public String getImageCode(HttpServletRequest request){
SpecCaptcha specCaptcha = new SpecCaptcha(130,48,4);//三个参数分别为:图片的长宽和验证码的个数
String code = specCaptcha.text().toLowerCase();
request.getSession().setAttribute("verifyCode", code);
String s = specCaptcha.toBase64();
return s;
}
在 postman工具中测试,看该接口回返回什么东西:
前端使用:
<img src="/user/getImage" width="130px" height="48px" />
前端上传图片与后端接收,及图片的再次在前端展示
- 前端的文件上传控件
<td>
<input type="file" ref = "myPhoto">
</td>
- 发送请求时携带该控件所携带的信息
- 后端接收文件的接口
@RestController
@RequestMapping("emp")
@CrossOrigin
public class EmpController {
@Value("${photo.dir}")
private String realPath;
@Autowired
private EmpService empService;
@PostMapping("save")
public Map<String, Object> save(Emp emp, MultipartFile photo) throws IOException {
System.out.println(emp);
System.out.println(photo.getOriginalFilename());
Map<String,Object> map = new HashMap<>();
//头像保存
try {
//用UUID为了使文件名不重复
String newFileName = UUID.randomUUID().toString()+"." + FilenameUtils.getExtension(photo.getOriginalFilename());
//下面代码的作用,是将MultipartFile转换成普通的File文件,同时把file存放的固定的目录文件夹下
photo.transferTo(new File(realPath, newFileName));
//在数据库中只保存它的地址,不去存完整的路径名,只需要存储后面用UUID生成的名字,因为前面的名字,可以固定的写好,或者在前端拼接。
emp.setPath(newFileName);
//在数据库中只保存它的地址
empService.sava(emp);
map.put("state",true);
map.put("msg","员工信息保存成功");
} catch (Exception e) {
e.printStackTrace();
map.put("state",false);
map.put("msg","保存失败");
}
return map;
}
}
在后端建立一个文件夹,用来放前端接收到的文件
- 前端的文件展示
一般情况当我们启动Springboot项目后我们可以直接用浏览器输入地址来访问某个资源,如:图的文件资源
所以在前端,只要找到该地址进行绑定即可
补充:如果不是图片呢?如果只是普通的文件会怎么呢?例如一个doc文件
在浏览器中输入该资源的地址,就可以下载了!!