Gin 中使用 base64Captcha 生成图形验证码

验证码库
https://github.com/mojocn/base64Captcha
中文文档
Go进阶37:重构我的base64Captcha图形验证码项目 | 🐶❤️🦀
在models文件夹中写一个验证码的文件,Captcha.go
package modelsimport ("github.com/mojocn/base64Captcha""image/color"
)// 设置自带的 store 存在服务器内存中
var store = base64Captcha.DefaultMemStore// GetCaptcha 获取验证码
func GetCaptcha() (string, string, error) {// 生成验证码var driver base64Captcha.Driver//driver = base64Captcha.NewDriverString(80, 240, 0, 0, 4, "1234567890", nil)//设置验证码的配置driverString := base64Captcha.DriverChinese{Height:          40,           //设置验证码图片的高度Width:           100,          //设置验证码图片的宽度NoiseCount:      0,            //设置干扰线的数量ShowLineOptions: 2 | 4,        //设置线条的类型Length:          4,            //设置验证码的长度Source:          "1234567890", //设置验证码的字符源BgColor: &color.RGBA{ //设置验证码图片的背景颜色R: 3,G: 102,B: 214,A: 125,},Fonts: []string{"wqy-microhei.ttc"}, //设置验证码的字体}//生成验证码driver = driverString.ConvertFonts()//生成base64图片c := base64Captcha.NewCaptcha(driver, store)//验证码id base64图片字符串 验证码字符串 errorid, b64s, _, err := c.Generate()return id, b64s, err
}// VerifyCaptcha 验证验证码
func VerifyCaptcha(id string, VerifyValue string) bool {//验证验证码,参数1是验证码的id,参数2是用户输入的验证码if store.Verify(id, VerifyValue, true) {return true} else {return false}
}

在登录控制器中添加获取验证码的方法,LoginController.go

