02 为基于Express框架创建的Node后台配置路由

古城微笑少年丶 2023-02-28 05:41 8阅读 0赞

### 写在前面 ###

上一篇文章中我们初始化了一个基于Express框架的NodeJS后台，但是里面的代码全都在index.js文件中，所以这一篇文章就给大家介绍下如何去组织node后台的代码编写，也就是我们说的给它配置个路由。

### 环境要求 ###

*  安装了NodeJS环境(可以使用npm包管理工具)
 *  初始化了一个NodeJS后台项目demo

### 操作步骤 ###

1、在项目根目录下新建routers文件夹，然后在里面新建一个路由文件，并编写所要的后台接口代码，如下所示：

![2020072015595299.png][]

var express = require('express');
    var router = express.Router();
    
    router.get('/forward', function(req, res) {
        res.send('geocode forward');
    });
    
    module.exports = router;

以上代码是geocode.js文件中的代码，也就是我们新建的一个路由文件代码，然后我们在index.js文件中，引入这个路有文件，并编写一些配置代码，如下：

var express = require('express');
    var app = express();
    
    var geocode = require('./routers/geocode');  //引入新建的路由文件
    
    app.use('/geocode', geocode);   //配置该文件
    
    app.get('/', function(req, res) {
        res.send('hello world!');
    });
    
    app.listen(3001);

2、然后我们保存代码在浏览器中通过地址"localhost:3001/geocode/forward"来访问我们新建的路由文件中的接口，如下所示：

![20200720160042444.png][]

我们保存代码后并没有重启后台程序，代码也能生效，是因为我们用了上文介绍的supervisor这个插件，它会自动监听代码文件的变化并重启后台程序。

3、为了代码的整洁，我们将index.js中的关于主路由，即"localhost:3001/"的代码也单独存放在一个路由文件中。同样的，在routers文件夹中新建一个home.js文件，然后将index.js中的相关代码移动到home.js文件中，并在index.js中引入和配置home.js路由文件，最终两个文件中的代码如下：

home.js代码：

var express = require('express');
    var router = express.Router();
    
    router.get('/', function(req, res) {
        res.send('hello world!');
    });
    
    module.exports = router;

index.js代码：

var express = require('express');
    var app = express();
    
    var home = require('./routers/home');
    var geocode = require('./routers/geocode');
    
    app.use('/', home);
    app.use('/geocode', geocode);
    
    app.listen(3001);

4、然后保存代码浏览器访问主路由"localhost:3001"，也能得到和上文一样的结果，如下：

![20200720160127701.png][]

### 总结 ###

这篇文章介绍了如何为我们创建的node后台配置路由信息，通俗点说，就是为了更好地组织后台中的代码，我是这么理解的。

[2020072015595299.png]: /images/20230209/2c868cacc8b84134906466f1d3880fc2.png
[20200720160042444.png]: /images/20230209/0eb03a1a7e3c496bbd1f5f7cc6e40b19.png
[20200720160127701.png]: /images/20230209/96c73fc416374a1eb90f0e532645996b.png