node练习

最新推荐文章于 2024-07-11 04:08:32 发布
最新推荐文章于 2024-07-11 04:08:32 发布
阅读量393 收藏
点赞数
分类专栏： node 文章标签： node学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hahahahahahahaha__1/article/details/81431968
版权

实现用户注册，登录，添加文章，查看文章，管理员登录，管理员查看多有用户，删除用户的功能。

记录用户信息的文件名为save.txt，记录文章标题的文件名为text.txt，保存文章的文件夹为text文件夹。

初始的时候，save.txt文件夹为一个空对象，text.txt文件夹为一个空数组。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户登录</title>
	<style>
	*{
		margin:0;
		padding: 0;
	}
		.topNode{
			height: 30px;
			background-color: #ccc;
			line-height: 30px;
			padding:5px;
		}
		.zc,.dl,.write_t,.vip,.delete{
			padding:6px;
		}
		.contain{
			width: 300px;
			height: 400px;
			position: absolute;
			border:1px solid black;
			top:50%;
			left:50%;
			margin-top: -200px;
			margin-left: -150px;
			background-color: white;
			z-index: 4;
			display: none;
		}
		.mask{
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.3);
			position: absolute;
			z-index: 2;
			display: none;
		}
		.close{
			position: absolute;
			top:6px;
			right: 6px;
		}
		.text{
			width: 300px;
			height: 400px;
			position: absolute;
			left:50%;
			top:50%;
			margin-top: -200px;
			margin-left: -150px;
			background-color: white;
			border:1px solid black;
			padding: 6px;
			display: none;
			z-index: 4;
		}
		.t_close{
			position: absolute;
			top:6px;
			right: 6px;
		}
		.show{
			width: 300px;
			height: 400px;
			background-color: lightblue;
			position: absolute;
			left:50%;
			top:50%;
			margin-top: -200px;
			margin-left: -150px;
			border:1px solid black;
			z-index: 4;
			display: none;
			
		}
		.s_close{
			position: absolute;
			top:6px;
			right: 6px;
		}
		.show_con{
			text-align: center;
			padding:6px;
		}
		.vip{
			display: none;
		}
	</style>
