web2.0课上的node.js

Posted 2020-09-11

X

signin作业
上一周web作业为用node.js设计一个本地网站用于用户注册提交，并且有校验功能和去重检查。头疼了几天后可算弄出来了。首先，听从老师的建议看api，网址为：?https://nodejs.org/api/，看了后发现自己一头雾水，干脆还是边做边想吧，首先根据这个网址（http://www.sitepoint.com/creating-a-http-server-in-node-js/）上那个经典的写到烂的样例创建一个服务器，接下来打开浏览器浏览localhost：8000（由于作业要求使用8000端口；一切正常，因为我根本没涉及到很复杂的东西，只是接到需求，给响应写东西就结束了。可是作业的要求如上面所示，所以我就想先弄那些html，css什么的，然后服务器提交不就好了么，html与css很快写好了。然后根据filesystem 的api进行操作给浏览器这个html然后发现无法的到css渲染，为了这个问题我想了一上午，我先用console.log看了下回应的req的path，然后发现除了/之外还有一个regist.css然后就没有然后了，我已开始固执的像把html和css一起送给浏览器，但苦于不知道怎么写报头，看网上的也没看懂ext那种写法，后来问群里的人，讨论，最后终于想明白不是一起送的，而是浏览器要什么就给什么，像前面那个css就是浏览器要的东西，我需要在服务器的js那里判断浏览器req的需求，然后根据需求的不同写报头，给文件。这问题想了一个上午。
? 能给浏览器网页了，就该处理浏览器的提交了，查了好多关于如何处理post提交数据，最后发现用json最好用，本以为还要花好多时间学j son，一看w3school发现其实并不难，json就是一数据的格式，不过很方便我们取数据，于是我又进行各种测试，看到网上说的req.on(‘data‘, function(data){})方法可以处理post数据，而且function里的data要转换为字符串数据，我就用console看data到底是什么，转为字符串是什么，原来data是一个buffer（虽然我仍然没懂buffer是什么），转为字符串是post的数据的，是&=形势的数据，开心的不得了，于是用querystring模块的parse方法把这个data+“”字符串转化为json数据，然后存数据的时候我一开始新建txt文件，就存json数据了，后来我又改了一下，这是后话。找到post数据后我就想如何动态显示细节网页，一开始想新建一个detail.js然后动态操作detail.html但晚上躺在床上一想，直接改html不是更好，于是我带着美妙的想法睡着了。
? 第二天一早（周六）我开始实现我的想法，动态html，过程依然艰辛，最后我将html写在了一行存到文件中，后来看了别人的代码发现是可以完美有缩进的写的，在每一行后面加\就好了。不管怎样，完事了，一半的工程了，后面就是如何校验去重了。
校验是本地的活，去重是服务器的活，我就直接在html链接了一个js（其实还有jq库），在js里进行校验，主要利用正则表达式进行验证，这里我花了半个下午的时间解决了一个坑爹的问题，正则表达式不能随便加空格，这是大忌（尼玛，我写了一年Googlestyle你告我这个）知道真相的我眼泪掉下来。总之逻辑没什么问题，验证只有那个空格比较扫兴，接下来去重就在服务器端做了，一样在signin.js里写了，找到文件之后发现里面是json数据的话不好处理，我直接拿字符串去处理得到的反而不是json文件。后来我就在上面存数据时直接存查询格式的数据（就是&=号格式的那种）然后在提取文件转化为json，这样json的每个属性（name number post tele）就是一个数组，而且长度相同。遍历之后查找重复的然后在返回给服务器端就好了，给出我的成果纪念我死去的上周?。????
signin.js----
203;var http = require(‘http‘);
var fs = require(‘fs‘);
var qs = require(‘querystring‘);
var path = require(‘path‘);
var url = require(‘url‘);
http.createServer(function(req, res){
var search = url.parse(req.url).search;
var pathname = url.parse(req.url).pathname;
if (pathname == ‘\/‘ && /\?username/.test(search)) {//如果查询
console.log(‘yes‘);//测试
var query = qs.parse(url.parse(req.url).query);//获取查询
console.log(query.username);//测试
fs.readFile(‘./output.txt‘, ‘utf-8‘, function(err, data) {//读取服务器文件
if (err) throw err;
var jsontxt = qs.parse(data);
console.log(jsontxt);//测试
for (var i = 0; i < jsontxt.name.length; i++) {
if(jsontxt.name[i] == query.username) {//匹配姓名
console.log(jsontxt.name[i]);
var detail_html =
‘
详情
用户详情
用户名: ‘+jsontxt.name[i]+‘
学号&nbsp: ‘+jsontxt.number[i]+‘
电话&nbsp: ‘+jsontxt.tele[i]+‘
邮箱&nbsp: ‘+jsontxt.post[i]+‘
‘ fs.open(‘.\\detail\\detail.html‘, ‘w‘, function(err, fd) {
if(err) throw err;
fs.write(fd, detail_html, function(err) {
if (err) throw err;
});
fs.readFile(‘.\\detail\\detail.html‘, function(err, data) {
if (err) throw err;
res.end(data);
});
fs.close(fd, function(err) {
if (err) throw err;
});
});
break;
} else if(i == jsontxt.name.length - 1) {//最后一个没匹配就404
res.writeHead(404, {‘Content-Type‘:‘text/html‘});
res.end(‘404notfound‘);
}
};
})
} else if (pathname == ‘\/‘ && req.method == ‘GET‘) {//根目录注册
res.writeHead(200, {‘Content-Type‘:‘text/html‘})
fs.readFile(‘.\\regist\\regist.html‘, function(err, data) {
if (err) {throw err;}
res.write(data);
res.end();
})
} else if (pathname == ‘\/regist.css‘) {
res.writeHead(200, {‘Content-Type‘ : ‘text/css‘});
fs.readFile(‘.\\regist\\regist.css‘, function(err, data) {
if (err) {throw err;}
res.end(data);
})
} else if (pathname == ‘\/detail.css‘) {
res.writeHead(200, {‘Content-Type‘ : ‘text/css‘});
fs.readFile(‘.\\detail\\detail.css‘, function(err, data) {
if (err) {throw err;}
res.end(data);
})
} else if (pathname == ‘\/regist.js‘) {
res.writeHead(200, {‘Content-Type‘ : ‘application/x-javascript‘});
fs.readFile(‘.\\regist\\regist.js‘, function(err, data) {
if (err) {throw err;}
res.end(data);
})
} else if (pathname == ‘\/jquery.js‘) {
res.writeHead(200, {‘Content-Type‘ : ‘application/x-javascript‘});
fs.readFile(‘.\\jquery.js‘, function(err, data) {
if (err) {throw err;}
res.end(data);
})
}
if (req.method == ‘POST‘) {//post资料存入
var query = ‘‘;
var json;
req.on(‘data‘, function(data) {
fs.open(‘output.txt‘, ‘a+‘, function(err, fd) {//存入数据
if(err) {
throw err;
}
query += data;
var norepeat = true;
console.log(query);//测试
json = qs.parse(query);//查询的json
fs.readFile(‘./output.txt‘, ‘utf-8‘, function(err, data) {//去重
if (err) throw err;
var localjson = qs.parse(data);
for (var i = 0; i < localjson.name.length; i++) {
if(localjson.name[i]==json.name) {
norepeat = false;
res.writeHead(200, {‘Content-Type‘:‘text/html‘})
fs.readFile(‘.\\regist\\regist.html‘, function(err, data) {
if (err) {throw err;}
res.write(data);
res.end(‘
})
} else if(localjson.number[i]==json.number) {
norepeat = false;
res.writeHead(200, {‘Content-Type‘:‘text/html‘})
fs.readFile(‘.\\regist\\regist.html‘, function(err, data) {
if (err) {throw err;}
res.write(data);
res.end(‘
})
} else if(localjson.tele[i]==json.tele) {
norepeat = false;
res.writeHead(200, {‘Content-Type‘:‘text/html‘})
fs.readFile(‘.\\regist\\regist.html‘, function(err, data) {
if (err) {throw err;}
res.write(data);
res.end(‘
})
} else if(localjson.post[i]==json.post) {
norepeat = false;
res.writeHead(200, {‘Content-Type‘:‘text/html‘})
fs.readFile(‘.\\regist\\regist.html‘, function(err, data) {
if (err) {throw err;}
res.write(data);
res.end(‘
})
}
};
if (norepeat) {//服务器没有重复
//写入本地文件
fs.write(fd, ‘&‘+query, function(err) {
if(err) throw err;
});
fs.close(fd, function(err) {
if (err) throw err;
});
//动态添加html
var detail_html =
‘
详情
用户详情
用户名: ‘+json.name+‘
学号&nbsp: ‘+json.number+‘
电话&nbsp: ‘+json.tele+‘
邮箱&nbsp: ‘+json.post+‘
‘ fs.open(‘.\\detail\\detail.html‘, ‘w‘, function(err, fd) {
if(err) throw err;
fs.write(fd, detail_html, function(err) {
if (err) throw err;
});
fs.readFile(‘.\\detail\\detail.html‘, function(err, data) {
if (err) throw err;
res.end(data);
});
fs.close(fd, function(err) {
if (err) throw err;
});
});
}
});
});
});
}
}).listen(8000);
console.log(‘Server running at http://127.0.0.1:8000‘);
--------------------------我是任性的分割线----------------------------------------------
??regist.html-----
?
注册
用户注册
用户名
学号
电话
邮箱
-------------------------------我又来zhuangb了------------------------------
?regist.css-----
#head {
text-align: center;
}
form {
border: black 1px solid;
}
#subhead {
text-align: center;
}
.content {
text-align: center;
margin: 10px;
}
#func {
text-align: right;
}
#func input {
margin: 10px;
}
---------------------------------没错还是我---------------------------------
regist.js-----
?
?$(function() {
$(‘.content input‘).blur(function() {
if ($(this).attr(‘name‘) == ‘name‘ && !(/^[a-zA-Z]{1}\w{5,17}$/.test($(this).val()))) {
$(‘#name‘).text(‘name is 6-18 letters, the first is not a number‘);
if(/^[0-9]\w{5, 17}$/.test($(this).val())) $(‘#name‘).text(‘the first is not a number‘);
if(/^[a-zA-Z]\w{0, 4}]$/.test($(this).val()) || /^[a-zA-Z]\w{18,}$/.test($(this).val())) $(‘#name‘).text(‘total 6-18 letters or numbers‘);
}
else if ($(this).attr(‘name‘) == ‘name‘ && (/^[a-zA-Z]{1}\w{5,17}$/.test($(this).val())))
$(‘#name‘).text(‘YES^_^‘);
if ($(this).attr(‘name‘) == ‘number‘ && !(/^[1-9][0-9]{7}$/.test($(this).val())))
$(‘#number‘).text(‘it shoulde be 8 numbers and no letter‘);
else if ($(this).attr(‘name‘) == ‘number‘ && (/^[1-9][0-9]{7}$/.test($(this).val())))
$(‘#number‘).text(‘YES^_^‘);
if ($(this).attr(‘name‘) == ‘tele‘ && !(/^[1-9][0-9]{10}$/.test($(this).val())))
$(‘#tele‘).text(‘it shoulde be 11 numbers and no letter‘);
else if ($(this).attr(‘name‘) == ‘tele‘ && (/^[1-9][0-9]{10}$/.test($(this).val())))
$(‘#tele‘).text(‘YES^_^‘);
if ($(this).attr(‘name‘) == ‘post‘ && !(/^[a-zA-Z0-9_\-][email protected](([a-zA-Z_\-])+\.)+[a-zA-Z]{2,4}$/.test($(this).val()))) {
$(‘#post‘).text(‘No Kidding^_^‘);
}
else if ($(this).attr(‘name‘) == ‘post‘ && (/^[a-zA-Z_\-][email protected](([a-zA-Z_\-])+\.)+[a-zA-Z]{2,4}$/.test($(this).val())))
$(‘#post‘).text(‘YES^_^‘);
});
$(‘#submit‘).click(function() {
$(‘.content input‘).each(function() {
if ($(this).attr(‘name‘) == ‘name‘ && !(/^[a-zA-Z]\w{5,17}$/.test($(this).val()))) {
$(‘#name‘).text(‘No Kidding^_^‘);
$(‘#submit‘).attr(‘disabled‘, true);
}
else if ($(this).attr(‘name‘) == ‘name‘ && (/^[a-zA-Z]\w{5,17}$/.test($(this).val()))) {
$(‘#name‘).text(‘YES^_^‘);
$(‘#submit‘).attr(‘disabled‘, false);
}
if ($(this).attr(‘name‘) == ‘number‘ && !(/[1-9]([0-9]){7}/.test($(this).val()))) {
$(‘#number‘).text(‘No Kidding^_^‘);
$(‘#submit‘).attr(‘disabled‘, true);
}
else if ($(this).attr(‘name‘) == ‘number‘ && (/[1-9]([0-9]){7}/.test($(this).val()))) {
$(‘#number‘).text(‘YES^_^‘);
$(‘#submit‘).attr(‘disabled‘, false);
}
if ($(this).attr(‘name‘) == ‘tele‘ && !(/[1-9][0-9]{10}/.test($(this).val()))) {
$(‘#tele‘).text(‘No Kidding^_^‘);
$(‘#submit‘).attr(‘disabled‘, true);
}
else if ($(this).attr(‘name‘) == ‘tele‘ && (/[1-9][0-9]{10}/.test($(this).val()))) {
$(‘#tele‘).text(‘YES^_^‘);
$(‘#submit‘).attr(‘disabled‘, false);
}
if ($(this).attr(‘name‘) == ‘post‘ && !(/^[a-zA-Z_\-][email protected](([a-zA-Z_\-])+\.)+[a-zA-Z]{2,4}$/.test($(this).val()))) {
$(‘#post‘).text(‘No Kidding^_^‘);
$(‘#submit‘).attr(‘disabled‘, true);
}
else if ($(this).attr(‘name‘) == ‘post‘ && (/^[a-zA-Z_\-][email protected](([a-zA-Z_\-])+\.)+[a-zA-Z]{2,4}$/.test($(this).val()))) {
$(‘#post‘).text(‘YES^_^‘);
$(‘#submit‘).attr(‘disabled‘, false);
}
})
})
$(‘#reset‘).click(function() {
$(‘.content input‘).val(‘‘);
$(‘.content span‘).text(‘‘);
})
})
---------------------------------咬我啊---------------------------------
关于detail.css和detail.html由于简单略去了（博主急于交作业，css没有用心弄，抱歉啦。）