Node.js實現登陸註冊功能

Posted on by

本文實例為大傢分享瞭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="./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="./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>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：