express的初体验 Web

目录此文重点介绍Express3.0的开发框架，其中还会涉及到Mongoose,Ejs,Bootstrap等相关内容。
Express已经升级到4.x，请同时参考文章，Node.js开发框架Express4.x

建立工程
目录结构
Express3.0配置文件
Ejs模板使用
Bootstrap界面框架
路由功能
Session使用
页面提示
页面访问控制

开发环境： Win7旗舰版 64bit
MonogoDB: v2.4.3
nodejs: v0.10.5, npm 1.2.19
1. 建立工程
进入工程目录

cd D:\workspace\project

全局安装express，express作为命令被安装到了系统中

npm install -g express

查看express版本

express -V 3.2.2

使用express命令创建工程，并支持ejs

D:\workspace\project>express -e nodejs-demo install dependencies: $ cd nodejs-demo && npm install run the app: $ node app

根据提示，下载依赖包

cd nodejs-demo && npm install

模板项目建立成功，启动模板项目。

D:\workspace\project\nodejs-demo>node app.js

本地的3000端口被打开，通过浏览器访问: localhost:3000
通过node启动程序，每次代码修改都需要重新启动。有一个工具supervisor，每次修改代码后会自动重启，会我们开发省很多的时间。

npm install supervisor

开启再启动服务

D:\workspace\project\nodejs-demo>supervisor app.js

2. 目录结构

node_modules, 存放所有的项目依赖库。(每个项目管理自己的依赖，与Maven,Gradle等不同)
package.json，项目依赖配置及开发者信息
app.js，程序启动文件
public，静态文件(css,js,img)
routes，路由文件(MVC中的C,controller)
Views，页面文件(Ejs模板)

3.Express3.0配置文件
打开app.js文件

/** * 模块依赖 */ var express = require('express') , routes = require('./routes') , user = require('./routes/user') , http = require('http') , path = require('path'); var app = express(); //环境变量 app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); // 开发模式 if ('development' == app.get('env')) { app.use(express.errorHandler()); }// 路径解析 app.get('/', routes.index); app.get('/users', user.list); // 启动及端口 http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });

4. Ejs模板使用
让ejs模板文件，使用扩展名为html的文件。
修改：app.js

app.engine('.html', ejs.__express); app.set('view engine', 'html'); // app.set('view engine', 'ejs');

修改后，ejs变量没有定义，supervisor的程序会一直报错

ReferenceError: ejs is not defined at Object. (D:\workspace\project\nodejs-demo\app.js:17:21) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Function.Module.runMain (module.js:497:10) at startup (node.js:119:16) at node.js:901:3 DEBUG: Program node app.js exited with code 8

在app.js中增加ejs变量

var express = require('express') , routes = require('./routes') , user = require('./routes/user') , http = require('http') , path = require('path') , ejs = require('ejs');

访问localhost:3000，程序报错

Error: Failed to lookup view "index"

【express的初体验】重命名：views/indes.ejs 为 views/index.html
访问localhost:3000正确
5. 增加Bootstrap界面框架
其实就是把js,css文件复制到项目中对应该的目录里。包括4个文件：
复制到public/stylesheets目录

bootstrap.min.css bootstrap-responsive.min.css

复制到public/javascripts目录

bootstrap.min.js jquery-1.9.1.min.js

接下来，我们把index.html页面切分成3个部分：header.html, index.html, footer.html
header.html, 为html页面的头部区域
index.html, 为内容显示区域
footer.html，为页面底部区域
header.html

- 锐客网

index.html

Welcome to

注：express3.0时，ejs嵌入其他页面时使用include，express2.x用法不一样。
footer.html

访问localhost:3000正确。
我们已经成功的使用了EJS模板的功能，把公共的头部和底部从页面中分离出来了。
并已经引入了bootstrap界面框架，后面讲到“登陆界面”的时候，就会看到bootstrap界面效果了。
6. 路由功能
我们设计一下用户登陆业务需求。
访问路径：/，页面：index.html，不需要登陆，可以直接访问。
访问路径：/home，页面：home.html，必须用户登陆后，才可以访问。
访问路径：/login，页面：login.html，登陆页面，用户名密码输入正确，自动跳转到home.html
访问路径：/logout，页面：无，退出登陆后，自动回到index.html页面
打开app.js文件，在增加路由配置

app.get('/', routes.index); app.get('/login', routes.login); app.post('/login', routes.doLogin); app.get('/logout', routes.logout); app.get('/home', routes.home);

注：get为get请求，post为post请求，all为所有针对这个路径的请求
我们打开routes/index.js文件，增加对应的方法。

exports.index = function(req, res){ res.render('index', { title: 'Index' }); }; exports.login = function(req, res){ res.render('login', { title: '用户登陆'}); }; exports.doLogin = function(req, res){ var user={ username:'admin', password:'admin' } if(req.body.username===user.username && req.body.password===user.password){ res.redirect('/home'); } res.redirect('/login'); }; exports.logout = function(req, res){ res.redirect('/'); }; exports.home = function(req, res){ var user={ username:'admin', password:'admin' } res.render('home', { title: 'Home',user: user}); };

创建views/login.html和views/home.html两个文件
login.html