admin管理员组文章数量:1594995
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
运行之后使用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 + C7,打开浏览器,访问端口号为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">密 码:</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('用户名不存在,登录失败');
};
}
})
})
没有写另外的跳转页
版权声明:本文标题:简单的网页本地注册登录 node.js fs(文件管理模块)版(内附创建本地服务器) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725802290a1043679.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论