完全基于node的web应用
完全基于node的web应用
事实上通常“正确的方式”一般都不简单。
这其中涉及了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="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 = "";//传输的数据
- 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="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="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="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="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='/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='/show'>");
- response.end();
- })
- }
完全基于node的web应用的更多相关文章
- 转:基于node的web开发框架Express入门
JavaScript 标准参考教程(alpha) 草稿二:Node.js Express框架 GitHub TOP Express框架 来自<JavaScript 标准参考教程(alpha)&g ...
- 基于Node的Web聊天室
1 项目名称 Web聊天室(<这是NodeJs实战>第二章的一个案例,把整个开发过程记录下来)
- 基于 Node.js 平台,快速、开放、极简的 web 开发框架。
资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...
- Fenix – 基于 Node.js 的桌面静态 Web 服务器
Fenix 是一个提供给开发人员使用的简单的桌面静态 Web 服务器,基于 Node.js 开发.您可以同时在上面运行任意数量的项目,特别适合前端开发人员使用. 您可以通过免费的 Node.js 控制 ...
- KoaHub.js是基于 Koa.js 平台的 Node.js web 快速开发框架
koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, A ...
- 基于 Koa.js 平台的 Node.js web 快速开发框架KoaHub.js demo 可安装
KoaHub.js demo KoaHub.js KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Fu ...
- KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-yilianyun
koahub-yilianyun 微信易联云打印机接口 koahub-yilianyun易联云打印机node接口 Installation $ npm install koahub-yilianyun ...
- koa : Express出品的下一代基于Node.js的web框架
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434501579966a ...
- 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具
认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...
随机推荐
- C# 使用PictureBox实现图片按钮控件
引言 我们有时候会在程序的文件夹里看见一些图标,而这些图标恰好是作为按钮的背景图片来使用的.鼠标指针在处于不同状态时,有"进入按钮"."按下左键"," ...
- 为什么对gRPC做负载均衡会很棘手?
在过去的几年中,随着微服务的增长,gRPC在这些较小的服务之间的相互通信中获得了很大的普及,在后台,gRPC使用http/2在同一连接和双工流中复用许多请求. 使用具有结构化数据的快速,轻便的二进制协 ...
- Educational Codeforces Round 39
Educational Codeforces Round 39 D. Timetable 令\(dp[i][j]\)表示前\(i\)天逃课了\(j\)节课的情况下,在学校的最少时间 转移就是枚举第\ ...
- cf 1305 E. Kuroni and the Score Distribution
题目传送门:E. Kuroni and the Score Distribution 题目大意:给n和m,输出n个数,这些数里必须要有m对a[i]+a[j]==a[k] ( i < j < ...
- zoj3623 Battle Ships
Battle Ships is a new game which is similar to Star Craft. In this game, the enemy builds a defense ...
- C++程序代码优化的方法
1.选择合适的算法和数据结构 选择一种合适的数据结构很重要,如果在一堆随机存放的数中使用了大量的插入和删除指令,那使用链表要快得多.数组与指针语句具有十分密切的关系,一般来说,指针比较灵活简洁,而数组 ...
- Leetcode(18)-四数之和
给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 target 相等?找出所有满 ...
- zhihu level
zhihu level https://www.zhihu.com/creator/account/growth-level refs xgqfrms 2012-2020 www.cnblogs.co ...
- ES-Next @Decorator All In One
ES-Next @Decorator All In One @装饰器 import { logged } from "./logged.mjs"; class C { @logge ...
- CSS Dark Mode
CSS Dark Mode https://kevq.uk/automatic-dark-mode/ https://kevq.uk/how-to-add-css-dark-mode-to-a-web ...