如何利用express新建项目（下）

如何利用express新建项目（下）

摘要

上篇文章讲解了如何利用express新建项目，这篇文章将对新建好的项目文件做详细说明。

工程目录说明

工程目录如下：

• public:该文件夹下还有三个文件夹images,javascripts,stylesheets，含义很明显了，就不说了吧。
• routes:路由规则，即Web的控制器。
• views：视图，但是这种视图并不是传统的html文件，而是html的引擎模板。
• app.js：程序入口文件。
• package.json：存储着工程的信息及模块依赖，在 dependencies 中添加依赖的模块。
• bin:存放可执行文件，里面只有一个www的文件，为启动文件。
• node_modules：存放 package.json 中安装的模块，当你在 package.json 添加依赖的模块并安装后，存放在这个文件夹下

文件详细说明

（一）app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
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
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

这里我们通过require()加载了express、path 等模块,以及 routes 文件夹下的index. js和 users.js 路由文件。 下面来讲解每行代码的含义。

(1) var app = express()
//生成一个express实例 app。

(2)app.set('views', path.join(__dirname, 'views’))
//设置 views 文件夹为存放视图文件的目录, 即存放模板文件的地方,__dirname 为全局变量,存储当前正在执行的脚本所在的目录。

(3)app.set('view engine', 'ejs’)
//设置视图模板引擎为 ejs。

(4)app.use(favicon(__dirname + '/public/favicon.ico’))
//设置/public/favicon.ico为favicon图标。

(5)app.use(logger('dev’))
//加载日志中间件。

(6)app.use(bodyParser.json())
//加载解析json的中间件。

(7)app.use(bodyParser.urlencoded({ extended: false }))
//加载解析urlencoded请求体的中间件。

(8)app.use(cookieParser())
//加载解析cookie的中间件。

(9)app.use(express.static(path.join(__dirname, 'public')))
//设置public文件夹为存放静态文件的目录。

(10)app.use('/', routes);
app.use('/users', users);
//路由控制器。

(11)
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});
//捕获404错误，并转发到错误处理器。

(12)
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模版并显示到浏览器中。

(13)
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
//生产环境下的错误处理器，将错误信息渲染error模版并显示到浏览器中。

(14)module.exports = app 
//导出app实例供其他模块调用。

（二）bin/www 文件

    #!/usr/bin/env node
var debug = require('debug')('blog');
var app = require('../app');

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

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});

代码说明：

(1)#!/usr/bin/env node
//表明是 node 可执行文件。

(2)var debug = require('debug')('blog’)
//引入debug模块，打印调试日志。

(3)var app = require('../app’)
//引入我们上面导出的app实例。

(4)app.set('port', process.env.PORT || 3000)
//设置端口号。

(5)
var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});
//启动工程并监听3000端口，成功后打印 Express server listening on port 3000。

（三）routes/index.js 文件：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

生成一个路由实例用来捕获访问主页的GET请求，导出这个路由并在app.js中通过app.use(‘/’, routes); 加载。这样，当访问主页时，就会调用res.render(‘index’, { title: ‘Express’ });渲染views/index.ejs模版并显示到浏览器中。

（四）views/index.ejs 文件：

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

在渲染模板时我们传入了一个变量 title 值为 express 字符串，模板引擎会将所有 <%= title %> 替换为 express ，然后将渲染后生成的html显示到浏览器中，如上篇文章所示。