在上篇文章中我们了解了一下不同模块规范之间的联系与区别。本文我们正式开始node的学习,首先我们从搭建一个http服务器,能运行简单的程序开始说起。
一、hello world
最经典的hello world。首先我们创建一个server.js来保存我们的代码:
console.log( 'hello world' );
在终端输入node server.js运行:
node server.js
终端就会输出 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...');
我们再次在终端输入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="https://www.jb51.net/" method="post">\ <p>username : <input type="text" /></p>\ <p>password : <input type="password" /></p>\ <p>age : <input type="text" /></p>\ <p><input type="submit" value="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...');
修改server.js中的内容,重新运行:
node server.js
刷新页面后,我们发现页面中输出了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="https://www.jb51.net/" method="get">\ <p>username : <input type="text" /></p>\ <p>password : <input type="password" /></p>\ <p>age : <input type="text" /></p>\ <p><input type="submit" value="submit" /></p>\ </form>\ </body>\ </html>'; var query = url.parse( request.url, true ).query; if( query.submit ){ var data = '<p><a href="https://www.jb51.net/" >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...');
我们再次运行提交后就能在页面中显示出数据了。
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: 'https://www.jb51.net/', path: '/?username=111113&password=123&age=122&submit=submit', href: '/?username=111113&password=123&age=122&submit=submit' }
如果将第2个参数设置为true,则会将返回结果中的query属性解析为一个对象,其他属性不变;默认值为false,即query属性是一个字符串:
url.parse(request.url, true); result: Url { ... query: { username: '111113', password: '123', age: '122', submit: 'submit' }, ... }
因此我们可以通过如下语句判断是否有提交数据并获取提交数据,然后再输出到中即可:
var query = url.parse( request.url, true ).query; /* { username: '111113', password: '123', age: '122', submit: 'submit' } */
2.2 获取表单POST方式提交的数据