简单的网页本地注册登录 node.js fs(文件管理模块)版（内附创建本地服务器）

最新推荐文章于 2024-05-23 08:13:54 发布

好先

最新推荐文章于 2024-05-23 08:13:54 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： node.js 服务器 npm

本文链接：https://blog.csdn.net/weixin_59719549/article/details/122251447

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、首先把node.js装到本地，详见上一篇，

2、安装 NPM (自己用的话安装全局)

1，NPM ： node package manager
是node包管理器，是全球最大的开源库生态系统。作用是管理node包（node包可以理解为工具/插件/模块/一段代码）管理的操作：下载安装，查看，卸载，搜索，更新，发布等等

npm在新版本nodejs中已经集成，所以不需要手动安装

npm -v 在命令提示符查看npm版本

npm在安装node包是终端指令： npm install 模块名

npm在安装node包时有两种安装方式：本地安装（local）和全局安装（global）就以node常用的一个模块 express 为例
安装

npm i express 本地安装 npm i express -g 全局安装
本地安装：将node包下载到当前目录下（C:\Users\一帝羊毛\Desktop\MyProject>）自动生成文件夹node_modules，本地安装的模块只能在当前目录所在的项目中使用
全局安装：将node包安装到node根目录下（C:\Users\一帝羊毛\AppData\Roaming\npm）,可以在终端中使用模块语句
项目中直接引入使用的模块建议本地安装(express) 项目中没有导入的模块建议全局安装

安装完成之后，可以执行更多的操作 npm ls 查看本地模块 npm ls -g 查看全局模块 npm uninstall
express 卸载模块 npm update express 更新模块 npm install npm -g
更新npm模块 npm search express 搜索模块 npm publish express 发布模块

淘宝镜像地址：npm install -g cnpm --registry=https://registry.npm.taobao.org

运行之后使用cnpm -v来检查

(1)安装完成如果使用cnpm时报错: 系统禁止运行脚本说明是powershell没有管理员权限, 需要设置管理权权限
1. 以管理员身份运行 powershell 2, 输入指令 set-ExecutionPolicy RemoteSigned 然后输入 A 回车

(2).安装完成如果使用cnpm时报错: resource busy or locked 说明下载被拦截, 关闭360管家和防火墙

3、模块化 node模块中总共有三种模块：自定义的模块，内置的模块，第三方模块（下载安装的模块）；

1.node中的内置模块：比如：文件读取模块fs 、服务器http、https等，直接引入即可 var fs = require(‘fs’); //console.log(fs); //fs是node自带的文件系统管理模块，提供了很多文件操作的API；
2.第三方模块，比如Jquery等第三方依赖包，
在终端执行npm i jquery 就会把插件jquery下载安装到本地的node_modules目录下
var $ = require(‘jquery’);
console.log($);
3.自定义模
var myModule = require(’./4、myModule.js’);
console.log(myModule);
引入全局的模块
var express = require(‘express’);
console.log(express);

node模块化导入require 和前端script标签导入js文件有何区别？
1、前端：使用script标签导入多个js时，相当于把所有的js文件代码直接拼接到一起，共享一个全局作用于，所以导入时要注意防止变量重名问题，和导入的先后顺序问题；

2、后端：使用node模块化导入时，每一个模块的作用域是相互隔离的，不会发生变量重名和引入顺序的问题，所以导入时无需担心这种问题；

注：fs文件系统中，常用的增删改查API
增： mkdir writeFile appendFile
删： unlink rmdir
改： rename
查： exists stat access
读： readdir readFile
以上使用的API都是异步函数，fs中也提供了相应的同步函数
异步函数：可同时执行多个函数，函数执行结果从回调函数中获取
同步函数：只有上一个函数执行结束，才会执行下一个，函数的执行结果直接从返回值中

4、创建本地服务器

