目的:使用Node.js实现文件上传并将上传的文件显示到浏览器中

基本工具:Node.js,在windows下需要下载cygwin64来运行shell命令

文件:服务器模块、请求路由模块、请求处理程序模块、index.js入口文件

步骤:在目录中创建server.js、router.js、requestHandlers、index.js这文件,分别代表以上几个文件。

  步骤一:在index.js文件中使用require引入以上模块,

const server = require('./server');
const router = require('./router');
const requestHandlers = require('./requestHandlers');

  接着在index.js文件中需要定义路由,我们首先定义一个handle对象,用于保存路由,然后对应请求处理程序模块中的提供的方法(还没写)

//定义路由
let handle = {};
handle['/'] = requestHandlers.start;
handle['/start'] = requestHandlers.start;
handle['/upload'] = requestHandlers.upload;
handle['/show'] = requestHandlers.show;

  最后调用引入的服务器模块提供的方法server.start();并传入两个参数,第一个参数是请求路由模块提供的路径方法router.route,第二个参数是用于定义路由的handle对象

server.start(router.route,handle);

  index.js文件的代码如上

  步骤二:在请求处理程序模块requestHandlers.js文件中,我们需要引入fs模块用于读取文件,formidable模块用于格式化上传的表单

const fs = require('fs');
const formidable = require('formidable');

  接着我们来完善之前在index,js文件中对应的方法,在requestHandlers.js文件中,接着写下exports.start方法,这个方法接收一个参数res,届时将在服务器模块中传入该响应参数  

exports.start = (res)=>{//服务器传入的响应参数
console.log("Request handler 'start' was called.");
res.writeHead(200, {"Content-Type": "text/html"});//告诉浏览器文件格式
let 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">'+
'<input type="submit" value="上传文件" />'+
'</form>'+
'</body>'+
'</html>';
res.end(body);//响应浏览器,并将body参数传进入
};
exports.upload = (res,req)=>{//对上传的文件进行处理
console.log("Request handler 'upload' was called.");
let form = new formidable.IncomingForm();
//对上传的文件进行处理
console.log('对上传的文件进行处理');
form.parse(req,(err,fields,files)=>{
//上传的文件处理完毕
console.log('上传的文件处理完毕');
console.log(files.upload.path);
fs.renameSync(files.upload.path,"/tmp/test.png");//将路径一的文件保存到路径二
res.writeHead(200,{"Content-Type":"text/html"});
res.end("接收到的图片:</br><img src='/show/'>"); }); // res.writeHead(200, {"Content-Type": "text/plain"});
// res.end("You've sent: " + querystring.parse(postData).text);//使用querystring模块获取上传数据中的文本信息
};
exports.show = (res)=>{//从文件中读取数据并显示到页面
console.log('在页面中显示上传数据的请求已被调用');
fs.readFile("/img/test.png","binary",(err,file)=>{
if(err){
res.writeHead(500,{"Content-Type":"text/plain"});
res.end(err+'\n');
}else {
res.writeHead(200,{"Content-Type":"image/png"});
res.write(file,"binary");
res.end();
}
});
};

即对应的处理程序做对应的事情

步骤三:在server文件中,引入url模块用于解析地址,获取当前路径,

const url = require('url');

接着创建一个对外提供的start方法,并接收两个参数,route和handle,分别用于处理请求路由和路由对象,在该文件中我们还通过url模块提供的parse().pathname获取到了路径地址,然后调用参数传进来的请求路由方法,并传入路由对象、当前路径、接收到的请求req、响应浏览器的res,最后监听端口

exports.start = (route,handle)=>{
require('http').createServer((req,res)=>{
const pathname = url.parse(req.url).pathname;//获取当前路径
route(handle,pathname,res,req);
console.log('路径名称:'+pathname); }).listen(8888);//监听8888端口
};

步骤四:在router文件中,我们定义一个函数用于该模块提供对外的接口,该函数接收四个参数,路由对象、当前路径、接收到的请求req、响应浏览器的res,在函数中判断当前路径在路由对象中是否存在该函数,如果存在则调用该方法,并传入接收到的请求req、响应浏览器的res两个参数,否则告诉浏览404,页面未找到

exports.route = (handle,pathname,res,req)=>{
console.log("路径名称 " + pathname);
if(typeof handle[pathname] === 'function'){//匹配是否有这个请求处理程序
return handle[pathname](res,req);
}else{
console.log("No request handler found for " + pathname);
res.writeHead(404, {"Content-Type": "text/plain"});
res.end("404 Not found");
}
};

总体思路:

要把服务器、路由、请求处理程序分开,最后用index.js文件全部连在一起;

