一个完整的基于Node.js的web应用-Node.js-JS-ITTXX.CN--分享互联网

无标题文档

Node.js事实上是另外一种上下文，它允许在后端（脱离浏览器环境）运行JavaScript代码。

要实现在后台运行JavaScript代码，代码需要先被解释然后正确的执行。Node.js的原理正是如此，它使用了Google的V8虚拟机（Google的Chrome浏览器使用的JavaScript执行环境），来解释和执行JavaScript代码。

除此之外，伴随着Node.js的还有许多有用的模块，它们可以简化很多重复的劳作，比如向终端输出字符串。

因此，Node.js事实上既是一个运行时环境，同时又是一个库。

要使用Node.js,首先需要进行安装。关于如何安装Node.js，可以直接进入官方网址https://nodejs.org/en/

我们的Web应用要求可以分文一下三点：

· 用户可以通过浏览器使用我们的应用。

· 当用户请求http://domain/start 时，可以看到一个欢迎页面，页面上有一个文件上传的表单。

· 用户可以选择一个图片并提交表单，随后文件将被上传到http://domain/upload ，该页面完成上传后会把图片显示在页面上。

接下来就开始动手，先用记事本创建一个server.js文件，用于构建一个简单的http服务器，代码如下：

//创建一个http模块
var http = require("http");
//创建一个url模块
var url = require("url");
function start(route,handle){
function onRequest(request, response){
var postData = "";
var pathname = url.parse(request.url).pathname;
console.log(typeof handle[pathname]);
console.log("Request for "+pathname+" received.");
route(handle, pathname, response, request);
}
http.createServer(onRequest).listen(8888);
console.log("Server has started");
}
//导出server模块
exports.start = start;

创建一个请求“路由”文件router.js,方便把服务端的对象参数传递给事件处理程序，就是待会要创建的新文件，代码如下：

function route(handle, pathname, response, request){
  console.log("About to route a request for "+ pathname);
  if(typeof handle[pathname]==='function'){
  return handle[pathname](response, request);
  }else{
  console.log("No request handler found for "+ pathname);
  response.writeHead(404,{"Content-Type":"text/plain"});
  response.write("404 Not found");
  }
  }
exports.route = route;

接下来创建requestHanders.js文件，对事件进行处理，代码如下：

var querystring = require("querystring"),
  fs = require("fs"),
  formidable = require("formidable");
function start(response){
  console.log("Request handler 'start' was called.");
    var body = '<html>' +
  '<head>' +
  '<meta http-equiv="Content-Type" content="text/html; ' +
  'charset=UTF-8" />' +
  '</head>'+
  '<body>' +
  '<form action="/upload" enctype="multipart/form-data" '+' method="post">' +
  '<input type="file" name="upload" multiple="multiple" style="margin:100px auto 0;border:1px solid #ccc;border-radius:4px;display:block;" />'+
  '<input type="submit" value="Upload file"  style="width:200px;height:30px;border-radius:4px;border:1px solid #ccc;margin:40px auto;background-color:#109059;display:block;"/>' +
  '</form>' +
  '</body>' +
  '</html>';  
  response.writeHead(200,{"Content-Type":"text/html"});
  response.write(body);
  response.end();
  }
  function upload(response, request){
  console.log("Request handler 'upload' was called.");
    var form = new formidable.IncomingForm();
  form.uploadDir = 'tmp';
  console.log("about to parse");
  form.parse(request,function(error, fields, files){
  if(error){throw error;}
  console.log("parsing done");
  fs.renameSync(files.upload.path, "/tmp/test.png");
  response.writeHead(200,{"Content-Type":"text/html"});
  response.write("received image:<br/>");
  response.write("<img src='/show' />");
  response.end();
  });
  }
  function show(response, postData){
  console.log("Request handler 'show' was called.");
  fs.readFile("./tmp/test.png", "binary", function(error, file){
  if(error){
  response.writeHead(500,{"Content-Type":"text/plain"});
  response.write(error + "\n");
  response.end();
  }else{
  response.writeHead(200,{"Content-Type":"image/png"});
  response.write(file,"binary");
  response.end();
  }
  });
  }
exports.start = start;
exports.upload = upload;
exports.show = show;

最后一步需要创建一个主文件index.js，把三个分散的模块连接在一起：

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");
var handle = {};
  handle["/"] = requestHandlers.start;
  handle["/start"] = requestHandlers.start;
  handle["/upload"] = requestHandlers.upload;
  handle["/show"] = requestHandlers.show;
server.start(router.route,handle);

然后在命令行启动服务器输入命令node index.js（记住必须切换到文件目录下运行文件）