express入门教程

2019-11-28 11:49 by 超人联盟 922 0

YPE >

Express 简介

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站，它有一套健壮的特性，可用于开发单页、多页和混合Web应用。

此文介绍如何使用Express搭建多人博客。

作者：  nswbmw  项目地址： N-blog

学习环境

Node.js： 0.10.32

Express： 4.10.2

MongoDB： 2.6.1

快速开始

安装 Express

express 是 Node.js 上最流行的 Web 开发框架，正如他的名字一样，使用它我们可以快速的开发一个 Web 应用。我们用 express 来搭建我们的博客，打开命令行，输入：

$ npm install -g express-generator

安装 express 命令行工具，使用它我们可以初始化一个 express 项目。

新建一个工程

在命令行中输入：

$ express -e blog
$ cd blog && npm install

初始化一个 express 项目并安装所需模块，如下图所示：

然后运行：

$ DEBUG=blog node ./bin/www(windows 下：DEBUG=blog:* npm start )

（上面的代码报错的话，可以这样运行启动项目：npm start） 启动项目，此时命令行中会显示 blog Express server listening on port 3000 +0ms ，在浏览器里访问  localhost:3000 ，如下图所示：

至此，我们用 express 初始化了一个工程项目，并指定使用 ejs 模板引擎，下一节我们讲解工程的内部结构。

工程结构

我们回头看看生成的工程目录里面都有什么，打开我们的 blog 文件夹，里面如图所示：

app.js：启动文件，或者说入口文件

package.json：存储着工程的信息及模块依赖，当在 dependencies 中添加依赖的模块时，运行npm install ，npm 会检查当前目录下的 package.json，并自动安装所有指定的模块

node_modules：存放 package.json 中安装的模块，当你在 package.json 添加依赖的模块并安装后，存放在这个文件夹下

public：存放 image、css、js 等文件

routes：存放路由文件

views：存放视图文件或者说模版文件

bin：存放可执行文件

打开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 setupapp.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 handlerapp.use(function(req, res, next) {    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});// error handlers// development error handler// will print stacktraceif (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 userapp.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 nodevar 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 文件：

nbsp;html>
  
    
    
  
  
    

    
Welcome to 

  

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

在这一小节我们学习了如何创建一个工程并启动它，了解了工程的大体结构和运作流程，下一小节我们将学习 express 的基本使用及路由控制。

路由控制

工作原理

routes/index.js 中有以下代码：

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

这段代码的意思是当访问主页时，调用 ejs 模板引擎，来渲染 index.ejs 模版文件（即将 title 变量全部替换为字符串 Express），生成静态页面并显示在浏览器中。

我们来作一些修改，以上代码实现了路由的功能，我们当然可以不要 routes/index.js 文件，把实现路由功能的代码都放在 app.js 里，但随着时间的推移 app.js 会变得臃肿难以维护，这也违背了代码模块化的思想，所以我们把实现路由功能的代码都放在 routes/index.js 里。官方给出的写法是在 app.js 中实现了简单的路由分配，然后再去 index.js 中找到对应的路由函数，最终实现路由功能。我们不妨把路由控制器和实现路由功能的函数都放到 index.js 里，app.js 中只有一个总的路由接口。

最终将 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 app = express();

app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');//app.use(favicon(__dirname + '/public/favicon.ico'));app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

routes(app);

app.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

修改 index.js 如下：

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

现在，再运行你的 app，你会发现主页毫无二致。这里我们在 routes/index.js 中通过 module.exports 导出了一个函数接口，在 app.js 中通过  require 加载了 index.js 然后通过 routes(app) 调用了 index.js 导出的函数。

路由规则

express 封装了多种 http 请求方式，我们主要只使用 get 和  post 两种，即  app.get() 和 app.post() 。

app.get() 和  app.post() 的第一个参数都为请求的路径，第二个参数为处理请求的回调函数，回调函数有两个参数分别是 req 和 res，代表请求信息和响应信息 。路径请求及对应的获取路径有以下几种形式：

