实现用户注册,登录,添加文章,查看文章,管理员登录,管理员查看多有用户,删除用户的功能。
记录用户信息的文件名为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);