国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

怎樣操作node實現登錄圖片驗證碼

來源:懂視網 責編:小采 時間:2020-11-27 19:41:40
文檔

怎樣操作node實現登錄圖片驗證碼

怎樣操作node實現登錄圖片驗證碼:這次給大家帶來怎樣操作node實現登錄圖片驗證碼,操作node實現登錄圖片驗證碼的注意事項有哪些,下面就是實戰案例,一起來看一下。1.安裝cnpm i svg-captcha --save2.在使用的地方導入var svgCaptcha = require('svg-captcha&
推薦度:
導讀怎樣操作node實現登錄圖片驗證碼:這次給大家帶來怎樣操作node實現登錄圖片驗證碼,操作node實現登錄圖片驗證碼的注意事項有哪些,下面就是實戰案例,一起來看一下。1.安裝cnpm i svg-captcha --save2.在使用的地方導入var svgCaptcha = require('svg-captcha&
這次給大家帶來怎樣操作node實現登錄圖片驗證碼,操作node實現登錄圖片驗證碼的注意事項有哪些,下面就是實戰案例,一起來看一下。

1.安裝

cnpm i svg-captcha --save

2.在使用的地方導入

var svgCaptcha = require('svg-captcha');

3.獲取驗證碼

3-1 安裝 cookie-parser ,作用是將獲取到的session保存到cookie,方便前端訪問驗證

cnpm i cookie-parser --save

3-2 使用 cookie-parser

const cookieParase = require('cookie-parser');
app.use(cookieParase());

這樣就可以在項目里使用cookie了

3-3 獲取驗證碼

// 獲取驗證碼
 getCaptcha(req, res, next){
 var captcha = svgCaptcha.create({ 
 // 翻轉顏色 
 inverse: false, 
 // 字體大小 
 fontSize: 36, 
 // 噪聲線條數 
 noise: 2, 
 // 寬度 
 width: 80, 
 // 高度 
 height: 30, 
 }); 
 // 保存到session,忽略大小寫 
 req.session = captcha.text.toLowerCase(); 
 console.log(req.session); //0xtg 生成的驗證碼
 //保存到cookie 方便前端調用驗證
 res.cookie('captcha', req.session); 
 res.setHeader('Content-Type', 'image/svg+xml');
 res.write(String(captcha.data));
 res.end();
 },

做到這只是實現了生成驗證碼的功能,那么要訪問呢?

4.編寫后臺路由

// 獲取驗證碼
router.get('/api/getCaptcha', function(req, res, next) {
 return api.getCaptcha(req, res, next);
})

當前端調用 /api/getCaptcha 這個接口的時候,返回驗證碼信息,是svg格式

5.前端訪問

<img src="/api/getCaptcha" alt="captcha" >

但是現在我們又有需求了,當點擊這個驗證碼的時候,驗證碼會刷新

6.實現點擊驗證碼刷新

更改一下剛剛驗證碼的結果,給他加一個外層a標簽,并給他綁定一個點擊事件,我這里用了 vue ,所以是 @click ,其他框架同理.

<a href="#" rel="external nofollow" @click="editCaptcha">
 <img src="/api/getCaptcha" alt="" ref="imgYzm">
</a>

點擊事件 editCaptcha

editCaptcha () {
 this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random()
},

這樣就實現了點擊驗證碼刷新的問題

7.前端驗證驗證碼

剛剛我們在后臺得到了驗證碼,但是前端要怎么驗證呢?

記得在3-2的時候我們安裝了 cookie-parser ,并且在3-3里將生成的session保存在cookie里,這里我們前端就可以通過訪問這個cookie拿到驗證碼的值了。

為什么要保存在cookie里? 因為后端生成的session我們前端是訪問不到的,如果等訪問到的話,那還談什么安全性可言,所以保存一份在cookie里供前端訪問。

let captcha = document.cookie.split('=')[1]
 if(this.yzm != captcha){
 return this.$message.warning('驗證碼錯誤')
 }

最后的前端輸入賬號密碼驗證碼做登錄驗證等等我就不多概述了。具體思想就是這樣。

相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

推薦閱讀:

如何使用vue源碼解析事件機制

如何操作JS獲取用戶所在城市及地理位置

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

怎樣操作node實現登錄圖片驗證碼

怎樣操作node實現登錄圖片驗證碼:這次給大家帶來怎樣操作node實現登錄圖片驗證碼,操作node實現登錄圖片驗證碼的注意事項有哪些,下面就是實戰案例,一起來看一下。1.安裝cnpm i svg-captcha --save2.在使用的地方導入var svgCaptcha = require('svg-captcha&
推薦度:
標簽: 圖片 登錄 使用
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 日本久热 | 亚洲综合小说 | 精品国产一区二区在线观看 | 亚洲综合在线视频 | 久久久久久国产精品免费 | 国产精品区一区二区三 | 国产美女一级特黄毛片 | 在线观看国产视频 | 日韩欧美在线综合 | 精品久久亚洲一级α | 亚洲 自拍 另类 欧美 综合 | 亚洲欧美日韩中文字幕一区二区三区 | 中文字幕精品一区二区精品 | 久久久久亚洲 | xxx色xxx性| 小草视频网站 | 欧美国产激情二区三区 | 亚洲综合一区二区精品久久 | 成人精品第一区二区三区 | 国产不卡网 | 欧美一级视频在线观看 | 国产成人精品久久一区二区三区 | 日韩精品第1页 | 欧美第5页| 99久久精品国产一区二区小说 | 久久国产精品一区二区 | 日韩资源在线 | 国模吧双双大尺度炮交gogo | 国产精品亚洲四区在线观看 | 国产精品高清一区二区三区 | 熟年交尾五十路视频在线播放 | 欧美精品福利 | 久久国产精品久久精 | 在线日韩亚洲 | 日本久久网站 | 国产91精品高清一区二区三区 | 国产一区91 | 亚洲 自拍 另类 欧美 综合 | 国产精品视频播放 | 韩国在线视频 | 黄色在线观看免费 |