實現手機掃描二維碼頁面登入，類似web微信-第二篇，關於二維碼的自動生成
阿新 • • 發佈：2019-01-03
接上一章，我們已經基本把業務邏輯分析清楚了
在web伺服器的程式碼中，我們監聽8888埠，並對/和/qrcodeimage做分析
程式碼非常的短，也不需要做什麼解釋，實際上就是使用者在訪問首頁的時候，伺服器建立sessionID，並將這個ID作為建立二維碼圖片的引數，而伺服器再根據這個引數建立響應的二維碼，也就是說頁面和二維碼是一一關聯的。
下面我們第一步，實現二維碼的web動態生成。
頁面的二維碼包含的資訊我在上一篇已經解釋過，是一個頁面的sessionID，這個sessionID主要是標示出哪個頁面是哪個頁面，例如你開啟N個頁面，必然每個頁面的標示會不一樣，只有你用手機掃描了某一個頁面（page a）的二維碼，將來響應操作的頁面只能是page a。
實現二維碼的類庫非常多，如果你的平臺是java的，可以選擇zxing這種功能強大且應用廣泛的類庫，不過我們今天打算採用一個響應高併發無阻塞的伺服器端技術：nodejs。
關於nodejs我也沒有太多深入的研究，不過該技術是採用事件驅動模型的無阻塞服務。舉一個案例，雲輸入法用nodejs作為伺服器，非常的完美。
關於nodejs的安裝已經相關的擴充套件如何安裝，請自行去官網學習：http://nodejs.org
本文的例子將使用以下一些擴充套件：
- QRcode，這個擴充套件是在nodejs生成二維碼的擴充套件，可以生成客戶端和伺服器端，為了相容性考慮，我們只用服務端的功能。由於服務端的功能需要一些額外的lib，例如canvas和colors，需要額外下載和配置。canvas是本地碼，需要在不同的OS環境下編譯，具體如何操作請查閱canvas的安裝指南。
- http和url，這2個擴充套件是nodejs基本擴充套件，提供web服務以及對url的分析。
- fs，本地檔案訪問，這個我們不一定用，但是如果你需要將二維碼儲存為圖片，以及讀取，需要使用這個庫。
- uuid，生成nodejs服務端的UUID的庫。
- 後面的文章我們會不斷翻新今天的程式碼，可能還有一些新的庫，例如連線XMPP伺服器和redis的庫，今天先不介紹。
var QRCode = require('qrcode');
var http = require('http');
var url = require('url');
var fs = require('fs');
var UUID = require('uuid-js');好了，我們來建立web服務：
http.createServer(function(req, res) { var URL = url.parse(req.url); var PATH = URL.pathname; var uuid4 = UUID.create(); var sessionID = uuid4.toString(); if (PATH == "/qrcodeimage") { var sessionID = URL.query; if (typeof (sessionID) != "undefined") { generateQRCode(sessionID, req, res); } else { console.log("no sessionID"); } } else if (PATH == "/") { console.log(sessionID); generateIndex(sessionID, req, res); } }).listen(8888, 'localhost');
在web伺服器的程式碼中，我們監聽8888埠，並對/和/qrcodeimage做分析
如果訪問的url為/則顯示主頁面，呼叫generateIndex方法，這個方法返回歡迎頁面。
如果訪問的url為/qrcodeimage，則呼叫generateQRCode方法，這個方法將生成二維碼並返回二進位制流。
下面是這個2個方法：
function generateQRCode(sessionID, req, res) {
res.writeHead(200, {
'Content-Type' : 'image/png'
});
QRCode.draw(sessionID, function(err, canvas) {
res.end(canvas.toBuffer());
});
}
function generateIndex(sessionID, req, res) {
res.writeHead(200, {
'Content-Type' : 'text/html; charset=UTF-8'
});
res
.end('<html><body><p align="center">請掃描二維碼</p><p align="center"><img src="/qrcodeimage?'
+ sessionID + '"></p></body></html>');
}程式碼非常的短，也不需要做什麼解釋，實際上就是使用者在訪問首頁的時候，伺服器建立sessionID，並將這個ID作為建立二維碼圖片的引數，而伺服器再根據這個引數建立響應的二維碼，也就是說頁面和二維碼是一一關聯的。
執行一下：
用任何手機二維碼軟體掃一下看看，和console裡面log出來的uuid一致。
那麼今天我們的工作到此結束，本文只是一個簡單的例子，僅作測試，沒有任何的容錯，生產系統絕對不能這樣馬虎哦。
原創文章，轉載請註明出處。有不明白的地方可以新浪微博找我[http://weibo.com/xingxp]