• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 从零学习node.js之搭建http服务器(二)

从零学习node.js之搭建http服务器(二)

作者:Wenzi 字体:[增加 减小] 来源:互联网 时间:2017-05-11

Wenzi通过本文主要向大家介绍了从零学习node.js之搭建http服务器(二)等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

前言

在上篇文章中我们了解了一下不同模块规范之间的联系与区别。本文我们正式开始node的学习,首先我们从搭建一个http服务器,能运行简单的程序开始说起。

一、hello world

最经典的hello world。首先我们创建一个server.js来保存我们的代码:

console.log( 'hello world' );
</div>

在终端输入node server.js运行:

node server.js
</div>

终端就会输出 hello world 的字样。可是我们一个node服务器程序,总是要在浏览器上访问的呀,这里就要用到node里自带的http模块了:

var http = require('http'); // 引入http模块

// 创建http服务器
// request : 从浏览器带来的请求信息
// response : 从服务器返回给浏览器的信息
http.createServer(function(request, response){
 response.writeHead(200, {'content-type': 'text/plain'}); // 设置头部信息,输出text文本
 response.write('hello world'); // 输出到页面中的信息
 response.end(); // 返回结束
}).listen(3000);
console.log('server has started...');
</div>

我们再次在终端输入node server.js运行,终端里会有输出 server has started… 的字样,表示服务器已创建并正在运行,然后我们在浏览器上访问127.0.0.1:3000,就可以看到页面中输出了hello world。

二、form表单

刚才我们只是在页面中输出了一段简单的文本,现在我们要在页面中呈现一个表单,可以让用户输入信息并进行提交:

// server.js
var http = require('http');

http.createServer(function(request, response){
var html = '<html>\
 <head>\
 <meta charset=UTF-8" />\
 </head>\
 <body>\
 <form action="/" method="post">\
 <p>username : <input type="text" name="username" /></p>\
 <p>password : <input type="password" name="password" /></p>\
 <p>age : <input type="text" name="age" /></p>\
 <p><input type="submit" value="submit" name="submit" /></p>\
 </form>\
 </body>\
 </html>';

 response.writeHead(200, {'content-type': 'text/html'}); // 输出html头信息
 response.write(html); // 将拼接的html字符串输出到页面中
 response.end(); // 结束
}).listen(3000);
console.log('server has started...');
</div>

修改server.js中的内容,重新运行:

node server.js
</div>

刷新页面后,我们发现页面中输出了3个文本框和1个提交按钮。因为我们的程序只是呈现页面,并没有做任何其他的处理,因此在页面中提交数据只是刷新当前页面。

注意: 我们每次修改node中的任何代码后,都要重新进行启动。

2.1 获取表单GET方式提交的数据

我们上面的代码中使用的是POST方式,不过这里要先讨论使用GET方式提交过来的数据,我们先不考虑数据的安全性,只是学习如何获取使用get方式提交过来的form表单数据,将post改为get,重新运行。

我们知道,使用get方式提交数据,会将数据作为URL参数传递过来,因此我们通过解析URL中的参数获取到数据,这里就用到了url模块中的方法:

// server.js
var http = require('http'),
url = require('url');

http.createServer(function(request, response){
 var html = '<html>\
 <head>\
 <meta charset=UTF-8" />\
 </head>\
 <body>\
 <form action="/" method="get">\
 <p>username : <input type="text" name="username" /></p>\
 <p>password : <input type="password" name="password" /></p>\
 <p>age : <input type="text" name="age" /></p>\
 <p><input type="submit" value="submit" name="submit" /></p>\
 </form>\
 </body>\
 </html>';
 
 var query = url.parse( request.url, true ).query;
 if( query.submit ){
 var data = '<p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >back</a></p>'+
 '<p>username:'+query.username+'</p>'+
 '<p>password:'+query.password+'</p>'+
 '<p>age:'+query.age+'</p>';
 
 response.writeHead(200, {'content-type': 'text/html'});
 response.write(data);
 }else{
 response.writeHead(200, {'content-type': 'text/html'});
 response.write(html);
 }
 response.end(); // 结束
}).listen(3000);
console.log('server has started...');
</div>