1.创建配置文件 package.json 作用是定义项目属性的信息，
2.创建方式：在终端中输入指令 npm init 初始化一个服务器项目设置的属性信息: name : 项目名称（小括号中是默认的，文件夹名相同，不能包含大写字母或者汉字） version ：项目的版本号（格式：a.b.c）
版本号的命名：最原始的版本号一般用1.0.0，版本升级时会修改版本号。如果有重大更新时，
修改a；当有新的功能添加和修改时，改b；修复漏洞g时，改c description：项目的描述信息 entry
point：入口文件（默认是 index.js） test command: 测试命令 git repository：
git的本地存储室 keywords：关键词 author：作者 license：许可证（默认ISC） Is this
ok？：是否确定上述步骤执行完之后会在终端对应的目录下生成一个package.json文件，json文件中有一个依赖项
dependencies
3.依赖项是这个项目关联的模块，把模块关联到依赖项中之后，即使把模块删掉，也可以找回。通过npm install指令重新下载关联的依赖项（模块） npm install express --save
安装模块时在后边添加–save，会把这个模块添加到依赖项中

4，在项目文件夹目录下新建一个文件 index.js(这个文件要和配置文件中设置的entry point
入口文件的文件名保持一致，即生成的配置文件中属性main的值) 文件中写服务器相关代码，详情见文件

5，在工程目录下创建一个自定义文件夹public，作为静态文件夹，在静态文件夹中创建静态文件index.html

6，启动服务器：在终端中输入指令 node index.js 运行服务器文件 index.js（node index也可以）
(注意：终端的目录应该是项目目录 C:\Users\一帝羊毛\Desktop\MyProject>) 关闭服务器： ctrl + C

7，打开浏览器，访问端口号为5000的本地服务器，在浏览器地址栏输入： localhost:5000 或者
127.0.0.1:5000 本地路径 http://192.168.205.60:5000 也可以输入电脑动态IP

服务器会默认返回静态文件index.html给浏览器打开注意：静态文件夹中必须包含一个名为index.html的文件

服务器步骤（1）
在 cmd 输入: npm init

在这里插入图片描述
名字自定义的下面全部回车也可，

第一步完成
在这里插入图片描述

安装 npm install express --save 全局模块
在这里插入图片描述
会在你的文件夹中生成一个 package-lock.json 文件代表安装成功

package.json 文件中有 express 代表成功

第二步
在当前文件夹下创建一个名为 public的文件夹里面放用来读取的index.html等文件
里面的配置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务器</title>
    <style>
        h2 {
            width: 220px;
            /* border: 1px solid red; */
            margin: 0 auto;
        }

        #formBasicP {
            width: 400px;
            border: 1px solid red;
            margin: 0 auto;
        }

        #formBasic {
            width: 240px;
            margin: 30px auto;
        }
        .register{
         width: 100%;
         margin-top: 20px;
         display: flex;
         justify-content: space-between;
        }
        .register button{
            width: 100px;
            height: 30px;
            border-radius: 10px;
         border: none;
         background-color: royalblue;
         color: rgb(255, 255, 255);
        }
    </style>
</head>

<body>
    <br>
    <br>
    
    <h2>欢迎来到我的服务器</h2>

    <form id="formBasic">
        <label for="username:">用户名：</label>
        <input type="text" id="username" placeholder="请输入用户名"> <br><br>
        <label for="password">密&#X3000;码：</label>
        <input type="text" id="password" placeholder="请输入密码"> <br>
        <div class="register">
            <button onclick="login()">登录</button>
            <button onclick="register()">注册</button>
        </div>
    </form>
    <script src="./jquery.min.js"></script>

    <script>

        // 首先阻止表单的默认提交行为
        $('#formBasic').submit(function (e) {
            e.preventDefault()
        });

        // 注册  
        function register() {
            var username = $('#username').val();
            var password = $('#password').val();

            // 账号正则：账号长度[4,12],只包含汉字，字母，数字三种，
            var nameReg = /[0-9A-z\u4e00-\u9fa5]{4,12}/;
            if (!nameReg.test(username)) {
                alert('请输入4-12位数字、字母或者汉字组成的账号');
                return;
            }
            // 密码正则：[6,15],密码要求只能包含大小写字母和数字
            var pwdReg = /[0-9A-z]{6,15}/;
            if (!pwdReg.test(password)) {
                alert('请输入6-15位数字、大小写字母组成的密码');
                return;
            }
            // 接口
            $.post('/register',{
                username:username,
                password:password
            },function (res) {
                // 弹出确认信息
                alert(res);
            })


        }
   
        // 登录接口
        
        function login(param) {
        var username = $('#username').val();
        var password = $('#password').val();

         if (!username || !password) {
             alert('请输入用户名或密码');
             return;
         }
         $.post('/login',{
             username:username,
             password:password,
         },function (res) {
             alert(res);
         })


        }
 



    </script>


