从零开始学习nodejs（三）深度剖析nodejs+express项目的各个文件以及目录结构

系列文章github项目地址（最终版）：https://github.com/zliuyang1287/MyBlog

上一篇从零开始学习nodejs（二）nodejs+express创建第一个项目 我们已经利用express创建了一个项目，并成功运行起来了，但是并没有卵用，不解其理，不知其妙。
app.js
服务的入口文件，是整个项目的核心，一切开发都要基于此，我的理解是好比盖楼的地基，在此基础上去添加东西，如果地基崩了，整个项目也就完了。

// 以下均是根据个人理解做出注释，欢迎分享交流

// 次数主要是用于引入所需依赖，包括安装在modules下的依赖，也包括自己写的模块
// 安装的依赖
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');

// 创建一个express实例
var app = express();

// 设置模板 其中__dirname为全局变量，表示当前正在执行的脚本所在的目录
// 设置模版文件所在路径，也就是试图文件，都放在views层
app.set('views', path.join(__dirname, 'views'));
// 设置模版引擎，比如jade、ejs
app.set('view engine', 'jade');

// 加载一系列中间件，来自上面加载的不同模块
// 日志中间件
app.use(logger('dev'));
// json解析中间件
app.use(express.json());
// 解析urlencoded请求体的中间件
app.use(express.urlencoded({ extended: false }));
// cookie解析中间件
app.use(cookieParser());
// 其实这些不用记住，比如下面的参照20行就知道这是把public设置为静态文件夹
app.use(express.static(path.join(__dirname, 'public')));

// 设置路由，用于不同的页面之间的切换判断
app.use('/', indexRouter);
app.use('/users', usersRouter);

// 捕捉404错误信息并给出404提示，可以自定义提示信息
app.use(function(req, res, next) {
  next(createError(404));
});

// 异常或错误信息处理，将错误信息渲染error模板并显示到浏览器中
app.use(function(err, req, res, next) {
  // 设置开发环境下将错误信息直接抛出并扔出来渲染到错误页面
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // 渲染错误信息页面
  res.status(err.status || 500);
  res.render('error');
});

// 将配置好的express实例暴露出来供其他的系统调用
module.exports = app;

rotues/index.js
路由配置，用于页面的跳转，重定向，路由检验等功能

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

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

module.exports = router;

www
启动入口，执行npm start其实就是执行的这个文件。

#!/usr/bin/env node

// 加载依赖
var app = require('../app');
var debug = require('debug')('mytest:server');
var http = require('http');

// 设置端口号
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

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

// 启动http server监听
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
// 可以在这里给个提示，表示启动成功
console.log("Server running at http://127.0.0.1:3000");

//到这里就可以了，下面的可以忽略
// 端口标准化处理，上面第9行用到
function normalizePort(val) {
  var port = parseInt(val, 10);
  if (isNaN(port)) {
    return val;
  }
  if (port >= 0) {
    return port;
  }
  return false;
}

// 下面两个用来处理http server的监听，当发生错误或请求正常时分别执行对应的方法
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;
  }
}

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

public 和 views就不解释了，既然在看这篇文章肯定就懂了，存放静态文件和要渲染的文件，比如最简单的html界面
总结
既然已经了解了每个文件的结构和作用，那就大胆猜测一下他的工作流程。当我们输入npm start命令后，执行bin下的www文件，启动http server监听，当我们在浏览器输入http://127.0.0.1:3000后，server接收到请求，通过app.js根据输入的url找到对应的路由文件，路由文件再匹配对应的处理方法，这里就是渲染了index.jade文件，最后再把执行结果返回到浏览器。

既然已经大体了解了他的流程，那就写个页面试一试。

梳理一下写一个页面都需要什么。首先得有请求路径路由，有了路由就要去找对应路由模块。为了方便我们直接在index.js下新建一个路由规则。有了请求路由就要去找要渲染的页面，所以还需要一个页面。既然分析好了就开始准备。
登录界面编写
1、index.js下 新增一个路由规则

var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
//新增打开登录界面的路由
router.get('/login', function(req, res, next) {
  res.render('login');
});
module.exports = router;

2、新建login.ejs页面
为了简便这里直接在views新建一个ejs文件，但要记得修改一些模版引擎为ejs，同时新建项目的时候要安装ejs

npm install ejs

//app.js修改模版引擎
app.set('view engine', 'ejs');

新建登录页面

<html>
<head>
    <title>login</title>
</head>
<body>
    <div>
        <form method="get">
            用户名:<input type="text" id="username" name="username"><br>
            密  码:<input type="password" id="password" name="password"><br>
            <input type="submit" value="login" />
        </form>
    </div>
</body>
</html>

一切准备就绪，重启项目试一试，输入http://127.0.0.1:3000/login

正如所预期的，看来流程正确