我们再次运行提交后就能在页面中显示出数据了。

url.parse是用来解析URL字符串的,并返回解析后的URL对象。若我们只输出一下 url.parse(request.url) :

url.parse(request.url);

result:
Url {
 protocol: null,
 slashes: null,
 auth: null,
 host: null,
 port: null,
 hostname: null,
 hash: null,
 search: '?username=111113&password=123&age=122&submit=submit',
 query: 'username=111113&password=123&age=122&submit=submit',
 pathname: '/',
 path: '/?username=111113&password=123&age=122&submit=submit',
 href: '/?username=111113&password=123&age=122&submit=submit'
}
</div>

如果将第2个参数设置为true,则会将返回结果中的query属性解析为一个对象,其他属性不变;默认值为false,即query属性是一个字符串:

url.parse(request.url, true);

result:
Url {
...
query: {
 username: '111113',
 password: '123',
 age: '122',
 submit: 'submit' },
...
}
</div>

因此我们可以通过如下语句判断是否有提交数据并获取提交数据,然后再输出到中即可:

var query = url.parse( request.url, true ).query;
/*
{
 username: '111113',
 password: '123',
 age: '122',
 submit: 'submit'
}
*/
</div>

2.2 获取表单POST方式提交的数据

现在我们使用post方式来提交数据。因为POST请求一般都比较“重” (用户可能会输入大量的内容),如果用阻塞的方式来处理处理,必然会导致用户操作的阻塞。因此node将post数据拆分为很多小的数据块,然后通过data事件(表示新的小数据块到达了)和end事件传递这些小数据块(表示所有的数据都已经接收完毕)。 所以,我们的思路应该是:在data事件中获取数据块,在end事件中操作数据。

// server.js
var http = require('http'),
querystring = require('querystring');

http.createServer(function(request, response){
 var html = '<html>\
 <head>\
 <meta charset=UTF-8" />\
 </head>\
 <body>\
 <form action="/" method="post">\
 <p>username : <input type="text" name="username" /></p>\
 <p>password : <input type="password" name="password" /></p>\
 <p>age : <input type="text" name="age" /></p>\
 <p><input type="submit" value="submit" name="submit" /></p>\
 </form>\
 </body>\
 </html>';
 
 if( request.method.toLowerCase()=='post' ){
 var postData = '';

 request.addListener('data', function(chunk){
 postData += chunk;
 });

 request.addListener('end', function(){
 var data = querystring.parse(postData);
 console.log( 'postData: '+postData );
 console.log(data);
 
 var s = '<p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >back</a></p>'+
 '<p>username:'+data.username+'</p>'+
 '<p>password:'+data.password+'</p>'+
 '<p>age:'+data.age+'



 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11jQuery点击导航栏选中更换样式的实现代码
  • 2017-05-11Jquery实现跨域异步上传文件总结
  • 2017-05-11JavaScript利用闭包实现模块化
  • 2017-05-11jquery实现input框获取焦点的方法
  • 2017-05-11微信小程序 设置启动页面的两种方法
  • 2017-05-11详解nodejs微信公众号开发——4.自动回复各种消息
  • 2017-05-11jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
  • 2017-05-11js常用DOM方法详解
  • 2017-05-11详解Vue2 无限级分类(添加,删除,修改)
  • 2017-05-11js仿搜狐视频记录片列表展示效果

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js时间戳格式化成日期格式的多种方法介绍
    • js 简单判断浏览器
    • jQuery实现页面滚动时智能浮动定位
    • 原生js实现商品放大镜效果
    • jquery pagination分页插件使用详解(后台struts2)
    • jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
    • input输入密码变黑点密文的实现方法
    • input获取焦点时底部菜单被顶上来问题的解决办法
    • BootStrap table删除指定行的注意事项(笔记整理)
    • 详解js前端代码异常监控

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有