成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于react+koa的圖片驗證碼

AlexTuan / 641人閱讀

摘要：滑動圖片驗證碼基于和的一個圖片滑動驗證碼效果圖使用前端后端業(yè)務(wù)邏輯前端請求數(shù)據(jù)后臺返回主圖片，和小滑塊圖片前端交互，滑動之后，獲取滑動的值將用戶信息和傳給后臺后臺判斷是否正確，返回信息給前端后端這里主要是圖片處理的問題，嘗試過。

滑動圖片驗證碼 
基于 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
業(yè)務(wù)邏輯

前端請求數(shù)據(jù)

后臺返回主圖片，和小滑塊圖片

前端交互，滑動之后，獲取滑動的 x 值

將用戶信息和 x 傳給后臺

后臺判斷是否正確，返回信息給前端

后端

這里主要是圖片處理的問題，嘗試過node-canvas,node-images,node-sharp。但是都存在安裝不了或者需要安裝很麻煩的依賴庫的問題。最后選擇node-gm。基本上可以滿足需求。

不過還是需要安裝一個依賴庫，GraphicsMagick或者ImageMagick。推薦是GraphicsMagick，但其實ImageMagick也夠用了。

關(guān)于安裝ImageMagick。我的環(huán)境是windows，除了安裝軟件之外，還需要配置windows 環(huán)境變量。網(wǎng)上查一下好了。

前端

前端部分沒有什么大的問題。只有axios需要配置一下(/src/utils/axios.js)，主要是跨越的問題。如果不使用axios，就根據(jù)情況解決跨域就可以了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102595.html

相關(guān)文章

  • 基于react+koa的圖片驗證碼

    摘要：滑動圖片驗證碼基于和的一個圖片滑動驗證碼效果圖使用前端后端業(yè)務(wù)邏輯前端請求數(shù)據(jù)后臺返回主圖片，和小滑塊圖片前端交互，滑動之后，獲取滑動的值將用戶信息和傳給后臺后臺判斷是否正確，返回信息給前端后端這里主要是圖片處理的問題，嘗試過。 滑動圖片驗證碼 基于 react 和 koa2 的一個圖片滑動驗證碼 效果圖 showImg(https://segmentfault.com/img/bVb...

    李世贊 評論0 收藏0

  • 一只node爬蟲的升級打怪之路

    摘要：我是一個知乎輕微重度用戶，之前寫了一只爬蟲幫我爬取并分析它的數(shù)據(jù)，我感覺這個過程還是挺有意思，因為這是一個不斷給自己創(chuàng)造問題又去解決問題的過程。所以這只爬蟲還有登陸知乎搜索題目的功能。 我一直覺得，爬蟲是許多web開發(fā)人員難以回避的點。我們也應(yīng)該或多或少的去接觸這方面，因為可以從爬蟲中學(xué)習(xí)到web開發(fā)中應(yīng)當(dāng)掌握的一些基本知識。而且，它還很有趣。 我是一個知乎輕微重度用戶，之前寫了一只爬...

    shiweifu 評論0 收藏0

  • Vue+Koa+Mongodb 小練習(xí)

    摘要：小練習(xí)作者本文首發(fā)博客功能基于進行登錄，注冊，留言的簡單網(wǎng)站。所以這個小練習(xí)，從一個簡單的方面入手，希望能給踩過同樣多坑的同路人一點啟發(fā)。就意味著要重新登錄。的作用是進行進程守護，當(dāng)你的意外的停止的時候，進行重啟。 Vue+Koa+Mongodb 小練習(xí) 作者： Pawn 本文首發(fā)： Pawn博客 功能： 基于vue koa mongodb進行登錄，注冊，留言的簡單網(wǎng)站。 體驗地址： ...

    趙春朋 評論0 收藏0

  • 2017年1月前端月報

    摘要：平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。年以前看這個網(wǎng)址概況在線地址前端開發(fā)群月報提交原則技術(shù)文章新的為主。 平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 概況 在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發(fā)群月報 提交原則： 技...

    FuisonDesign 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<