编写第一个Express应用

生成应用程序目录

之前已介绍这里不再提。

程序目录介绍

  • app.js  主程序

  • node_modules   依赖模块包

  • public   静态网目录

  • views   动态页目录

  • bin   启动程序

  • package.json   npm命令需要的描述信息

  • routes    路由器处理器目录

启动

运行 npm start 启动程序,为什么能启动呢?你可以打开package.

  "scripts": {
    "start": "node ./bin/www"
  }

其实是运行的 node ./bin/www this

bin/www 启动程序

那么我们就知道了,启动程序是 bin/www,下面是对这个程序的注释说明。

var debug = require('debug')('myapp');

// 加载主程序
var app = require('../app');

// 如果不指定服务器监听端口号默认就是 3000
app.set('port', process.env.PORT || 3000);

//  启动程序,开始监听客户端请求。
var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});

那么我们可以通过下面的命令指定一个端口号

$ PORT=8080 npm start

这时候,浏览器通过 localhost:8080 能访问到页面。

app.js 主程序

下面对主程序关键代码进行注释说明。

// 创建应用程序
var app = express();

// 设置动态页目录
app.set('views', path.join(__dirname, 'views'));

// 设置动态页模版引擎
app.set('view engine', 'jade');

// 中间件加载,这里不多说,之后章节会详细介绍
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());

// 指定静态页目录
app.use(express.static(path.join(__dirname, 'public')));

// 加载路由处理器
app.use('/', routes);
app.use('/users', users);

// 如果有任何错误都会设置成 404错误
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// 如果环境设置成 开发模式,那么会打印出详细的错误信息
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// 生产模式下,不会泄漏error
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}  // 不会泄漏error
    });
});

我们可以在public 目录下创建一个 test.html 文件,内容任意,然后通过 localhost:3000/test.html 即可访问到。

路由

routes 目录下是路由处理器。

下面对  routes/index.js  做注释说明。

var express = require('express');

// 创建一个路由器
var router = express.Router();

// 为路由器添加路由处理器,也就是为 `/` 请求路由加入处理器
// 当有人访问时会执行这个函数。
// req 是请求对象,res是响应对象。
router.get('/', function(req, res) {

  // 调用响应对象的render返回给客户端一个响应结果
  // 这个响应结果是由动态页面 views/index.jade 生成的。
  res.render('index', { title: 'Express' });
});

module.exports = router;

views/index.jade 动态模版

extends layout

block content
  h1= title
  p Welcome to #{title}

你可能一头雾水,那也无所谓,它最终还是会生成如下的结果,并返回给请求者(浏览器):

<!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
  <h1>Express</h1>
  <p>Welcome to Express</p>
</body>
</html>

如果我们这样修改,res.render(“index”,{title:”Express”}) 的title参数和动态页面的关系,如果我们 这样写 res.render(“index”,{title:”Hello”,body:”Node.js”})  ,然后界面修改成

extends layout

block content
  h1= title
  p Welcome to #{title+body}

运行结果如何?你可以运行一下。

本节内容不多,主要是对express给我们生成的这个demo进行注释说明,从而对express有个初步了解。