web2.0课上的node.js

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没有用心弄，抱歉啦。）

时间： 2024-08-10 15:09:23

web2.0课上的node.js的相关文章

在 Ubuntu 14.04/15.04 上配置 Node JS v4.0.0

大家好,Node.JS 4.0 发布了,这个流行的服务器端 JS 平台合并了 Node.js 和 io.js 的代码,4.0 版就是这两个项目结合的产物——现在合并为一个代码库.这次最主要的变化是 Node.js 封装了4.5 版本的 Google V8 JS 引擎,与当前的 Chrome 所带的一致.所以,紧跟 V8 的发布可以让 Node.js 运行的更快.更安全,同时更好的利用 ES6 的很多语言特性. Node.js 4.0 发布的主要目标是为 io.js 用户提供一个简单的升级途径,所

[Cubieboard] 在Cubieboard上安装Node.js和npm

你有两个选择可以实现在Cubieboard上安装NodeJS,下载别人已经编译完成适用于Cubieboard的NodeJS二进制包,或者自己下载源码自行在Cubieboard上进行编译. 使用编译完成的二进制包 在这里下载适用于ARM架构的Node.js,如果在Cubieboard社区找不到相关资源,可以在RaspberryPi社区寻找相近的资源.例如在<Node.js installation for Raspberry Pi>一文中提供了最新的适用于RaspberryPi的Node.js可

在Visual Studio上开发Node.js程序

[题外话] 最近准备用Node.js做些东西,于是找找看能否有Visual Studio上的插件以方便开发.结果还真找到了一个,来自微软的Node.js Tools for Visual Studio(NTVS),虽然现在仅发布了1.0 Alpha版本,但使用起来已经非常方便.而且,其开发团队与Python Tools for Visual Studio(PTVS)是同一个,而PTVS就是Visual Studio 2013中要创建自带的Python项目需要安装的那个程序,所以大可放心的使用NT

（转）Window 上安装Node.js

window上安装nodejs非常的简单,next,next就行了,环境变量都是自动配置,不明白为毛java不这样 Window 上安装Node.js http://www.runoob.com/nodejs/nodejs-install-setup.html 你可以采用以下两种方式来安装. 1.Windows 安装包(.msi) 32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi 64 位安装包下载地址 : http

[译]How to Install Node.js on Ubuntu 14.04 如何在ubuntu14.04上安装node.js

**原文链接为** [http://www.hostingadvice.com/how-to/install-nodejs-ubuntu-14-04/](http://www.hostingadvice.com/how-to/install-nodejs-ubuntu-14-04/) **由作者Jacob Nicholson 发表于October 27, 2015** **在此对作者表示感谢** Node.js作为一个基于JavaScript的开发平台,正变得越来越流行.许多开发人员都想构建通过

在Visual Studio 2013 上开发Node.js程序

[题外话] 最近准备用Node.js做些东西,于是找找看能否有Visual Studio上的插件以方便开发.结果还真找到了一个,来自微软的Node.js Tools for Visual Studio(NTVS),虽然现在仅发布了1.0 Alpha版本,但使用起来已经非常方便.而且,其开发团队与Python Tools for Visual Studio(PTVS)是同一个,而PTVS就是Visual Studio 2013中要创建自带的Python项目需要安装的那个程序,所以大可放心的使用NT

linux上安装node.js ，npm，与karma--angularJS环境搭建

安装nodejs   搭建依赖环境 首先安装g++编译器与git,在终端输入如下命令 sudo apt-get install g++ curl libssl-dev apache2-utils sudo apt-get install git-core git如果已经安装则不需要再安装了. 2. 安装node.js 直接输入命令sudo apt-get install nodejs 安装的是0.6版本的,这个会出现问题,导致接下来安装js测试工具karma,出现问题. 所以用下载安装的方式,去

CentOS上安装Node.js

CentOS上安装Node.js(想在Linux上学习Node.js的可以来看看). 说明: 使用CentOS系统,进行nodejs安装,nodejs版本-v0.8.7. 1,先下载nodejs: # wget http://nodejs.org/dist/v0.8.7/node-v0.8.7.tar.gz 2,解压文件 # tar xvf node-v0.8.7.tar.gz 3,进入解压目录 # cd node-v0.8.7 4,检查所需要配置 # ./configure 出现错误提示: E

在Visual Studio上开发Node.js程序(2)——远程调试及发布到Azure

[题外话] 上次介绍了VS上开发Node.js的插件Node.js Tools for Visual Studio(NTVS),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在其他机器上运行程序,进而需要远程调试功能,不过还好,NTVS提供的远程调试也非常方便. [系列索引] 在Visual Studio上开发Node.js程序——NTVS介绍及使用 在Visual Studio上开发Node.js程序(2)——NTVS远程调试及发布到Azure [文章索引] NTVS远