后端程序员福音:vue-element-admin
【后端程序员福音:vue-element-admin】前言:作为一个后端程序员 , 并没有太多时间和精力去详细研究前端 , 毕竟前端也要吃饭呀 , 相煎何急 , 何必抢人饭碗呢 。 所以 , 前端部分的功能 , 能改则改 , 能抄则抄 , 囫囵吞枣 , 能跑就行 。
文章插图
- 重启后 , 最终展示效果如下
文章插图
补充:重写了验证码生成方法根据登录页面效果图不难发现 , 验证码由原来的扭曲文字变为了数学公式 。
这是因为之前用扭曲文字作为验证码时 , 人眼识别验证码也很困难 , 所以重新处理了验证码的生成方法 。
- CaptchaCtl.java
package top.baohaipeng.framework.controller;import cn.hutool.captcha.CaptchaUtil;import cn.hutool.captcha.ShearCaptcha;import cn.hutool.captcha.generator.MathGenerator;import cn.hutool.core.math.Calculator;import cn.hutool.core.util.IdUtil;import com.github.benmanes.caffeine.cache.Cache;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import top.baohaipeng.framework.common.CommonData;import top.baohaipeng.framework.common.R;/** * @ClassName CaptchaCtl * @Description 验证码 * @Author 头条号:北海派bhp * @Date 2020/9/25 21:42 * @Version 1.0 **/@RestController@RequestMapping("bhp-framework")public class CaptchaCtl {@AutowiredCache captchaCache;@GetMapping("captcha")public R getCaptcha() {ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(111, 36);String uuid = IdUtil.simpleUUID();// 自定义验证码内容为四则运算方式captcha.setGenerator(new MathGenerator());// 重新生成codecaptcha.createCode();// 验证码对应的字符串String code = String.valueOf((int)Calculator.conversion(captcha.getCode()));System.out.println("真实验证码是:" + code);// 放入缓存captchaCache.put(uuid, code);System.out.println("uuid: " + uuid);// 返回响应对象CommonData data = http://kandian.youth.cn/index/new CommonData();data.setUuid(uuid);data.setImg(captcha.getImageBase64());return R.success(data);}@GetMapping("check/{uuid}/{code}")public R getCache(@PathVariable String uuid, @PathVariable String code) {// 从缓存中取 , 找不到返回nullString s = (String) captchaCache.asMap().getOrDefault(uuid, null);if (s == null) {return R.error("验证码已过期");} else if (code.equals(s)) {return R.success("验证通过");}return R.error();}}
至此 , 项目基本引入了后端程序员福音——vue-element-admin的页面 , 下面会逐步处理完善 。文章插图
推荐阅读
- 程序员为教师妻子开发应用:将iPhone变成文档摄像头
- 悔哭!一程序员误把7500个比特币当垃圾扔掉,估算约2.4亿美元
- 2.4亿美元打水漂!程序员小哥把7500个比特币当垃圾扔掉 硬盘找不回
- 程序员开发抢茅台脚本:2天就刷榜Github
- 为什么我喜欢C语言,却非常讨厌C++?一位国外程序员的回答
- 程序员怎么保护头发?雷军回应
- 北美程序员Tinder翻车实录
- 导航|攻坚“卫星导航信号弱”难题,高德程序员联手武大学子夺得国际室内定位大赛冠军
- 长沙|视频|聚焦“数字英雄”长沙银行冠名全国首档程序员电视真人秀
- 孙玲|从流水线女工逆袭成高薪程序员 一度爆红的她现在咋样了?