完全基于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. C++模板的介绍

    ​ 作者:良知犹存 转载授权以及围观:欢迎添加微信:Allen-Iverson-me-LYN     1. 模板是泛型编程的基础,泛型编程即以一种独立于任何特定类型的方式编写代码.C++模板的作用,类 ...

  2. inceptor es表插入成功，返回报错you should set transaction.type before any DCL statement

    在finebi下用星环的连接驱动去写inceptor es表,发现插入能成功,但是返回一个报错: Caused by: java.sql.SQLException: Error to commit. ...

  3. 小希的迷宫B - B

    上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一个通道连通了 ...

  4. CF Hello2020 D. New Year and Conference

    D. New Year and Conference 题意 有\(2n\)个区间,分别为\([sa_1,ea_1],[sb_1,eb_1],[sa_2,ea_2],[sb_2,eb_2],\cdots ...

  5. 【hdu 4859】海岸线（图论--网络流最小割）

    题意:有一个区域,有'.'的陆地,'D'的深海域,'E'的浅海域.其中浅海域可以填充为陆地.这里的陆地区域不联通,并且整个地图都处在海洋之中.问填充一定浅海域之后所有岛屿的最长的海岸线之和. 解法:最 ...

  6. python代理池的构建1——代理IP类的构建，以及配置文件、日志文件、requests请求头

    一.整体结构 二.代理IP类的构建(domain.py文件) ''' 实现_ init_ 方法, 负责初始化,包含如下字段: ip: 代理的IP地址 port:代理IP的端口号 protocol: 代 ...

  7. 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(一)

    JavaScript 设计模式(一) 本文需要读者至少拥有基础的 ES6 知识,包括 Proxy, Reflect 以及 Generator 函数等. 至于这次为什么分了两篇文章,有损传统以及标题的正 ...

  8. servlet相关知识点

    一.servlet的生命周期 Servlet(Sever Applet),全称是Java Servlet,是用java编写的服务器程序.Servlet是指任何实现了这个Servlet接口的类. ser ...

  9. 缓冲区溢出实验 5 Snprintf

    实验环境.代码.及准备 https://www.cnblogs.com/lqerio/p/12870834.html vul5 Snprintf函数,百度百科: 将可变个参数(...)按照format ...

  10. 解决springmvc使用@ResponseBody返回String类型字符串中文乱码问题

    问题分析: 首先: 确定的是只有当返回值是 String时才会出现中文乱码,而当返回值是Map<String, Object>或者是其它类型时,并没有中文乱码的出现. 然后找原因: 原因是 ...