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

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

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

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

一、文件结构

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

bash 复制代码
/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(文件名可以自取),内容如下:

javascript 复制代码
// 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。

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

三、生成路由表

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

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

javascript 复制代码
// 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 结构如下:

javascript 复制代码
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

结果:

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

javascript 复制代码
    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 中设置了静态资源目录:

javascript 复制代码
app.use(express.static(__dirname + '/static'))

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

结果:

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

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

javascript 复制代码
    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 });
            },
        }
    }

六、如何获取本项目

本项目已经发布到github :

GitHub - guangboshushu/node_route: node_route

直接拉取到本地即可测试,稍加修改即可作为实际应用。

相关推荐
崔庆才丨静觅2 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60613 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了3 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅3 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅3 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅4 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment4 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅4 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊4 小时前
jwt介绍
前端
爱敲代码的小鱼4 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax