本文实例为大家分享了Node.js实现登陆注册的具体代码,供大家参考,具体内容如下
1.服务器端
在项目里创建一个json文件用来存储数据,通过express创建服务器对象,fs模块对文件进行读写。
运用post请求
代码如下:
var express = require('express') var fs = require("fs") var app = express() app.use(express.static("www")) app.use(express.urlencoded({extended:false})) // 先获取user.json里面的数据和req.body进行对比 fs.readFile("./user.json",function(err,data){ if (err) { userArr = [] }else{ userArr = JSON.parse(data) } }) app.post("/zhuce",function(req,res,next){ // 输入框要验证的数据判断机制: // 可以把正则表达式判断放在前端:用户体验好,判断快 // 也可以把正则表达式判断放在后端:判断相对安全,判断慢 // 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:"该账号已注册" }) }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:"密码错误" }) } }else{ res.json({ code:250, mima:"该账号未注册" }) } }) app.listen(3000,function(){ console.log("run"); })
2.注册页面
在前端发送post请求传送数据,代码如下:
<!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>注册界面</title> </head> <body> <form action=""> <!-- pattern 正则判断 required 允许输入框提交进行正则判断--> 用户名:<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> 确认密码:<input type="text" name="cpsw" id="cpsw"><br> <button id="b1">提交</button> </form> <script src="https://www.atool.online/article/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>
3.登录页面
依然使用post请求
<!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 允许输入框提交进行正则判断--> 用户名:<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="https://www.atool.online/article/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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。