package adminimport ("gin1/models""github.com/gin-gonic/gin""net/http"
)type LoginController struct {}func (con LoginController) Index(c *gin.Context) {c.HTML(http.StatusOK, "admin/login/login.html", gin.H{})
}
func (con LoginController) DoLogin(c *gin.Context) {// 获取参数verifyValue := c.PostForm("verifyValue")captchaId := c.PostForm("captchaId")// 验证验证码if !models.VerifyCaptcha(captchaId, verifyValue) {c.JSON(http.StatusBadRequest, gin.H{"code": 400, "msg": "验证码错误"})return} else {c.JSON(http.StatusOK, gin.H{"code": 200, "msg": "验证码正确"})return}}// GetCaptcha 获取验证码
func (con LoginController) GetCaptcha(c *gin.Context) {// 生成验证码,返回验证码id,base64图片字符串id, base64, err := models.GetCaptcha()if err != nil {c.JSON(http.StatusBadRequest, gin.H{"code": 400, "msg": "验证码生成失败"})return}//定义一个map,用来存储验证码id和base64图片字符串data := make(map[string]interface{})data["id"] = iddata["image"] = base64c.JSON(http.StatusOK, gin.H{"code": 200, "msg": "验证码生成成功", "data": data})
}

设置路由,Admin.go

package routersimport ("gin1/controllers/admin""gin1/middlewares""github.com/gin-gonic/gin"
)func AdminRoutersInit(r *gin.Engine) {//middlewares.InitMiddleware中间件adminRouters := r.Group("/admin", middlewares.Init){//后台首页adminRouters.GET("/", admin.MainController{}.Index)//欢迎页adminRouters.GET("/welcome", admin.MainController{}.Welcome)//登录页adminRouters.GET("/login", admin.LoginController{}.Index)//登录操作adminRouters.POST("/doLogin", admin.LoginController{}.DoLogin)//获取验证码adminRouters.GET("/getCaptcha", admin.LoginController{}.GetCaptcha)}
}

登录页面,Login.html

{{ define "admin/login/login.html" }}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>用户登录</title><link rel="stylesheet" href="/static/admin/css/login.css"><script type="text/javascript" src="/static/admin/bootstrap/js/jquery-1.10.1.js"></script><script type="text/javascript" src="/static/admin/js/login.js"></script>
</head>
<body>
<div class="container"><div id="login"><form action="/admin/doLogin" method="post" id="myform"><input type="hidden" name="captchaId" id="captchaId"><div class="l_title">小米商城后台管理系统-IT营</div><dl><dd>管理员姓名:<input class="text" type="text" name="username" id="username"></dd><dd>管理员密码:<input class="text" type="password" name="password" id="password"></dd><dd>验 证 码:<input id="verify" type="text" name="verifyValue"><img id="captchaImg" src=""></dd><dd><input type="submit" class="submit" name="dosubmit" value=""></dd></dl></form></div>
</div></body>
</html>{{end}}

登录页的js,login.js

$(function(){app.init();
})
var app={init:function(){this.getCaptcha()this.captchaImgChage()},getCaptcha:function(){$.get("/admin/getCaptcha?t="+Math.random(),function(response){console.log(response)$("#captchaId").val(response.data.id)$("#captchaImg").attr("src",response.data.image)})},captchaImgChage:function(){var that=this;$("#captchaImg").click(function(){that.getCaptcha()})}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/680926.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【小沐学GIS】基于C++QT绘制三维数字地球Earth(OpenGL)

&#x1f37a;三维数字地球系列相关文章如下&#x1f37a;&#xff1a;1【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;456:OpenGL、glfw、glut&#xff09;第一期2【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;456:OpenGL、glfw、glut&#xff09;第二期3【小沐…

QT:实现图片选择器

一、效果图 二、用到的类 qApp&#xff1a;可以快速获取到项目目录位置。 QSettings &#xff1a;编写config文件&#xff0c;记录上次打开图片的位置&#xff0c;下次打开图片会从上次的位置查找图片。 QPixmap&#xff1a;用于图片的缩放&#xff0c;防止图片过小&#xff0…

DVWA靶场下载安装

DVWA介绍 DVWA 一共包含了十个攻击模块&#xff0c;分别是:Brute Force(暴力破解)、Command Injection(命令行注入)、CSRF(跨站请求伪造)、File Inclusion(文件包含)、File Upload(文件上传)、Insecure CAPTCHA (不安全的验证码)、SQL Injection(SQL注入)、SQL Injection Blin…

【Java程序设计】【C00249】基于Springboot的私人健身与教练预约管理系统(有论文)

基于Springboot的私人健身与教练预约管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的私人健身与教练预约管理系统 本系统分为系统功能模块、管理员功能模块、教练功能模块以及用户功能模块。 系统功能模…

一、部署Oracle

部署Oracle 一、Docker部署1.Oracle11g1.1 测试环境1.1.1 拉取镜像1.1.2 启动容器1.1.3 配置容器环境变量1.1.4 修改sys、system用户密码1.1.5 创建表空间1.1.6 创建用户并授权1.1.5 使用DBeaver测试连接 二、安装包部署 一、Docker部署 1.Oracle11g 1.1 测试环境 当前只能用…

【Spring MVC篇】Cookie和Session的获取 Header的获取

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Spring MVC】 本专栏旨在分享学习Spring MVC的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; Cookie是客户端保存用…

「知识札记」1.Object[ ]数组

前言 这个系列主要记录一些比较零碎、细节的知识点&#xff0c;随缘更新啦~ 正文 Object[]类型的数组是一个非常灵活的数据结构&#xff0c;它可以存储任意类型对象的数组。 在Java中&#xff0c;所有的类都继承自Object类&#xff0c;所以Object[ ]类型的数组可以存储任意类…

基于Java (spring-boot)的职工管理系统

一、项目介绍 基于Java (spring-boot)的职工管理系统功能&#xff1a;登录、老板、职员人事经理、职员、部门列表、职工列表、权限修改、查看所有管理、正在审核列表、添加考勤、添加职工、添加奖惩、合同列表、合同信息、等等等。 适用人群&#xff1a;适合小白、大学生、毕业…

Python学习之路-初识爬虫:requests

Python学习之路-初识爬虫:requests requests的作用 作用&#xff1a;发送网络请求&#xff0c;返回响应数据 中文文档 &#xff1a; http://docs.python-requests.org/zh_CN/latest/index.html 为什么学requests而不是urllib requests的底层实现就是urllibrequests在pytho…

360网络安全面试题汇总

防范常见的 Web 攻击 重要协议分布层 arp 协议的工作原理 rip 协议是什么&#xff1f;rip 的工作原理 什么是 RARP&#xff1f;工作原理 OSPF 协议&#xff1f;OSPF 的工作原理 TCP 与 UDP 区别总结 什么是三次握手四次挥手&#xff1f; tcp 为什么要三次握手&#xff1f; dns…

PyTorch vs TensorFlow:谁拥有更多预训练深度学习模型?

众所周知,访问预先训练的深度学习模型对于当代深度学习应用至关重要。随着最先进的模型变得越来越大,达到数万亿个参数,在许多领域,尤其是自动语音识别等领域,从头开始训练高级模型不再有意义。 鉴于预训练深度学习模型的重要性,哪个深度学习框架(PyTorch 或 TensorFlo…

“程序员的秘密:为何我们的电脑从不眠眼——揭秘背后的奥秘!“

程序员们经常不关电脑&#xff0c;这背后确实有一些实际的原因和考虑&#xff0c;而不仅仅是因为“上瘾”。以下是一些为什么程序员倾向于让电脑持续运行的原因&#xff1a; 1. 长时间的任务 程序员可能会运行一些耗时较长的任务&#xff0c;比如大数据处理、模型训练或是复杂…

【PyTorch】PyTorch中张量(Tensor)切片操作

PyTorch深度学习总结 第三章 PyTorch中张量(Tensor)切片操作 文章目录 PyTorch深度学习总结一、前言二、获取张量中的元素1、切片&#xff08;行、列数&#xff09;方法2、torch.where()函数3、使元素置零的操作 一、前言 上文介绍了PyTorch中改变张量(Tensor)形状的操作&…

Science重磅_让大模型像婴儿一样学习语言

英文名称: Grounded language acquisition through the eyes and ears of a single child 中文名称: 通过一个孩子的眼睛和耳朵基于实践学习语言 文章: https://www.science.org/doi/10.1126/science.adi1374 代码: https://github.com/wkvong/multimodalbaby 作者: Wai Keen V…

腾讯云4核8G服务器多少钱?轻量和CVM报价2024新版

腾讯云4核8G服务器S5和轻量应用服务器优惠价格表&#xff0c;轻量应用服务器和CVM云服务器均有活动&#xff0c;云服务器CVM标准型S5实例4核8G配置价格15个月1437.3元&#xff0c;5年6490.44元&#xff0c;标准型SA2服务器1444.8元一年&#xff0c;轻量应用服务器4核8G12M带宽一…

java之filter过滤器

1、概念 2、过程 3. 实现 4. 参考链接 参考的b站链接

【网工】华为设备命令学习(综合实验一)

实验要求和实验成果如图所示。 LSW2不需要其他配置&#xff0c;其下就一台设备&#xff0c;不需要区分。 LSW3配置如下&#xff1a; <Huawei>sy Enter system view, return user view with CtrlZ. [Huawei]un in en //关闭系统提示信息 Info: Information …

Java之拦截器interceptor

1. 概念 2. 步骤 第一步 第二步 参考资料 https://www.bilibili.com/video/BV1m84y1w7Tb?p168&vd_source705343a89f38d5c0d895383ccf38a5d6

Microsoft OneNote 图片文字提取

Microsoft OneNote 图片文字提取 1. 文件 -> 新建 -> 我的电脑 -> 名称 -> 位置 -> 创建笔记本2. 插入图片​​​3. 复制图片中的文本References 1. 文件 -> 新建 -> 我的电脑 -> 名称 -> 位置 -> 创建笔记本 ​ 2. 插入图片 ​​​3. 复制图片…

什么是vite,如何使用

参考&#xff1a; 主要&#xff1a;由一次业务项目落地 Vite 的经历&#xff0c;我重新理解了 Vite 预构建 vite官方文档 为什么有人说 vite 快&#xff0c;有人却说 vite 慢&#xff1f; 深入理解Vite核心原理 面向未来的前端构建工具-vite 聊一聊 Vite 的预构建和二次预构建 …