Nodejs 实现登录注册

流程

第一步:前台输入用户名密码
=>
第二步:点击提交向后台发送数据
=>
第三步:后台接收数据并验证
=>
第四步:验证完成向前台发送成功,失败标识
=>
第五步:前台接接收标识,做页面处理

登录

前台处理

登录页面

		<p>
            <label for="">用户名:</label>
            <input type="text" name="username" id="login_username">
        </p>
        <p>
            <label for="">&emsp;码:</label>
         	<input type="password" name="userpassword" id="login_userpassword">
        </p>
        <span class="yanz"></span>
        <button>登录</button>

注册页面

<h1>用户注册</h1>
        <p>
            <label for="">用户名:</label>
            <input type="text" name="username" id="cancel_username">
        </p>
        <p>
            <label for="">&emsp;码:</label>
            <input type="password" name="userpassword" id="cancel_userpassword">
        </p>
        <span class="yanz"></span>
        <button>注册</button>

点击通过ajax发送请求

//点击登录
    $('.login_box button').click(function(){
        var username = $('#login_username').val();
        var userpassword = $('#login_userpassword').val();
        var pointspassword = $('.yanz');
        var username_reg = /^[\w]{3,12}$/;
        var password_reg = /^[\S]{6,12}$/;
        console.log($('#login_username'));
        //登录用户名正则验证
        if(password_reg.test(userpassword)){
            pointspassword.html('');
            $.ajax({
                url:'/login',
                type:'POST',
                data:{
                    uname:username,
                    upassword:userpassword
                },
                success:function(response){
                    // 请求成功以后才会执行
                    if(response == '1'){
                        //登录成功
                        alert('登录成功'); 
                        //跳转页面
                        // window.location.href='/';
                    }else if(response == 2){
                        //用户名或密码错误
                        alert('用户名或密码错误');
                    }
                },
            });
        }else{
            pointspassword.html('必须是6-12位');
        }
    });
//点击注册
    $('.cancel_box button').click(function(){
        var username = $('#cancel_username').val();
        var userpassword = $('#cancel_userpassword').val();
        var pointspassword = $('.yanz');
        var username_reg = /^[\w]{4,12}$/;
        var password_reg = /^[\S]{6,12}$/;

        if(password_reg.test(userpassword)){
            $.ajax({
                url:'/register',
                type:'POST',
                data:{
                    uname:username,
                    upassword:userpassword
                },
                success:function(response){
                    // 请求成功以后才会执行
                    console.log(response);
                    console.log(this);
                    if(response == 1){
                        pointspassword.html('成功');
                    }else if(response == 0){
                        pointspassword.html('失败');
                    }else if(response == 3){
                        pointspassword.html('已存在');
                    }
                },
            });
        }else{
            pointspassword.html('必须是6-12位');
        }
    })
后台处理

这里没有使用数据库,使用一个josn文件代替
在这里插入图片描述

const http = require("http");
const fs = require("fs");
const querystring = require("querystring");
//设置端口号
const post = 3000;
//通过http模块创建服务器
const server = http.createServer();
server.on("request",(req,res)=>{
	//登录接口
   if(req.url == "/login" && req.method == "POST"){
        let str = '';
        //接受前台传送的数据
        req.on('data',(chunk)=>{
            str += chunk;
        })

        req.on('end',()=>{
            let dataObj = querystring.parse(str);
            //读取数据库用户,判断用户名密码是否正确
            fs.readFile("./data.json","utf8",(err,data)=>{
                let obj = JSON.parse(data);
                for(let i = 0; i < obj.length; i++){
                    if(dataObj.uname == obj[i].uname && dataObj.upassword == obj[i].upassword){
                    //用户密码正确返回1
                        return res.end('1');
                    }else if(i == obj.length -1){
                        //用户不存在或密码错误返回2
                        return res.end('2');
                    }
                }
            })
        })
    }
    //注册接口
    else if(req.url == "/register" && req.method == "POST"){
        let str = '';
        req.on('data',(chunk)=>{
            str += chunk;
        })
        req.on('end',()=>{
            let dataObj = querystring.parse(str);
            console.log(dataObj);
            fs.readFile("./data.json","utf8",(err,data)=>{

                let obj = JSON.parse(data);
                console.log(obj);
                for(let i = 0; i < obj.length; i++){
                    console.log(obj[i].uname)
                    if(obj[i].uname == dataObj.uname){
                        return res.end('3');
                    }
                }
                obj.push(dataObj);
                fs.writeFile('./data.json',JSON.stringify(obj),'utf8',(err,result)=>{
                    if(err){
                        return res.end('2');
                    }
                    return res.end('1');
                })
            })
        })
    } 
}
server.listen(post);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值