Express项目实践_express 项目

一 建一个空目录

二 在地址栏删除文字，输入cmd 进入dos模式
 

三 express 项目名

如： express demo2

demo2
│  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中的设置加载并渲染该目录下的视图文件。

 

附：

安装这里后会有3个选项，先不管，看一下：

打开项目：cd demo2

安装:npm install

启动项目：npm start

目录结构：

bin: 用于应用启动，可在里面设置启动的端口号等。

/public: 静态资源目录

/routes：可以认为是controller（控制器）目录，路由。

/views: jade模板目录，可以认为是view(视图)目录

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服务，监听端口和错误。

2 安装依赖

npm install

3 启动项目

npm start

文件详解

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应用的一些设置，包括引入依赖包、引入路由文件、注册各类中间件的一些操作。

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;

view/**详解

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

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

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