Node+Express搭建个人博客（纯后端）-浅析Express脚手架（三）

既然我们的个人博客项目使用的是Express框架，那我们在项目初始化之前，先从【初始化一个Express项目】说起，分析下默认的Express脚手架。

本文篇幅稍稍有点长，超出了计划，请耐心阅读【手动捂脸】。

初始化一个Express项目

在Express框架的官方文档中，是通过生成器工具express-generator快速生成了一个Express应用，相关步骤如下：

安装Express生成器

npm install -g express-generator

初始化一个Express应用

express express-app

如此便生成了一个名为express-app的Express应用。

目录结构概览

首先来看一下这个Express应用的目录结构，目录结构如下：

express-app
│  app.js
│  package.json
│  
├─bin
│      www
│      
├─public
│  ├─images
│  ├─javascripts
│  └─stylesheets
│          style.css
│          
├─routes
│      index.js
│      users.js
│      
└─views
        error.jade
        index.jade
        layout.jade

目录结构简介

• app.js应用的初始化文件，包括引入应用程序的基础依赖项、设置视图即view的引擎目录以及模板、设置静态资源路径、配置通用的中间件、引入路由和一些错误处理中间件等。
• package.json应用的配置文件，文件内包含程序的基础信息、启动脚本和依赖包等。
• bin/www应用的启动文件，文件内包含引用要启动的应用、设置应用监听的端口和启动http服务等。
• public/**应用的静态资源文件目录，该目录下的文件资源不需要经过文件映射就可以直接访问。
• routes/**应用的路由文件，这些路由文件中设置的接口最终会以指定的HTTP请求方式暴露给用户，并在用户请求之后将结果返回。
• views应用的视图文件，在app.js中设置好视图引擎和模板之后，该目录即为应用视图的根目录，然后路由文件就会根据app.js中的设置加载并渲染该目录下的视图文件。

应用启动

首先，先要安装应用的依赖包。

npm install

然后，启动程序。

node bin/www

查看bin/wwww文件，拷打应用默认监听的端口是3000，然后访问localhost:3000,看到如下界面：

看到上面的页面，说明我们的应用启动成功，并且成功地访问到了视图引擎目录view中的页面。

文件详解

app.js文件详解

以下是初始化的Express应用中的已经做了一些注释说明后的app.js文件中的代码：

// 引入依赖包
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

// 引入路由文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

// 创建应用实例
var app = express();

// 设置视图目录和模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// 以下皆为注册中间件
// 内置中间件
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 路由中间件
app.use('/', indexRouter);
app.use('/users', usersRouter);

// 404错误处理中间件
app.use(function(req, res, next) {
  next(createError(404));
});

// 错误处理中间件
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

// 导出app实例对象
module.exports = app;

根据代码中的注释，我们可以看到，app.js的作用主要是初始化Express应用的一些设置，包括引入依赖包、引入路由文件、注册各类中间件的一些操作。

www文件详解

以下是添加了注释后的应用启动文件bin/www中的代码：

#!/usr/bin/env node

//  引入依赖
var app = require('../app');
var debug = require('debug')('express:server');
var http = require('http');

// 设置应用监听的端口
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

// 创建http服务器
var server = http.createServer(app);

// 监听端口
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

// 格式化应用监听的端口
function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

// http的错误监听函数
function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

// http端口监听函数
function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

bin/wwww文件的内容就很简单了，就是创建HTTP服务，监听端口和错误。

router/**详解

router/**包含了路由文件，每个路由文件中包含了不同HTTP请求对用的路由以及逻辑处理函数，此处以router/index.js文件为例，以下是index.js文件的代码：

// 引入依赖包
var express = require('express');

// 创建路由对象
var router = express.Router();

// 获取首页
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

路由文件主要相应相应的HTTP请求，然后执行函数进行相应的逻辑处理，以上代码，是对GET请求的响应，然后渲染view目录下的index.jade页面（在app.js中设置了视图目录和模板引擎），同时传递数据{title: 'Express'}给index.jade页面。

view/**详解

view/**主要存放应用的页面，以view/index.jade为例，代码如下：

extends layout

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

页面文件主要是接收路由文件传递的数据，然后生成渲染后的页面给客户端，在上一步，传递了数据{title: 'Express'}给index.jade页面，所以真实的页面应该是如下的代码：

extends layout

block content
  h1= 'Express'
  p Welcome to Express

然后客户端就看到了如下的页面：

改进

缺点分析

在实际开发中，我们项目的路由文件的数目会因项目复杂度而不同，当项目足够复杂时，我们需要引入的路由文件和需要注册的路由就会更多，同时除了应用本身的404和错误处理中间件之外，还可能根据实际需求新增我们自定义的中间件，如果这些初始化的代码都放置于app.js中，无疑，app.js文件会越来越大越来越臃肿，这并不是一个很好的选择。同时路由和路由对应的处理函数在一个文件中，这样的处理不够优雅，不便于维护，所以进行路由分离显得很有必要性。当然，这个应用只是生成器工具初始化的一个简单脚手架，并不是最终的样子。

MVC框架简介

MVC框架是一个经典的架构模式，其中MVC分别指的是：

• M: Model(模型，包含数据和数据处理方法)
• V: View(视图，提供视图，即页面)
• Controller: (控制层，负责逻辑处理)

对应的，在Node中的MVC框架，处理流程应该是以下步骤：

1. 服务端收到客户端的请求
2. 路由层开始处理服务端接收到的请求，匹配相应的路由
3. 匹配到相应的路由之后调用对应的controller（即对应的逻辑处理函数）
4. controller接收到请求之后，向model层取用数据
5. model层接收到controller层取用数据的请求之后，将数据返回给controller层
6. controller层收到数据之后进行相应的逻辑处理之后，将数据返回给view层
7. view层收到controller层返回的数据之后，根据相应的视图模板和数据组装之后，返回一个渲染过的页面
8. 服务端将上一步的结果返回给客户端

注：在以上的步骤中，可能会存在执行中间件的情况。

在对Express框架初始化的应用缺点和MVC有了简单了解之后，接下来就是根据以上两步的分析改进这个简单的脚手架应用了。

启动文件和初始化文件合二为一

在Express的官方文档中关于app.listen()方法的介绍中，提到：

Binds and listens for connections on the specified host and port. This method is identical to Node’s http.Server.listen().

所以我们完全可以使用app.listen()方法替代bin/www中的代码逻辑，一行代码替代一个应用的启动文件，何乐而不为呢。

既然要合二为一，我们将程序的启动文件和初始化文件都合并到app.js中，这样的话，就不要要导出app对象给其他文件引入使用了，所以，首先删除app.js文件中的module.exports = app;,然后，添加一行代码即可:

app.listen(3000)

修改app.js之后，访问localhost:3000,依然可以正常访问到上面的页面，说明修改无误。

抽离路由层

参照MVC框架，路由层的工作是根据匹配客户端的请求路径匹配相应的路由然后调用相应的controller，以下代码为示例模板：

// 访问首页
app.get('/', IndexController.index)

在该小节，我们仅仅抽离出路由层，一步一步的来。

首先，在项目根目录下创建route.js文件,该文件中的代码如下：

module.exports = function (app) {
  app.get('/', function(req, res, next) {
    console.log('new index')
    res.render('index', { title: 'Express' });
  })
}

然后在app.js中添加如下代码：

var routes = require('./routes')
routes(app)

注：routes(app)需要在创建应用实例之后，即var app = express()之后。

同时，删除app.js中的// app.use('/', indexRouter)。

最后，访问localhost:3000,依然可以正常访问到上面的页面，并且在控制台看到输出的new index,说明修改无误。

抽离controller层

首先，在根目录下创建controller/index.js，在index.js中编写如下代码：

module.exports = {
  index (req, res, next) {
    console.log('controller')
    res.render('index', { title: 'Express' });
  }
}

然后，将routes.js修改为如下代码：

var IndexController = require('./controller/index')
module.exports = function (app) {
  app.get('/', IndexController.index)
}

最后，访问localhost:3000,依然可以正常访问到上面的页面，并且在控制台看到输出的controller,说明修改无误。

抽离middleware层

首先，在根目录下创建middlewares/not-find.js，在文件中编写以下代码：

var createError = require('http-errors');
module.exports = function(req, res, next) {
  next(createError(404));
}

然后在app.js中，引入相关中间件：

var notFind = require('./middlewares/not-find')

然后修改404错误处理中间件为：

// 404错误处理中间件
app.use(notFind);

最后，访问localhost:3000/asasasasasa,这是一个不存在的路径，应该会出现404页面，发现可以正常访问到404页面，说明修改无误。

其他自定义中间件的处理，同理。

小结

至此，我们对生成器工具express-generator生成的Express应用的改造完毕，并且接下来初始化自己的应用可以不再使用express-generator，可以根据自己的需求，参照以上修改，进行项目初始化搭建。

下面附上项目的github地址：

项目地址

我的简书：

毛浩先生的简书博客