layui（2.8.18）生成验证码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>登入</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="{{ url_for('static', filename='res/layui/css/layui.css') }}" rel="stylesheet"><link href="{{ url_for('static', filename='res/adminui/dist/css/admin.css') }}" rel="stylesheet"><link href="{{ url_for('static', filename='res/adminui/dist/css/login.css') }}" rel="stylesheet"><style>#canvas {display: inline-block;border: 1px solid #ccc;border-radius: 5px;cursor: pointer;}</style>
</head>
<body><div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;"><div class="layadmin-user-login-main"><div class="layadmin-user-login-box layadmin-user-login-header"><h2>登入页</h2><p> </p></div><div class="layadmin-user-login-box layadmin-user-login-body layui-form"><div class="layui-form-item"><label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label><input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input" value="quwei"></div><div class="layui-form-item"><label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label><input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input" value="123456"></div><div class="layui-form-item"><div class="layui-row"><div class="layui-col-xs7"><label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label><input type="text" name="captcha" id="LAY-user-login-vercode" lay-verify="required" placeholder="图形验证码" class="layui-input"></div><div class="layui-col-xs5"><div style="margin-left: 10px;"><canvas id="canvas" width="100" height="36"></canvas></div></div></div></div><div class="layui-form-item" style="margin-bottom: 20px;"><input type="checkbox" name="remember" lay-skin="primary" title="记住密码"><a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a></div><div class="layui-form-item"><button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 入</button></div></div></div><div class="layui-trans layadmin-user-login-footer"><p>© All Rights Reserved</p></div></div><script src="{{ url_for('static', filename='res/layui/layui.js') }}"></script><script>// layui版本必须是最新版本:2.8.18layui.define(function (e) {let a = layui.jquery;let obj = {randomColor: function () {//得到随机的颜色值let r = Math.floor(Math.random() * 256);let g = Math.floor(Math.random() * 256);let b = Math.floor(Math.random() * 256);return "rgb(" + r + "," + g + "," + b + ")";},draw: function (show_num) {let canvas_width = a('#canvas').width();let canvas_height = a('#canvas').height();let canvas = document.getElementById("canvas");//获取到canvas的对象，演员let context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台canvas.width = canvas_width;canvas.height = canvas_height;let sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";let aCode = sCode.split(",");let aLength = aCode.length;//获取到数组的长度for (let i = 0; i <= 3; i++) {let j = Math.floor(Math.random() * aLength);//获取到随机的索引值let deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度let txt = aCode[j];//得到随机的一个内容show_num[i] = txt.toLowerCase();let x = 10 + i * 20;//文字在canvas上的x坐标let y = 20 + Math.random() * 8;//文字在canvas上的y坐标context.font = "bold 23px 微软雅黑";context.translate(x, y);context.rotate(deg);context.fillStyle = obj.randomColor();context.fillText(txt, 0, 0);context.rotate(-deg);context.translate(-x, -y);}for (let i = 0; i <= 5; i++) { //验证码上显示线条context.strokeStyle = obj.randomColor();context.beginPath();context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);context.stroke();}for (let i = 0; i <= 30; i++) { //验证码上显示小点context.strokeStyle = obj.randomColor();context.beginPath();let x = Math.random() * canvas_width;let y = Math.random() * canvas_height;context.moveTo(x, y);context.lineTo(x + 1, y + 1);context.stroke();}},};e("captcha", obj);});layui.config({base: "{{ url_for('static', filename='res/') }}" // 静态资源所在路径}).use(['index', 'user', 'captcha'], function(){let $ = layui.$, setter = layui.setter, admin = layui.admin, form = layui.form, router = layui.router(), captcha = layui.captcha, search = router.search;form.render();let show_num = [];captcha.draw(show_num);//显示验证码$("#canvas").on('click', function () {captcha.draw(show_num);});form.on('submit(LAY-user-login-submit)', function (obj) {let field = obj.field; // 获取表单字段值let code = field["captcha"];if (show_num.join("") !== code) {layer.msg('验证码错误,请重新输入', {offset: '15px', icon: 5});return false; // 阻止默认 form 跳转}// 显示填写结果，仅作演示用layer.alert(JSON.stringify(field), {title: '验证码正确，这是当前填写的字段值'});// 请求登入接口admin.req({url: "/checklogin", // 确保此处指向 Flask 后端的正确路由method: "post",data: obj.field,done: function (res) {console.log(res);if (res.code === 0) {// 登入成功的提示与跳转layer.msg(res.msg, {offset: '15px',icon: 1,time: 1000}, function () {location.href = '/'; // 登录成功后的跳转页面});} else {// 登入失败的提示layer.msg(res.msg, {icon: 2, offset: '15px'});}}});});});</script>
</body>
</html>相关文章：
layui（2.8.18）生成验证码
<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>登入</title><meta name"renderer" content"webkit"><meta http-equiv"X-UA-Compatible" content"IEedge,chrome1&quo…...
MAX/MSP SDK学习05：A_GIMME方法
今天终于将A_GIMME方法部分的描述看懂了，上周因为太赶时间加上这文档很抽象一直没看懂。也就那么一回事，记录一下。 A_GIMME方法用于接收多个参数。 ①内置消息选择器传递多个参数时一定要使用A_GIMME； ②自定义消息选择器传递多个参数时建…...
LangChain: 类似 Flask/FastAPI 之于 Django，LangServe 就是「LangChain 自己的 FastAPI」
原文：LangChain: 类似 Flask/FastAPI 之于 Django，LangServe 就是「LangChain 自己的 FastAPI」 - 知乎 说明：LangServe代替 langchainserver 成为新的langchain 部署工具 官网资料：🦜️🏓 LangServe | &…...
mmdet全教程
官方给的文档一言难尽，网上的教程又没有从大纲到源码的完整解读，计划年后开个系列记录一下...
1992-2021年省市县经过矫正的夜间灯光数据（GNLD、VIIRS）
1992-2021年省市县经过矫正的夜间灯光数据（GNLD、VIIRS） 1、时间：1992-2021年3月，其中1992-2013年为年度数据，2013-2021年3月为月度数据 2、来源：DMSP、VIIRS 3、范围：分区域汇总：…...
Guava的Retryer
Retryer类是Guava库中的一个重试工具类，它提供了一种在调用方法时自动重试的机制。Retryer类中的call()方法用于执行需要重试的方法，如果方法执行失败，则Retryer会根据配置的规则进行重试。Retryer类可以配置重试的次数、重试间隔时间、重试的…...
Docker实践笔记7：构建MySQL 8镜像
使用Docker构建MySQL 8镜像并运行容器 本教程将指导您使用Dockerfile构建和运行一个MySQL 8容器。让我们开始吧！ 步骤1：创建Dockerfile 在您的项目根目录下创建一个名为Dockerfile的文件。以下是Dockerfile的示例内容： # 基于最新的MySQL…...
# 学习 Prolog 和 离散逻辑的16个等价公式：一趟有趣的逻辑之旅
Prolog 的语法很奇怪,需要一些时间来适应,所以我花了点时间,想用Prolot来学习和验证离散逻辑的16组等价公式。 1. 双重否定律 (Double Negation Law) A ⇔A 首先，我们来看看双重否定律。在 Prolog 中，我们可以这样验证它： fun1(A,Z):-memb…...
Win11+Modelsim SE-64 10.6d搭建UVM环境
1、添加源文件及tb文件 在目录下建立文件夹，将DUT和Testbench添加进去，文件夹内容如下所示： 2、以《UVM实战》中的例子做简单的示例： 2.1 设计文件 ：dut.sv 功能很简单，即将接受到的数据原封不动发送出去…...
LeetCode（32）串联所有单词的子串【滑动窗口】【困难】（含图解）
目录 1.题目2.答案3.提交结果截图4.图解 链接： 串联所有单词的子串 1.题目 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如，如果 w…...
【Delphi】使用TWebBrowser执行JavaScript命令传入JSON参数执行出错解决方案
目录 一、问题背景： 二、实际示例： 三、解决方案： 1. Delphi 代码： 2. javaScript代码： 一、问题背景： 在用Delphi开发程序，无论是移动端还是PC端，都可以很方便的使用TWebBrows…...
04 if进阶
elif 否则如果 如果条件没有满足 会继续进入“否则如果”里面判断 只要满足一个条件 条件判断立即终止 chinese 100 if chinese 100:print("我们去迪士尼玩")elif chinese > 90:print("我们去朱雀森林公园")else:print("回家写作业")if n…...
2023全球数字贸易创新大赛9-12
目录 回答评委提问：先说痛点-再说怎样解决 食品安全溯源是否全流程 星火• 链网...
vue3的两个提示[Vue warn]: 关于组件渲染和函数外部使用
1. [Vue warn]: inject() can only be used inside setup() or functional components. 这个消息是提示我们，需要将引入的方法作为一个变量使用。以vue-store为例，如果我们按照如下的方式使用： import UseUserStore from ../../store/module…...
Ubuntu环境下基于libxl库文件使用C++实现对表格的操作
功能 表格不存在则创建后再进行操作创建sheet添加新的工作表在sheet中增加数据设置单元格样式 相关配置 下载地址：libxl选择 LibXL for Linux 4.2.0 i386 x64 armhf aarch64 安装配置 1，使用 tar zxvf 文件名.tar.gz 进行文件解压2，创…...
Sentinel与SpringBoot整合
好的，以下是一个简单的Spring Cloud整合Sentinel的代码示例： 首先，在pom.xml中添加以下依赖： <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel&l…...
如何实现数据通过表格批量导入数据库
文章目录 1. 准备工作2. 创建数据库表3. 编写导入脚本4. 优化和拓展4.1 批量插入的优势4.2 错误处理4.3 数据验证4.4 数据转换 5. 总结 🎉如何实现数据通过表格批量导入数据库 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨博客主页：IT陈寒的博客&…...
（动手学习深度学习）第13章 计算机视觉---微调
文章目录 微调总结 微调代码实现 微调 总结 微调通过使用在大数据上的恶道的预训练好的模型来初始化模型权重来完成提升精度。预训练模型质量很重要微调通常速度更快、精确度更高 微调代码实现 导入相关库 %matplotlib inline import os import torch import torchvision f…...
训练跳跃（青蛙跳台阶），剑指offer，力扣
目录 题目地址： 题目： 青蛙跳台阶问题 我们直接看题解吧： 相似题目，斐波那契数列： 解题方法： 难度分析： 审题目事例提示： 解题思路： 代码实现： 小鸡识补充 题…...
Linux中路由route
route 显示当前路由表信息 route add -net 192.168.10.0 netmask 255.255.255.0 dev ens160去往192.168.10.0/24网段的路由通过ens160网卡出去add 添加路由（del表示删除路由）-A 设置地址类型（默认ipv4 配置ipv6地址时：-A …...
图神经网络：复杂关系数据分析的终极指南
图神经网络：复杂关系数据分析的终极指南 【免费下载链接】fastbook The fastai book, published as Jupyter Notebooks 项目地址: https://gitcode.com/gh_mirrors/fa/fastbook 图神经网络（GNN）是一种专门处理图结构数据的深度学习模型…...
测试数据管理：打造高质量、合规、可复用的数据工厂
测试数据的“石油危机”在软件测试的日常中，我们时常陷入这样的困境：自动化脚本因一条过期订单数据而大面积飘红；性能测试因数据量不足而无法模拟真实峰值；安全测试因缺乏脱敏数据而被迫在“裸奔”的环境里小心翼翼。这些问题的根…...
别再让切片拖慢你的GeoServer！手把手教你配置D盘专属缓存目录（附路径修改避坑点）
GeoServer缓存目录优化实战：从性能瓶颈到高效管理 当你的GeoServer开始频繁报出磁盘空间不足的警告，或是用户抱怨地图加载速度越来越慢时，很可能遇到了缓存目录配置不当的问题。默认的临时目录不仅占用系统盘空间，还可能导致性能…...
如何用AI智能插件彻底改变你的文献管理：Zotero GPT完全指南
如何用AI智能插件彻底改变你的文献管理：Zotero GPT完全指南 【免费下载链接】zotero-gpt GPT Meet Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-gpt 还在为海量文献整理而烦恼吗？每天面对堆积如山的学术论文，手动提取…...
别再只问GPU是否可用了！PyTorch中torch.cuda的5个隐藏实用技巧（含代码示例）
解锁PyTorch GPU潜能的5个高阶技巧：从基础检测到资源掌控 当你第一次在PyTorch中成功运行torch.cuda.is_available()并看到返回True时，那种喜悦就像拿到了通往深度学习加速世界的门票。但真正的高手知道，这只是GPU利用率的冰山一角。本文将带…...
如何快速掌握大疆无人机固件自由：DankDroneDownloader终极指南
如何快速掌握大疆无人机固件自由：DankDroneDownloader终极指南 【免费下载链接】DankDroneDownloader A Custom Firmware Download Tool for DJI Drones Written in C# 项目地址: https://gitcode.com/gh_mirrors/da/DankDroneDownloader 你是否对大疆无人机…...
构建企业级知识库问答系统时的大模型接入实践
构建企业级知识库问答系统时的大模型接入实践 1. 企业级知识库问答系统的技术挑战 在企业环境中构建知识库问答系统需要处理大量内部文档，包括技术手册、产品规格、会议纪要和客户支持记录等非结构化数据。这类系统通常面临三个核心挑战：模型选择灵活性…...
别只当它是Word！用WPS Office 2019 for Linux搞定公文、合同与长文档排版的完整指南
别只当它是Word！用WPS Office 2019 for Linux搞定公文、合同与长文档排版的完整指南 在Linux生态中处理专业文档常被视为"不可能的任务"，直到WPS Office 2019 for Linux带来了一套完整的解决方案。不同于普通办公场景，公文、合同、…...
初创团队如何利用 Taotoken 统一管理多个 AI 项目的 API 密钥与访问
初创团队如何利用 Taotoken 统一管理多个 AI 项目的 API 密钥与访问 1. 多项目密钥管理的核心挑战 初创团队在同时推进多个 AI 应用原型开发时，通常会面临三个典型问题。首先是密钥分散管理带来的安全隐患，不同成员可能将 API Key 硬编码在代码或配置文…...
终极免费微信聊天记录导出完整指南：永久保存你的数字记忆
终极免费微信聊天记录导出完整指南：永久保存你的数字记忆 【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具 项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 你是否曾因手机丢失、系统升级或误操作而丢失珍贵的…...