第三十天 NODE.js的使用 && node 编写登录页面 && 文件管理 && 数据库互联 && 以及相应的安全问题

前言

学习node.js 就是因为这个 node.js 和前端的js是不同的因为他是运行在服务器端的而前端的只能运行在浏览器前端的js 很容易就被捕捉内容但是 node.js 其实和php一样我们学习的目的就是以后碰到这样的问题会解决也要了解 node.js 相应的安全问题

node.js的基础知识的学习

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录</title>
    <style>
        body {
            background-color: #f1f1f1;
        }
        .login {
            width: 400px;
            margin: 100px auto;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            padding: 30px;
        }
        .login h2 {
            text-align: center;
            font-size: 2em;
            margin-bottom: 30px;
        }
        .login label {
            display: block;
            margin-bottom: 20px;
            font-size: 1.2em;
        }
        .login input[type="text"], .login input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1.2em;
            margin-bottom: 20px;
        }
        .login input[type="submit"] {
            background-color: #2ecc71;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 1.2em;
            cursor: pointer;
        }
        .login input[type="submit"]:hover {
            background-color: #27ae60;
        }
    </style>
</head>
<body>
<div class="login" >
    <h2>后台登录</h2>
    <form action="" method="">
        <label for="username">用户名:</label>
        <input type="text" name="username" id="username"  class="user">
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" class="pass" >
        <button>  登录  </button>
    </form>  
</div>

上边是个登录页面的html 我们复制到 sql.html 此外还需要创建 sql.js file.js file.txt zuse.js 在开发之前呢先学习一下 node.js的简单使用

node.js的使用手册

https://www.w3cschool.cn/nodejs/

首先呢就是了解 node.js的自建服务器机制和请求响应包的获取，node.js 的应用其实就是调用模块来帮助我们完成

1、服务器的创建

我们先创建个sql.html 装上上边的代码在创建个sql.js 写入以下代码：服务的创建并绑定 3000 端口

代码如下：

复制代码

var http = require('http')   //定义个 http 让其包含（require 包含函数）

执行完成之后我们不是调用了模块吗然后这个模块其实是不存在在这里的需要我们自己下载

演示一下：

安装完可以 npm list -g 查看

直接回车就可以下载了如果报错请看我上个文章

调用完模块我就进行页面的创建

复制代码

http.createSever(function(req,res){    //http的创建  function(req,res)  是自带的函数 意思就是获取请求和响应   

//因为我们这个页面不需要交互所以只给  响应就可以了 

res.writeHead(200,{'Content-Type':'text/html'});  //给与返回的内容 为'text'

res.end('hello myfist node.js');    //发送的请求信息 

}).listen(3000);    //把网站搭建在  3000端口
    console.log('3000 端口已开启') ;    //验证端口开启是否成功

然后运行一下试试

运行一下要访问127.0.0.1:3000

Node.js 解释器 REPL

就是我们的node.js 其实也是一个终端的命令行

演示一下：

NODE.js 回调函数

理解同步（你给一个req 我给你一个 res ）异步(你给我一个 req 我让别人干完活之后一块给你 res) 阻塞（你给我个req 我很忙我先让你等等通话挂起你直到收到我的res 才进行下一步）

非阻塞（和上边相反）（看了就懂）彻底理解同步、异步、阻塞和非阻塞的概念_同步异步、阻塞非阻塞-CSDN博客

实例

阻塞（单线程）：

JavaScript toString() 方法 | 菜鸟教程

非阻塞：

说到这

就先搞个文件夹的打开的执行以及文件的遍历漏洞（允许攻击者在未授权的状态下读取应用服务上任意文件的安全漏洞）

复制代码

//文件的遍历
var fs = require ('fs');    //导入文件管理模块
var express = require('express')    //导入 express 框架（这个框架后边说）
var app=express()；            
function filemanage(dir)        定义一个函数 我们传入一个 dir  以为之后我们需要他来执行打开我们指定的目录
{ fs.readdir(dir,function(error,files){       //利用Fs自带的读取功能   读取并输出  files

      console.log(files);  

}); 

}
app.get('/',function(req,res){    //

var dir=req.query.dir;
console.log(dir);    //输出 目录
filemanage(dir);     //调用打开文件夹函数


})

运行一下

回车哎？你妹的怎么没反应啊什么情况我们看看vs code

你妹的什么情况裤衩都被爆出来了；这个就是文件的遍历漏洞搞一搞 c盘爆东西了

Express框架 &&node.js 开发登录页面

第一步还是先下载模块

因为我下了一次了所以会报已经存在的错

下面展示一下 express 的简单应用：

然后开启 node ./sql.js 得到这个页面是因为我们没有进行get 传参那我们传参一下

给予了请求，那这样我们就可以直

复制代码

app.get('/',function(req,res){     //如果get路径是当前  就给与请求文件
res.sendFile(__dirname+"/","sql.html")      //sql.html 是我们的一个登录界面

});

接让当前页面显示个别的页面不可以吗？当然可以

技巧：一般的文件路径都用 " " 进行包裹

完成这个之后我们就来演示一下 get 数据的传输就是在我们刚刚这个页面去写入数据然后我们要用 js 接收数据可以先判断一下之后我们就可以进行数据库互联

然后下一步就是把username 和pass 传输到后台就行了这边我们演示get 类型的

然后我们需要对html进行修改了

修改为 login // 因为我们是 get 接收login时触发上边的函数就可以运行玩一玩

'/login'原理就是我们刚刚html的指向不是上边这个吗我们输入账号密码登录的时候就会触发上边的 login(直接进入 http://127.0.0.1:3000/login ? 账号=xxx && 密码=xxx)

get不是重点我们主要是进行 post方式联动数据库

node.js Post 传输数据库内容的显示和简单的 or SQl注入

先修改一下 html 的method传输方式

引用 body 模块进行post 传输

复制代码

var mysql = require('mysql');   //引用数据库模块

var bodyParser = require('body')     //Parser  是解析器的意思
var urlencodedParser = bodyParser.urlencoded({ extended: false })   // 这个是url 加密的

app.post('/login',urlencodedParser,function(req,res){    //这边这样书写 
    const u = req.body.username;
    const p = req.body.password;     //数据传输方式的不同  get使用query   post使用body
    console.log(u);
    console.log(p);
// 利用模块 进行数据库的连接    
var connection = mysql.createConnection({
        host     : 'localhost',
        user     : 'root',
        password : '123456',
        database : 'demo01'
    });
// 进行连接之后我们就得进行 登录判断  这个判断的值是从数据库取出来的 （也可以这么想 就是 我们输入的 数据  他会进行一个查询  如 select * from admin where u=xxx and p=xxx  如果有数据返回就让你进 （这种是常用的模式））
// 后台验证 

connection.connect();  
var sql ='select * from admin where username="+u" and password="+p"'; // 这边注意就是 "+u" 这边是看见发蓝就是对的  //这是个拼接 把我们定义的 u , p 拼接到数据库里   //node.js 多用这个拼接

console.log(sql);  // 把查找进行输出到console
connection.query(sql,function(error,date){     //连接之后 进行数据库的操作
    if(error){
     console.log('数据库连接失败！');

} try{
            if(u==(data[0]['username']) && p==data[0]['password']){    // try   catch就是一种  测试  现在这个判断就是直接进行数据的对比   不是判断数据是不是为有和没有
                res.send('欢迎进入后台管理页面');
            }
        }catch{
            res.send('错误');
        };

}



});