当前位置：首页 > article >正文

WEB开发： Node.js路由之由浅入深- 即拿即用完整版

article 2024/12/21 16:53:41

前面我们一起学习了Node.js路由之由浅入深，基本了解并熟悉了Node.js的路由实现。

现在我们来一个综合完整版，让这个路由模块即拿即用，也就是下载运行就可用，并可以轻松地自行增加路由，无需去繁琐地修改路由配置，完全自动实现，重启webserver 就生效。

本项目启动后，可以通过 http://127.0.0.1:3000 访问到静态页面测试，同时也是api的根地址。

一、文件结构

我们先来看下这个项目的文件结构：

/controllers
    authController.js //路由控制器，负责执行数据处理并向前端返回数据
    ... //更多的路由控制器
/routes
    routesConfig.js // 路由配置文件，这个文件是自动生成的，根据/controllers 下的文件生成。

/static
    index.html 启动webserver后的静态网页文件，可以通过 http://127.0.0.1:3000 访问

/rcMake.js //自动化脚本，将controllers下的文件以及文件中的控制器方法，自动写入到路由配置文件中。

app.js // 主启动文件，端口是3000

这个结构很简单很清晰，没几个文件，后面你要自己加路由，直接加控制器即可。具体说明请看注释。

二、怎样写路由控制器

每个控制器对应一个路由，比如你需要这样一个路由 /member

就在/controllers 文件夹下增加一个文件 memberController.js(文件名可以自取)，内容如下：

// memberController.js
module.exports = {
    get: { 
        list: {
            path: '/member/list',
            fn: (req, res) => {
                res.send({ message: 'Login successful' });
            }
        },
    },
    post: {
        reg: {
            path: '/member/reg',
            fn: (req, res) => {
                res.send({ message: "test" });
            },
        }
    }
    // 更多方法...
};

说明：这里面只写了两个RESTful AP 方法，你也可以增肌 put 和 delete。

list 是控制器内对应get的处理方法，reg是对应post的处理方法名。
path 就是你设定的路由路径。比如 http://127.0.0.1:3000/member/list
fn是对应处理方法名的处理函数

三、生成路由表

根目录下的 rcMake.js 是一个自动化脚本，它会的作用是自动找到/controllers 目录下的各个控制器文件，并将这些文件的文件名、路由路径、RESTful AP 方法、统一写入到路由配置文件routesConfig.js中，以供app在启动的时候实现自动路由。

rcMake.js 在app.js中调用，也就是每次启动app.js 都会生成这个文件，实现自动化配置路由。routesConfig.js的格式如下（实际是根据你的控制器定义）

// routes.js
module.exports = [
  {
    "method": "get",
    "path": "/auth/login",
    "controller": "authController",
    "action": "login"
  },
  {
    "method": "post",
    "path": "/auth/login",
    "controller": "authController",
    "action": "login"
  },
  {
    "method": "get",
    "path": "/member/list",
    "controller": "memberController",
    "action": "list"
  },
  {
    "method": "post",
    "path": "/member/reg",
    "controller": "memberController",
    "action": "reg"
  },
  {
    "method": "get",
    "path": "/product",
    "controller": "productController",
    "action": "createProduct"
  },
  {
    "method": "post",
    "path": "/product",
    "controller": "productController",
    "action": "createProduct"
  },
  {
    "method": "get",
    "path": "/user/:id",
    "controller": "userController",
    "action": "getUserById"
  },
  {
    "method": "post",
    "path": "/user/",
    "controller": "userController",
    "action": "regUser"
  }
];

四、启动路由

在根目录下执行 node app.js 即可启动路由， app.js 结构如下：

const express = require('express');
const app = express();
app.use(express.json());  // 用于解析 JSON 格式的请求体

const rcMake = require('./rcMake.js')
rcMake() // 自动生成路由配置文件
const routesConfig = require('./routers/routesConfig');  // 导入路由配置文件
app.use(express.static(__dirname + '/static')) //静态资源 如 html 存放目录

// 动态加载路由
routesConfig.forEach(route => {
    const controller = require(`./controllers/${route.controller}`);  // 动态加载控制器
    app[route.method](route.path, controller[route.method][route.action].fn);  // 将路由与控制器方法绑定

    console.log('for review route:', route.method, route.path, controller[route.method][route.action].fn)

});

// 启动服务
const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

说明：这里面主要实现了路由配置的自动写入、路自动控制的启动、服务器的启动。

五、测试

get测试:

http://127.0.0.1:3000/user/minstbe

结果：

对应的路由和控制器代码：

    get: {
        getUserById: {
            path: '/user/:id',
            fn: (req, res) => {
                const userId = req.params.id;
                res.send(`User ID: ${userId}`);
            },
        }
    },

post测试：

http://127.0.0.1:3000/

以上相当于http://127.0.0.1:3000/index.html

因为我们在app.js 中设置了静态资源目录：

app.use(express.static(__dirname + '/static'))

所有放置在/static 下的静态资源如 html css js 图片等都可以通过http://127.0.0.1:3000/的方式访问。

结果：

这里我在index.html中写了一个表单，这个表单会被post到指定的api地址也就是/product，并在控制器中将这个内容返回到前端，由前端进行回显。

对应的路由和控制器代码：

    post: {
        createProduct: {
            path: '/product',
            fn: (req, res) => {
                console.log('req', req.body.pd, typeof (req.body))

                const product = req.body
                res.send({ message: product.pd });
            },
        }
    }