【Node】使用Node.js实现简单的登录系统

最新推荐文章于 2023-09-21 08:15:00 发布

Dora_5537

最新推荐文章于 2023-09-21 08:15:00 发布

阅读量2.1k

点赞数 4

分类专栏： JS 文章标签：登录系统

本文链接：https://blog.csdn.net/Dora_5537/article/details/97686800

版权

JS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

前言：直接上代码（VSCode），解释都在注释里了，好好看。

1. 注册页面（main.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        .box{
            width:200px;
            height:150px;
            border: 1px solid #000;
        }
        .left-text{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="box">
    <form action="/post" method="post">
        <div class='left-text'>
            <sapn>用户名：</sapn>
            <input type="text" name="usename">
        </div>
        <div class="left-text">
            <span>密码:</span>
            <input type="password" name="password">
        </div>
        <div class="foot">
            <button type="submit">注册</button>
            <a href="/login">登录</a>  
             <!-- 这个是进入登录页面的一个跳转链接-->
        </div>
    </form>
</div>
</body>
</html>

2. 登录页面（login.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style>
        .box{
            width:200px;
            height:150px;
            border: 1px solid #000;
        }
        .left-text{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <form action="/login" method="post">
        <div class='left-text'>
            <sapn>用户名：</sapn>
            <input type="text" name="usename">
        </div>
        <div class="left-text">
            <span>密码:</span>
            <input type="password" name="password">
        </div>
        <div class="foot">
            <button type="submit">登录</button>
        </div>
    </form>
</div>
</body>
</html>

3. Node.js文件（server.js）

var http = require('http');  //http的模块;
var url = require('url');    //url模块;
var fs = require('fs');      //fs模块;
var querystring = require('querystring');  //一个和参数相关的帮助类

http.createServer(function (req,res) {   //创建服务
  console.log('req.url:',req.url);  //打印请求的地址
  var pathname = url.parse(req.url).pathname; 
  //通过parse的pathname这个方法,获得地址栏的: /xxx
  if(pathname =='/')
  {
     fs.readFile('main.html',function (err,data) {
         res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
         res.end(data);
     });     //读取第一个html的文件（注册页面）
  } else if(pathname == '/post' && req.method == 'POST')
  {
      console.log('解析数据');//当用户提交注册数据的时候，开始进行解析和写入
      var data ='';
      req.on('data',function (chunk) {
          data+=chunk;
          console.log(data);
      }).on('end',function () {
         var tt = querystring.parse(data); //参数字符串格式化成对象
         console.log(tt);
         fs.writeFile('hello.json',JSON.stringify(tt),'utf8',function (err) {
            if(err){
                    res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
                    return  res.end('注册错误')
            } else {
                    res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
                    return  res.end('注册成功')
            }
         });  //将我们注册的信息写入(writeFile)到本地的一个json文件中，保存起来
      })
  } else if(pathname == '/login' && req.method == 'GET')   //登录页面
  {
      fs.readFile('login.html',function (err,data) {
          res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
          res.end(data);
      });  //读取第二个html的文件（登录页面）
  } else if(pathname == '/login' && req.method == 'POST')
  {
      fs.readFile('hello.json',function (err,data) { 
        //读取本地的json文件的数据，进行对比
         data = JSON.parse(data.toString());
         console.log('读取数据',data);
         var temp ='';
         req.on('data',function (chunk){
             temp +=chunk;
         }).on('end',function () {
             var login= querystring.parse(temp);
             if(login.username == data.username && login.password == data.password)
             {
                res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
                return res.end('登录成功');
             }else{
                res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
                return res.end('登录失败，请确认用户名和密码是否正确');
             }
         })

    })
  }
}).listen(3000,function () {
  console.log('server on 3000');
});

4. 运行

在浏览器中输入http://localhost:3000/，会显示注册页面（main.html）；

在注册页面，点击注册，会将用户名和密码保存到本地的 json 文件中，判断并显示是否注册成功；

在注册页面，点击登录，会跳转到登录页面（login.html）；

在登录页面，点击登录，会将用户名和密码与 json 文件中的信息匹配，判断并显示是否登录成功。

参考：

Node.js的学习日记简单的登录系统 node.js的简单登录系统

END

Dora_5537

关注

4
点赞
踩
27

收藏

觉得还不错? 一键收藏
3
评论
【Node】使用Node.js实现简单的登录系统

前言：直接上代码（VSCode），解释都在注释里了，好好看。1. 注册页面（main.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册页面</title> <style> ...
复制链接

扫一扫