完全基于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. HDU2065 "红色病毒"问题 【组合数学 二项式定理】

    HDU2065 "红色病毒"问题 Description: 医学界发现的新病毒因其蔓延速度和Internet上传播的"红色病毒"不相上下,被称为"红色 ...

  2. c语言实现--双向循环链表操作

    1,双向链表相当于两个单向循环链表. 2,双向链表的结点定义. 1 struct DULNode 2 { 3 int data; 4 struct DULNode * prior; 5 struct ...

  3. 【noi 2.6_7113】Charm Bracelet（DP）

    题意:N个饰物,有重量和渴望程度.问在M的重量限制内能达到的最大的渴望度. 解法:经典的01问题,但有一个小技巧值得记住:用if比较大小比调用max函数快了不少,这题有100ms左右. 1 #incl ...

  4. python爬取QQVIP音乐

    QQ音乐相比于网易云音乐加密部分基本上没有,但是就是QQ音乐的页面与页面之间的联系太强了,,导致下载一个音乐需要分析前面多个页面,找数据..太繁琐了 1.爬取链接:https://y.qq.com/ ...

  5. Redundant Paths POJ - 3177 把原图变成边—双连通图

    无向图概念:(这里的x->y表示x和y之间有一条无向边)1.桥:对于一个无向图,如果删除某条边后,该图的连通分量增加,则称这条边为桥 比如1->2->3->4这样一个简单得图一 ...

  6. Codeforces Round #613 (Div. 2) B. Just Eat It! (DP)

    题意:有一个长度为\(n\)的序列,找出最大的长度不为\(n\)的子段和,问最大子段和是否小于所有元素和. 题解:最大子段和我们可以直接用dp来找,每次状态转移为:\(dp[i]=max(dp[i-1 ...

  7. POJ1142 Smith Numbers 暴力+分解质因子

    题意:题目定义了一个史密斯数,这个数的定义是:一个合数的各个位置上加起来的和等于它的素因数所有位置上的数字加起来的和.比如: 4937775=3∗5∗5∗658374+9+3+7+7+7+5=3+5+ ...

  8. CF1459-C. Row GCD

    CF1459-C. Row GCD 题意: 给出两个整数序列\(a.b\),他们的长度分别为\(n,m\).对于数组\(b\)中的每个数字,让你求出\(gcd(a_1+b_j,a_2+b_j,..., ...

  9. ELK Stack 介绍 & Logstash 日志收集

    ELK Stack 组成 Software Description Function E:Elasticsearch Java 程序 存储,查询日志 L:Logstash Java 程序 收集.过滤日 ...

  10. Linux-开机运行流程

    目录 CentOS7开机流程 Linux运行级别 systemd进程管理 systemd的优势 systemd相关文件 systemd启动相关命令 systemd开机自启动相关命令 systemd服务 ...