完全基于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. VS CODE远程办公篇一

    作者:良知犹存 转载授权以及围观:欢迎添加微信:becom_me 总述     因为疫情的来临,让远程办公变得原来越火.这次我也是盯上了这个功能,实现在家里远程配置电脑. 嵌入式Linux开发的程序员 ...

  2. 【繁星Code】如何在EF将实体注释写入数据库中

    最近在项目中需要把各个字段的释义写到数据库中,该项目已经上线很长时间了,数据库中的字段没有上千也有上百个,要是一个项目一个项目打开然后再去找对应字段查看什么意思,估计要到明年过年了.由于项目中使用En ...

  3. unix环境高级编程第六章笔记

    口令文件 阴影口令 组文件 附属组ID 登录账户记录 系统标识 口令文件<\h2> /etc/passwd文件是UNIX安全的关键文件之一.该文件用于用户登录时校验用户的口令,文件中每行的 ...

  4. HDU6703 array (线段树)

    题意:长为1e5的全排列 有两个操作 把一个数删掉 询问1,r这个区间内 找到一个数大于等于x 且这个数不等于区间内的所有数 题解:建一颗权值线段树 线段树里存值为i的数在原数组中的坐标 维护坐标的最 ...

  5. Gym 101170I Iron and Coal（BFS + 思维）题解

    题意:有一个有向图,有些点是煤,有些点是铁,但不会同时有铁和煤.现在我要从1出发,占领可以到达的点.问最少占领几个点能同时拥有一个煤和一个铁(1不用占领). 思路:思路很秀啊.我们从1往外bfs,得到 ...

  6. ES6 Set All In One

    ES6 Set All In One Set 集合 Map 字典/地图 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...

  7. LeetCode Binary Search All In One

    LeetCode Binary Search All In One Binary Search 二分查找算法 https://leetcode-cn.com/problems/binary-searc ...

  8. JWT & JSON Web Tokens

    JSON Web Tokens https://jwt.io json web token example https://jwt.io/introduction/ https://medium.co ...

  9. Webpack 4.x 默认支持 ES6 语法

    Webpack 4.x 默认支持 ES6 语法 Q: 为什么 webpack4 默认支持 ES6 语法的压缩? A: terser 里面实现了 ES6 语法的 AST解析. webpack 4 里使用 ...

  10. vue & $router & History API

    vue & $router gotoTemplateManage(e) { e.preventDefault(); this.$router.push({ path: `/operate-to ...