验证码

src/main/java/com/izouma/nineth/service/CaptchaService.java

@@ -31,8 +31,8 @@ public class CaptchaService {
 //        captchaCache.put(key, code);
 
         // 算术类型
-        ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 48);
-        captcha.setFont(com.pig4cloud.captcha.base.Captcha.FONT_7, 24 * 2);
+        ArithmeticCaptcha captcha = new ArithmeticCaptcha(150, 48);
+        captcha.setFont(com.pig4cloud.captcha.base.Captcha.FONT_7, 15 * 2);
         captcha.setLen(2);  // 几位数运算，默认是两位
         captcha.getArithmeticString();  // 获取运算的公式：3+2=?
         captcha.supportAlgorithmSign(2); // 可设置支持的算法：2 表示只生成带加减法的公式

src/main/java/com/izouma/nineth/web/SmsController.java

@@ -34,7 +34,9 @@ public class SmsController {
         if (!Pattern.matches(Constants.Regex.PHONE, phone)) {
             throw new BusinessException("请输入正确的手机号");
         }
-        captchaService.verify(captchaKey, captcha);
+        if (!captchaService.verify(captchaKey, captcha)) {
+            throw new BusinessException("验证码错误");
+        }
         return smsService.sendVerify(phone);
     }
 

src/main/vue/src/router.js

@@ -562,6 +562,14 @@ const router = new Router({
                     meta: {
                         title: '用户余额'
                     }
+                },
+                {
+                    path: '/captcha',
+                    name: 'captcha',
+                    component: () => import(/* webpackChunkName: "captcha" */ '@/views/Captcha.vue'),
+                    meta: {
+                        title: 'captcha'
+                    }
                 }
                 /**INSERT_LOCATION**/
             ]
@@ -603,7 +611,7 @@ router.beforeEach((to, from, next) => {
         window.open(url);
         return;
     }
-    if (!store.state.userInfo && to.path !== '/login' && to.path!=='/photoProcessing') {
+    if (!store.state.userInfo && to.path !== '/login' && to.path !== '/photoProcessing') {
         http.axios
             .get('/user/my')
             .then(res => {

src/main/vue/src/views/Captcha.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <el-button @click="getCaptcha">get</el-button>
+        {{ key }}
+        <img :src="img" />
+        <div>
+            <el-input v-model="code"></el-input>
+            <el-button @click="verify">verify</el-button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            img: '',
+            key: '',
+            code: ''
+        };
+    },
+    created() {
+        this.getCaptcha();
+    },
+    methods: {
+        getCaptcha() {
+            this.$http.get('/captcha/get').then(res => {
+                this.img = res.image;
+                this.key = res.key;
+            });
+        },
+        verify() {
+            this.$http
+                .get('/captcha/verify', {
+                    key: this.key,
+                    code: this.code
+                })
+                .then(res => {
+                    this.$message.success(res);
+                })
+                .catch(e => {
+                    this.$message.error(e.error);
+                });
+        }
+    }
+};
+</script>