完全基于node的web应用

node
js
web
fs
fs文件路径

事实上通常“正确的方式”一般都不简单。

这其中涉及了nodejs中服务端JavaScript，函数式编程，阻塞与非阻塞，回调，事件，内部和外部模块等问题，但是函数式编程，阻塞与非阻塞，回调，事件这些编程思想是通用的，值得学习。

Node入门

用例

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

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

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

模块

  • 提供一个web页面，需要http服务器。

  • 需要一个路由处理URL请求，对应到请求处理程序(requet handle)。

  • 路由处理POST数据，把数据封装好后传递给请求处理程序。

  • 最终的请求处理程序。

  • 返回一个对应视图给浏览器。

  • 上传功能。

基本http服务器

  • server.js

    1. var http = require ("http"); 
    2. http.createServer(function (request,response){ 
    3. response.writeHead(200,{"Content-Type":"text/plain"}); 
    4. response.write("hello world"); 
    5. response.end(); 
    6. }).listen(8888); 

基于事件驱动回调

  • server.js

  1. var http = require("http"); 
  3. //这是一个事件回调函数 
  4. function onRequest(request, response) { 
  5. console.log("Request received."); 
  6. response.writeHead(200, {"Content-Type": "text/plain"}); 
  7. response.write("Hello World"); 
  8. response.end(); 
  9. } 
  10. //一旦由请求事件，onRequest函数被调用 
  11. http.createServer(onRequest).listen(8888); 
  13. console.log("Server has started."); 

模块化server

  • server.js

    1. var http = require("http"); 
    3. function start() { 
    4. function onRequest(request, response) { 
    5. console.log("Request received."); 
    6. response.writeHead(200, {"Content-Type": "text/plain"}); 
    7. response.write("Hello World"); 
    8. response.end(); 
    9. } 
    11. http.createServer(onRequest).listen(8888); 
    12. console.log("Server has started."); 
    13. } 
    14. //导出函数 
    15. exports.start = start; 

路由模块，依赖注入到service

  • router.js

    1. function route(pathname) { 
    2. console.log("About to route a request for " + pathname); 
    3. } 
    5. exports.route = route; 

  • server.js

    1. var http = require("http"); 
    2. var url = require("url"); 
    4. function start(route) { 
    5. function onRequest(request, response) { 
    6. var pathname = url.parse(request.url).pathname; 
    7. console.log("Request for " + pathname + " received."); 
    9. route(pathname);//依赖注入 
    11. response.writeHead(200, {"Content-Type": "text/plain"}); 
    12. response.write("Hello World"); 
    13. response.end(); 
    14. } 
    16. http.createServer(onRequest).listen(8888); 
    17. console.log("Server has started."); 
    18. } 
    20. exports.start = start; 

  • index.js

    2. var server = require("./server"); 
    3. var router = require("./router"); 
    5. server.start(router.route);//依赖注入 

行为驱动处理函数，函数式编程

  • requestHandlers.js

    1. //行为实现 
    2. function start() { 
    3. console.log("Request handler 'start' was called."); 
    4. return "Hello Start"; 
    5. } 
    7. function upload() { 
    8. console.log("Request handler 'upload' was called."); 
    9. return "Hello Upload"; 
    10. } 
    12. exports.start = start; 
    13. exports.upload = upload; 

  • index.js

    1. var server = require("./server"); 
    2. var router = require("./router"); 
    3. var requestHandlers = require("./requestHandlers"); 
    5. var handle = {}//根据路由执行行为定义 
    6. handle["/"] = requestHandlers.start; 
    7. handle["/start"] = requestHandlers.start; 
    8. handle["/upload"] = requestHandlers.upload; 
    10. server.start(router.route, handle); 

  • server.js

    1. var http = require("http"); 
    2. var url = require("url"); 
    4. function start(route, handle) { 
    5. function onRequest(request, response) { 
    6. var pathname = url.parse(request.url).pathname; 
    7. console.log("Request for " + pathname + " received."); 
    9. response.writeHead(200, {"Content-Type": "text/plain"}); 
    10. var content = route(handle, pathname) //路由行为分配 
    11. response.write(content); 
    12. response.end(); 
    13. } 
    14. http.createServer(onRequest).listen(8888); 
    15. console.log("Server has started."); 
    16. } 
    18. exports.start = start; 

  • router.js

    1. function route(handle, pathname) { 
    2. console.log("About to route a request for " + pathname); 
    3. //根据路由分配行为 
    4. if (typeof handle[pathname] === 'function') { 
    5. return handle[pathname](); 
    6. } else { 
    7. console.log("No request handler found for " + pathname); 
    8. return "404 Not found"; 
    9. } 
    10. } 
    12. exports.route = route; 

