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

本文链接：https://blog.csdn.net/zhanghuiqi205/article/details/53898185

登录系统我做的是有两个html的文件，一个是注册，一个是登陆，通过对端口地址的url的解析的不同，让两个文件不同的切换，并把注册的信息保存起来，登录的时候进行对比，如果一直方可登录。

1.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>

登录页面：

<!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>

node.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('01.html',function (err,data) {
           res.writeHead(200, {'Content-Type': 'text/html'});
           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)
                 {
                     return  res.end('注册错误')
                 }else {
                     return  res.end('注册成功')
                 }
           });  //将我们注册的信息写入(writeFile)到本地的一个json文件中，保存起来
        })
    }
    else if(pathname=='/login'&&req.method=='GET')   //登录页面
    {
        fs.readFile('02.html',function (err,data) {
            res.writeHead(200, {'Content-Type': 'text/html'});
            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)
               {
                   return res.end('登录成功');
               }else{
                   return res.end('登录失败，请确认用户名和密码是否正确');
               }
           })

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