基于react+koa的图片验证码_Node.js

上一篇: 用JavaScript修复ipa处理过的的p... 下一篇:我对JS链表的简单学习

基于react+koa的图片验证码

发布时间：2019-06-26 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了基于react+koa的图片验证码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

滑动图片验证码
基于 react 和 koa2 的一个图片滑动验证码
效果图

使用

      
      
      
      
      
gIT clone https://gitee.COM/darcrandex/image-code.git

      
      
      
      
      
// 前端
cd image-code/client
npm i
npm start

      
      
      
      
      
// 后端
cd image-code/server
npm i
npm start
业务逻辑

前端请求数据
后台返回主图片，和小滑块图片
前端交互，滑动之后，获取滑动的 x 值
将用户信息和 x 传给后台
后台判断是否正确，返回信息给前端

后端
这里主要是图片处理的问题，尝试过node-canvas,node-images,node-sharp。但是都存在安装不了或者需要安装很麻烦的依赖库的问题。最后选择node-gm。基本上可以满足需求。
不过还是需要安装一个依赖库，GraphicsMagick或者ImageMagick。推荐是graphicsmagick，但其实ImageMagick也够用了。
关于安装ImageMagick。我的环境是windows，除了安装软件之外，还需要配置windows 环境变量。网上查一下好了。
@H_306_126@前端
前端部分没有什么大的问题。只有axios需要配置一下(/src/utils/axios.js)，主要是跨越的问题。如果不使用axios，就根据情况解决跨域就可以了。