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 …...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...
Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）
引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...
嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）
目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数（接收函数） sendto函数（发送函数） 五、网络编程之 UDP 用…...
基于单片机的宠物屋智能系统设计与实现（论文+源码）
本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢，连接红外测温传感器，可实时精准捕捉宠物体温变化，以便及时发现健康异常；水位检测传感器时刻监测饮用水余量，防止宠物…...
如何把工业通信协议转换成http websocket
1.现状 工业通信协议多数工作在边缘设备上，比如：PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发，当设备上用的是modbus从站时，采集设备数据需要开发modbus主站；当设备上用的是西门子PN协议时…...