req.query

// GET /search?q=tobi+ferret  
req.query.q  
// => "tobi ferret"  // GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse  
req.query.order  
// => "desc"  req.query.shoe.color  
// => "blue"  req.query.shoe.type  
// => "converse"

req.body

// POST user[name]=tobi&user[email]=tobi@learnboost.com  
req.body.user.name  
// => "tobi"  req.body.user.email  
// => "tobi@learnboost.com"  // POST { "name": "tobi" }  
req.body.name  
// => "tobi"

req.params

// GET /user/tj  req.params.name  
// => "tj"  // GET /file/javascripts/jquery.js  req.params[0]  
// => "javascripts/jquery.js"

req.param(name)

// ?name=tobi  
req.param('name')  
// => "tobi"  // POST name=tobi  
req.param('name')  
// => "tobi"  // /user/tobi for /user/:name   
req.param('name')  
// => "tobi"

不难看出：

  • req.query ： 处理 get 请求，获取 get 请求参数

  • req.params ： 处理 /:xxx 形式的 get 或 post 请求，获取请求参数

  • req.body ： 处理 post 请求，获取 post 请求体

  • req.param() ： 处理 get 和 post 请求，但查找优先级由高到低为 req.params→req.body→req.query

路径规则还支持正则表达式，更多请查阅 Express 官方文档 。

添加路由规则

当我们访问 localhost:3000 时，会显示：

当我们访问 localhost:3000/nswbmw 这种不存在的页面时就会显示：

这是因为不存在 /nswbmw 的路由规则，而且它也不是一个 public 目录下的文件，所以 express 返回了 404 Not Found 的错误。下面我们来添加这条路由规则，使得当访问 localhost:3000/nswbmw 时，页面显示 hello,world!

注意：以下修改仅用于测试，看到效果后再把代码还原回来。

修改 index.js，在 app.get('/') 函数后添加一条路由规则：

app.get('/nswbmw', function (req, res) {
  res.send('hello,world!');
});

重启之后，访问 localhost:3000/nswbmw 页面显示如下：

很简单吧？这一节我们学习了基本的路由规则及如何添加一条路由规则，下一节我们将学习模板引擎的知识。

模版引擎

什么是模板引擎

模板引擎（Template Engine）是一个将页面模板和要显示的数据结合起来生成 HTML 页面的工具。如果说上面讲到的 express 中的路由控制方法相当于 MVC 中的控制器的话，那模板引擎就相当于 MVC 中的视图。

模板引擎的功能是将页面模板和要显示的数据结合起来生成 HTML 页面。它既可以运 行在服务器端又可以运行在客户端，大多数时候它都在服务器端直接被解析为 HTML，解析完成后再传输给客户端，因此客户端甚至无法判断页面是否是模板引擎生成的。有时候模板引擎也可以运行在客户端，即浏览器中，典型的代表就是 XSLT，它以 XML 为输入，在客户端生成 HTML 页面。但是由于浏览器兼容性问题，XSLT 并不是很流行。目前的主流还是由服务器运行模板引擎。

在 MVC 架构中，模板引擎包含在服务器端。控制器得到用户请求后，从模型获取数据，调用模板引擎。模板引擎以数据和页面模板为输入，生成 HTML 页面，然后返回给控制器，由控制器交回客户端。

——《Node.js开发指南》

什么是 ejs ?

ejs 是模板引擎的一种，也是我们这个教程中使用的模板引擎，因为它使用起来十分简单，而且与 express 集成良好。

使用模板引擎

前面我们通过以下两行代码设置了模板文件的存储位置和使用的模板引擎：

app.set('views', __dirname + '/views');app.set('view engine', 'ejs');

注：本文转载自博客园青靖，https://www.cnblogs.com/qingjing/p/6563894.html，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除。

评论0

    热门文章


    0.325991s