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

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

相关推荐
ling0814081416 分钟前
Vue3全局挂载Dialog组件
前端·javascript·vue
Catherinemin17 分钟前
CSS|12 display属性
前端·css
Amo 672918 分钟前
css filter: drop-shadow() 高级阴影效果
前端·css
天天进步201521 分钟前
CSS中的深度选择器 deep 详解
前端·css
95岁IT民工23 分钟前
大屏项目使用css混合实现光源扫描高亮效果
前端·css·vue.js
匹马夕阳1 小时前
一篇梳理清楚JavaScript ES6中的Promise
前端·javascript·es6
2401_857026231 小时前
SSM 框架结合 Vue 实现电脑测评系统:助力用户明智选择
前端·javascript·vue.js
连胜优佳1 小时前
1.zabbix概述
前端·zabbix
夜雨翦春韭2 小时前
Firefox 基本设置备忘
前端·firefox
m0_748233882 小时前
【Java Web】Axios实现前后端数据异步交互
java·开发语言·前端