把验证码渲染到到页面上

访问,显然,是标签有个内边距

去掉内边距

加一个class

如果放大看的话,还有问题

用js实现点击更换图形验证码:生成查询字符串的形式访问图形验证码接口的url,放到img标签中,img标签检测到url改变会自动请求改变的url

处理url的js

var param = {
setParam: function (href, key, value) {
// 重新加载整个页面
var isReplaced = false;
var urlArray = href.split('?');
if (urlArray.length > 1) {
var queryArray = urlArray[1].split('&');
for (var i = 0; i < queryArray.length; i++) {
var paramsArray = queryArray[i].split('=');
if (paramsArray[0] == key) {
paramsArray[1] = value;
queryArray[i] = paramsArray.join('=');
isReplaced = true;
break;
}
} if (!isReplaced) {
var params = {};
params[key] = value;
if (urlArray.length > 1) {
href = href + '&' + $.param(params);
} else {
href = href + '?' + $.param(params);
}
} else {
var params = queryArray.join('&');
urlArray[1] = params;
href = urlArray.join('?');
}
} else {
var param = {};
param[key] = value;
if (urlArray.length > 1) {
href = href + '&' + $.param(param);
} else {
href = href + '?' + $.param(param);
}
}
return href;
}
};

点击图片的js

$(function () {
$('#captcha-img').click(function (event) {
var self = $(this);
var src = self.attr('src');
console.log(src);
var newscr = param.setParam(src, 'xx', Math.random());
self.attr('src', newscr);
});
});

在模板中引入js

前台

点击

一百一十五:CMS系统之实现点击更换图形验证码功能的更多相关文章

  1. 一百一十:CMS系统之剩余菜单栏的页面和视图

    增加所有剩余菜单的页面,并用视图渲染,方便后面调试权限控制 {% extends 'cms/cms_base.html' %} {% block title %}板块管理{% endblock %} ...

  2. 一百一十七:CMS系统之注册页面对接短信验证码

    from flask import Blueprint, requestfrom exts import alidayufrom utils import restfulfrom utils.capt ...

  3. 第四百一十五节,python常用排序算法学习

    第四百一十五节,python常用排序算法学习 常用排序 名称 复杂度 说明 备注 冒泡排序Bubble Sort O(N*N) 将待排序的元素看作是竖着排列的“气泡”,较小的元素比较轻,从而要往上浮 ...

  4. 第三百一十五节,Django框架,CSRF跨站请求伪造

    第三百一十五节,Django框架,CSRF跨站请求伪造  全局CSRF 如果要启用防止CSRF跨站请求伪造,就需要在中间件开启CSRF #中间件 MIDDLEWARE = [ 'django.midd ...

  5. C# DateTime的11种构造函数 [Abp 源码分析]十五、自动审计记录 .Net 登陆的时候添加验证码 使用Topshelf开发Windows服务、记录日志 日常杂记——C#验证码 c#_生成图片式验证码 C# 利用SharpZipLib生成压缩包 Sql2012如何将远程服务器数据库及表、表结构、表数据导入本地数据库

    C# DateTime的11种构造函数   别的也不多说没直接贴代码 using System; using System.Collections.Generic; using System.Glob ...

  6. 一百一十一:CMS系统之后端权限验证功能

    实现方式 使用装饰器的形式,将权限判断加在视图上 声明接口需要什么权限,用户访问接口的时候,判断用户是否有此权限 权限判断,接收权限 def permission_required(permissio ...

  7. salesforce零基础学习(一百一十五)记一个有趣的bug

    本篇参考:https://help.salesforce.com/s/articleView?language=en_US&type=1&id=000319486 page layou ...

  8. 第二百一十五、六天 how can I 坚持

    昨天刷机刷到很晚,博客都忘写了,刷了个flyme,用着没什么感觉,今天打电话试了下还有破音,有点小后悔.不行过两天再刷回来. 今天.mysql ifnull函数. 两条熊猫鱼都死了,这两天雾霾那么严重 ...

  9. 第一百一十五节,JavaScript,DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

随机推荐

  1. 2.06_Python网络爬虫_正则表达式

    一:爬虫的四个主要步骤 明确目标 (要知道你准备在哪个范围或者网站去搜索) 爬 (将所有的网站的内容全部爬下来) 取 (过滤和匹配我们需要的数据,去掉没用的数据) 处理数据(按照我们想要的方式存储和使 ...

  2. [Abp vNext微服务实践] - vue-element-admin登录二

    简介: Vue Element Admin是基于vue.element ui开发的后台管理ui,abp vNext是abp新一代微服务框架.本篇将会介绍如何改造Vue Element Admin权限验 ...

  3. 2019 Petrozavodsk Winter Camp, Yandex Cup C. Diverse Singing 上下界网络流

    建图一共建四层 第一层为N个歌手 第二层为{pi,li} 第三层为{si,li} 第四层为M首歌 除了S和第一层与第三层与T之间的边为[1,INF] 其他边均为[0,1] #include<bi ...

  4. CodeForces - 1221E Game With String 分类讨论

    首先分析A能获胜的情况 A能获胜 当且仅当A拿完后所有剩下的都<b 所以一旦存在一个大小为X的 且 b<=X<a 则必是后手赢 当X为 a<=x<2*b 的时候 无论A或 ...

  5. mysql_config_editor设置

    [root@node01 etc]# mysql_config_editor set -G mysql3307 -S /tmp/mysql3307.sock -uroot -pEnter passwo ...

  6. 题解 [CF961G] Partitions

    题面 解析 首先我们观察这个定义, 可以发现每个元素在统计答案时是平等的, 也就是单个元素的权值对答案没有特别的影响. 设元素权值为\(w[i]\), 那么我们就可以知道答案是\(\sum_{i=1} ...

  7. webuploader+上传文件夹

    在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...

  8. Cogs 14. [网络流24题] 搭配飞行员(二分图匹配)

    [网络流24题] 搭配飞行员 ★★☆ 输入文件:flyer.in 输出文件:flyer.out 简单对比 时间限制:1 s 内存限制:128 MB [问题描述] 飞行大队有若干个来自各地的驾驶员,专门 ...

  9. 【线性代数】4-3:最小二乘近似(Least Squares Approximations)

    title: [线性代数]4-3:最小二乘近似(Least Squares Approximations) categories: Mathematic Linear Algebra keywords ...

  10. Linux下 Nginx 启动 重启 关闭

    命令 nginx -s reload :修改配置后重新加载生效 nginx -s reopen :重新打开日志文件 nginx -t -c /path/to/nginx.conf 测试nginx配置文 ...