①首先创建单独的服务器处理模块,在模块里面创建一个服务器,并通过请求参数和url模块获取到当前的路径,接着调用一个路径处理函数,这个函数传四个参数,第一个参数是从index.js传入的请求处理函数的一个集合对象,第二个参数是当前路径,第三个参数是req,第四个参数是res,最后监听端口,并将这些代码作为一个函数对外开放以方便index.js引入,并且该函数接受两个参数,第一个参数是路径处理函数,第二个参数是请求处理程序函数的对象,服务器模块完成;

②然后创建路径处理模块,该模块将作为一个函数对外开放,函数接收四个参数,第一个参数是从服务器模块传入的请求处理函数的一个集合对象,第二个参数是从服务器模块传入的路径,第三个参数是req,第四个参数是res,然后进行if判断,将从服务器模块传入的路径作为请求处理函数的一个集合对象的参数,判断是否是function,如果是则调用该请求处理程序并传入req,res;

③接着创建请求处理程序,该模块创建不同的对外开放函数,函数参数接收req,res,根据需求制定不同的请求处理程序;

④最后创建一个index.js文件,该文件引入服务器模块,路径处理模块,请求处理程序模块,接着创建一个空对象,把希望制定的路由作为对象的参数然后将对应的请求处理程序模块对应的程序赋值给该参数,最后调用服务器模块对外开放的函数,并传入两个参数,第一个参数是路径处理模块对外的函数,和新创建的的请求处理函数的集合对象。

源教程自:https://www.nodebeginner.org/index-zh-cn.html

Node.js入门-知识整理的更多相关文章

  1. 让我们一起学习《Node.js入门》一书吧!

    Node.js入门 读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件. 里面对一些知识的讲解,让你略窥Node.js的门径.最好一段代码一段代码的写下来,我的习惯是手里拿 ...

  2. Node.js基础知识

    Node.js入门   Node.js     Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

  3. 极简 Node.js 入门 - Node.js 是什么、性能有优势?

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  4. 极简 Node.js 入门 - 3.2 文件读取

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  5. 极简 Node.js 入门 - 4.3 可读流

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  6. 极简 Node.js 入门 - 4.4 可写流

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  7. 极简 Node.js 入门 - 5.1 创建 HTTP 服务器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  8. 极简 Node.js 入门 - 5.3 静态资源服务器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  9. Node.js 入门手册:那些最流行的 Web 开发框架

    这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...

随机推荐

  1. USACO93网络流入门Drainage Ditches 排水渠(DCOJ 5130)

    题目描述 (传送门:http://poj.org/problem?id=1273翻译 by sxy(AFO的蒟蒻)) 每次约翰的农场下雨,Bessie的水池里的四叶草就会被弄破.这就意味着,这些四叶草 ...

  2. 小爬爬1.requests基础操作

    1.requests安装的问题 (1)如果requests没有安装,我们需要先安装这个模块,在cmd安装不了,我们可以在下面的位置,打开的窗体安装requests模块 pip install requ ...

  3. 使用Laravel5做权限管理

    https://www.imooc.com/article/18250 关于权限管理的思考 最近在用laravel设计后台,后台需要有个权限管理.权限管理实质上分为两个部分,首先是认证,然后是权限.认 ...

  4. Libev源码分析10:libev中poll的用例

    在Libev中,使用poll作为backend时,涉及到下面几种数据结构: int *pollidxs; int pollidxmax; struct pollfd *polls; int pollm ...

  5. AtCoder Beginner Contest 078 D ABS

    光做C了,做完C,就要结束了,看了看D,没看懂那操作啥意思,就扔了. 刚才看了看,突然懂了.. 就是每个人从那堆牌上边拿牌,最少拿一张,最多可以全拿走,然后手里留下最后一张拿到的,其余的都扔掉. 比如 ...

  6. Getting started with the basics of programming exercises_4

    1.编写一个删除C语言程序中所有的注释语句的程序.要正确处理带引号的字符串与字符串常量,C语言中程序注释不允许嵌套. #include<stdio.h> void rcomment(int ...

  7. getopt、getopt_long和getopt_long_only解析命令行参数

    一:posix约定: 下面是POSIX标准中关于程序名.参数的约定: 程序名不宜少于2个字符且不多于9个字符: 程序名应只包含小写字母和阿拉伯数字: 选项名应该是单字符或单数字,且以短横 '-' 为前 ...

  8. Android本地数据存储: ASimpleCache

    一:前言 在上一篇博客Android本地数据存储: Reservoir 博客中,我提到,除了Reservoir库,还可以采用ASimpleCache开源库,来实现本地数据存储.昨天并没有仔细的对比Re ...

  9. css模仿ipad的日历

    https://www.cnblogs.com/sandraryan/ 题外话之:最近的练习用js之类的写起来会简单点,但是为了巩固基础,只好html和css硬怼页面X﹏X 这是一个日历的代码 注释有 ...

  10. python基础九之函数

    1,函数的定义 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数分为自定义函数和内置函数,内置函数就是python内部自带的一些函数,如:print().int()等.自定义函数 ...