node.js 初体验

楼主
node.js 初体验
[P][P][P][P][P][P][P]  最近写的文章收到许多朋友的反馈,感谢大家的支持和建议,让我对坚持写博客充满热情,一个月一篇文章确实有点少,所以以后尽力多做分享,做好的分享,希望能对朋友们有用。[/P][P][SIZE=14px]  到新公司的这段时间学到了很多新东西,有好多东西需要去总结去探索,不过事情得一件一件来,今天咱们先从Node开始。[i]注:以后出现的Node即node.js。[/i][/SIZE][/P][P][BGCOLOR=rgb(204, 255, 204)][B][SIZE=16px]先搞点前戏热热场 - 为什么写这篇文章:[/BGCOLOR][/B][/SIZE][/P][P]  1.前段时间单位有新项目启动,服务端要做的工作不多也不算麻烦,就是处理一些中间层的服务,而且我们团队里面个个都会JavaScript,领导就决定试试服务器端的JavaScript,结果本人有幸被派去研究了几天Node,怀着鸡冻的心情开始了node.js的篇章,这篇文章也就是为这几天研究的总结。[/P][P]  2.一个JavaScript工程师如果没听过node.js那么我想你是不是错过了什么,每个优秀的前端工程师都有必要去了解后台处理流程,那么如果又能从JavaScript出发,岂不是一件很美妙的事么。[/P][P]  3.互联网的火热使得JavaScript风光无限,且服务端的JavaScript也并不是什么新技术了,相关的框架也有不少,只是node.js的成功让他爆发式的出现在我们的视线中,让很多前端工程师看到了从前端写到后端的另一种实现希望。[SIZE=14px][i]注:node.js 是一个允许开发人员使用 JavaScript 语言编写服务器端代码的框架。[/i][/SIZE][/P][P]  4.今年8月曾在某大公司最后一轮(第五轮)的面试被问到Node.js的问题,相对应的回答那是相当之糟糕,结果怎样你们懂的,感觉这个问题是导致没有通过的关键点之一...那家公司是我在读大学的时候就无比向往的公司,现在回想起那次经历和过程,谈不上惋惜,毕竟我真的尽力了 - 其实这篇文章更多的也是为了完成自己一个小小的心结...好吧,又扯远了。[/P][P]  5.欢迎各种转载,不过请注明出处,谢谢。
 [/P][P][B]  [FACE=幼圆][SIZE=16px]PS:此篇文章的进阶内容在此《[/SIZE][/FACE][URL=http://www.cnblogs.com/Darren_code/p/node_express.html]Nodejs初阶之express[/URL]》,欢迎阅读和评论:)[/B][/P][P] [/P][P][BGCOLOR=rgb(204, 255, 204)][SIZE=16px][B]Node是个啥?[/B][/SIZE][/BGCOLOR][/P][P]  [COLOR=rgb(128, 128, 128)][SIZE=12px]写个东西还是尽量面面俱到吧,所以有关基本概念的东西我也从网上选择性的拿了些下来,有些地方针对自己的理解有所改动,对这些概念性的东西有过了解的可选择跳过这段。[/SIZE][/COLOR][/P][P]  1.Node 是一个服务器端 JavaScript 解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不深我还不知道,不过确实不浅。[/P][P]  2.Node 的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码。处理高并发和异步I/O是Node受到开发人员的关注的原因之一。[/P][P]  3.Node 本身运行[B]Google V8 JavaScript引擎[/B],所以速度和性能非常好,看chrome就知道,而且Node对其封装的同时还改进了其处理二进制数据的能力。因此,Node不仅仅简单的使用了V8,还对其进行了优化,使其在各种环境下更加给力。(什么是V8 JavaScript 引擎?请“百度知道”)[/P][P]  4.第三方的扩展和模块在Node的使用中起到重要的作用。下面也会介绍下载npm,npm就是模块的管理工具,用它安装各种 Node 的软件包(如express,redis等)并发布自己为Node写的软件包 。[/P][P]
[/P][P][P][P][P][P][P][P][P][BGCOLOR=rgb(204, 255, 204)][SIZE=16px][B]安装Node[/B][/SIZE][/BGCOLOR][/P][P][BGCOLOR=rgb(255, 255, 255)]  在这简单说说在window7和linux两种环境下安装Node。安装的时候一定要注意Python的版本,多次因为Python版本的问题安装失败,建议2.6+的版本,低版本会出现Node安装错误,[/BGCOLOR]查询Python版本可在终端中输入:pyhton -v [/P][P][B][BGCOLOR=rgb(255, 255, 255)]  1.先介绍linux下的安装吧,Node在Linux环境下的安装和使用都非常方便,建议在Linux下运行Node,^_^...[i]我使用的是Ubuntu11.04[/i][/BGCOLOR][/B][/P][P]   a.安装依赖包:[i][SIZE=12px]50-100kb/s大概每个包一分钟就能下载安装完成[/SIZE][/i][/P][P][i][SIZE=12px]
[/SIZE][/i][/P][P][P][P][P][P][P][P][P][CODE]  sudo apt-get install g++ curl libssl-dev apache2-utils
  sudo apt-get install git-core[/CODE]

[P][P][P][P][P][P][P] b.在终端一步步运行一下命令:

[P][P][P][P][P][P][P][CODE]  git clone git://github.com/joyent/node.git  
  cd node
  ./configure
  make  
  sudo make install[/CODE]

[P][P][P][P][P][P][P]  安装顺利的话到这一步Node就算安装成功了,2M的网络用了共计12分钟。[/P][P]  注:如果不用git下载也可以直接下载源码,不过这样下载安装需要注意Node版本问题。使用git下载安装是最方便的,所以推荐之。[/P][P] [/P][P]  [B]2.在Windows下使用Cygwin安装Node,这个方式不太推荐,因为真的需要较长时间和较好的人品。[i]我的系统是 win7旗舰版[/i][/B][/P][P]  Cygwin是一个在windows平台上运行的unix模拟环境,下载地址:[URL=http://cygwin.com/setup.exe]http://cygwin.com/setup.exe[/URL]。[/P][P]  下载好Cygwin后开始安装,步骤:[/P][P]   a.选择下载的来源 - Install from Internet[/P][P]   b.选择下载安装的根目录[/P][P]   c.选择下载文件所存放的目录[/P][P]   d.选择连接的方式[/P][P]   e.选择下载的网站 - http://mirrors.163.com/cygwin[/P][P]   f.麻烦就麻烦在这步,考验人品的时候到了。需要的下载安装时间不确定,反正需要比较长的时间(超过20分钟),偶尔会出现安装失败的情况。单击一下各个程序包前面的旋转箭头图标选择你想要的版本,选中时会出现了"x"号表示已经选中了该程序包。选择需要下载的程序包:

[P][P][P][P][P][P][P][CODE]Devel包:
    gcc-g++: C++ compiler
    gcc-mingw-g++: Mingw32 support headers and libraries for GCC C++
    gcc4-g++: G++ subpackage
    git: Fast Version Control System – core files
    make: The GNU version of the ‘make’ utility
    openssl-devel: The OpenSSL development environment
    pkg-config: A utility used to retrieve information about installed libraries
    zlib-devel: The zlib compression/decompression library (development)
  Editor包:vim: Vi IMproved – enhanced vi editor
  Python包:把Default切换成install状态即可
  Web包:
    wget: Utility to retrieve files from the WWW via HTTP and FTP
    curl: Multi-protocol file transfer command-line tool[/CODE][/P][/P][/P][/P][/P][/P][/P]
[P][P][P][P][P][P][P]上个截图,以下载zlib-devel为例:[/P][P]    [IMG=0,absmiddle]http://pic002.cnblogs.com/images/2011/159097/2011102917303125.jpg[/IMG][/P][P]  其上几步走完才算把环境搭建完成,可是现在还没有到安装Node,还需要在Cywgin的ASH模式下执行rebaseall,步骤如下:[/P][P]   a. cmd命令行[/P][P]   b. 进入cygwin安装目录下的bin子目录[/P][P]   c. 运行ash进入shell模式[/P][P]   d. ./rebaseall -v[/P][P]   e. 没有错误就关闭命令行窗口
  好了,现在到下载安装Node了,启动Cygwin.exe后输入:

[P][P][P][P][P][P][P][CODE]$ wget http://nodejs.org/dist/node-v0.4.12.tar.gz
  $ tar xf node-v0.4.12.tar.gz
  $ cd node-v0.4.12
  $ ./configure
  $ make
  $ make install[/CODE]

[P][P][P][P][P][P][P][B][BGCOLOR=rgb(255, 255, 255)].直接下载node.exe文件[/BGCOLOR][/B][/P][P][BGCOLOR=rgb(255, 255, 255)]  nodejs.org下载较慢所以我在网盘上传了一个,下载地址:[URL=http://www.everbox.com/f/VhyL6EiGF5Lm3ZSRx85caFDIA5]http://www.everbox.com/f/VhyL6EiGF5Lm3ZSRx85caFDIA5[/URL][/BGCOLOR][/P][P][BGCOLOR=rgb(255, 255, 255)]  听说有不太稳定的问题,不过你假如只是想先在windows下了解Node,个人感觉这个方法比你装个Cygwin好很多。[/BGCOLOR][/P][P][BGCOLOR=rgb(255, 255, 255)] [/BGCOLOR][/P][P][BGCOLOR=rgb(255, 255, 255)]  注:原本不太想写安装Node这段,可是为了这篇文章的全面性还是写了,没想到一写就是那么长一段了...茶几了[/BGCOLOR][/P][P][BGCOLOR=rgb(255, 255, 255)] [/BGCOLOR][/P][P][BGCOLOR=rgb(204, 255, 204)][SIZE=16px][B]“Hello World” - 为什么每次见到这句心情都会小激动,不解...[/B][/SIZE][/BGCOLOR][/P][P]  首先,创建个hello.js的文件,在文件中copy如下代码:

[P][P][P][P][P][P][P][CODE]  var http = require('http');
  http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
  }).listen(1337, "127.0.0.1");
  console.log('Server running at http://127.0.0.1:1337/');[/CODE][COLOR=rgb(0, 0, 255)]

[/COLOR][P][P][P][P][P][P][P]  [B]代码逻辑:[/B][/P][P]   a. 全局方法require()是用来导入模块的,一般直接把 require() 方法的返回值赋值给一个变量,在 JavaScript 代码中直接使用此变量即可 。require("http") 就是加载系统预置的 http 模块[/P][P]   b. http.createServer 是模块的方法,目的就是创建并返回一个新的web server对象,并且给服务绑定一个回调,用以处理请求。[/P][P]   c. 通过 http.listen() 方法就可以让该 HTTP 服务器在特定端口监听。[/P][P]   d. console.log就不用多说了,了解firebug的都应该知道,Node实现了这个方法。[/P][P][i]    注: 想了解具体细节请查看文档 [URL=http://cnodejs.org/cman/all.html#http.createServer]cnodejs.org/cman/all.html#http.createServer[/URL][/i][/P][P]  接着运行Node服务器,执行hello.js代码,成功启动会看见console.log()中的文本。有图有真相:

[P][P][P][P][P][P][P] [IMG]http://pic002.cnblogs.com/images/2011/159097/2011103110462272.jpg[/IMG][/P][P]  [IMG]http://pic002.cnblogs.com/images/2011/159097/2011103110465577.jpg[/IMG][/P][P][BGCOLOR=rgb(255, 255, 255)] [/BGCOLOR][/P][P][BGCOLOR=rgb(204, 255, 204)][B][SIZE=16px]npm的下载和使用[/BGCOLOR][/B][/SIZE][/P][P]  除Node本身提供的API外,现在有不少第三方模块可极大的提高开发效率,npm就是Node的软件包管理器,可以用它安装所需软件包并发布自己为nodejs写的软件包。官网地址:[URL=http://npmjs.org/]npmjs.org[/URL][/P][P]  安装只需要在终端写入一行代码:    [/P][P]  curl http:[COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)]npmjs.org/install.sh | sh[/COLOR][/P][P]  npm安装node扩展包同样是一行代码:  [/P][P]  npm install <包名>    [COLOR=rgb(0, 128, 0)]//[/COLOR][COLOR=rgb(0, 128, 0)]例:npm install express[/COLOR][/P][P]  注:如果安装模块的过程中报域名错误的话,请清空缓存 >npm cache clean 或重启计算机即可。[B]
[/B][/P][P][SIZE=16px][SIZE=16px][B]  [/B][/SIZE][/SIZE][/P][P][BGCOLOR=rgb(204, 255, 204)][SIZE=16px][B]理解Node的模块概念[/B][/SIZE][/BGCOLOR][/P][P]  在Node中,不同的功能组件被划分成不同的模块。应用可以根据自己的需要来选择使用合适的模块。每个模块都会暴露一些公共的方法或属性。模块的使用者直接使用这些方法或属性即可,对于内部的实现细节就可以不用了解。除了Node本身提供的API外,开发人员也可以利用这个机制来将应用拆分成多个模块,以提高代码的可复用性。[/P][P]  [B]1.如何使用模块?[/B][/P][P]  在Node中使用模块是非常方便的,在 JavaScript 代码中可以直接使用全局函数 require() 来加载一个模块。[/P][P]  在刚刚”Hello World"的例子中,require("http") 可以加载系统预置的 http 模块;模块名称以 "./" 开始的,如 require("./myModule.js") 用来加载与当前 JavaScript 文件同一目录下的 myModule.js 模块。[/P][P]  [B]2.自己如何开发模块?[/B][/P][P]  刚刚介绍使用require()导入模块的时候,模块名称以 "./" 开始的这种,就是自己开发的模块文件。需要注意的就是JS文件的系统路径。[/P][P]  代码中封装了模块的内部处理逻辑,一个模块一般都会暴露一些公开的方法或属性给其他的人使用。模块的内部代码需要把这些方法或属性给暴露出来。[/P][P]  [B]3.来一套简单的例子。[/B]先创建一个模块文件如myModule.js,就一行代码[/P][P]  console.log('Hi Darren.')[/P][P]  然后创建一个test.js文件,导入这个JS文件,执行node看到结果[/P][P][IMG]http://pic002.cnblogs.com/images/2011/159097/2011103116550537.jpg[/IMG][/P][P]  现在Node社区中已有不少第三方的模块,希望能有更多人通过学习Node,加入到这个大家庭中,为Node社区来添砖加瓦。先谢谢之,咱们继续。  [/P][P]  [B]4.来一个深点的例子。[/B]这个例子中将会针对 私有和共有 进行介绍。先创建一个myModule.js,代码如下:[/P][P][COLOR=rgb(0, 0, 255)]  var[/COLOR] name = "Darren";
[COLOR=rgb(0, 0, 255)]  this[/COLOR].location = "Beijing";
[COLOR=rgb(0, 0, 255)]  this[/COLOR].showLog = [COLOR=rgb(0, 0, 255)]function[/COLOR](){
      console.log('Hi Darren.')
  };[/P][P]  代码中出现了三种类型,分别是: 私用属性,共有属性和共有方法,再创建一个test.js,执行Node[/P][P][IMG]http://pic002.cnblogs.com/images/2011/159097/2011103117303855.jpg[/IMG][/P][P]  结果高亮的地方很清楚的告诉我们,私有方法我们在模块以外是取不到的,所以是undefined。共有属性和共有方法的声明需要在前面加上 this 关键字。[/P][P][SIZE=16px][B] [/B][/SIZE][/P][P][BGCOLOR=rgb(204, 255, 204)][SIZE=16px][B]Node能做什么和它的优势[/B][/SIZE][/BGCOLOR][/P][P]  Node核心思想:  [BGCOLOR=rgb(183, 210, 225)][B]1.非阻塞;  2.单线程;  3.事件驱动[/B][/BGCOLOR]。[/P][P]  在目前的web应用中,客户端和服务器端之间有些交互可以认为是基于事件的,那么AJAX就是页面及时响应的关键。每次发送一个请求时(不管请求的数据多么小),都会在网络里走一个来回。服务器必须针对这个请求作出响应,通常是开辟一个新的进程。那么越多用户访问这个页面,所发起的请求个数就会越来越多,就会出现内存溢出、逻辑交错带来的冲突、网络瘫痪、系统崩溃这些问题。[/P][P]  Node的目标是提供一种构建可伸缩的网络应用的方案,在hello world例子中,服务器可以同时处理很多客户端连接。[/P][P]  Node和操作系统有一种约定,如果创建了新的链接,操作系统就将通知Node,然后进入休眠。如果有人创建了新的链接,那么它(Node)执行一个回调,每一个链接只占用了非常小的(内存)堆栈开销。    [/P][P]  举一个简单的异步调用的例子,把test.js和myMydule.js准备好了,^_^。把以下代码拷贝到test.js中并执行:


[P][P][P][P][P][P][P][COLOR=rgb(0, 0, 255)][/COLOR][CODE]  var fs = require('fs');
  fs.readFile('./myModule.js', function (err, data) {
    if (err) throw err;
    console.log('successfully');
  });
  console.log('async');[/CODE][COLOR=rgb(0, 0, 255)][/COLOR][/P][/P][/P][/P][/P][/P][/P]
[/P][/P][/P][/P][/P][/P][/P]
[/P][/P][/P][/P][/P][/P][/P][COLOR=rgb(0, 0, 255)]
[/COLOR][/P][/P][/P][/P][/P][/P][/P]
[/P][/P][/P][/P][/P][/P][/P]
[/P][/P][/P][/P][/P][/P][/P]
[/P][/P][/P][/P][/P][/P][/P]
[/P][/P][/P][/P][/P][/P][/P]
[/P][/P][/P][/P][/P][/P][/P]
[/P][/P][/P][/P][/P][/P][/P]
[/P][/P][/P][/P][/P][/P][/P][i][SIZE=12px]
[/SIZE][/i][/P][/P][/P][/P][/P][/P][/P][/P][/P][/P][/P][/P][/P][/P]
1楼
Nodejs初阶之express
[P][FACE=幼圆][SIZE=16px][LINE-HEIGHT=1.5]  [/LINE-HEIGHT][/FACE][/SIZE][LINE-HEIGHT=1.5]老规矩,开头部分都是些自娱自乐的随想,想到哪写到哪...[/LINE-HEIGHT][/P][P][LINE-HEIGHT=1.5][FACE=幼圆][SIZE=16px]  到今天俺已经在俺厂工作俩年零几天了,工作以来头一回在一家企业工作超俩年,对于这俩年确实只有满满的成就感,不管是工作还是生活...写到这句突然又想写篇这俩年的总结,等这篇文章发了之后就着手整理吧,吼吼。[/FACE][/SIZE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=1.5][FACE=幼圆][SIZE=16px]  [IMG=0,middle]http://images.cnitblog.com/blog/159097/201402/262041577757011.gif[/IMG][/FACE][/SIZE][/LINE-HEIGHT][/P][P][LINE-HEIGHT=1.5][FACE=幼圆][SIZE=16px]  [/FACE][/SIZE][/LINE-HEIGHT][/P][P][FACE=幼圆][SIZE=16px][LINE-HEIGHT=1.5]  那篇《[URL=http://www.cnblogs.com/Darren_code/archive/2011/10/31/nodejs.html]node.js 初体验[/URL]》好像才发生在前几月,没想到时间已过两年有多。且看到文章末尾处那句: “这篇文章只会是一个开始” 令俺脸红掩面[IMG=0,middle]http://images.cnitblog.com/blog/159097/201402/270046481715808.gif[/IMG],尼玛真没想到这一开始就开始了两年[/LINE-HEIGHT][/FACE][/SIZE]多,这让老夫情何以堪[IMG=0,middle]http://images.cnitblog.com/blog/159097/201402/270002525962790.gif[/IMG]...[/P][P][FACE=幼圆][SIZE=16px]  好吧,反正脸皮厚已不是俩三天,让俺装傻混过去吧,咱往前看才是硬道理不是。俺一定痛改前非、洗心革面、好好改造,今年中心的小心思是把【[URL=http://www.cnblogs.com/Darren_code/archive/2013/01/05/fe_series.html]前端攻略系列[/URL]】折腾点名堂出来,厚积薄发的时刻来鸟。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px] [/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]  Node不得不写写,没辙呀,太火!看看最近的前端圈子吧,没弄过几行Node代码都不好意思和别人打招呼;不折腾点Node的小平台、小工具,去食堂都不好意思多搞几碗饭,所以俺也就顺大潮把自己的工作笔记整理整理,试试能否写好这篇Nodejs系列。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]  [IMG=0,middle]http://images.cnitblog.com/blog/159097/201402/270010498417459.jpg[/IMG][/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px] [/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]  好吧,不开玩笑哒~~~介绍这篇和接下来几篇Node文章的内容,基本都属于Node的初阶,略偏实战,进阶和高阶内容正在YY中,最终的目录与里程碑下一篇应该差不多能定下来。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]  本篇以介绍Express为话题,延伸出用Node开发小页面,然后其中穿插概述express主要的API、路由的原理、Node模块概念,顺便也会介绍自己使用Node工具等等。默认看官们都具备JavaScript基础,所以过于基础的内容俺就不浪费篇幅咯,GOGO。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px] [/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]  最后自我爆料一个吧。老婆已回家养胎,所以俺穷的只有时间了。有时间好好加班拼工作,有时间好好写博(客)拼积累...诸如心灵鸡汤什么的就不灌各位啦,喝多了反胃:)[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]  一不小心随想就写了那么多,尼玛炫酷狂拽屌炸天有木有!
[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]  [IMG=0,middle]http://images.cnitblog.com/blog/159097/201402/271125378366371.gif[/IMG][/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px] [/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px][i][LINE-HEIGHT=1.5][COLOR=rgb(136, 136, 136)]-------------------------------------------- 华丽丽的分割线 --------------------------------------------[/FACE][/LINE-HEIGHT][/i][/SIZE][/COLOR][/P][P][FACE=幼圆][SIZE=16px] [/FACE][/SIZE]
[/P][P][FACE=幼圆][SIZE=16px]  Node和NPM的安装够便捷了,不细说...有几点基础顺手提一下:[/FACE][/SIZE][/P][ol][li][FACE=幼圆][SIZE=16px]安装命令中的 “-g” 表示全局(global)[/FACE][/SIZE][/li][li][FACE=幼圆][SIZE=16px]express的版本不是通常的 “-v” 来查看,而是 “-V”[/FACE][/SIZE][/li][li][FACE=幼圆][SIZE=16px]安装express项目的命令如下
[b][COLOR=rgb(153, 51, 102)][BGCOLOR=rgb(255, 255, 255)]express -e nodejs-product[/FACE][/SIZE][/b]
[/COLOR][/BGCOLOR] [P][FACE=幼圆][SIZE=16px]-e, --ejs add ejs engine support
[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]-J, --jshtml add jshtml engine support (defaults to jade)[/FACE][/SIZE][/P][FACE=幼圆][SIZE=16px] PS:模板引擎之类暂时不必care,不过俺当初学习搭建Node+express时用的是ejs,所以也就顺手一直用着了[/FACE][/SIZE][/li][/ol][P] [/P][P][FACE=幼圆][SIZE=16px] [/FACE][/SIZE][/P][P][FACE=幼圆][BGCOLOR=rgb(204, 255, 255)][SIZE=16px]  [SIZE=18px][b]Node的小基友supervisor  [/b][/FACE][/BGCOLOR][/SIZE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]  每次修改代码后会自动重启。懒程序员就指望这种省事省力的工具活着了:)[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]  安装:[COLOR=rgb(153, 51, 102)][b]npm install -g supervisor[/b][/FACE][/SIZE][/COLOR][/P][P][FACE=幼圆][SIZE=16px]  执行:[COLOR=rgb(153, 51, 102)][b]supervisor app.js[/b][/FACE][/SIZE][/COLOR][/P][FACE=幼圆][SIZE=16px][b][COLOR=rgb(65, 0, 125)]
[/FACE][/b][/SIZE][/COLOR][P][FACE=幼圆][SIZE=16px]     [/FACE][/SIZE][/P][P][FACE=幼圆][BGCOLOR=rgb(204, 255, 255)][SIZE=16px]  [SIZE=18px][b]express项目目录  [/b][/FACE][/BGCOLOR][/SIZE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     [IMG=0,middle]http://images.cnitblog.com/i/159097/201402/272113409312155.png[/IMG][/FACE][/SIZE][/P][P]  如[FACE=幼圆][SIZE=16px]上图就是一个express项目结构,简单过一下:[/FACE][/SIZE][/P][ul][li][FACE=幼圆][SIZE=16px]app.js: 项目入口,反正express爱叫app.js没辙,你可以改成index.js或者main.js都成。相当于php项目中的 index.php、index.html[/FACE][/SIZE][/li][li][FACE=幼圆][SIZE=16px]node_modules: 存放项目的依赖库[/FACE][/SIZE][/li][li][FACE=幼圆][SIZE=16px]package.json: 项目依赖配置及开发者信息(这个要说就说多了,还是看文档好,俺就不误人子弟了。下期看看抽个小段单说Node模块)[/FACE][/SIZE][/li][li][FACE=幼圆][SIZE=16px]public: 静态文件如 css,js,img (PS:俺其实习惯叫static)[/FACE][/SIZE][/li][li][FACE=幼圆][SIZE=16px]routes: 路由文件(学习的重要攻克对象。尼玛业务好不好,路由是关键)[/FACE][/SIZE][/li][li][FACE=幼圆][SIZE=16px]Views: 页面文件(Ejs或者jade的模板,默认是jade,俺这用Ejs,在初阶练手最重要,所以都可以试试)[/FACE][/SIZE][/li][/ul][P][FACE=幼圆][SIZE=16px]     打开View 文件发现index.ejs比较不习惯,所以对app.js进行小改动:[/FACE][/SIZE][/P][ol][li][FACE=幼圆][SIZE=16px]“app.set('view engine', 'ejs');” 变成 “app.engine('.html', ejs.__express);app.set('view engine', 'html');”[/FACE][/SIZE][/li][li][FACE=幼圆][SIZE=16px]上一行出现的ejs变量需要require ejs模块,增加代码“var ejs = require('ejs');”[/FACE][/SIZE][/li][/ol][P][FACE=幼圆][SIZE=16px]     最终的app.js如下:[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     [IMG=0,middle]http://images.cnitblog.com/i/159097/201402/280037097683921.png[/IMG]
[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px] [/FACE][/SIZE][/P][P][FACE=幼圆][BGCOLOR=rgb(204, 255, 255)][SIZE=16px]  [b][SIZE=18px]代码小解:  [/FACE][/b][/BGCOLOR][/SIZE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     因为针对的是初阶入门,俺们还是继续过一下express的使用与Node的方法哈:[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     require() 用于在当前模块中加载和使用其他模块;此方法是模块的基础,使用中大概有路径的概念就行。PS:JS文件可以去掉".js"后缀[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]   exports 表示模块的导出对象,用于导出模块的属性和公共方法。在项目routes文件夹下有index.js和users.js(路由有细说),都使用到exports对象导出对象,如33行的routes.index和34行的user.list;
[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]   PS:一个模块的代码只会在模块第一次被使用时执行,不会因require多次而被初始化多次。[/FACE][/SIZE][/P][P] [/P][P][FACE=幼圆][SIZE=16px]     [b]express() [/b]表示创建express应用程序。简单几行代码其实就可以创建一个应用,如下:[/FACE][/SIZE][/P][P][URL=javascript%3avoid(0);][IMG=0,middle]http://common.cnblogs.com/images/copycode.gif[/IMG][/URL][/P]     [COLOR=rgb(0, 0, 255)]var[/COLOR] express = require('express'[COLOR=rgb(0, 0, 0)]);      [/COLOR][COLOR=rgb(0, 0, 255)]var[/COLOR] app =[COLOR=rgb(0, 0, 0)] express();      app.get([/COLOR]'/', [COLOR=rgb(0, 0, 255)]function[/COLOR][COLOR=rgb(0, 0, 0)](req, res){           res.send([/COLOR]'hello world'[COLOR=rgb(0, 0, 0)]);           console.log([/COLOR]'hello world'[COLOR=rgb(0, 0, 0)]);     });      app.listen([/COLOR]'8808');[P][URL=javascript%3avoid(0);][IMG=0,middle]http://common.cnblogs.com/images/copycode.gif[/IMG][/URL][/P][P][FACE=幼圆][SIZE=16px]     app.listen() 就是在给定的主机和端口上监听请求,这个和node中http模块的http.createServer(function(){...}).listen()效果一致;[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     app.set(name, value)和app.get(name)就是你想的那样,set()为设置 name 的值设为 value,get()为获取设置项 name 的值。如俺app.js的图片16行中的一句“app.set('port', process.env.PORT || 3000)”就是设置项目的port,在下面使用http.createServer时就可以使用app.get('port')来获取,只是俺偷懒没用来着[IMG=0,middle]http://images.cnitblog.com/i/159097/201402/280809248922088.gif[/IMG];[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     了解app.engine()方法之前先看看express应用的安装命令:“express -e nodejs-product”,其中的 -e 和 -J 我们一开始已经提到,表示ejs和jade模板。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     如果想把模板后缀改成“.html”时就会用到app.engine方法,来重新设置模板文件的扩展名,比如想用ejs模板引擎来处理“.html”后缀的文件:app.engine('.html', require('ejs').__express);[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     app.engine(ext, callback) 注册模板引擎的 callback 用来处理ext扩展名的文件。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]   PS:[FACE=幼圆][SIZE=16px]__express[/FACE][/SIZE]不用去care,其实就是ejs模块的一个公共属性,表示要渲染的文件扩展名。
[/FACE][/SIZE][/P][P] [/P][P][FACE=幼圆][SIZE=16px]     app.use([path], function) 使用中间件 function,可选参数path默认为"/"。使用 app.use() “定义的”中间件的顺序非常重要,它们将会顺序执行,use的先后顺序决定了中间件的优先级(经常有搞错顺序的时候);[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px] [/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     最后介绍个很有用的express API:[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     app.render(view, [options], callback) 渲染 view, callback 用来处理返回的渲染后的字符串。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     [/FACE][/SIZE][/P][P][BGCOLOR=rgb(204, 255, 255)][b][FACE=幼圆][SIZE=18px]  路由实战:  [/BGCOLOR][/FACE][/b][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     路径代码应该是项目中最本机的一部分了。express中创建一个或者一套新的handle非常简单,先看看express现有的,一会儿我们创建俩个实际的规则。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     [IMG=0,middle]http://images.cnitblog.com/i/159097/201402/282058558455441.png[/IMG]
[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     变量 routes 和 user 都是刚才require的模块,他们各自exports了index方法和list方法;其中[FACE=幼圆][SIZE=16px]Response[/FACE][/SIZE].render()表示渲染view,同时传进对应的数据,Response.send()为发送一个响应;在设置路由时index和list方法作为回调函数最终执行。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]  
[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]   [FACE=幼圆][SIZE=16px]流程[/FACE][/SIZE]大概[FACE=幼圆][SIZE=16px]了解啦,俺[/FACE][/SIZE]们也就实际搞一把,最easy的一种方式,简单俩步:
[/FACE][/SIZE][/P][ol][li][FACE=幼圆][SIZE=16px][FACE=幼圆][SIZE=16px]第一种方式就是在当前的routes/index.js或者routes/test.js中加几行代码如下
[/FACE][/SIZE][/FACE][/SIZE] [P]exports.test = [COLOR=rgb(0, 0, 255)]function[/COLOR][COLOR=rgb(0, 0, 0)](req, res){  res.send('test welcome.');[/COLOR][COLOR=rgb(0, 0, 0)]};[/COLOR][/P][P] [/P][/li][li]在app.js文件设置路由那块加上app.get('/test', routes.test);[/li][/ol][P][FACE=幼圆][SIZE=16px]   第二种方式就是多了两步,先新建一个模块如test.js文件,输出然后exports对应的方法;在app.js中require这个模块,再加一行设置路由即完成了。
[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px] [/FACE][/SIZE][/P][P][b][FACE=幼圆][BGCOLOR=rgb(204, 255, 255)][SIZE=18px]  快速炫起来,集成Bootstrap:  [/FACE][/BGCOLOR][/SIZE][/b][/P][P][FACE=幼圆][SIZE=16px]     JS工程师使用Nodejs上手还是以快速搭建网站为主,所以才会介绍Express,那么为了让网站更快的体面起来,集成使用Bootstrap就是上佳选择,非常喜欢其响应式布局和整体系的脚手架。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     PS:因为Bootstrap的JS插件都依赖jQeury,所以jQuery也一并引入了。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px] [/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]   前文已经说到了,静态文件都放在public文件夹中,切文件夹内已经帮我们把类目都分好了,images、 javascripts、 stylesheets。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]   分别引入bootstrap.min.css文件至stylesheets目录下;jquery-1.x.x.min.js和bootstrap.min.js放到javascripts文件夹下。
[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]   然后俺们修改view/index.html把文件引入使用即可,下面放出俺在bootstrap demo的基础改的index.html,大家随意拿去使用和修改。
[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px][FACE=幼圆][SIZE=16px]  [/FACE][/SIZE][/FACE][/SIZE][/P][P]




[CODE]<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title><%= title %></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
    <!--<link href="/stylesheets/base.css" rel="stylesheet">-->
    <!--<link href="/stylesheets/common.css" rel="stylesheet">-->
    <!--<link href="/stylesheets/page.css" rel="stylesheet">-->
    <!-- 建议在项目中把CSS分好level,好维护和管理 -->
    <style>
        html, body { overflow-x: hidden;}
        body { padding-top: 70px;background:#f1f1f1; }
        footer { padding:20px 0 10px;text-align:center;font-weight:bold;border-top:1px solid #ddd;margin-top:30px;}
        .header-navbar-style {
            filter:alpha(opacity=90);
            -moz-opacity:0.9;
            -khtml-opacity: 0.9;
            opacity: 0.9;
            background: linear-gradient(45deg, rgb(60, 8, 34) 0%, rgb(49, 79, 117) 100%);
            border:1px solid #aaa;
            font-size:16px;
        }
        .beige {background:beige;}
        .bisque {background:bisque;}
        .darkseagreen{ background:darkseagreen;}
    </style>
  </head>
  <body>
    <div class="navbar navbar-fixed-top header-navbar-style navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">Product</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/">Home</a></li>
            <li class=""><a href="/contactus">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu beige">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
            <li class=""><a href="/faq">FAQ</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->
   
    <!-- 以上位置建议创建个header.html维护起来 -->
   
    <style>
      @media screen and (max-width: 767px) {
        .row-offcanvas { position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
      }
      .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ }
      .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ }
      .row-offcanvas-right.active { right: 50%; /* 6 columns */ }
      .row-offcanvas-left.active { left: 50%; /* 6 columns */ }
      .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } }
    </style>

    <div class="container">
      <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron bisque">
            <h1>Welcome <%= title %>!</h1>
            <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
          </div>
          <div class="row">
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
            </div><!--/span-->
          </div><!--/row-->
        </div><!--/span-->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <div class="list-group">
            <a target="_blank" href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
          </div>
        </div><!--/span-->
      </div><!--/row-->
    </div><!--/.container-->
   
    <!-- 从header.html之后到此可分为page层 -->
   
    <footer class="darkseagreen">
        <p>Copyright © 2014. Designed by nieweidong.</p>
    </footer>
    <script src="/javascripts/jquery-1.11.0.min.js"></script>
    <script src="/javascripts/bootstrap.min.js"></script>
    <script>
      $(document).ready(function() {
        $('[data-toggle=offcanvas]').click(function() {
          $('.row-offcanvas').toggleClass('active');
        });
      });
    </script>
  </body>
</html>[/CODE]







   如果样式有问题请检查下bootstrap的路径是否正确引入。[/P][P]   启动项目之后觉得 高大上 很简单,有木有!![/P][P][FACE=幼圆][SIZE=16px] 
[/FACE][/SIZE][/P][P][BGCOLOR=rgb(204, 255, 255)][b][FACE=幼圆][SIZE=18px]  FAQ&总结:  [/BGCOLOR][/FACE][/b][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     俺们的express项目暂时,且express也并没有涉及到任何数据库,这个事情需要第三方node模块,比如mysql或者MongoDB,后续俺会有一章单独介绍这块。[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]   express也不是Node中web框架的唯一选择,不过由于其文档较全,所以才以其为示例为大家介绍,其原理和实现其实细化之后并不复杂,也希望更多的JS工程师折腾出自己的Web框架。
[/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]     [/FACE][/SIZE][/P][P][FACE=幼圆][SIZE=16px]   尼玛还有几个小时就到3月了,一月一篇可是俺的目标,所以全面的demo俺之后再补上哈。
[/FACE][/SIZE][/P][P] [/P][P] [/P][P][COLOR=rgb(0, 0, 0)][FACE=幼圆][SIZE=16px]     [b]如果觉得这文章也算用心,请劳驾点右下角的推荐。[/b][/COLOR][/FACE][/SIZE][/P][P][COLOR=rgb(0, 0, 0)][FACE=幼圆][SIZE=16px]   最后,有 北京&上海 的朋友想换工作的,百度移动云 真诚无比的期待【有技术、毁底线、无节操、大聪明、多勤奋】的你...(JD和我邮箱在页面右上角)[/COLOR][/FACE][/SIZE][/P][P][COLOR=rgb(0, 0, 0)][FACE=幼圆][SIZE=16px] [/COLOR][/FACE][/SIZE][/P][P][COLOR=rgb(0, 0, 0)][SIZE=18px][b][FACE=幼圆][BGCOLOR=rgb(204, 255, 255)]  参考资料:  [/COLOR][/SIZE][/b][/FACE][/BGCOLOR][/P][P][COLOR=rgb(0, 0, 0)][FACE=幼圆][SIZE=16px]  [URL=http://express.jsbin.cn/api.html]http://express.jsbin.cn/api.html[/URL][/COLOR][/FACE][/SIZE][/P][P][COLOR=rgb(0, 0, 0)][FACE=幼圆][SIZE=16px]  [URL=http://www.embeddedjs.com/]http://www.embeddedjs.com[/URL][/COLOR][/FACE][/SIZE][/P][P][COLOR=rgb(0, 0, 0)][FACE=幼圆][SIZE=16px]
[/COLOR][/FACE][/SIZE][/P][P][COLOR=rgb(0, 0, 0)][FACE=幼圆][SIZE=16px]from :http://www.cnblogs.com/Darren_code/p/node_express.html
[/COLOR][/FACE][/SIZE][/P]a href=
2楼
这种route方式真是弱爆了,耦合度髙又不方便使用,真难为这些js神棍,明知道语言自身有弱点,不是因地制宜选择工具,而是洗脑灌输环境顺从工具的怪象

电脑版 Page created in 0.1382 seconds with 4 queries.