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

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

相关推荐
roamingcode5 分钟前
我是如何 Vibe Coding,将 AI CLI 工具从 Node.js 迁移到 Rust 并成功发布的
人工智能·rust·node.js·github·claude·github copilot
黄筱筱筱筱筱筱筱6 分钟前
7.适合新手小白学习Python的异常处理(Exception)
java·前端·数据库·python
Yeats_Liao12 分钟前
微调决策树:何时使用Prompt Engineering,何时选择Fine-tuning?
前端·人工智能·深度学习·算法·决策树·机器学习·prompt
晚霞的不甘13 分钟前
Flutter for OpenHarmony 实现 iOS 风格科学计算器:从 UI 到表达式求值的完整解析
前端·flutter·ui·ios·前端框架·交互
陈希瑞16 分钟前
OpenClaw Chrome扩展使用教程 - 浏览器中继控制
前端·chrome
雨季66621 分钟前
Flutter 三端应用实战:OpenHarmony “呼吸灯”——在焦虑时代守护每一次呼吸的数字禅修
开发语言·前端·flutter·ui·交互
切糕师学AI22 分钟前
Vue 中如何修改地址栏参数并重新加载?
前端·javascript·vue.js
软弹22 分钟前
Vue3如何融合TS
前端·javascript·vue.js
0思必得08 小时前
[Web自动化] Selenium处理动态网页
前端·爬虫·python·selenium·自动化
东东5169 小时前
智能社区管理系统的设计与实现ssm+vue
前端·javascript·vue.js·毕业设计·毕设