Node.js利用Express框架搭建小型网站

来源:互联网 发布:mac打开cmd 编辑:程序博客网 时间:2024/06/05 15:08

http://blog.csdn.net/kkkkkxiaofei/article/details/31393863


一、Express环境搭建

 

    Express是Node.js下的一个轻量级Web框架,有了它我们就可以轻松的架构出一个个人小型网站,Express框架安装步骤如下:

1.进入npm目录,执行 npm install express

    这里我有必要说明一下:Expres框架现在已经是4.X版本,在4.X版本中是将命令行工具与模块分开的,我个人不习惯这样,所以我继续安装3.X版本(express@3)。安装成功后,会在node_modules文件夹下出现express文件夹,这样express就成为Node.js的一个模块了。在我安装的版本中,express的当前文件夹下会出现一个.bin文件夹,这里就是express的命令工具,现在我们创建一个新的Express项目,步骤如下:

2.cd 进入.bin文件夹目录,执行express myFirstWeb,则会在.bin文件夹下出现一个新的项目工程"myFirstWeb".

3.在cd进入myFirstWeb,执行npm install,安装myFirstWeb所需要的依赖模块。

这样一个新的Web网站就搭建起来了。

 

二、Express项目文件夹结构及其含义

 

1.myFirstWeb文件夹目录结构

 

2.myFirstWeb文件夹含义

node_modules:

    Web项目的模块管理,即你有任何的模块都有应该封装后放在此处,如连接数据库模块。

public:

    该文件夹下还有三个文件夹images,javascripts,stylesheets,含义很明显了,就不说了吧。

routes:

    路由规则,即Web的控制器,这个稍后会介绍。

views:

    视图,但是这种视图并不是传统的html文件,而是html的引擎模板,这里默认的模板是jade文件,可以认为是前台UI。

app.js:

    myFirstWeb的入口,packege.json里有定义 "start": "node app.js",这里很有必要把app.js代码解读一遍:


 

[javascript] view plain copy
 print?
  1. /** 
  2.  * Module dependencies. 
  3.  */  
  4.   
  5. var express = require('express');  
  6. var routes = require('./routes');  
  7. var user = require('./routes/user');  
  8. var http = require('http');  
  9. var path = require('path');  
  10.   
  11. var app = express();  
  12.   
  13. // all environments  
  14. app.set('port', process.env.PORT || 3000);  
  15. app.set('views', path.join(__dirname, 'views'));  
  16. app.set('view engine''jade');  
  17. app.use(express.favicon());  
  18. app.use(express.logger('dev'));  
  19. app.use(express.json());  
  20. app.use(express.urlencoded());  
  21. app.use(express.methodOverride());  
  22. app.use(app.router);  
  23. app.use(express.static(path.join(__dirname, 'public')));  
  24.   
  25. // development only  
  26. if ('development' == app.get('env')) {  
  27.   app.use(express.errorHandler());  
  28. }  
  29.   
  30. app.get('/', routes.index);  
  31. app.get('/users', user.list);  
  32.   
  33. http.createServer(app).listen(app.get('port'), function(){  
  34.   console.log('Express server listening on port ' + app.get('port'));  
  35. });  


 此代码中用express模块生成了app对象,app就是此次架设的web实例.

//设定端口

app.set('port', process.env.PORT || 3000);

//设定视图路径

app.set('views', path.join(__dirname, 'views'));

//设定视图引擎模板,还可以设定其他模板,后续介绍

app.set('view engine', 'jade');

//设定路由,该路由的处理交给index.js处理

app.use(app.router);

//设定静态文件路径

app.use(express.static(path.join(__dirname, 'public')));

//若get请求的url为当前路径,则交给路由index入口中的对应函数处理

app.get('/', routes.index);

 

package.json:

    项目的参数信息。

 

三、执行myFristWeb

 

1.cd C:\Program Files\nodejs\node_modules\.bin\myFirstWeb

2.node app

3.进入http://localhost:3000/

    不出意外则会看到Welcome to Express的字样,下面来解析一下整个运行过程吧:

    node app命令启动服务,监听3000端口,在浏览器输入http://localhost:3000/时,客户端向服务器发送了url为'/'的get请求,服务器的事件请求是交给router模块的,并且在app.get('/',routes.index)中设定了该url请求是由入口index来处理的,index.js内容如下:

[javascript] view plain copy
 print?
  1. /* 
  2.  * GET home page. 
  3.  */  
  4.   
  5. exports.index = function(req, res){  
  6.   res.render('index', { title: 'Express' });  
  7. };  


    get请求的处理函数所做的事情就是为浏览器返回名为index的前台页面(此处调用的是/Views/index.jade),由于index.jade中有一个title参数,所以需要传递参数title:'Express',这样就会在给客户端返回index.jade时填充变量,生成标准的index.html给浏览器,ps:模板引擎的好处之一就是替换变量,很方便吧。

    至此,一次交互过程结束,下篇将一步步把这个myFirstWeb搭建的更加完美。

 

 

 


原创粉丝点击