Node.js原生及Express方法實現註冊登錄原理
阿新 • • 發佈：2017-08-10
美化 set head ack function charset stat input col
由於本文只是實現其原理，所以沒有使用數據庫，只是在js裏面模擬數據庫，當然實際中還是需要用數據庫的。
1.node.js原生方法
①html頁面，非常簡單，沒有一絲美化~我們叫它user.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>user</title> </head> <body> 用戶：<input type="text" id="user"><br> 密碼：<input type="password" id="pass"><br> <input type="button" value="註冊" id="reg_btn"> <input type="button" value="登錄" id="login_btn"> </body> </html>
②然後，我們來寫node服務器,關鍵的點我都註釋出來了，起個名字叫server.js吧
const http = require(‘http‘); //node原生模塊，用來創建服務器 const fs = require(‘fs‘); //node原生模塊，用於文件操作 const urlLib = require(‘url‘); //node原生模塊，用於解析URL地址 const querystring = require(‘querystring‘);//node原生模塊，用於解析POST數據 var users = {};//{"user":"pass"} 模擬數據庫船建一個JSON對象，用於存儲用戶信息 var server = http.createServer(function (req, res) { //創建服務器 var str = ‘‘; //創建空字符串用來保存接收到的POST數據 req.on(‘data‘,function (data) { str += data; //此處需註意，如果客戶端傳過來的數據非常大，它會分多次接收 }); req.on(‘end‘,function () { //當數據傳輸結束，會執行‘end‘(只執行一次) var obj = urlLib.parse(req.url,true); //解析URL地址 const url = obj.pathname; //獲得接口地址 const GET = obj.query; //獲得GET數據 const POST = querystring.parse(str); //解析POST數據 if (url == ‘/user‘){ //讀取接口 switch (GET.act){ case ‘reg‘: //1.用戶名是否存在 if (users[GET.user]){ res.write(‘{"ok":false,"msg":"此用戶已存在！"}‘) }else { //2.插入新註冊用戶 users[GET.user] = GET.pass; res.write(‘{"ok":true,"msg":"註冊成功！"}‘) }; break; case ‘login‘: //1.用戶名是否存在 if (users[GET.user] == null){ res.write(‘{"ok":false,"msg":"此用戶不存在！"}‘) }else if(users[GET.user] != GET.pass){ res.write(‘{"ok":false,"msg":"用戶名或密碼錯誤！"}‘) }else { res.write(‘{"ok":true,"msg":"登陸成功！"}‘) }; break; default: res.write(‘{"ok":false,"msg":"未知操作！"}‘) }; res.end(); }else { //讀取文件 var fileName = ‘./www‘ + url; //靜態文件存放地址（www是目錄） fs.readFile(fileName,function (err,data) { if (err){ res.write(‘404‘); }else { res.write(data) }; res.end() }); }; }); }); server.listen(8081); //監聽端口
③服務器寫好了，我們來寫觸發事件（我用的封裝過的Ajax.js，大家用jQuery也是可以的，稍微改一下即可）
var oTxtUser=document.getElementById(‘user‘); var oTxtPass=document.getElementById(‘pass‘); var oBtnReg=document.getElementById(‘reg_btn‘); var oBtnLogin=document.getElementById(‘login_btn‘); oBtnLogin.onclick=function (){ ajax({ url: ‘/user‘, data: {act: ‘login‘, user: oTxtUser.value, pass: oTxtPass.value}, type: ‘get‘, success: function (str){ var json=eval(‘(‘+str+‘)‘); console.log(json); if(json.ok){ alert(‘登錄成功‘); }else{ alert(‘登錄失敗：‘+json.msg); } }, error: function (){ alert(‘通信錯誤‘); } }); }; oBtnReg.onclick=function (){ ajax({ url: ‘/user‘, data: {act: ‘reg‘, user: oTxtUser.value, pass: oTxtPass.value}, type: ‘get‘, success: function (str){ var json=eval(‘(‘+str+‘)‘); if(json.ok){ alert(‘註冊成功‘); }else{ alert(‘註冊失敗：‘+json.msg); } }, error: function (){ alert(‘通信錯誤‘); } }); };
至此，我們的簡單註冊登錄就完成了，啟動一下server.js，然後即可操作。
2.Express方法
整體思路跟原生的差不多，只是多了一些中間件和方法。html和js觸發事件跟前面基本一樣，這裏我們直接來寫Express服務器。
①使用Express需要先下載express框架，後面需要什麽我們就下載什麽（express-static是我們後面需要用到的中間件）
node install express express-static
②直接來寫登陸服務器login.js
const express=require(‘express‘); //引入Express框架 const expressStatic=require(‘express-static‘); //用來給靜態文件設置目錄 var server=express(); //創建Express服務器 server.listen(8081); //監聽服務器 var users={ //模擬數據庫，制造假的用戶註冊信息 "zhangsan":"123", "lisi":"456", "wangwu":"789" }; server.get(‘/login‘,function (req,res) { console.log(req.query) var user = req.query["user"]; var pass = req.query["pass"]; if (users[user]==null){ res.send({ok:false,msg:‘此用戶不存在！‘}); }else { if(users[user]!=pass){ res.send({ok:false,msg:‘密碼錯誤！‘}); }else { res.send({ok:true,msg:‘成功！‘}); } }; }); server.use(expressStatic(‘./www‘)); //設置靜態文件目錄
啟動一下login.js，然後即可操作。
這兩種方法都是最基礎的原理，如果在實際工作中還需要考慮很多東西，共勉！
Node.js原生及Express方法實現註冊登錄原理