阻塞与非阻塞

nodeJS它通过事件轮询（event loop）来实现并行操作，所以尽可能的避免阻塞操作，取而代之，多使用非阻塞操作。

要用非阻塞操作，我们需要使用回调。

回调就是：你继续处理你的事情，我（Node.js线程）先不等你了，我继续去处理你后面的代码，请你提供一个callbackFunction()，等你处理完之后我会去调用该回调函数的，谢谢！

阻塞的请求

  • requestHandlers.js

  1. function start() { 
  2. console.log("Request handler 'start' was called."); 
  4. function sleep(milliSeconds) { 
  5. var startTime = new Date().getTime(); 
  6. while (new Date().getTime() < startTime + milliSeconds); 
  7. } 
  8. sleep(10000); 
  9. return "Hello Start"; 
  10. } 
  12. function upload() { 
  13. console.log("Request handler 'upload' was called."); 
  14. return "Hello Upload"; 
  15. } 
  16. exports.start = start; 
  17. exports.upload = upload; 

处理POST请求

  • requestHandlers.js

    1. function start(response) { 
    2. console.log("Request handler 'start' was called."); 
    4. var body = '<html>'+ 
    5. '<head>'+ 
    6. '<meta http-equiv="Content-Type" content="text/html; '+ 
    7. 'charset=UTF-8" />'+ 
    8. '</head>'+ 
    9. '<body>'+ 
    10. '<form action="/upload" method="post">'+ 
    11. '<textarea name="text" rows="20" cols="60"></textarea>'+ 
    12. '<input type="submit" value="Submit text" />'+ 
    13. '</form>'+ 
    14. '</body>'+ 
    15. '</html>'; 
    17. response.writeHead(200, {"Content-Type": "text/html"}); 
    18. response.write(body); 
    19. response.end(); 
    20. } 
    22. function upload(response) { 
    23. console.log("Request handler 'upload' was called."); 
    24. response.writeHead(200, {"Content-Type": "text/plain"}); 
    25. response.write("Hello Upload"); 
    26. response.end(); 
    27. } 
    29. exports.start = start; 
    30. exports.upload = upload; 

request监听器

  • server.js

    1. var http = require("http"); 
    2. var url = require("url"); 
    4. function start(route, handle) { 
    5. function onRequest(request, response) { 
    6. var postData = "";//传输的数据 
    7. var pathname = url.parse(request.url).pathname; 
    8. console.log("Request for " + pathname + " received."); 
    10. request.setEncoding("utf8"); 
    11. //监听数据传输 
    12. request.addListener("data", function(postDataChunk) { 
    13. postData += postDataChunk; 
    14. console.log("Received POST data chunk '"+ 
    15. postDataChunk + "'."); 
    16. }); 
    17. //传输结束一次处理 
    18. request.addListener("end", function() { 
    19. route(handle, pathname, response, postData); 
    20. }); 
    22. } 
    24. http.createServer(onRequest).listen(8888); 
    25. console.log("Server has started."); 
    26. } 
    28. exports.start = start; 

数据传输给路由

  • router.js

    1. function route(handle, pathname, response, postData) { 
    2. console.log("About to route a request for " + pathname); 
    3. if (typeof handle[pathname] === 'function') { 
    4. handle[pathname](response, postData); 
    5. } else { 
    6. console.log("No request handler found for " + pathname); 
    7. response.writeHead(404, {"Content-Type": "text/plain"}); 
    8. response.write("404 Not found"); 
    9. response.end(); 
    10. } 
    11. } 
    13. exports.route = route; 