</head>
<body>
	<!-- 用户注册登录系统	 -->
	<div class='mask'></div>
	<!-- 头部按钮 -->
	<div class='topNode'>
		<button class='zc'>注册</button>
		<button class='dl'>登录</button>
		<button class='vip'>查看所有账号</button>
		<button class='write_t' style='display: none;'>写文件</button>
	</div>
	<!-- 注册部分 -->
	<div class='contain'>
		用户名：<input type="text" class='user' />
		<br>
		密码：<input type="text" class='pass' />
		<br>
		<input type="button" value='注册' class='c_zc'/>
		<input type="button" value='登录' class='c_dl'/>
		<button class='close'>关闭</button>
	</div>
	<!-- 添加文章部分 -->
	<div class='text'>
		文章名：<input type="text" class='title' />
		<br>
		<br>
		内容：
		<textarea class='context' cols="30" rows="10"></textarea>
		<br>
		<button class='write'>写入</button>
		<button class='t_close'>关闭</button>
	</div>
	<ul class='ul'></ul>
	<!-- 显示文章部分 -->
	<div class='show'>
		<button class='s_close'>关闭</button>
		<p class='show_con'></p>
	</div>
	<!-- 显示所有用户 -->
	<div>
		<ul class='user_li'></ul>
	</div>	
	<script>
		var zc = document.querySelector('.zc');
		var dl = document.querySelector('.dl');
		var c_zc = document.querySelector('.c_zc');
		var c_dl = document.querySelector('.c_dl');
		var con = document.querySelector('.contain');
		var mask = document.querySelector('.mask');
		var close = document.querySelector('.close');
		var user = document.querySelector('.user');
		var pass = document.querySelector('.pass');
		var write_t = document.querySelector('.write_t');
		var text = document.querySelector('.text');
		var t_close = document.querySelector('.t_close');
		var write = document.querySelector('.write');
		var title = document.querySelector('.title');
		var text = document.querySelector('.text');
		var c_text = document.querySelector('.context');
		var ul = document.querySelector('.ul');
		var s_close = document.querySelector('.s_close');
		var show = document.querySelector('.show');
		var show_con = document.querySelector('.show_con');
		var vip = document.querySelector('.vip');
		var user_li = document.querySelector('.user_li');
		//绑定删除用户的事件(用事件委托)
		document.onclick = function(e){
			var ev = e || window.event;
			var target = ev.target || ev.srcElement;
			if(target.className === 'delete'){
				ajax5(target);
			}
		}
		vip.onclick = function(){
			ajax4();
		}
		s_close.onclick = function(){
			show.style.display = 'none';
			mask.style.display  = 'none';
		}
		write.onclick = function(){

		}
		t_close.onclick = function(){
			text.style.display = 'none';
			mask.style.display = 'none';
		}
		write_t.onclick = function(){
			text.style.display = 'block';
			mask.style.display = 'block';
		}
		zc.onclick = function(){
			mask.style.display = 'block';
			con.style.display = 'block';
		}
		dl.onclick = function(){
			mask.style.display = 'block';
			con.style.display = 'block';
		}
		close.onclick = function(){
			mask.style.display = 'none';
			con.style.display = 'none';
		}
		c_zc.onclick = function(){
			if(user.value === '' || pass.value === ''){
				alert('请输入用户名和密码!!');
				return ;
			}
			ajax1();
		}
		c_dl.onclick = function(){
			ajax2();
		}
		//写文件
		write.onclick = function(){
			text.style.display = 'block';
			ajax3();
		}
		//列出所有文件
		var xhr = new XMLHttpRequest();
		xhr.open('get','http://localhost:2184/',true);//异步请求
				// send中为要发送的内容
				xhr.send(null);
				xhr.onreadystatechange = function(){
					if(xhr.readyState === 4){
						if(xhr.status>=200&&xhr.status<300||xhr.status===304){
							var arr = JSON.parse(xhr.responseText);
							arr.forEach(function(val){
								var li = document.createElement('li');
								li.innerHTML = val;
								li.onclick = function(e){
									show.style.display = 'block';
									mask.style.display = 'block';
									ajax4(e);
								}
								ul.appendChild(li);
							});
							
						}else{
							console.log('error');
						}
					}
				}
		//注册的ajax的请求
		function ajax1(){
			var xhr = new XMLHttpRequest();
				xhr.open('get','http://localhost:2182/?user='+user.value+'&pass='+pass.value,true);//异步请求
				// send中为要发送的内容
				xhr.send(null);
				xhr.onreadystatechange = function(){
					if(xhr.readyState === 4){
						if(xhr.status>=200&&xhr.status<300||xhr.status===304){
							var data = xhr.responseText;
							alert(data);//获取的数据便是后台用res.write()返回的数据
							if(data === '注册成功'){
								mask.style.display = 'none';
								con.style.display = 'none';
							}
							if(data === '该用户已注册'){
								mask.style.display = 'none';
								con.style.display = 'none';
							}
						}else{
							console.log('error');
						}
					}
				}
		}
		//登录的ajax请求
		function ajax2(){
			//发送get请求
			var xhr = new XMLHttpRequest();//创建新文件
			xhr.open('post','http://localhost:2181/',true);//异步请求
			// send中为要发送的内容
			xhr.setRequestHeader('Content-Type',"application/x-www-form-urlencoded");
			xhr.send('user='+user.value+'&pass='+pass.value);
			xhr.onreadystatechange = function(){
				if(xhr.readyState === 4){
					if(xhr.status>=200&&xhr.status<300||xhr.status===304){
						var data = xhr.responseText;
						alert(data);//获取的数据便是后台用res.write()返回的数据
						if(data === '登录成功！！'){
							write_t.style.display = 'inline-block';
							mask.style.display = 'none';
							con.style.display = 'none';
						}
						if(data === '管理员登录'){
							write_t.style.display = 'inline-block';
							mask.style.display = 'none';
							con.style.display = 'none';
							vip.style.display = 'inline-block';
						}
					}else{
						console.log('error');
					}
				}
			}		
		}
		//写文件的ajax请求
		function ajax3(){
			//发送get请求
			var xhr = new XMLHttpRequest();//创建新文件
			xhr.open('post','http://localhost:2183/',true);//异步请求
			// send中为要发送的内容
			xhr.setRequestHeader('Content-Type',"application/x-www-form-urlencoded");
			xhr.send('title='+title.value+'&text='+c_text.value);
			xhr.onreadystatechange = function(){
				if(xhr.readyState === 4){
					if(xhr.status>=200&&xhr.status<300||xhr.status===304){
						var data = xhr.responseText;
						alert(data);//获取的数据便是后台用res.write()返回的数据
						if(data === '写入成功!!!'){
							mask.style.display = 'none';
							text.style.display = 'none';
						}
					}else{
						console.log('error');
					}
				}
			}		
		}
		//显示文章内容的ajax
		function ajax4(e){
			var xhr = new XMLHttpRequest();
				console.log(e.target.innerHTML)
				xhr.open('get','http://localhost:2185/?title='+e.target.innerHTML,true);//异步请求
				// send中为要发送的内容
				xhr.send(null);
				xhr.onreadystatechange = function(){
					if(xhr.readyState === 4){
						if(xhr.status>=200&&xhr.status<300||xhr.status===304){
							var data = xhr.responseText;
							show_con.innerHTML = data;
						}else{
							console.log('error');
						}
					}
				}
		}
		//查看所有用户的ajax
		function ajax4(){
			var xhr = new XMLHttpRequest();
				xhr.open('get','http://localhost:2186/',true);//异步请求
				// send中为要发送的内容
				xhr.send(null);
				xhr.onreadystatechange = function(){
					if(xhr.readyState === 4){
						if(xhr.status>=200&&xhr.status<300||xhr.status===304){
							var data = JSON.parse(xhr.responseText);
							console.log(data);
							data.forEach(function(val){
								var li = document.createElement('li');
								li.innerHTML = val;
								li.innerHTML+='<button class="delete">删除</button>';
								user_li.appendChild(li);
							});

						}else{
							console.log('error');
						}
					}
				}
		}
		//删除用户的ajax请求：
		function ajax5(target){
			var xhr = new XMLHttpRequest();
				xhr.open('get','http://localhost:2187/?user='+target.parentNode.innerText.slice(0,-2),true);//异步请求
				// send中为要发送的内容
				xhr.send(null);
				xhr.onreadystatechange = function(){
					if(xhr.readyState === 4){
						if(xhr.status>=200&&xhr.status<300||xhr.status===304){
							alert(xhr.responseText);
							user_li.innerHTML = '';
							ajax4();

						}else{
							console.log('error');
						}
					}
				}
		}

	</script>
