• 一款简单的登录、注册页面 node+html


    前言

     这是一个简单的登录、注册页面,用来实践一下node 系统模块方法,所以前端页面非常简陋,前端使用Ajax,post传数据到node服务器中,sever.js对数据进行处理,返回结果到前端页面。数据存在txt文本内,通过fs方法进行读写更新。

    执行代码

     下载代码,进入代码文件夹,使用Shift+鼠标右键=>在此处打开powershell
    输入命令:
    node . ode_seversever.js
    开启服务器后打开index.html使用

    代码

    HTML:index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>登录、注册</title>
        <!-- jquery插件 -->
    	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    </head>
    <body>
        <div>
            <label for="user">用户名:</label>
            <input type="text" id="user">
        </div>
        <div>
            <label for="password">密&emsp;码:</label>
            <input type="password" id="password">
        </div>
        <div>
            <button id="login">登录</button>
            <button id="register">注册</button>
        </div>
    </body>
    <script>
        $(function(){
            //登录
            $('#login').click(function(){
                if($("#user").val()){
                    if($("#password").val()){
                    $.ajax({
                    type : "post",
                    url : "http://localhost:8080/login",
                    data : {
                        username : $("#user").val(),
                        password : $("#password").val()
                    },
                    success : function(res){
                        alert(res)
                    },
                    error : function(err){
                        alert(err)
                    }
                })
                    }
                    else{
                        alert('密码不能为空')
                    }
                }
                else{
                    alert('用户名不能为空')
                }
            })
            //注册
            $('#register').click(function(){
                if($("#user").val()){
                    if($("#password").val()){
                    $.ajax({
                    type : "post",
                    url : "http://localhost:8080/register",
                    data : {
                        username : $("#user").val(),
                        password : $("#password").val()
                    },
                    success : function(res){
                        alert(res)
                    },
                    error : function(err){
                        alert(err)
                    }
                })
                    }
                    else{
                        alert('密码不能为空')
                    }
                }
                else{
                    alert('用户名不能为空')
                }
            })
        })
    </script>
    </html>
    
    node:sever.js
    var http = require("http");
    var url = require("url");
    var qs = require("querystring");
    var fs = require("fs");
    //创建服务器
    http.createServer(function (req, res) {
        //设置请求头,允许所有域名访问,解决跨域请求
        res.setHeader("Access-Control-Allow-Origin", "*");
        //定义一个post变量,暂时存储Post请求信息
        var post = "";
        // 通过req的data事件监听函数,每当接受到请求体的数据,就累加到post变量中
        req.on("data", function (chunk) {
            post += chunk;
        });
        //获取前端路由地址
        var pathName = url.parse(req.url).pathname;
        //监听end事件,
        req.on("end", function () {
            post = qs.parse(post);
            console.log("username:" + post.username + ' password:' + post.password);
            console.log(pathName);
            fs.readFile("./node_sever/data_base.txt", "utf-8", function (err, data) {
                if (err) {
                    console.log(err)
                }
                else {
                    if (!data) {
                        if (pathName == '/login') {
                            res.end("该用户不存在");
                            return;
                        }
                        if (pathName == '/register') {
                            //创建一个数组一个对象来保存帐号和密码
                            var arr = [];
                            var obj = {};
                            //把用户的帐号密码保存
                            obj.username = post.username;
                            obj.password = post.password;
                            arr.push(obj);
                            //同步写入db.txt文件,必须是同步进行
                            fs.writeFileSync("./node_sever/data_base.txt", JSON.stringify(arr), "utf-8");
                            res.end("注册成功!");
                            return;
                        }
                    }
                    else {
                        //把数据转成JSON对象,以便我们使用
                        var arr = JSON.parse(data);
                        console.log(arr);
                        //遍历整个保存数据的数组  判断登录注册
                        for (var i = 0; i < arr.length; i++) {
                            var obj = arr[i];
                            if (obj.username == post.username) {
                                if (pathName == "/login") {
                                    if (obj.password == post.password) {
                                        res.end("登录成功!");
                                        return;
                                    } else {
                                        res.end("密码错误!");
                                        return;
                                    }
                                }
                                if (pathName == "/register") {
                                    res.end("该用户已存在!");
                                    return;
                                }
                            }
                        }
                        if (pathName == "/login") {
                            res.end("用户名不存在!");
                            return;
                        }
                        if (pathName == "/register") {
                            //创建新对象写入数据
                            var obj = {};
                            obj.username = post.username;
                            obj.password = post.password;
                            arr.push(obj);
                            fs.writeFileSync("./node_sever/data_base.txt", JSON.stringify(arr), "utf-8");
                            res.end("注册成功!");
                            return;
                        }
                    }
                }
            })
        })
    }).listen(8080, function (err) {
        if (!err) {
            console.log("成功创建服务器,端口号为8080")
        }
    })
    

    下载

    GitHub下载

  • 相关阅读:
    angular项目中使用jquery的问题
    angular项目中使用Primeng
    angular项目中使用angular-material2
    angular中使用AMEXIO
    angular项目中使用ngSemantic
    LeetCode——无重复字符的最长子串
    LeetCode——实现 strStr()
    Java split函数
    Java JavaScript 输入输出
    Java Stack,Queue,PriorityQueue,deque相关操作
  • 原文地址:https://www.cnblogs.com/hjc-12580/p/12022420.html
Copyright © 2020-2023  润新知