响应请求

  • requestHandlers.js

    1. var querystring = require("querystring"); 
    3. function start(response, postData) { 
    4. console.log("Request handler 'start' was called."); 
    6. var body = '<html>'+ 
    7. '<head>'+ 
    8. '<meta http-equiv="Content-Type" content="text/html; '+ 
    9. 'charset=UTF-8" />'+ 
    10. '</head>'+ 
    11. '<body>'+ 
    12. '<form action="/upload" method="post">'+ 
    13. '<textarea name="text" rows="20" cols="60"></textarea>'+ 
    14. '<input type="submit" value="Submit text" />'+ 
    15. '</form>'+ 
    16. '</body>'+ 
    17. '</html>'; 
    19. response.writeHead(200, {"Content-Type": "text/html"}); 
    20. response.write(body); 
    21. response.end(); 
    22. } 
    23. function upload(response, postData) { 
    24. console.log("Request handler 'upload' was called."); 
    25. response.writeHead(200, {"Content-Type": "text/plain"}); 
    26. response.write("You've sent the text: "+ 
    27. querystring.parse(postData).text); 
    28. response.end(); 
    29. } 
    31. exports.start = start; 
    32. exports.upload = upload; 

使用外部模块上传文件

node-formidable模块 安装

npm insatll formidable

npm install formidable -g express -d

node-formidable官方的例子

var formidable = require('formidable'),

    http = require('http'),

    util = require('util');

http.createServer(function(req, res) {

  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {

    // parse a file upload

    var form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) {

      res.writeHead(200, {'content-type': 'text/plain'});

      res.write('received upload:\n\n');

      res.end(util.inspect({fields: fields, files: files}));

    });

    return;

  }

  // show a file upload form

  res.writeHead(200, {'content-type': 'text/html'});

  res.end(

    '<form action="/upload" enctype="multipart/form-data" '+

    'method="post">'+

    '<input type="text" name="title"><br>'+

    '<input type="file" name="upload" multiple="multiple"><br>'+

    '<input type="submit" value="Upload">'+

    '</form>'

  );

}).listen(8888);

读取图片数据

  • requestHandlers.js

    1. var querystring = require("querystring"), 
    2. fs = require("fs"); 
    4. function start(response, postData) { 
    5. console.log("Request handler 'start' was called."); 
    7. var body = '<html>'+ 
    8. '<head>'+ 
    9. '<meta http-equiv="Content-Type" '+ 
    10. 'content="text/html; charset=UTF-8" />'+ 
    11. '</head>'+ 
    12. '<body>'+ 
    13. '<form action="/upload" method="post">'+ 
    14. '<textarea name="text" rows="20" cols="60"></textarea>'+ 
    15. '<input type="submit" value="Submit text" />'+ 
    16. '</form>'+ 
    17. '</body>'+ 
    18. '</html>'; 
    20. response.writeHead(200, {"Content-Type": "text/html"}); 
    21. response.write(body); 
    22. response.end(); 
    23. } 
    25. function upload(response, postData) { 
    26. console.log("Request handler 'upload' was called."); 
    27. response.writeHead(200, {"Content-Type": "text/plain"}); 
    28. response.write("You've sent the text: "+ 
    29. querystring.parse(postData).text); 
    30. response.end(); 
    31. } 
    33. function show(response, postData) { 
    34. console.log("Request handler 'show' was called."); 
    35. fs.readFile("/tmp/test.png", "binary", function(error, file) { 
    36. if(error) { 
    37. response.writeHead(500, {"Content-Type": "text/plain"}); 
    38. response.write(error + "\n"); 
    39. response.end(); 
    40. } else { 
    41. response.writeHead(200, {"Content-Type": "image/png"}); 
    42. response.write(file, "binary"); 
    43. response.end(); 
    44. } 
    45. }); 
    46. } 
    48. exports.start = start; 
    49. exports.upload = upload; 
    50. exports.show = show; 

  • index.js

    1. var server = require("./server"); 
    2. var router = require("./router"); 
    3. var requestHandlers = require("./requestHandlers"); 
    5. var handle = {} 
    6. handle["/"] = requestHandlers.start; 
    7. handle["/start"] = requestHandlers.start; 
    8. handle["/upload"] = requestHandlers.upload; 
    9. handle["/show"] = requestHandlers.show; 
    11. server.start(router.route, handle); 

