一个完整的基于Node.js的web应用(入门级)

在此之前先大概了解下Node.js(服务端的javascript):

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(记住必须切换到文件目录下运行文件)

浏览器呈现的效果图:

点击浏览选择./tmp/test.png图片进行测试,图片的路径一定要是与四个js文件在同一个目录下,然后点击上传后,如下图所示:

一个基础的web应用到此就完成了,具体参考node初学者入门,网址:http://ourjs.com/detail/529ca5950cb6498814000005

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值