【原创】基于phpGrace+uniApp开发之：5.登录界面增加图片验证码

1.目的：

采用phpGrace中的图片验证码，在用户名+密码登录时使用图片验证码进行验证。

2.文档地址：

图片验证码的文档地址：http://www.phpgrace.com/tools/info/5.html

3.代码文件放置：

将下载verifyCode.php的文件，放入grace/tools文件夹中即可，该文件主要是产生图片验证码，并且写入到session中。

4.访问地址方法：

将客户端访问的方法放在app/index控制器中，代码如下：

//绘制验证码public function vcode(){ //绘制验证码/** verifyCode 参数* 1、图片宽度* 2、图片高度* 3、字符总数* 4、包含数字的数量* 5、字体【可省参数 默认：AMBROSIA.ttf，如需更换请将字体文件部署到 phpGrace/fonts 文件夹下】*/$vcode = new phpGrace\tools\verifyCode(88, 32, 4, 1);/** 可修改属性$vcode->bgcolor   = array(255, 0, 0); //验证码背景颜色$vcode->codeColor = array(0, 255, 0); //验证码文本颜色$vcode->fontSize  = 30; //验证码文字大小$vcode->noise     = false; //是否绘制干扰字符$vcode->noiseNumber = 10; //干扰字符数量$vcode->sessionName  = 'yourname'; //保存验证码的 session 名称*///绘制验证码$vcode->draw();    }

该代码放入后，客户端访问该地址为： http:// 域名或IP地址 /index/vcode ，通过该地址，可得到图片验证码。

5.视图：

在uniApp中添加验证码输入和显示功能。由于uniApp是基于Vue的视图架构，所以该代码如下：

<view ><text >验证码：</text><input type="text" v-model="yzm" placeholder="请输入验证码"/><img v-bind:src="yzmimg" @tap="changeVcode" /><br />
</view>

网站的源程序是基于HTML的，代码如下：

<form action="" method="post">验证码 : <br /><input type="text" name="yzm" /><img src="/index/vcode" onclick="changeVcode(this);" /><br /><input type="submit" id="" value="提交" />
</form>

在Vue中要注意的事数值的绑定，用“yzm”绑定输入的验证码，用yzmimg绑定图片的连接地址。

同时这里的点击也和js代码有所区别。Vue中的事件，需要写在methods代码块中。

所以这里的代码综合如下：

data模块中：

data() {return {yzm: '',yzmimg:this.apiServer+'index/vcode/',}
},

methods:

methods: {changeVcode(){this.yzmimg =this.apiServer+'index/vcode/' + Math.random();
},

6.服务器端验证：

注意：在客户端发送验证码到后台后，后台在验证时，需要打开Session才行，即增加如下语句：session_start(); 如果不加该语句，将会使得服务器端在下面代码验证时无法获取session中的值。

function checkYZM(){
       //在验证时，需要加入session_start开启session，否则拿不到session值！！！session_start(); //必须要加该语句，phpgrace的说明中没写，导致验证失败。//提交比对if(PG_POST){//比对验证码                            if($_POST['yzm'] != getSession('pgVcode')){exit(jsonCode('vcodeerror', '验证码错误！'));}
//          else{
//              exit(jsonCode('ok', '验证码正确！'));
//          }
        }
};

7.客户端反馈结果：

客户端部分代码如下：

success:res=>{
var info = res.data;
//首先进行验证码的验证
if(info.status=='vcodeerror'){uni.showToast({title:'验证码错误，请重试！',icon:'none',})return;}
}

总结：

本次基于phpGrace的后台框架，添加了官方提供的图形验证码代码。由于需要将其迁移到基于Vue的视图框架中，又是第一次写这样的代码，花了近一天的时间才完全的搞定，走了不少弯路，在这里写出来，也给要用的朋友一点参考或建议。

转载于:https://www.cnblogs.com/KKSoft/p/11331797.html

【原创】基于phpGrace+uniApp开发之：5.登录界面增加图片验证码相关推荐

uni-app开发之HBuilderX连接夜神模拟器
uni-app开发之HBuilderX连接夜神模拟器 uni-app开发之HBuilderX连接夜神模拟器一.连接详细步骤二.出现的问题及解决办法 uni-app开发之HBuilderX连接夜神模 ...
镜像处理坐标 android,Android应用开发之Android重写ImageView实现图片镜像效果的代码教程...
本文将带你了解Android应用开发之Android重写ImageView实现图片镜像效果的代码教程,希望本文对大家学Android有所帮助. 前两天朋友问我一个问题,如何实现从手机系统相册加载一张图 ...
(原创)基于ZedBoard的Webcam设计(二)：USB摄像头图片采集+QT显示
在(原创基于ZedBoard的Webcam设计(一):Zedboard上的USB摄像头(V4L2接口)的图片采集中,我们完成了ZedBoard上USB摄像头的单幅图片采集,采集到的图片是存储在文件系统 ...
android图片保存形式,Android应用开发之Android ScrollView截图和图片保存到相册的方式...
本文将带你了解Android应用开发之Android ScrollView截图和图片保存到相册的方式,希望本文对大家学Android有所帮助. 1.1首先来看你一种截取屏幕,这种代码有缺陷,只能截取一 ...
uniapp登录页面加入图片验证码
uniapp登录页面加入图片验证码记录效果图参考文章 (侵删) https://www.jb51.net/article/210830.htm 该文章是在vue内实现图片验证码,和uniapp有一 ...
python 登陆网站图片验证,用python登录带弱图片验证码的网站
上一篇介绍了使用python模拟登陆网站,但是登陆的网站都是直接输入账号及密码进行登陆,现在很多网站为了加强用户安全性和提高反爬虫机制都会有包括字符.图片.手机验证等等各式各样的验证码.图片验证码就是 ...
解决win11/win10在登陆界面（解锁界面）点击获取每日壁纸无效的问题 - get Daily Lockscreen and Wallpaper - Win11/10的登录界面背景图片在哪里？
效果图点击链接无法下载图片,登陆后一点反应都没有... 本地的Win11/10登录界面背景图片储存位置 C:\Users\你的用户名\AppData\Local\Packages\Microsoft ...
vue实现登录时的图片验证码（纯前端）
提示:这里只将我成功运行出来的案例放在这里供大家参考一.图片验证码经过我一天的查询,<vue实现登录时的图片验证码>,这篇博客效果比较好,代码基本没有什么问题的.效果如下,点击图片即可 ...
怎么修改计算机密码界面的背景,怎么修改Win7登录界面背景图片(欢迎界面背景图片)?...
怎么修改Win7登录界面背景图片(欢迎界面背景图片)?之前自己曾设置过,当时没有想到分享给朋友们!现在把这个帖子补上,先来看下效果图片,笔者将其换成了苹果Mac的登陆界面!只要您能从中获得乐趣,其实这 ...

【原创】基于phpGrace+uniApp开发之：5.登录界面增加图片验证码

【原创】基于phpGrace+uniApp开发之：5.登录界面增加图片验证码相关推荐

最新文章

热门文章