上传图片

  • requestHandlers.js

    1. var querystring = require("querystring"), 
    2. fs = require("fs"), 
    3. formidable = require("formidable"); 
    5. function start(response) { 
    6. console.log("Request handler 'start' was called."); 
    8. var body = '<html>'+ 
    9. '<head>'+ 
    10. '<meta http-equiv="Content-Type" content="text/html; '+ 
    11. 'charset=UTF-8" />'+ 
    12. '</head>'+ 
    13. '<body>'+ 
    14. '<form action="/upload" enctype="multipart/form-data" '+ 
    15. 'method="post">'+ 
    16. '<input type="file" name="upload" multiple="multiple">'+ 
    17. '<input type="submit" value="Upload file" />'+ 
    18. '</form>'+ 
    19. '</body>'+ 
    20. '</html>'; 
    22. response.writeHead(200, {"Content-Type": "text/html"}); 
    23. response.write(body); 
    24. response.end(); 
    25. } 
    27. function upload(response, request) { 
    28. console.log("Request handler 'upload' was called."); 
    30. var form = new formidable.IncomingForm(); 
    31. console.log("about to parse"); 
    32. form.parse(request, function(error, fields, files) { 
    33. console.log("parsing done"); 
    34. fs.renameSync(files.upload.path, "/tmp/test.png"); 
    35. response.writeHead(200, {"Content-Type": "text/html"}); 
    36. response.write("received image:<br/>"); 
    37. response.write("<img src='/show' />"); 
    38. response.end(); 
    39. }); 
    40. } 
    42. function show(response) { 
    43. console.log("Request handler 'show' was called."); 
    44. fs.readFile("/tmp/test.png", "binary", function(error, file) { 
    45. if(error) { 
    46. response.writeHead(500, {"Content-Type": "text/plain"}); 
    47. response.write(error + "\n"); 
    48. response.end(); 
    49. } else { 
    50. response.writeHead(200, {"Content-Type": "image/png"}); 
    51. response.write(file, "binary"); 
    52. response.end(); 
    53. } 
    54. }); 
    55. } 
    57. exports.start = start; 
    58. exports.upload = upload; 
    59. exports.show = show; 

  • server.js

    1. var http = require("http"); 
    2. var url = require("url"); 
    4. function start(route, handle) { 
    5. function onRequest(request, response) { 
    6. var pathname = url.parse(request.url).pathname; 
    7. console.log("Request for " + pathname + " received."); 
    8. route(handle, pathname, response, request); 
    9. } 
    11. http.createServer(onRequest).listen(8888); 
    12. console.log("Server has started."); 
    13. } 
    15. exports.start = start; 

fs模块的问题 文件路径问题

  1. function upload(response,request) { 
  2. console.log("Request handler 'upload' was called"); 
  3. // response.writeHead(200, { 
  4. // "Content-Type": "text/plain" 
  5. // }); 
  6. // response.write("you are sent: " + querystring.parse(postData).text); 
  7. // response.end(); 
  8. // response.write("hello upload"); 
  9. //return "hello upload"; 
  10. // 
  11. //文件上传 
  12. var form =new formidable.IncomingForm(); 
  13. console.log("start to parse"); 
  14. form.uploadDir = "tem"; 
  15. form.parse(request,function(error,fields,files){ 
  16. console.log("parsing done"); 
  17. try{ 
  18. fs.renameSync(files.upload.path,form.uploadDir+"/test.png");//主要修改了这个地方 
  19. }catch(e){ 
  20. console.log(e); 
  21. } 
  23. response.writeHead(200,{"Content-Type":"text/html"}); 
  24. response.write("received image:<br/>"); 
  25. response.write("<img src='/show'>"); 
  26. response.end(); 
  27. }) 
  28. } 

