首页 > 代码库 > 完全基于node的web应用
完全基于node的web应用
完全基于node的web应用
- 事实上通常“正确的方式”一般都不简单。
- 用例
- 模块
- 基本http服务器
- 基于事件驱动回调
- 模块化server
- 路由模块,依赖注入到service
- 行为驱动处理函数,函数式编程
- 阻塞与非阻塞
- 阻塞的请求
- 处理POST请求
- request监听器
- 数据传输给路由
- 响应请求
- 使用外部模块上传文件
- node-formidable模块 安装
- node-formidable官方的例子
- 读取图片数据
- 上传图片
- fs模块的问题 文件路径问题
事实上通常“正确的方式”一般都不简单。
这其中涉及了nodejs中服务端JavaScript,函数式编程,阻塞与非阻塞,回调,事件,内部和外部模块等问题,但是函数式编程,阻塞与非阻塞,回调,事件这些编程思想是通用的,值得学习。
Node入门
用例
用户可以通过浏览器使用我们的应用。
当用户请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单。
用户可以选择一个图片并提交表单,随后文件将被上传到http://domain/upload,该页面完成上传后会把图片显示在页面上。
模块
提供一个web页面,需要
http服务器
。需要一个
路由
处理URL请求,对应到请求处理程序(requet handle)。路由处理POST数据,把数据封装好后传递给请求处理程序。
最终的请求处理程序。
返回一个对应视图给浏览器。
上传功能。
基本http服务器
server.js
- var http = require ("http");
- http.createServer(function (request,response){
- response.writeHead(200,{"Content-Type":"text/plain"});
- response.write("hello world");
- response.end();
- }).listen(8888);
- var http = require ("http");
基于事件驱动回调
server.js
- var http = require("http");
-
- //这是一个事件回调函数
- function onRequest(request, response) {
- console.log("Request received.");
- response.writeHead(200, {"Content-Type": "text/plain"});
- response.write("Hello World");
- response.end();
- }
- //一旦由请求事件,onRequest函数被调用
- http.createServer(onRequest).listen(8888);
-
- console.log("Server has started.");
模块化server
server.js
- var http = require("http");
-
- function start() {
- function onRequest(request, response) {
- console.log("Request received.");
- response.writeHead(200, {"Content-Type": "text/plain"});
- response.write("Hello World");
- response.end();
- }
-
- http.createServer(onRequest).listen(8888);
- console.log("Server has started.");
- }
- //导出函数
- exports.start = start;
- var http = require("http");
路由模块,依赖注入到service
router.js
- function route(pathname) {
- console.log("About to route a request for " + pathname);
- }
-
- exports.route = route;
- function route(pathname) {
server.js
- var http = require("http");
- var url = require("url");
-
- function start(route) {
- function onRequest(request, response) {
- var pathname = url.parse(request.url).pathname;
- console.log("Request for " + pathname + " received.");
-
- route(pathname);//依赖注入
-
- response.writeHead(200, {"Content-Type": "text/plain"});
- response.write("Hello World");
- response.end();
- }
-
- http.createServer(onRequest).listen(8888);
- console.log("Server has started.");
- }
-
- exports.start = start;
- var http = require("http");
index.js
-
- var server = require("./server");
- var router = require("./router");
-
- server.start(router.route);//依赖注入
-
行为驱动处理函数,函数式编程
requestHandlers.js
- //行为实现
- function start() {
- console.log("Request handler ‘start‘ was called.");
- return "Hello Start";
- }
-
- function upload() {
- console.log("Request handler ‘upload‘ was called.");
- return "Hello Upload";
- }
-
- exports.start = start;
- exports.upload = upload;
- //行为实现
index.js
- var server = require("./server");
- var router = require("./router");
- var requestHandlers = require("./requestHandlers");
-
- var handle = {}//根据路由执行行为定义
- handle["/"] = requestHandlers.start;
- handle["/start"] = requestHandlers.start;
- handle["/upload"] = requestHandlers.upload;
-
- server.start(router.route, handle);
- var server = require("./server");
server.js
- var http = require("http");
- var url = require("url");
-
- function start(route, handle) {
- function onRequest(request, response) {
- var pathname = url.parse(request.url).pathname;
- console.log("Request for " + pathname + " received.");
-
- response.writeHead(200, {"Content-Type": "text/plain"});
- var content = route(handle, pathname) //路由行为分配
- response.write(content);
- response.end();
- }
- http.createServer(onRequest).listen(8888);
- console.log("Server has started.");
- }
-
- exports.start = start;
- var http = require("http");
router.js
- function route(handle, pathname) {
- console.log("About to route a request for " + pathname);
- //根据路由分配行为
- if (typeof handle[pathname] === ‘function‘) {
- return handle[pathname]();
- } else {
- console.log("No request handler found for " + pathname);
- return "404 Not found";
- }
- }
-
- exports.route = route;
- function route(handle, pathname) {
阻塞与非阻塞
nodeJS它通过事件轮询(event loop)来实现并行操作,所以尽可能的避免阻塞操作,取而代之,多使用非阻塞操作。
要用非阻塞操作,我们需要使用回调。
回调就是:你继续处理你的事情,我(Node.js线程)先不等你了,我继续去处理你后面的代码,请你提供一个callbackFunction(),等你处理完之后我会去调用该回调函数的,谢谢!
阻塞的请求
requestHandlers.js
- function start() {
- console.log("Request handler ‘start‘ was called.");
-
- function sleep(milliSeconds) {
- var startTime = new Date().getTime();
- while (new Date().getTime() < startTime + milliSeconds);
- }
- sleep(10000);
- return "Hello Start";
- }
-
- function upload() {
- console.log("Request handler ‘upload‘ was called.");
- return "Hello Upload";
- }
- exports.start = start;
- exports.upload = upload;
-
处理POST请求
requestHandlers.js
- function start(response) {
- console.log("Request handler ‘start‘ was called.");
-
- var body = ‘<html>‘+
- ‘<head>‘+
- ‘<meta http-equiv="Content-Type" content="text/html; ‘+
- ‘charset=UTF-8" />‘+
- ‘</head>‘+
- ‘<body>‘+
- ‘<form action="/upload" method="post">‘+
- ‘<textarea name="text" rows="20" cols="60"></textarea>‘+
- ‘<input type="submit" value="http://www.mamicode.com/Submit text" />‘+
- ‘</form>‘+
- ‘</body>‘+
- ‘</html>‘;
-
- response.writeHead(200, {"Content-Type": "text/html"});
- response.write(body);
- response.end();
- }
-
- function upload(response) {
- console.log("Request handler ‘upload‘ was called.");
- response.writeHead(200, {"Content-Type": "text/plain"});
- response.write("Hello Upload");
- response.end();
- }
-
- exports.start = start;
- exports.upload = upload;
- function start(response) {
request监听器
server.js
- var http = require("http");
- var url = require("url");
-
- function start(route, handle) {
- function onRequest(request, response) {
- var postData = http://www.mamicode.com/"";//传输的数据
- var pathname = url.parse(request.url).pathname;
- console.log("Request for " + pathname + " received.");
-
- request.setEncoding("utf8");
- //监听数据传输
- request.addListener("data", function(postDataChunk) {
- postData += postDataChunk;
- console.log("Received POST data chunk ‘"+
- postDataChunk + "‘.");
- });
- //传输结束一次处理
- request.addListener("end", function() {
- route(handle, pathname, response, postData);
- });
-
- }
-
- http.createServer(onRequest).listen(8888);
- console.log("Server has started.");
- }
-
- exports.start = start;
- var http = require("http");
数据传输给路由
router.js
- function route(handle, pathname, response, postData) {
- console.log("About to route a request for " + pathname);
- if (typeof handle[pathname] === ‘function‘) {
- handle[pathname](response, postData);
- } else {
- console.log("No request handler found for " + pathname);
- response.writeHead(404, {"Content-Type": "text/plain"});
- response.write("404 Not found");
- response.end();
- }
- }
-
- exports.route = route;
- function route(handle, pathname, response, postData) {
响应请求
requestHandlers.js
- var querystring = require("querystring");
-
- function start(response, postData) {
- console.log("Request handler ‘start‘ was called.");
-
- var body = ‘<html>‘+
- ‘<head>‘+
- ‘<meta http-equiv="Content-Type" content="text/html; ‘+
- ‘charset=UTF-8" />‘+
- ‘</head>‘+
- ‘<body>‘+
- ‘<form action="/upload" method="post">‘+
- ‘<textarea name="text" rows="20" cols="60"></textarea>‘+
- ‘<input type="submit" value="http://www.mamicode.com/Submit text" />‘+
- ‘</form>‘+
- ‘</body>‘+
- ‘</html>‘;
-
- response.writeHead(200, {"Content-Type": "text/html"});
- response.write(body);
- response.end();
- }
- function upload(response, postData) {
- console.log("Request handler ‘upload‘ was called.");
- response.writeHead(200, {"Content-Type": "text/plain"});
- response.write("You‘ve sent the text: "+
- querystring.parse(postData).text);
- response.end();
- }
-
- exports.start = start;
- exports.upload = upload;
- var querystring = require("querystring");
使用外部模块上传文件
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="http://www.mamicode.com/Upload">‘+
‘</form>‘
);
}).listen(8888);
读取图片数据
requestHandlers.js
- var querystring = require("querystring"),
- fs = require("fs");
-
- function start(response, postData) {
- console.log("Request handler ‘start‘ was called.");
-
- var body = ‘<html>‘+
- ‘<head>‘+
- ‘<meta http-equiv="Content-Type" ‘+
- ‘content="text/html; charset=UTF-8" />‘+
- ‘</head>‘+
- ‘<body>‘+
- ‘<form action="/upload" method="post">‘+
- ‘<textarea name="text" rows="20" cols="60"></textarea>‘+
- ‘<input type="submit" value="http://www.mamicode.com/Submit text" />‘+
- ‘</form>‘+
- ‘</body>‘+
- ‘</html>‘;
-
- response.writeHead(200, {"Content-Type": "text/html"});
- response.write(body);
- response.end();
- }
-
- function upload(response, postData) {
- console.log("Request handler ‘upload‘ was called.");
- response.writeHead(200, {"Content-Type": "text/plain"});
- response.write("You‘ve sent the text: "+
- querystring.parse(postData).text);
- response.end();
- }
-
- function show(response, postData) {
- console.log("Request handler ‘show‘ was called.");
- fs.readFile("/tmp/test.png", "binary", function(error, file) {
- if(error) {
- response.writeHead(500, {"Content-Type": "text/plain"});
- response.write(error + "\n");
- response.end();
- } else {
- response.writeHead(200, {"Content-Type": "image/png"});
- response.write(file, "binary");
- response.end();
- }
- });
- }
-
- exports.start = start;
- exports.upload = upload;
- exports.show = show;
- var querystring = require("querystring"),
index.js
- var server = require("./server");
- var router = require("./router");
- var requestHandlers = require("./requestHandlers");
-
- var handle = {}
- handle["/"] = requestHandlers.start;
- handle["/start"] = requestHandlers.start;
- handle["/upload"] = requestHandlers.upload;
- handle["/show"] = requestHandlers.show;
-
- server.start(router.route, handle);
- var server = require("./server");
上传图片
requestHandlers.js
- var querystring = require("querystring"),
- fs = require("fs"),
- formidable = require("formidable");
-
- function start(response) {
- console.log("Request handler ‘start‘ was called.");
-
- var 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" multiple="multiple">‘+
- ‘<input type="submit" value="http://www.mamicode.com/Upload file" />‘+
- ‘</form>‘+
- ‘</body>‘+
- ‘</html>‘;
-
- response.writeHead(200, {"Content-Type": "text/html"});
- response.write(body);
- response.end();
- }
-
- function upload(response, request) {
- console.log("Request handler ‘upload‘ was called.");
-
- var form = new formidable.IncomingForm();
- console.log("about to parse");
- form.parse(request, function(error, fields, files) {
- console.log("parsing done");
- fs.renameSync(files.upload.path, "/tmp/test.png");
- response.writeHead(200, {"Content-Type": "text/html"});
- response.write("received image:<br/>");
- response.write("<img src=http://www.mamicode.com/‘/show‘ />");
- response.end();
- });
- }
-
- function show(response) {
- console.log("Request handler ‘show‘ was called.");
- fs.readFile("/tmp/test.png", "binary", function(error, file) {
- if(error) {
- response.writeHead(500, {"Content-Type": "text/plain"});
- response.write(error + "\n");
- response.end();
- } else {
- response.writeHead(200, {"Content-Type": "image/png"});
- response.write(file, "binary");
- response.end();
- }
- });
- }
-
- exports.start = start;
- exports.upload = upload;
- exports.show = show;
- var querystring = require("querystring"),
server.js
- var http = require("http");
- var url = require("url");
-
- function start(route, handle) {
- function onRequest(request, response) {
- var pathname = url.parse(request.url).pathname;
- console.log("Request for " + pathname + " received.");
- route(handle, pathname, response, request);
- }
-
- http.createServer(onRequest).listen(8888);
- console.log("Server has started.");
- }
-
- exports.start = start;
- var http = require("http");
fs模块的问题 文件路径问题
- function upload(response,request) {
- console.log("Request handler ‘upload‘ was called");
- // response.writeHead(200, {
- // "Content-Type": "text/plain"
- // });
- // response.write("you are sent: " + querystring.parse(postData).text);
- // response.end();
- // response.write("hello upload");
- //return "hello upload";
- //
- //文件上传
- var form =new formidable.IncomingForm();
- console.log("start to parse");
- form.uploadDir = "tem";
- form.parse(request,function(error,fields,files){
- console.log("parsing done");
- try{
- fs.renameSync(files.upload.path,form.uploadDir+"/test.png");//主要修改了这个地方
- }catch(e){
- console.log(e);
- }
-
- response.writeHead(200,{"Content-Type":"text/html"});
- response.write("received image:<br/>");
- response.write("<img src=http://www.mamicode.com/‘/show‘>");
- response.end();
- })
- }
完全基于node的web应用