您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“怎么用Node.js實(shí)現(xiàn)登陸注冊(cè)功能”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“怎么用Node.js實(shí)現(xiàn)登陸注冊(cè)功能”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
在項(xiàng)目里創(chuàng)建一個(gè)json文件用來(lái)存儲(chǔ)數(shù)據(jù),通過(guò)express創(chuàng)建服務(wù)器對(duì)象,fs模塊對(duì)文件進(jìn)行讀寫。
運(yùn)用post請(qǐng)求
代碼如下:
var express = require('express') var fs = require("fs") var app = express() app.use(express.static("www")) app.use(express.urlencoded({extended:false})) // 先獲取user.json里面的數(shù)據(jù)和req.body進(jìn)行對(duì)比 fs.readFile("./user.json",function(err,data){ if (err) { userArr = [] }else{ userArr = JSON.parse(data) } }) app.post("/zhuce",function(req,res,next){ // 輸入框要驗(yàn)證的數(shù)據(jù)判斷機(jī)制: // 可以把正則表達(dá)式判斷放在前端:用戶體驗(yàn)好,判斷快 // 也可以把正則表達(dá)式判斷放在后端:判斷相對(duì)安全,判斷慢 // console.log(req.body); var u = req.body.v1 var p = req.body.v2 var isZhuce = userArr.some(function(v,i,a){ return v.user === u }) if (isZhuce) { res.json({ code:201, shibai:"該賬號(hào)已注冊(cè)" }) }else{ userArr.push({user:`${req.body.v1}`,psw:`${req.body.v2}`}) fs.writeFile("./user.json",JSON.stringify(userArr),function(){ res.json({ code:200, chenggong:"index2.html" }) }) } }) app.post("/denglu",function(req,res,next){ var deng = userArr.findIndex(function(v,i,a){ return v.user === req.body.v1 }) console.log(deng); if (deng != -1) { if (userArr[deng].psw === req.body.v2) { res.json({ code:251, mima:"登錄成功" }) }else{ res.json({ code:252, mima:"密碼錯(cuò)誤" }) } }else{ res.json({ code:250, mima:"該賬號(hào)未注冊(cè)" }) } }) app.listen(3000,function(){ console.log("run"); })
在前端發(fā)送post請(qǐng)求傳送數(shù)據(jù),代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注冊(cè)界面</title> </head> <body> <form action=""> <!-- pattern 正則判斷 required 允許輸入框提交進(jìn)行正則判斷--> 用戶名:<input type="text" name="user" required id="user" pattern="^1[3578]\d{9}$"><br> 密 碼:<input type="text" name="psw" required id="psw" pattern="^.{6,}$"><br> 確認(rèn)密碼:<input type="text" name="cpsw" id="cpsw"><br> <button id="b1">提交</button> </form> <script src="./jquery.js"></script> <script> $("#b1").on("click",function(e){ e.preventDefault() if (psw.value!=cpsw.value) { alert("兩次密碼不一致,傻逼") return } $.post({ url:"http://127.0.0.1:3000/zhuce", data:{ v1:user.value, v2:psw.value, }, success:res=>{ if (res.shibai) { alert(`${res.shibai}`) } if (res.chenggong) { location.href = `${res.chenggong}` } } }) }) </script> </body> </html>
依然使用post請(qǐng)求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action=""> <!-- pattern 正則判斷 required 允許輸入框提交進(jìn)行正則判斷--> 用戶名:<input type="text" name="user" required id="user" pattern="^1[3578]\d{9}$"> 密 碼:<input type="text" name="psw" required id="psw" pattern="^.{6,}$"> <button id="b1">提交</button> </form> <script src="./jquery.js"></script> <script> $("#b1").click(function(e){ e.preventDefault() $.post({ url:"http://127.0.0.1:3000/denglu", data:{ v1:user.value, v2:psw.value, }, success:function(res){ console.log(res); alert(`${res.mima}`) } }) }) </script> </body> </html>
讀到這里,這篇“怎么用Node.js實(shí)現(xiàn)登陸注冊(cè)功能”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。