</body>
</html>

node的后台j s代码：

ar http = require('http');
var urlLib = require('url');
var fs = require('fs');
var querystring = require('querystring');
// 管理员
var vip = {
	'guo':123
}
//注册:
http.createServer(function(req,res){
	res.setHeader('Access-Control-Allow-Origin','*');
	var obj = urlLib.parse(req.url,true).query;
	if(obj.user==='guo'){
		// 判断是否是管理员
		res.write('该用户已注册');
		res.end();
	}else{
	fs.readFile('./save.txt','utf8',function(err,data){//在save.txt文件中写一个空的对象
		if(err){
			throw err;
		}else{
			var objData = JSON.parse(data);
			if(!objData[obj.user]){
				objData[obj.user] = obj.pass;
				fs.writeFile('./save.txt',JSON.stringify(objData),function(err){
					if(err){
						throw err;
					}else{
						res.write('注册成功');
						res.end();
					}
				})
			}else{
				res.write('用户已存在');
				res.end();
			}
		}
	});}
}).listen(2182);
//登录
http.createServer(function(req,res){
	res.setHeader('Access-Control-Allow-Origin','*');
	var result = '';
	req.on('data',function(data){
		result += data;
	});
	req.on('end',function(){
		var obj = querystring.parse(result);
		console.log(obj);
		//判断是否是管理员
		if(vip[obj.user] == obj.pass){
			res.write('管理员登录');
			res.end();
		}else{
		fs.readFile('./save.txt','utf8',function(err,data){
			if(err){
				throw err;
			}else{
				var objData = JSON.parse(data);
				console.log(objData);
				if(objData[obj.user] === obj.pass){
					res.write('登录成功！！');
					res.end();
				}else{
					res.write('用户名或密码错误!!');
					res.end();
				}
			}
		});}
	});
}).listen(2181);
//写文件:在text.txt里面初始化一个空的数组
http.createServer(function(req,res){
	res.setHeader('Access-Control-Allow-Origin','*');
	var result = ''
	req.on('data',function(data){
		result += data;
	});
	req.on('end',function(){
		var obj = querystring.parse(result);
		fs.readFile('./text.txt','utf8',function(err,data){
			if(err){
				throw err;
			}else{
				var objData = JSON.parse(data);
				// objData.push(obj.title);
				// console.log(objData);
				if(objData.indexOf(obj.title) === -1){
					objData.push(obj.title)
					fs.writeFile('./text.txt',JSON.stringify(objData),function(err){
						console.log(123);
						if(err){
							throw err;
						}else{
							res.write('写入成功!!!');
							res.end();
						}
					});
					fs.writeFile('./text/'+obj.title+'.txt',obj.text,function(err){
						console.log(obj)
						if(err){
							throw err;
						}else{
							console.log('写入成功!!!');
						}
					})
				}else{
					res.write('文章已存在！！！');
					res.end();
				}
			}
		});
	});
}).listen(2183);
//将所有文件返回给前台
http.createServer(function(req,res){
	res.setHeader('Access-Control-Allow-Origin','*');
	fs.readFile('./text.txt','utf8',function(err,data){
		if(err){
			throw err;
		}else{
			res.write(data);
			res.end();
		}
	});
}).listen(2184);
//读取对应文章内容
http.createServer(function(req,res){
	res.setHeader('Access-Control-Allow-Origin','*');
	var obj = urlLib.parse(req.url,true).query;
	fs.readFile('./text/'+obj.title+'.txt','utf8',function(err,data){
		if(err){
			throw err;
		}else{
			res.write(data);
			res.end();
		}
	});
}).listen(2185);
//显示所有用户
http.createServer(function(req,res){
	res.setHeader('Access-Control-Allow-Origin','*');
	fs.readFile('./save.txt','utf8',function(err,data){
		var obj = eval('('+data+')');
		var arr = Object.keys(obj);
		console.log(arr);
		res.write(JSON.stringify(arr));
		res.end();
	});
}).listen(2186);
//删除用户
http.createServer(function(req,res){
	res.setHeader('Access-Control-Allow-Origin','*');
	var obj = urlLib.parse(req.url,true).query;
	fs.readFile('./save.txt','utf8',function(err,data){
		if(err){
			throw err;
		}else{
			var objData = JSON.parse(data);
			console.log(obj);
			delete objData[obj.user];
			console.log(objData);
			fs.writeFile('./save.txt',JSON.stringify(objData),function(err){
				if(err){
					throw err;
				}else{
					res.write('删除成功！');
					res.end();
				}
			});
		}
	})
}).listen(2187);

 

