Express新建工程以及新建路由规则、匹配路由规则、控制权转移

本是古典何须时尚 2023-10-05 12:02 63阅读 0赞

## 场景 ##

npm提供了大量的第三方模块，其中不乏许多Web框架，我们没有必要重复发明轮子，  
因而选择使用Express作为开发框架，因为它是目前最稳定、使用最广泛，而且Node.js官  
方推荐的唯一一个Web开发框架。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

### 安装Express ###

首先需要安装Express

npm install -g express

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

这里使用全局安装-g,然后还需要安装express-generator

npm install -g express-generator

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

然后可以通过

express --help

来查看相关帮助

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

### 新建Express工程 ###

express -t ejs microblog

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

Express在初始化一个项目的时候需要指定模板引擎，默认支持Jade和ejs，这里使用ejs，同时暂时不添加CSS引擎和会话支持。

后面microblog是项目名，此时会生成此目录以及目录下文件

并且会提示我们进入其中并执行npm install

cd microblog

npm install

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

安装依赖成功。

### 启动服务器 ###

打开项目下的app.js，发现并没有服务器的端口监听，加上如下代码

app.listen(3000,function () {
      console.log('服务端启动在3000端口')
    })

然后启动服务器

node app.js

打开浏览器访问localhost:3000

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5][]

### 新建路由规则 ###

新建成的工程是自带一个users示例路由

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 6][]

所以直接访问

[http://localhost:3000/users][http_localhost_3000_users]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 7][]

就能直接访问到routes下的users.js中的响应内容

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 8][]

仿照示例路由首先在app.js，添加路由匹配

app.use('/badao', badaoRouter);

badaoRouter在上面声明

var badaoRouter = require('./routes/badao');

然后在routes目录下新建badao.js

var express = require('express');
    var router = express.Router();
    
    /* GET users listing. */
    router.get('/', function(req, res, next) {
        res.send('这是来自badao--公众号:霸道的程序猿');
    });
    
    module.exports = router;

然后重启服务器，访问

[http://localhost:3000/badao][http_localhost_3000_badao]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 9][]

### 路由规则匹配 ###

有时需要根据传递的参数进行路由的匹配，比如传递名字，从而返回Hello+传递的名字参数。

在app.js中引入index根路由的方式是

app.use('/', indexRouter);

然后indexRouter是通过

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

在routes下index.js中

又新增了两个路由这样，就可以通过app.js的路由加上此index.js中的路由进行匹配。

比如这里的访问hello这个路由对应的方法

运行程序打开浏览器输入

[http://localhost:3000/hello][http_localhost_3000_hello]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 10][]

除此之外还可以获取路由传递的参数进行动态显示

router.get('/hello/:username',function (req,res) {
      res.send('Hello:'+req.params.username);
    });

使用:username来接受路由参数，进入响应Hello+参数。

启动程序，然后在浏览器中输入:

[http://localhost:3000/hello/][http_localhost_3000_hello 1]霸道的程序猿

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 11][]

### 控制权转移 ###

Express支持同一路径绑定多个路由响应函数。但是当你访问这两条同样的规则匹配到的路径时，会发现请求总是

被前一条路由规则捕获，后面的规则会被忽略。原因是Express在处理路由规则时，会优先匹配先定义的路由规则，

因此后面的规则被屏蔽。

Express提供了路由控制权转移的方法，即回调函数的第三个参数next，通过调用next()将路由控制权交给后面的规则。

这让我们可以实现中间件，而且还能提高代码的复用程度。

例如针对用户查询信息和修改信息的操作，其中一个步骤是检查用户名是否存在，因此可以通过next()方法实现。

继续使用上面的获取路由参数的方式，在上面新增的路由badao.js中声明一个对象和设置属性值

var users = {
        'badao':{
            name:'badao',
            blog:'https://blog.csdn.net/BADAO_LIUMANG_QIZHI'
        }
    }

然后新增两个同路径匹配的路由

router.all('/:username',function (req,res,next) {
        if(users[req.params.username])
        {
            next();
        }else
        {
            next(new Error(req.params.username+'不存在'))
        }
    });
    router.get('/:username',function (req,res) {
        res.send(JSON.stringify(users[req.params.username]));
    });

上面两个路由首先走第一个验证传递的username参数是否存在，不存在则返回错误，提示则调用next进而将对象信息返回。

badao.js完整代码

然后重新运行项目，打卡浏览器输入

[http://localhost:3000/badao/bada][http_localhost_3000_badao_bada]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 12][]

然后输入正确的名字参数

[http://localhost:3000/badao/badao][http_localhost_3000_badao_badao]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 13][]

### 示例代码下载 ###

[https://download.csdn.net/download/BADAO\_LIUMANG\_QIZHI/12969105][https_download.csdn.net_download_BADAO_LIUMANG_QIZHI_12969105]

[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201019170233440.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201019170428866.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201019170448992.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201019170457481.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020101917051392.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201019170528364.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201019170549554.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_localhost_3000_users]: http://localhost:3000/users
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201019170704659.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201019170632381.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_localhost_3000_badao]: http://localhost:3000/badao
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/2020101917081535.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_localhost_3000_hello]: http://localhost:3000/hello
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201019170856821.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_localhost_3000_hello 1]: http://localhost:3000/hello/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201019170917917.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_localhost_3000_badao_bada]: http://localhost:3000/badao/bada
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20201019170952909.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_localhost_3000_badao_badao]: http://localhost:3000/badao/badao
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20201019170959454.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_BADAO_LIUMANG_QIZHI_12969105]: https://download.csdn.net/download/BADAO_LIUMANG_QIZHI/12969105