欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

文摘  一个完整的基于Node.js的web应用

Node.js 本站 199 0评论
无标题文档

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

20180731131502393.png


浏览器呈现的效果图:

20190226001346.jpg


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

20190226001411.jpg


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

原文地址:https://blog.csdn.net/Jackson23333/article/details/81301402

转载请注明: ITTXX.CN--分享互联网 » 一个完整的基于Node.js的web应用

最后更新:2019-02-26 00:18:48

赞 (1) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