guoxiaxing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node学习
卜司的博客
03-11 336
一、安装node 1、下载node https://www.runoob.com/nodejs/nodejs-install-setup.html 2、安装npm 安装前确认无npm 环境变量里面也没有 C:\Users\bobo\AppData\Roaming下也没有node有关的 有全部删除 参考 https://www.cnblogs.com/aeolian/p/12457284.html https://www.bilibili.com/video/BV1VK4y1v7TK?from=sear
node学习
Hello_yhr的博客
10-24 134
1、什么是node 1、Node是一个JS的运行环境 js的运行方式： ​ 1.客户端：把js文件引入，然后打开浏览器，控制台查看 2.node服务端： 打开方式 1.cmd窗口中cd命令切换到需要打开的文件夹下，运行 node 文件名 2.直接在文件夹下 shift+右键 3.vscode编辑器中直接在当前文件的终端中打开，submint编辑器是需要安装terminal插件 2、.全局对象 global 跟浏览器环境中的this相同，表示顶级对象 ​ 注意：浏览器的全局环境th..
7道测试题：检验你的Node.js基础知识！
你若盛开，清风自来
08-25 6123
fs模块的`createReadStream`可以创建一个fs.ReadStream实例，`ReadStream`实现了stream.Readable接口，stream.Readable在数据到达时发射data事件，通过给data关联callback就可以处理数据。
Node.js实操练习(一)之Node.js+MySQL+RESTful
最新发布
weixin_35888497的博客
07-11 36
前言最近学习了一下node.js相关的内容，在这里初步做个小总结，说实话关于本篇博客的相关内容，自己很久之前就已经有过学习，但是你懂的，“好记性不如烂笔筒”，学过的东西不做笔记的话，很容易就会忘记的一干二净，往往的结果就是自己又要重头开始学习，这是一个非常痛苦的过程。没有办法，为了重新捡起自己曾经学过的内容，决定写下这篇博...
【NodeJS】简介 以及一些简单的练习
weixin_45844670的博客
01-02 389
这是我第一篇关于nodejs的文章，希望可以边学习边写下去。 简介 nodejs是对高性能V8引擎（chrome浏览器的JavaScript引擎）的封装，通过提供一系列优化的api类库，使v8在浏览器之外仍然能高效运行 node满足js同时运行在前端和后端，而且性能高效 “hello world！” console.log(“hello world!”) 第一个web服务器 var http = require("http"); //使用require函数引用http模块，从而能够拥有http的引用变量
Node练习 API接口项目
好好学习天天向上
06-04 482
1.新建api_server文件夹 2. 新建api_server文件夹的包管理配置文件 3.安装express 4.创建一个简单的服务器app.js 2 配置cors跨域 1.安装中间件 2.导入中间件 3.在所有路由前注册全局中间件 3 配置解析表单数据urlencoded的中间件 使用express的内置中间件 解析URLencoded格式的请求体数据 4 初始化路由 1.在项目根目录中，新建文件夹，存放所有的路由模块。路由模块只存放客户端的请求与处理函数之间的映射关系。 2.文件夹，用来存放路由具
node练习66666666666666666666666666
05-19
node练习66666666666666666666666666
node练习代码，对应个人开始学习使用参考，有基础就不要下
12-22
这个压缩包“node练习代码”显然包含了作者在学习Node.js过程中编写的实践代码，对于初学者来说，是一个很好的参考资料。 1. **Node.js基础**： Node.js的核心特性在于它的非阻塞I/O模型，这使得它在处理大量并发...
node-exercises:这些是来自 nodeschool 网站的 Node 练习
06-22
节点练习这些是来自 nodeschool 网站的 Node 练习练习你好世界创建一个扩展名为 .js 的文件。 一旦由标准输出“HELLO WORLD”创建显示锻炼婴儿的步骤使用 extendio .js 创建一个文件。 如您所知，您可以通过全局进程...
node.js入门学习demo练习（基于菜鸟教程）
03-27
通过菜鸟教程，学习Node.js的入门，菜鸟教程上提到了很多基础的用法，这里都分别写了对应的demo,保存在一个压缩包里，学习时，可运行demo查看效果
nodeJs练习项目 结构简洁 注释全面
05-20
nodeJs综合练习项目，实现基础的静态页面引擎，请求引擎
Node.js-Exercises:Node.js中的小项目和练习
04-28
Node.js Node.js中的小项目和练习
node练习项目.zip
01-16
软件开发设计：应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备：单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备...
node 练习项目.zip
01-15
软件开发设计：应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备：单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备...
node学习练习01——客户端与服务器
weixin_44089544的博客
04-21 203
首先是一些概念上的知识： C/S与B/S C/S与B/S是软件使用方式上两种划分具体分为： C/S全称Client/Server，是PC客户端、服务器架构 特点： 在服务器当中就主要是一个数据库，把所有的业务逻辑以及界面都交给客户端完成 优点 较为安全，用户界面丰富，用户体验好 缺点 每次升级都要重新安装，针对于不同的操作系统开发，可移植性差 B/S全称Browser/Server，是浏览器/服务...
nodeJs 小练习
weixin_41436338的博客
06-23 1247
下载相关的依赖新建相关的目录
nodejs练习
学如逆水行舟，不进则退
12-19 1025
blog
node.js基础编程题练习
05-24
好的，以下是一些基础的 Node.js 编程题练习： 1. 编写一个 Node.js 程序，在控制台输出 "Hello World!"。 ```javascript console.log("Hello World!"); ``` 2. 编写一个 Node.js 程序，读取一个文本文件并输出其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值