将验证码配置到配置文件中 增加ie适配css

QMPlusServer/config/config.go

@@ -13,6 +13,7 @@ type Config struct {
 	RedisAdmin   RedisAdmin   `json:"redisAdmin"`
 	System       System       `json:"system"`
 	JWT          JWT          `json:"jwt"`
+	Captcha      Captcha      `json:"captcha"`
 }
 
 type System struct { // 系统配置
@@ -47,6 +48,12 @@ type Qiniu struct { // 七牛 密钥配置
 	SecretKey string `json:"secretKey"`
 }
 
+type Captcha struct { // 验证码配置
+	KeyLong   int `json:"keyLong"`
+	ImgWidth  int `json:"imgWidth"`
+	ImgHeight int `json:"imgHeight"`
+}
+
 var GinVueAdminconfig Config
 var VTool *viper.Viper
 

QMPlusServer/controller/api/sys_captcha.go

@@ -1,6 +1,7 @@
 package api
 
 import (
+	"gin-vue-admin/config"
 	"gin-vue-admin/controller/servers"
 	"github.com/dchest/captcha"
 	"github.com/gin-gonic/gin"
@@ -15,11 +16,11 @@ import (
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
 // @Router /base/captcha [post]
 func Captcha(c *gin.Context) {
-	captchaId := captcha.NewLen(6)
-		servers.ReportFormat(c,true,"验证码获取成功",gin.H{
-			"captchaId":captchaId,
-			"picPath":"/base/captcha/"+captchaId+".png",
-		})
+	captchaId := captcha.NewLen(config.GinVueAdminconfig.Captcha.KeyLong)
+	servers.ReportFormat(c, true, "验证码获取成功", gin.H{
+		"captchaId": captchaId,
+		"picPath":   "/base/captcha/" + captchaId + ".png",
+	})
 }
 
 // @Tags base
@@ -32,10 +33,3 @@ func Captcha(c *gin.Context) {
 func CaptchaImg(c *gin.Context) {
 	servers.GinCapthcaServeHTTP(c.Writer, c.Request)
 }
-
-
-
-
-
-
-

QMPlusServer/controller/servers/captcha.go

@@ -3,6 +3,7 @@ package servers
 import (
 	"bytes"
 	"fmt"
+	"gin-vue-admin/config"
 	"github.com/dchest/captcha"
 	"net/http"
 	"path"
@@ -25,7 +26,7 @@ func GinCapthcaServeHTTP(w http.ResponseWriter, r *http.Request) {
 	}
 	lang := strings.ToLower(r.FormValue("lang"))
 	download := path.Base(dir) == "download"
-	if Serve(w, r, id, ext, lang, download, 120, 40) == captcha.ErrNotFound {
+	if Serve(w, r, id, ext, lang, download, config.GinVueAdminconfig.Captcha.ImgWidth, config.GinVueAdminconfig.Captcha.ImgHeight) == captcha.ErrNotFound {
 		http.NotFound(w, r)
 	}
 }
@@ -52,4 +53,3 @@ func Serve(w http.ResponseWriter, r *http.Request, id, ext, lang string, downloa
 	http.ServeContent(w, r, id+ext, time.Time{}, bytes.NewReader(content.Bytes()))
 	return nil
 }
-

QMPlusServer/static/config/config.json

@@ -25,5 +25,10 @@
         "useMultipoint": false,
         "env": "develop",
         "addr": 8888
+    },
+    "captcha": {
+        "keyLong": 6,
+        "imgWidth": 120,
+        "imgHeight": 40
     }
 }

QMPlusVuePage/src/view/login/login.vue

@@ -16,10 +16,11 @@
             <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
           </el-input>
         </el-form-item>
-        <el-form-item>
+        <el-form-item style="position:relative">
           <el-input
             v-model="loginForm.captcha"
             name="logVerify"
+            placeholder="请输入验证码"
             maxlength="10"
           />
           <img :src="path + picPath" alt="请输入验证码" @click="loginVefify()" class="vPic">
@@ -121,6 +122,7 @@ export default {
   .vPic{
     position: absolute;
     right: 10px;
+    bottom: 0px;   // 适配ie
   }
 }
 </style>