完全基于node的web应用的更多相关文章

  1. 转：基于node的web开发框架Express入门

    JavaScript 标准参考教程(alpha) 草稿二:Node.js Express框架 GitHub TOP Express框架 来自<JavaScript 标准参考教程(alpha)&g ...

  2. 基于Node的Web聊天室

    1 项目名称 Web聊天室(<这是NodeJs实战>第二章的一个案例,把整个开发过程记录下来)

  3. 基于 Node.js 平台，快速、开放、极简的 web 开发框架。

    资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...

  4. Fenix – 基于 Node.js 的桌面静态 Web 服务器

    Fenix 是一个提供给开发人员使用的简单的桌面静态 Web 服务器,基于 Node.js 开发.您可以同时在上面运行任意数量的项目,特别适合前端开发人员使用. 您可以通过免费的 Node.js 控制 ...

  5. KoaHub.js是基于 Koa.js 平台的 Node.js web 快速开发框架

    koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, A ...

  6. 基于 Koa.js 平台的 Node.js web 快速开发框架KoaHub.js demo 可安装

    KoaHub.js demo KoaHub.js KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Fu ...

  7. KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-yilianyun

    koahub-yilianyun 微信易联云打印机接口 koahub-yilianyun易联云打印机node接口 Installation $ npm install koahub-yilianyun ...

  8. koa : Express出品的下一代基于Node.js的web框架

    https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434501579966a ...

  9. 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具

    认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...

随机推荐

  1. 2020牛客暑期多校训练营（第八场）Game SET

    传送门:Game SET 题意 一套牌有四种属性,每种属性都有三种特征,shapes (one, two, or three), shape (diamond, squiggle, or oval), ...

  2. P2765 魔术球问题 (网络流)

    题意:n根柱子 把编号1,2,3....的球依次插到柱子上去 需要满足相邻的两个球编号加起来为完全平方数 n < 55 题解:网络流24(23)题里的 但是一直不知道怎么建图  或者说建图的意义 ...

  3. Codeforces Round #637 (Div. 2)

    比赛链接:https://codeforces.com/contest/1341 A - Nastya and Rice 题意 有 n 堆米,每堆质量在 [a-b,a+b] 之间,这些米的总质量是否可 ...

  4. uva10859 Placing Lampposts (树形dp+求两者最小值方法)

    题目链接:点击打开链接 题意:给你一个n个点m条边的无向无环图,在尽量少的节点上放灯,使得所有边都被照亮,每盏灯将照亮以它为一个端点的所有边.在灯的总数最小的前提下,被两盏灯同时照亮的边数应尽量大. ...

  5. 吉哥系列故事――恨7不成妻 HDU - 4507

    题目: 单身! 依然单身! 吉哥依然单身! DS级码农吉哥依然单身! 所以,他生平最恨情人节,不管是214还是77,他都讨厌! 吉哥观察了214和77这两个数,发现: 2+1+4=7 7+7=7*2 ...

  6. .Net Core 国际化

    创建项目什么的就不说了吧 直接进入正题吧 我这里建的是个webapi 添加资源文件 1.首先我们创建一个Language文件夹,这就是我们在后面Startup类中需要配置的目录名. 2.然后我们在La ...

  7. C语言之库函数的模拟与使用

    C语言之库函数的模拟与使用 在我们学习C语言的过程中,难免会遇到这样的一种情况: 我们通常实现一个功能的时候,费尽心血的写出来,却有着满满的错,这时却有人来告诉你说:这个功能可以用相应的库函数来实现. ...

  8. Spring Cloud实战： 基于Spring Cloud Gateway + vue-element-admin 实现的RBAC权限管理系统，实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

    一. 前言 信我的哈,明天过年. 这应该是农历年前的关于开源项目 的最后一篇文章了. 有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT ...

  9. 2.使用Helm构建ElasticSearch集群

    作者 微信:tangy8080 电子邮箱:914661180@qq.com 更新时间:2019-05-24 16:08:53 星期五 欢迎您订阅和分享我的订阅号,订阅号内会不定期分享一些我自己学习过程 ...

  10. Hexo准备---Node.js、Vue

    Hexo准备---Node.js.Vue 安装node.js 1.下载node 配置node.js环境官网下载,一直next就好,非常方便. 下载官网: http://nodejs.cn/downlo ...