</body>

</html>

并且引入jquery,因为基本都是jquery书写的
第三步
最外层的文件夹下创建 index.js （相当于后端）

// 引入全局模块
var express = require('express');
// 引入文件管理模块
var fs = require('fs');
// 获取从前端返回的数据
var bodyParse = require('body-parser');

// 注册服务器  创建Express应用程序。express()函数是由express模块导出的顶级函数。
var app = express();

app.use(express.static('public')); // 静态文件夹，

// 扩展选项允许选择使用querystring库(false)或qs库(true)解析url编码的数据。

app.use(bodyParse.urlencoded({ extended: false }))

// 一个节点http。服务器返回，这个应用程序(它是一个函数)作为它的回调。如果你想创建一个HTTP和HTTPS服务器，你可以使用" HTTP "和" HTTPS "模块
app.listen(5000, function () {
    console.log('服务已启动，请访问http://localhost:5000');
}); // 设置端口号

// 注册的接口
app.post('/register', function (req, res) {
    //   console.log(req.body);
    // 注册的逻辑：在根目录创建一个users，每一个文件代表一个用户，文件名就是用户名，文件内容是密码；
    // 注册前，先把users中的所有用户文件读取出来，判断是否有这个注册的用户名

    // result 结果 array 数组
    fs.readdir('./users', function (result, array) {
        // console.log(result ,array );
        let bool = true;
        // 循环每一个已经注册过的账号，默认可注册
        array.forEach(item => {
            // console.log(item);

            var name1 = item.split('.')[0]
            //判断文件名和注册用户名是否相同，如果相同，说明用户名已存在；
            if (name1 == req.body.username) {
                bool = false
            }
        });

        if (bool) {
            res.send('注册成功');
            //注册成功，将文件写入到users文件夹中，文件名为帐号名，文件内容为帐号密码
            fs.appendFile(`./users/${req.body.username}.txt`, req.body.password, () => { })
        } else {
            res.send('用户名已存在，请重新注册')
        }
    })
});

// 登录接口
app.post('/login', function (req, res) {
    // 读取users下面的所有用户，判断是否存在这个帐号
    fs.readdir('./users', function (result, array) {
        if (result) {
            res.send('服务器错误：' + result.message)
        } else {
            let isExists = false; //记录状态，默认为false，表示不存在这个账户
            array.forEach(item => {
                //    console.log(item);
                if (item.split('.')[0] == req.body.username) {
                    //如果相同说明存在此帐号，那就把该文件中的密码读取出来继续判断密码
                    fs.readFile('./users/' + item, function (result, data) {
                        // 判断读取的密码和请求的密码是否相同 data需要转换数值
                        console.log(result,data.toString());
                          if (data.toString() == req.body.password) {
                              res.send('登录成功')
                          }else{
                              res.send('密码错误，请重新输入密码')
                          }
                    })
                       // 修改状态，表示存在账号
                       isExists = true
                };
            });
            if (!isExists) {
				res.send('用户名不存在，登录失败');
			};
        }
    })
})

在这里插入图片描述

没有写另外的跳转页

好先

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单的网页本地注册登录 node.js fs(文件管理模块)版（内附创建本地服务器）

1、首先把node.js装到本地，详见上一篇，2、安装 NPM (自己用的话安装全局)1，NPM ： node package manager是node包管理器，是全球最大的开源库生态系统。作用是管理node包（node包可以理解为工具/插件/模块/一段代码）管理的操作：下载安装，查看，卸载，搜索，更新，发布等等npm在新版本nodejs中已经集成，所以不需要手动安装npm -v 在命令提示符查看npm版本npm在安装node包是终端指令： npm install 模块名npm在安装
复制链接

扫一扫